mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
fix(web): reset global state after logout (#842)
* fix: global state bug fix. * refactor: fix text being center. * adapt mobile logout button for new logout function --------- Co-authored-by: KaiserBh <kaiserbh@proton.me> Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
parent
f3cfeed8cd
commit
fe71dfc3af
3 changed files with 21 additions and 44 deletions
|
@ -1,7 +1,6 @@
|
|||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
|
||||
import { Login } from "../screens/auth/login";
|
||||
import { Logout } from "../screens/auth/logout";
|
||||
import { Onboarding } from "../screens/auth/onboarding";
|
||||
import Base from "../screens/Base";
|
||||
import { Dashboard } from "../screens/dashboard";
|
||||
|
@ -28,7 +27,6 @@ export const LocalRouter = ({ isLoggedIn }: { isLoggedIn: boolean }) => (
|
|||
<BrowserRouter basename={baseUrl()}>
|
||||
{isLoggedIn ? (
|
||||
<Routes>
|
||||
<Route path="/logout" element={<Logout />} />
|
||||
<Route element={<Base />}>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="logs" element={<Logs />} />
|
||||
|
|
|
@ -9,6 +9,8 @@ import { AuthContext } from "../utils/Context";
|
|||
import logo from "../logo.png";
|
||||
import { useQuery } from "react-query";
|
||||
import { APIClient } from "../api/APIClient";
|
||||
import toast from "react-hot-toast";
|
||||
import Toast from "@/components/notifications/Toast";
|
||||
|
||||
interface NavItem {
|
||||
name: string;
|
||||
|
@ -40,6 +42,16 @@ export default function Base() {
|
|||
}
|
||||
);
|
||||
|
||||
const LogOutUser = () => {
|
||||
APIClient.auth.logout()
|
||||
.then(() => {
|
||||
AuthContext.reset();
|
||||
toast.custom((t) => (
|
||||
<Toast type="success" body="You have been logged out. Goodbye!" t={t} />
|
||||
));
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Disclosure
|
||||
|
@ -159,17 +171,17 @@ export default function Base() {
|
|||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
to="/logout"
|
||||
<button
|
||||
onClick={LogOutUser}
|
||||
className={classNames(
|
||||
active
|
||||
? "bg-gray-100 dark:bg-gray-600"
|
||||
: "",
|
||||
"block px-4 py-2 text-sm text-gray-900 dark:text-gray-200"
|
||||
"block w-full px-4 py-2 text-sm text-gray-900 dark:text-gray-200 text-left"
|
||||
)}
|
||||
>
|
||||
Log out
|
||||
</Link>
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
|
@ -229,12 +241,12 @@ export default function Base() {
|
|||
{item.name}
|
||||
</NavLink>
|
||||
))}
|
||||
<Link
|
||||
to="/logout"
|
||||
className="shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
<button
|
||||
onClick={LogOutUser}
|
||||
className="w-full shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
|
|
|
@ -1,33 +0,0 @@
|
|||
import { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { AuthContext } from "../../utils/Context";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
|
||||
export const Logout = () => {
|
||||
const navigate = useNavigate();
|
||||
useEffect(
|
||||
() => {
|
||||
APIClient.auth.logout()
|
||||
.then(() => {
|
||||
AuthContext.reset();
|
||||
toast.custom((t) => (
|
||||
<Toast type="success" body="You have been logged out. Goodbye!" t={t} />
|
||||
));
|
||||
|
||||
// Dirty way to fix URL without triggering a re-render.
|
||||
// Ideally, we'd move the logout component to a function.
|
||||
setInterval(() => navigate("/", { replace: true }), 250);
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex justify-center items-center">
|
||||
{/*<h1 className="font-bold text-7xl">Goodbye!</h1>*/}
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue