Create base main page

geneit_app/src/App.tsx

@@ -6,6 +6,7 @@ import { BaseLoginPage } from "./widgets/BaseLoginpage";
 import { LoginRoute } from "./routes/auth/LoginRoute";
 import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
 import { useAtom } from "jotai";
+import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 
 function App() {
   const [signedIn] = useAtom(AuthApi.authStatus);
@@ -13,7 +14,7 @@ function App() {
   return (
     <Routes>
       {signedIn ? (
-        <Route path="*" element={<p>signed in</p>} />
+        <Route path="*" element={<BaseAuthenticatedPage />} />
       ) : (
         <Route path="*" element={<BaseLoginPage />}>
           <Route path="" element={<LoginRoute />} />

geneit_app/src/api/ApiClient.ts

@@ -1,3 +1,5 @@
+import { AuthApi } from "./AuthApi";
+
 interface APIResponse {
   data: any;
   status: number;
@@ -32,6 +34,7 @@ export class APIClient {
       method: args.method,
       body: args.jsonData ? JSON.stringify(args.jsonData) : undefined,
       headers: {
+        "X-auth-token": AuthApi.SignedIn ? AuthApi.AuthToken : "none",
         "Content-Type": args.jsonData ? "application/json" : "text/plain",
       },
     });

geneit_app/src/api/AuthApi.ts

@@ -13,6 +13,14 @@ export class AuthApi {
 
   static authStatus = atom(this.SignedIn);
 
+  /**
+   * Get user auth token
+   */
+  static get AuthToken(): string {
+    if (!this.SignedIn) throw new Error("User is not authenticated!");
+    return sessionStorage.getItem(TokenStateKey)!;
+  }
+
   /**
    * Start OpenID login
    *

geneit_app/src/api/UserApi.ts

@@ -0,0 +1,26 @@
+import { APIClient } from "./ApiClient";
+
+export interface User {
+  id: number;
+  name: string;
+  email: string;
+  time_create: number;
+  time_activate: number;
+  active: boolean;
+  admin: boolean;
+  has_password: boolean;
+}
+
+export class UserApi {
+  /**
+   * Get current user information
+   */
+  static async GetUserInfo(): Promise<User> {
+    return (
+      await APIClient.exec({
+        uri: "/user/info",
+        method: "GET",
+      })
+    ).data;
+  }
+}

geneit_app/src/routes/auth/LoginRoute.tsx

@@ -103,6 +103,7 @@ export function LoginRoute(): React.ReactElement {
         <div>
           {ServerApi.Config.oidc_providers.map((p) => (
             <Button
+              key={p.id}
               style={{ textAlign: "center", width: "100%", marginTop: "20px" }}
               onClick={() => authWithProvider(p.id)}
             >

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -0,0 +1,126 @@
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import { Alert, Button, CircularProgress, Grid } 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 * as React from "react";
+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 [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  React.useEffect(() => {
+    const load = async () => {
+      if (error || user != null) return;
+      try {
+        const user = await UserApi.GetUserInfo();
+        setUser(user);
+      } catch (e) {
+        console.error(e);
+        setError(true);
+      }
+    };
+    load();
+  });
+
+  if (error)
+    return (
+      <div
+        style={{
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <Alert
+          severity="error"
+          style={{ maxWidth: "300px", marginBottom: "10px" }}
+        >
+          Echec du chagement des informations utilisateur !
+        </Alert>
+
+        <a href="/">Réessayer</a>
+      </div>
+    );
+
+  if (user === null)
+    return (
+      <div
+        style={{
+          height: "100vh",
+          justifyContent: "center",
+          alignItems: "center",
+          display: "flex",
+        }}
+      >
+        <CircularProgress />
+      </div>
+    );
+
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            GeneIT
+          </Typography>
+
+          <div>
+            <Button size="large" color="inherit">
+              {user.name}
+            </Button>
+
+            <Button
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <SettingsIcon />
+            </Button>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={handleClose}>Profil</MenuItem>
+              <MenuItem onClick={handleClose}>Déconnexion</MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <Outlet />
+    </>
+  );
+}