Add authentification

frontend/src/components/Navbar/index.tsx

@@ -1,31 +1,52 @@
 import { NavLink } from "react-router";
 import { t } from "@/config/i18n";
 import "./index.css";
-import { Group } from "@mantine/core";
+import { Button, Group, Loader } from "@mantine/core";
 import { Config } from "@/config/config";
+import { useCurrentUser, useLogoutUser } from "@/services/api";
 
 export function Navbar() {
+    const { data: user, isLoading } = useCurrentUser();
+    const logout = useLogoutUser();
+    if (!user && isLoading) {
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+    }
+
     return (
         <nav>
             <Group>
                 <NavLink className={"navLink"} aria-label={t("home")} to="/">
                     {t("home", { capfirst: true })}
                 </NavLink>
+                {user?.logged ? (
+                    <NavLink className={"navLink"} aria-label={t("dashboard")} to="/dashboard/help">
+                        {t("dashboard", { capfirst: true })}
+                    </NavLink>
+                ) : null}
+            </Group>
+            {!user?.logged ? (
                 <NavLink
                     className={"navLink"}
-                    aria-label={t("dashboard")}
-                    to="/dashboard/help"
+                    aria-label={t("login with keycloak", { capfirst: true })}
+                    to={`${Config.backend_uri}/auth/login`}
                 >
-                    {t("dashboard", { capfirst: true })}
+                    {t("login with keycloak", { capfirst: true })}
                 </NavLink>
-            </Group>
-            <NavLink
-                className={"navLink"}
-                aria-label={t("login with keycloak", { capfirst: true })}
-                to={`${Config.backend_uri}/auth/login`}
-            >
-                {t("login with keycloak", { capfirst: true })}
-            </NavLink>
+            ) : (
+                <Button
+                    className={"navLink"}
+                    aria-label={t("logout", { capfirst: true })}
+                    onClick={() => {
+                        logout.mutate();
+                    }}
+                >
+                    {t("logout", { capfirst: true })}
+                </Button>
+            )}
         </nav>
     );
 }