pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add login page layout

Browse Source
This commit is contained in:
Pierre HUBERT 2023-06-08 19:47:59 +02:00
parent b63df5b953
commit 94a4ab4f91
3 changed files with 118 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
geneit_app/package-lock.json generated
View File

@ -11,6 +11,8 @@
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.2",
"@mdi/js": "^7.2.96",
"@mdi/react": "^1.6.1",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.4",
"@testing-library/jest-dom": "^5.16.5",
@ -3310,6 +3312,19 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"node_modules/@mdi/js": {
"version": "7.2.96",
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",
"integrity": "sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA=="
},
"node_modules/@mdi/react": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
"integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
"dependencies": {
"prop-types": "^15.7.2"
}
},
"node_modules/@mui/base": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz",
@ -20005,6 +20020,19 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"@mdi/js": {
"version": "7.2.96",
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",
"integrity": "sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA=="
},
"@mdi/react": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
"integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
"requires": {
"prop-types": "^15.7.2"
}
},
"@mui/base": {
"version": "5.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz",

2
geneit_app/package.json
View File

@ -6,6 +6,8 @@
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.2",
"@mdi/js": "^7.2.96",
"@mdi/react": "^1.6.1",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.4",
"@testing-library/jest-dom": "^5.16.5",

92
geneit_app/src/widgets/BaseLoginpage.tsx
View File

@ -1,9 +1,93 @@
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 Link from "@mui/material/Link";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import * as React from "react";
import { Outlet } from "react-router-dom";
export function BaseLoginPage(): React.ReactElement {
function Copyright(props: any) {
return (
<>
<Outlet />
</>
<Typography
variant="body2"
color="text.secondary"
align="center"
style={{ marginTop: "20px" }}
{...props}
>
{"Copyright © "}
<Link color="inherit" href="https://0ph.fr/" target="_blank">
Pierre HUBERT
</Link>{" "}
{new Date().getFullYear()}
{"."}
</Typography>
);
}
export function BaseLoginPage() {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
});
};
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",
}}
>
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
<Icon path={mdiFamilyTree} size={1} />
</Avatar>
<Typography component="h1" variant="h5">
GeneIT
</Typography>
<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>
);
}