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(() => {
+    console.log(search);
+    if (search.loggedOut) {
       setAlert({
         isAlert: true,
         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,11 +1,12 @@
-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")) {
     const result = await fetch(`${API_BASE}/users/verify-token`, {
       method: "POST",
@@ -23,13 +24,13 @@ export async function isAuthenticated() {
 
   Cookies.remove("token");
   return false;
-}
+};
 
-export async function signInUser(
+export const signInUser = async (
   username: string,
   password: string,
   t: TFunction,
-) {
+) => {
   const result = await fetch(`${API_BASE}/users/login`, {
     method: "POST",
     headers: {
@@ -37,7 +38,7 @@ export async function signInUser(
       "Content-Type": "application/json",
       Accept: "application/json",
     },
-        body: JSON.stringify({username, password}),
+    body: JSON.stringify({ username, password }),
   });
 
   const response = await result.json();
@@ -49,17 +50,12 @@ export async function signInUser(
     Cookies.set("app-name", settings?.data[0].value);
     Cookies.set("currency", settings?.data[1].value);
 
-        return {ok: true as const};
+    return { ok: true as const };
   }
 
   Cookies.remove("token");
   throw createApiError(response.code, t(response.code || "unknown-error"));
-}
+};
-
-export function signOutUser() {
-    Cookies.remove("token");
-    return {ok: true as const};
-}
 
 export const mutatePassword = async (payload: ChangePasswordIntf) => {
   const result = await fetch(`${API_BASE}/users/change-password`, {
@@ -78,8 +74,25 @@ export const mutatePassword = async (payload: ChangePasswordIntf) => {
   const response = await result.json();
 
   if (response.code === "SU005") {
-        return {code: response.code};
+    return { code: response.code };
   }
 
   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",
+    });
+  }
+};