first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,244 @@
|
||||
.favicon {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* googleBtn */
|
||||
.googleBtn {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EDEFF5;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px 25px 16px 55px;
|
||||
color: #260944;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: .6s;
|
||||
-webkit-transition: .6s;
|
||||
margin-right: 7px;
|
||||
position: relative;
|
||||
}
|
||||
.googleBtn:hover {
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
|
||||
}
|
||||
.googleBtn img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Facebook Btn */
|
||||
.fbBtn {
|
||||
background: #4776D0;
|
||||
border: 1px solid #4776D0;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px 25px 16px 55px;
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: .6s;
|
||||
-webkit-transition: .6s;
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
}
|
||||
.fbBtn:hover {
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
|
||||
}
|
||||
.fbBtn img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* or */
|
||||
.or {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
color: #777E90;
|
||||
font-weight: 500;
|
||||
z-index: 0;
|
||||
}
|
||||
.or:before {
|
||||
content: "";
|
||||
background: #E2E8F0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
.or span {
|
||||
background-color: #F5F5F5;
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Lock screen */
|
||||
.profileBox {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
background: #EAEDFB;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
padding: 30px 15px 50px;
|
||||
position: relative;
|
||||
}
|
||||
.headerContent {
|
||||
max-width: 300px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
color: #757FEF;
|
||||
font-weight: 500;
|
||||
}
|
||||
.header p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #757FEF;
|
||||
}
|
||||
.header img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.profileInfo {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profileInfo img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 5px solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
}
|
||||
.profileInfo h3 {
|
||||
margin: 5px 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.googleBtn {
|
||||
padding: 13px 15px 13px 40px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.googleBtn img {
|
||||
left: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
.fbBtn {
|
||||
padding: 13px 15px 13px 40px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.fbBtn img {
|
||||
left: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .favicon {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* googleBtn */
|
||||
[dir="rtl"] .googleBtn {
|
||||
margin-right: 0;
|
||||
margin-left: 7px;
|
||||
padding: 16px 55px 16px 25px;
|
||||
}
|
||||
[dir="rtl"] .googleBtn img {
|
||||
left: auto;
|
||||
right: 25px;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Facebook Btn */
|
||||
[dir="rtl"] .fbBtn {
|
||||
margin-left: 0;
|
||||
margin-right: 7px;
|
||||
padding: 16px 55px 16px 25px;
|
||||
}
|
||||
[dir="rtl"] .fbBtn img {
|
||||
left: auto;
|
||||
right: 25px;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* or */
|
||||
[dir="rtl"] .or:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Lock screen */
|
||||
[dir="rtl"] .header img {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .or {
|
||||
color: #fff;
|
||||
}
|
||||
[class="dark"] .or:before {
|
||||
background: var(--borderColor);
|
||||
}
|
||||
[class="dark"] .or span {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* googleBtn */
|
||||
[class="dark"] .googleBtn {
|
||||
background: var(--colorBlack);
|
||||
border: 1px solid var(--colorBlack);
|
||||
}
|
||||
|
||||
/* Lock screen */
|
||||
[class="dark"] .header {
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
[dir="rtl"] .googleBtn {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
[dir="rtl"] .googleBtn img {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
top: 14px;
|
||||
}
|
||||
[dir="rtl"] .fbBtn {
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
[dir="rtl"] .fbBtn img {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
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 styles from "@/components/Authentication/Authentication.module.css";
|
||||
|
||||
const ForgotPasswordForm = () => {
|
||||
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">
|
||||
Forgot Password?{" "}
|
||||
<img
|
||||
src="/images/favicon.png"
|
||||
alt="favicon"
|
||||
className={styles.favicon}
|
||||
/>
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="15px" mb="30px">
|
||||
Enter your email and we′ll send you instructions to reset your
|
||||
password
|
||||
</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>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "16px",
|
||||
padding: "12px 10px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Send Reset Link
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box as="div" textAlign="center" mt="20px">
|
||||
<Link
|
||||
href="/authentication/sign-in/"
|
||||
className="primaryColor text-decoration-none"
|
||||
>
|
||||
<i className="ri-arrow-left-s-line"></i> Back to Sign in
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPasswordForm;
|
||||
@@ -0,0 +1,119 @@
|
||||
import React from "react";
|
||||
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 styles from "@/components/Authentication/Authentication.module.css";
|
||||
|
||||
const LockScreenForm = () => {
|
||||
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: "80px 0 100px",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={12}>
|
||||
<Box>
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<div className={styles.profileBox}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.headerContent}>
|
||||
<h1>Welcome to admash Dashboard!</h1>
|
||||
<p>
|
||||
Hello Andrew Burns, enter your password to unlock the
|
||||
screen !
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="/images/working-on-table.png"
|
||||
alt="Working on table"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<div className={styles.profileInfo}>
|
||||
<img src="/images/profile.png" alt="Profile" />
|
||||
<h3>Andrew Burns</h3>
|
||||
</div>
|
||||
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<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 item xs={12}>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "16px",
|
||||
padding: "12px 10px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Unlock
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LockScreenForm;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,240 @@
|
||||
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 SignUpForm = () => {
|
||||
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">
|
||||
Get’s started.{" "}
|
||||
<img
|
||||
src="/images/favicon.png"
|
||||
alt="favicon"
|
||||
className={styles.favicon}
|
||||
/>
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="15px" mb="30px">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
href="/authentication/sign-in/"
|
||||
className="primaryColor text-decoration-none"
|
||||
>
|
||||
Sign in
|
||||
</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",
|
||||
}}
|
||||
>
|
||||
First Name
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="given-name"
|
||||
name="firstName"
|
||||
required
|
||||
fullWidth
|
||||
id="firstName"
|
||||
label="First Name"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Last Name
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
required
|
||||
fullWidth
|
||||
id="lastName"
|
||||
label="Last Name"
|
||||
name="lastName"
|
||||
autoComplete="family-name"
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<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 Up
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUpForm;
|
||||
Reference in New Issue
Block a user