Build base web

2023-09-04 14:11:56 +02:00
parent 83bd87c6f8
commit 8defc104c6
35 changed files with 31630 additions and 0 deletions
--- a/virtweb_frontend/src/widgets/BaseLoginPage.tsx
+++ b/virtweb_frontend/src/widgets/BaseLoginPage.tsx
@ -0,0 +1,90 @@
+import { mdiServer } 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 { Link, Outlet } from "react-router-dom";
+
+function Copyright(props: any) {
+  return (
+    <Typography
+      variant="body2"
+      color="text.secondary"
+      align="center"
+      style={{ marginTop: "20px" }}
+      {...props}
+    >
+      {"Copyright © "}
+      <a
+        color="inherit"
+        href="https://0ph.fr/"
+        target="_blank"
+        rel="noreferrer"
+        style={{ color: "inherit" }}
+      >
+        Pierre HUBERT
+      </a>{" "}
+      {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",
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+            <Icon path={mdiServer} size={1} />
+          </Avatar>
+          <Link to="/" style={{ color: "inherit", textDecoration: "none" }}>
+            <Typography component="h1" variant="h5">
+              VirtWeb
+            </Typography>
+          </Link>
+          <Typography
+            component="h1"
+            variant="h6"
+            style={{ margin: "10px 0px 30px 0px" }}
+          >
+            Virtual Machines Management
+          </Typography>
+
+          {/* inner page */}
+          <Outlet />
+
+          <Copyright sx={{ mt: 5 }} />
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}