feat(web): improve UX error interaction and update dependencies (#313)

* fix: remove react-cookie since we can't delete the user_session cookie using JS (due to httponly being set)

* chore: update dependencies and set a global react dependency override (react-ridge-state creates a problem, this fixes it)

* chore: tidy up APIClient, login and logout pages

* fix: catch canOnboard() error in login.tsx
enhancement: add toast notify on intentional logout and nicely reset the context state; make sure screen-blinking is down to a minimum by having min-h-screen present.

* fix: let onboarding redirect to / instead of /login (/login isn't used anymore)

* fix: use normal <input /> caret cursor for SearchColumnFilter, instead of pointer

* chore(web): remove react-cookie package
This commit is contained in:
stacksmash76 2022-06-16 17:32:07 +02:00 committed by GitHub
parent 0256ea52fd
commit a84a7364e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 220 additions and 144 deletions

View file

@ -1,32 +1,27 @@
import { useEffect } from "react";
import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import { APIClient } from "../../api/APIClient";
import Toast from "../../components/notifications/Toast";
import { AuthContext } from "../../utils/Context";
export const Logout = () => {
const navigate = useNavigate();
const [, setAuthContext] = AuthContext.use();
const [,, removeCookie] = useCookies(["user_session"]);
useEffect(
() => {
APIClient.auth.logout()
.then(() => {
removeCookie("user_session");
setAuthContext({ username: "", isLoggedIn: false });
navigate("/login");
toast.custom((t) => (
<Toast type="success" body="You have been logged out. Goodbye!" t={t} />
));
AuthContext.reset();
});
},
[history, removeCookie, setAuthContext]
[]
);
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-800 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<p>Logged out</p>
<div className="min-h-screen flex justify-center items-center">
{/*<h1 className="font-bold text-7xl">Goodbye!</h1>*/}
</div>
);
};