Add login page layout

geneit_app/package-lock.json

@@ -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",

geneit_app/package.json

@@ -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",

geneit_app/src/widgets/BaseLoginpage.tsx

@@ -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 (
-    <>
+    <Typography
-      <Outlet />
+      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>
   );
 }