Controls/CMS-Client
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-10-14 22:02:57 -04:00
commit 5f95d857d4
783 changed files with 112323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Authentication/SignInForm.js
+189
View File
@@ -0,0 +1,189 @@
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 "@/components/Authentication/Authentication.module.css";
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="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>
<Typography as="h1" fontSize="28px" fontWeight="700" mb="5px">
Sign In{" "}
<img
src="/images/favicon.png"
alt="favicon"
className={styles.favicon}
/>
</Typography>
<Typography fontSize="15px" mb="30px">
Already have an account?{" "}
<Link
href="/authentication/sign-up"
className="primaryColor text-decoration-none"
>
Sign up
</Link>
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mb: "30px",
}}
>
<Link href="#" className={styles.googleBtn}>
<img src="/images/google-icon.png" />
Sign in with Google
</Link>
<Link href="#" className={styles.fbBtn}>
<img src="/images/fb-icon.png" />
Sign in with Facebook
</Link>
</Box>
<div className={styles.or}>
<span>or</span>
</div>
<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>
<Grid container alignItems="center" spacing={2}>
<Grid item xs={6} sm={6}>
<FormControlLabel
control={
<Checkbox value="allowExtraEmails" color="primary" />
}
label="Remember me."
/>
</Grid>
<Grid item xs={6} sm={6} textAlign="end">
<Link
href="/authentication/forgot-password"
className="primaryColor text-decoration-none"
>
Forgot your password?
</Link>
</Grid>
</Grid>
<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;