91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|