Create base main page

This commit is contained in:
Pierre HUBERT 2023-06-09 11:19:40 +02:00
parent d55718f4de
commit 3ca941bd57
6 changed files with 166 additions and 1 deletions

View File

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

View File

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

View File

@ -13,6 +13,14 @@ export class AuthApi {
static authStatus = atom(this.SignedIn); 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 * Start OpenID login
* *

View File

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

View File

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

View File

@ -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 />
</>
);
}