146 lines
4.4 KiB
JavaScript
146 lines
4.4 KiB
JavaScript
import React from "react";
|
|
import Link from "next/link";
|
|
import Grid from "@mui/material/Grid";
|
|
import { Typography } from "@mui/material";
|
|
import { Box } from "@mui/system";
|
|
import TextField from "@mui/material/TextField";
|
|
import Button from "@mui/material/Button";
|
|
import FormControlLabel from "@mui/material/FormControlLabel";
|
|
import Checkbox from "@mui/material/Checkbox";
|
|
import styles from "./signinform.module.css";
|
|
import WrenchBoardLogo from "@/public/images/logos/wrenchboard-logo.png";
|
|
|
|
const SignInForm = () => {
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
const data = new FormData(event.currentTarget);
|
|
console.log({
|
|
email: data.get("email"),
|
|
password: data.get("password"),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.authenticationBox}>
|
|
<Box
|
|
component="main"
|
|
sx={{
|
|
maxWidth: "510px",
|
|
ml: "auto",
|
|
mr: "auto",
|
|
padding: "50px 0 100px",
|
|
}}
|
|
>
|
|
<Grid item xs={12} md={12} lg={12} xl={12}>
|
|
<Box>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
mb="60px"
|
|
>
|
|
<img
|
|
src="/images/logos/android-chrome-512x512.png"
|
|
alt="logo"
|
|
className={styles.favicon}
|
|
/>
|
|
</Box>
|
|
<Typography as="h1" fontSize="28px" fontWeight="700" mb="5px" color="#fff">
|
|
Sign In{" "}
|
|
</Typography>
|
|
|
|
<Box component="form" noValidate onSubmit={handleSubmit}>
|
|
<Box
|
|
sx={{
|
|
background: "#fff",
|
|
padding: "30px 20px",
|
|
borderRadius: "10px",
|
|
mb: "20px",
|
|
}}
|
|
className="bg-black"
|
|
>
|
|
<Grid container alignItems="center" spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography
|
|
component="label"
|
|
sx={{
|
|
fontWeight: "500",
|
|
fontSize: "14px",
|
|
mb: "10px",
|
|
display: "block",
|
|
}}
|
|
>
|
|
Email
|
|
</Typography>
|
|
|
|
<TextField
|
|
required
|
|
fullWidth
|
|
id="email"
|
|
label="Email Address"
|
|
name="email"
|
|
autoComplete="email"
|
|
InputProps={{
|
|
style: { borderRadius: 8 },
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<Typography
|
|
component="label"
|
|
sx={{
|
|
fontWeight: "500",
|
|
fontSize: "14px",
|
|
mb: "10px",
|
|
display: "block",
|
|
}}
|
|
>
|
|
Password
|
|
</Typography>
|
|
|
|
<TextField
|
|
required
|
|
fullWidth
|
|
name="password"
|
|
label="Password"
|
|
type="password"
|
|
id="password"
|
|
autoComplete="new-password"
|
|
InputProps={{
|
|
style: { borderRadius: 8 },
|
|
}}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
|
|
|
|
<Button
|
|
type="submit"
|
|
fullWidth
|
|
variant="contained"
|
|
sx={{
|
|
mt: 2,
|
|
textTransform: "capitalize",
|
|
borderRadius: "8px",
|
|
fontWeight: "500",
|
|
fontSize: "16px",
|
|
padding: "12px 10px",
|
|
color: "#fff !important",
|
|
}}
|
|
>
|
|
Sign In
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SignInForm;
|