Can sign out

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,30 +1,42 @@
-import AccountCircle from "@mui/icons-material/AccountCircle";
-import { Alert, Button, CircularProgress, Grid } from "@mui/material";
+import { mdiFamilyTree } from "@mdi/js";
+import Icon from "@mdi/react";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { Alert, Button, CircularProgress } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
-import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
+import { useSetAtom } from "jotai";
 import * as React from "react";
+import { Outlet, useNavigate } from "react-router-dom";
+import { AuthApi } from "../api/AuthApi";
 import { User, UserApi } from "../api/UserApi";
-import { Outlet } from "react-router-dom";
-import SettingsIcon from "@mui/icons-material/Settings";
 
 export function BaseAuthenticatedPage(): React.ReactElement {
   const [user, setUser] = React.useState<null | User>(null);
   const [error, setError] = React.useState(false);
 
+  const setSignedIn = useSetAtom(AuthApi.authStatus);
+  const navigate = useNavigate();
+
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const handleCloseMenu = () => {
     setAnchorEl(null);
   };
 
+  const signOut = () => {
+    handleCloseMenu();
+    AuthApi.SignOut();
+    navigate("/");
+    setSignedIn(false);
+  };
+
   React.useEffect(() => {
     const load = async () => {
       if (error || user != null) return;
@@ -80,10 +92,10 @@ export function BaseAuthenticatedPage(): React.ReactElement {
     <>
       <AppBar position="fixed">
         <Toolbar>
+          <Icon path={mdiFamilyTree} size={1} style={{ marginRight: "1rem" }} />
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             GeneIT
           </Typography>
-
           <div>
             <Button size="large" color="inherit">
               {user.name}
@@ -112,10 +124,10 @@ export function BaseAuthenticatedPage(): React.ReactElement {
                 horizontal: "right",
               }}
               open={Boolean(anchorEl)}
-              onClose={handleClose}
+              onClose={handleCloseMenu}
             >
-              <MenuItem onClick={handleClose}>Profil</MenuItem>
-              <MenuItem onClick={handleClose}>Déconnexion</MenuItem>
+              <MenuItem onClick={handleCloseMenu}>Profil</MenuItem>
+              <MenuItem onClick={signOut}>Déconnexion</MenuItem>
             </Menu>
           </div>
         </Toolbar>