GeneIT/geneit_app/src/widgets/BaseLoginpage.tsx

97 lines
2.5 KiB
TypeScript
Raw Normal View History

2023-06-08 17:47:59 +00:00
import { mdiFamilyTree } from "@mdi/js";
import Icon from "@mdi/react";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import * as React from "react";
2023-06-12 14:25:38 +00:00
import { Link, Outlet } from "react-router-dom";
2023-07-08 14:54:26 +00:00
import { DarkThemeButton } from "./DarkThemeButton";
2023-06-06 14:50:47 +00:00
2023-06-08 17:47:59 +00:00
function Copyright(props: any) {
2023-06-06 14:50:47 +00:00
return (
2023-06-08 17:47:59 +00:00
<Typography
variant="body2"
color="text.secondary"
align="center"
style={{ marginTop: "20px" }}
{...props}
>
{"Copyright © "}
2023-06-12 14:25:38 +00:00
<a
color="inherit"
href="https://0ph.fr/"
target="_blank"
rel="noreferrer"
style={{ color: "inherit" }}
>
2023-06-08 17:47:59 +00:00
Pierre HUBERT
2023-06-12 14:25:38 +00:00
</a>{" "}
2023-06-08 17:47:59 +00:00
{new Date().getFullYear()}
{"."}
</Typography>
);
}
export function BaseLoginPage() {
return (
<Grid container component="main" sx={{ height: "100vh" }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: "url(/login_splash.jpg)",
backgroundRepeat: "no-repeat",
backgroundColor: (t) =>
t.palette.mode === "light"
? t.palette.grey[50]
: t.palette.grey[900],
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
2023-07-08 14:54:26 +00:00
<div style={{ position: "absolute", right: "10px", top: "5px" }}>
<DarkThemeButton />
</div>
2023-06-08 17:47:59 +00:00
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
<Icon path={mdiFamilyTree} size={1} />
</Avatar>
2023-06-12 14:25:38 +00:00
<Link to="/" style={{ color: "inherit", textDecoration: "none" }}>
<Typography component="h1" variant="h5">
GeneIT
</Typography>
</Link>
2023-06-08 17:47:59 +00:00
<Typography
component="h1"
variant="h6"
style={{ margin: "10px 0px 30px 0px" }}
>
La généalogie de votre famille
</Typography>
{/* inner page */}
<Outlet />
<Copyright sx={{ mt: 5 }} />
</Box>
</Grid>
</Grid>
2023-06-06 14:50:47 +00:00
);
}