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 };
+};