refactor: add new logout function with better info box in the login card

frontend/src/components/LoginCard.tsx

@@ -3,7 +3,7 @@ import { Button, Input } from "@mui/joy";
 import { useMutation } from "@tanstack/react-query";
 import { signInUser } from "../utils/api/auth";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "@tanstack/react-router";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import type { AlertInterface } from "../misc/interfaces";
 import { MyAlert } from "./MyAlert.tsx";
@@ -11,6 +11,7 @@ import { MyAlert } from "./MyAlert.tsx";
 export const LoginCard = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const search: { loggedOut?: boolean } = useSearch({ from: "/login" });
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
     type: "neutral",
@@ -19,12 +20,16 @@ export const LoginCard = () => {
   });
 
   useEffect(() => {
-    setAlert({
+    console.log(search);
-      isAlert: true,
+    if (search.loggedOut) {
-      type: "primary",
+      setAlert({
-      header: t("success"),
+        isAlert: true,
-      text: t("logout-success-text"),
+        type: "primary",
-    });
+        header: t("success"),
+        text: t("logout-success-text"),
+      });
+    }
+    void navigate({ to: "/login" });
   }, []);
 
   const form = useForm({
@@ -53,7 +58,7 @@ export const LoginCard = () => {
           header: "",
           text: "",
         });
-        navigate({ to: "/app/inventory" });
+        void navigate({ to: "/app/inventory" });
       }
     },
     onError: (error: unknown) => {

frontend/src/components/Sidebar.tsx

@@ -14,10 +14,12 @@ import { useMatchRoute, useNavigate } from "@tanstack/react-router";
 import Cookies from "js-cookie";
 import { changeTranslation } from "../utils/uxFncs";
 import { useColorScheme } from "@mui/joy/styles";
+import { useLogout } from "../hooks/useLogout.ts";
 
 export const Sidebar = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { logout } = useLogout();
   const matchRoute = useMatchRoute();
   const { mode, setMode } = useColorScheme();
   const [isOpen, setIsOpen] = useState(false);
@@ -29,7 +31,7 @@ export const Sidebar = () => {
     !!matchRoute({ to, fuzzy: false }) ? "soft" : "plain";
 
   const handleNavigate = (to: string) => {
-    navigate({ to });
+    void navigate({ to });
     setIsOpen(false);
   };
 
@@ -154,10 +156,7 @@ export const Sidebar = () => {
             {t("settings")}
           </Button>
           <Button
-            onClick={() => {
+            onClick={logout}
-              Cookies.remove("token");
-              handleNavigate("/login?logout=true");
-            }}
             color="danger"
             startDecorator={<ExitToAppIcon />}
             className={btnClass}

frontend/src/hooks/useLogout.ts

@@ -0,0 +1,14 @@
+import Cookies from "js-cookie";
+import { useNavigate } from "@tanstack/react-router";
+
+export const useLogout = () => {
+  const navigate = useNavigate();
+
+  const logout = () => {
+    console.log("LOGOUT");
+    Cookies.remove("token");
+    void navigate({ to: "/login", search: { loggedOut: true } });
+  };
+
+  return { logout };
+};

frontend/src/routes/app/_hiddenLayout/add-product.tsx

@@ -1,14 +1,10 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
+import { verifyLogin } from "../../../utils/api/auth";
 import { AddProduct } from "../../../pages/AddProduct";
 
 export const Route = createFileRoute("/app/_hiddenLayout/add-product")({
   beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
+    await verifyLogin();
-      throw redirect({
-        to: "/login",
-      });
-    }
   },
   component: RouteComponent,
 });

frontend/src/routes/app/_hiddenLayout/app-settings.tsx

@@ -1,14 +1,10 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
+import { verifyLogin } from "../../../utils/api/auth";
 import { Settings } from "../../../pages/Settings";
 
 export const Route = createFileRoute("/app/_hiddenLayout/app-settings")({
   beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
+    await verifyLogin();
-      throw redirect({
-        to: "/login",
-      });
-    }
   },
   component: RouteComponent,
 });

frontend/src/routes/app/_hiddenLayout/inventory.tsx

@@ -1,14 +1,10 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
+import { verifyLogin } from "../../../utils/api/auth";
 import { InventoryPage } from "../../../pages/Inventory";
 
 export const Route = createFileRoute("/app/_hiddenLayout/inventory")({
   beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
+    await verifyLogin();
-      throw redirect({
-        to: "/login",
-      });
-    }
   },
   component: RouteComponent,
 });

frontend/src/routes/app/_hiddenLayout/storages.tsx

@@ -1,14 +1,10 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
-import { isAuthenticated } from "../../../utils/api/auth";
+import { verifyLogin } from "../../../utils/api/auth";
 import { Storages } from "../../../pages/Storages";
 
 export const Route = createFileRoute("/app/_hiddenLayout/storages")({
   beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
+    await verifyLogin();
-      throw redirect({
-        to: "/login",
-      });
-    }
   },
   component: RouteComponent,
 });

frontend/src/routes/app/_hiddenLayout/view-product.tsx

@@ -1,15 +1,11 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
-import { isAuthenticated } from "../../../utils/api/auth";
+import { verifyLogin } from "../../../utils/api/auth";
 import { ViewProduct } from "../../../pages/ViewProduct";
 
 export const Route = createFileRoute("/app/_hiddenLayout/view-product")({
   beforeLoad: async () => {
-    if (!(await isAuthenticated())) {
+    await verifyLogin();
-      throw redirect({
-        to: "/login",
-      });
-    }
   },
   validateSearch: z.object({
     product: z.string(),

frontend/src/routes/index.tsx

@@ -6,6 +6,7 @@ export const Route = createFileRoute("/")({
     if (!(await isAuthenticated())) {
       throw redirect({
         to: "/login",
+        search: { loggedOut: true },
       });
     } else {
       throw redirect({

frontend/src/routes/login.tsx

@@ -1,7 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { LoginCard } from "../components/LoginCard";
+import { checkLogin } from "../utils/api/auth.ts";
 
 export const Route = createFileRoute("/login")({
+  beforeLoad: async () => {
+    await checkLogin();
+  },
   component: RouteComponent,
 });
 

frontend/src/utils/api/auth.ts

@@ -1,85 +1,98 @@
-import {API_BASE} from "../../config/api.config";
+import { API_BASE } from "../../config/api.config";
 import Cookies from "js-cookie";
-import type {TFunction} from "i18next";
+import type { TFunction } from "i18next";
-import {fetchSettings} from "./settings";
+import { fetchSettings } from "./settings";
-import type {ChangePasswordIntf} from "../../misc/interfaces";
+import type { ChangePasswordIntf } from "../../misc/interfaces";
-import {createApiError} from "./apiError";
+import { createApiError } from "./apiError";
+import { redirect } from "@tanstack/react-router";
 
-export async function isAuthenticated() {
+export const isAuthenticated = async () => {
-    if (Cookies.get("token")) {
+  if (Cookies.get("token")) {
-        const result = await fetch(`${API_BASE}/users/verify-token`, {
+    const result = await fetch(`${API_BASE}/users/verify-token`, {
-            method: "POST",
+      method: "POST",
-            headers: {
+      headers: {
-                Authorization: `Bearer ${Cookies.get("token") || ""}`,
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-                "Content-Type": "application/json",
+        "Content-Type": "application/json",
-                Accept: "application/json",
+        Accept: "application/json",
-            },
+      },
-        });
-
-        if (result.status === 200) {
-            return true;
-        }
-    }
-
-    Cookies.remove("token");
-    return false;
-}
-
-export async function signInUser(
-    username: string,
-    password: string,
-    t: TFunction,
-) {
-    const result = await fetch(`${API_BASE}/users/login`, {
-        method: "POST",
-        headers: {
-            Authorization: `Bearer ${Cookies.get("token") || ""}`,
-            "Content-Type": "application/json",
-            Accept: "application/json",
-        },
-        body: JSON.stringify({username, password}),
     });
 
-    const response = await result.json();
+    if (result.status === 200) {
-
+      return true;
-    if (result.status === 202) {
-        Cookies.set("token", response.data.token);
-
-        const settings = await fetchSettings();
-        Cookies.set("app-name", settings?.data[0].value);
-        Cookies.set("currency", settings?.data[1].value);
-
-        return {ok: true as const};
     }
+  }
 
-    Cookies.remove("token");
+  Cookies.remove("token");
-    throw createApiError(response.code, t(response.code || "unknown-error"));
+  return false;
-}
+};
 
-export function signOutUser() {
+export const signInUser = async (
-    Cookies.remove("token");
+  username: string,
-    return {ok: true as const};
+  password: string,
-}
+  t: TFunction,
+) => {
+  const result = await fetch(`${API_BASE}/users/login`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({ username, password }),
+  });
+
+  const response = await result.json();
+
+  if (result.status === 202) {
+    Cookies.set("token", response.data.token);
+
+    const settings = await fetchSettings();
+    Cookies.set("app-name", settings?.data[0].value);
+    Cookies.set("currency", settings?.data[1].value);
+
+    return { ok: true as const };
+  }
+
+  Cookies.remove("token");
+  throw createApiError(response.code, t(response.code || "unknown-error"));
+};
 
 export const mutatePassword = async (payload: ChangePasswordIntf) => {
-    const result = await fetch(`${API_BASE}/users/change-password`, {
+  const result = await fetch(`${API_BASE}/users/change-password`, {
-        method: "POST",
+    method: "POST",
-        headers: {
+    headers: {
-            Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-            "Content-Type": "application/json",
+      "Content-Type": "application/json",
-            Accept: "application/json",
+      Accept: "application/json",
-        },
+    },
-        body: JSON.stringify({
+    body: JSON.stringify({
-            currentPassword: payload.currentPassword,
+      currentPassword: payload.currentPassword,
-            newPassword: payload.newPassword,
+      newPassword: payload.newPassword,
-        }),
+    }),
-    });
+  });
 
-    const response = await result.json();
+  const response = await result.json();
 
-    if (response.code === "SU005") {
+  if (response.code === "SU005") {
-        return {code: response.code};
+    return { code: response.code };
-    }
+  }
 
-    throw createApiError(response.code, "Change password failed");
+  throw createApiError(response.code, "Change password failed");
+};
+
+export const verifyLogin = async () => {
+  if (!(await isAuthenticated())) {
+    throw redirect({
+      to: "/login",
+      search: { loggedOut: true },
+    });
+  }
+};
+
+export const checkLogin = async () => {
+  if (await isAuthenticated()) {
+    throw redirect({
+      to: "/app/inventory",
+    });
+  }
 };