90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
import React, {useState} from 'react';
|
|
import Grid from "@mui/material/Grid";
|
|
import SimpleReactValidator from "simple-react-validator";
|
|
import {toast} from "react-toastify";
|
|
import TextField from "@mui/material/TextField";
|
|
import Button from "@mui/material/Button";
|
|
import { useRouter } from 'next/router'
|
|
import Link from "next/link";
|
|
|
|
|
|
const ForgotPassword = (props) => {
|
|
|
|
const router = useRouter()
|
|
|
|
const [value, setValue] = useState({
|
|
email: '',
|
|
});
|
|
|
|
const changeHandler = (e) => {
|
|
setValue({...value, [e.target.name]: e.target.value});
|
|
validator.showMessages();
|
|
};
|
|
|
|
const [validator] = React.useState(new SimpleReactValidator({
|
|
className: 'errorMessage'
|
|
}));
|
|
|
|
const submitForm = (e) => {
|
|
e.preventDefault();
|
|
if (validator.allValid()) {
|
|
setValue({
|
|
email: '',
|
|
});
|
|
validator.hideMessages();
|
|
toast.success('You successfully Reset!');
|
|
router.push('/login')
|
|
} else {
|
|
validator.showMessages();
|
|
toast.error('Empty field is not allowed!');
|
|
}
|
|
};
|
|
return (
|
|
<Grid className="loginWrapper">
|
|
|
|
<Grid className="loginForm">
|
|
<h2>Forgot Password</h2>
|
|
<p>Reset your account password</p>
|
|
<form onSubmit={submitForm}>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
className="inputOutline"
|
|
fullWidth
|
|
placeholder="E-mail"
|
|
value={value.email}
|
|
variant="outlined"
|
|
name="email"
|
|
label="E-mail"
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
onBlur={(e) => changeHandler(e)}
|
|
onChange={(e) => changeHandler(e)}
|
|
/>
|
|
{validator.message('email', value.email, 'required|email')}
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Grid className="formFooter">
|
|
<Button fullWidth className="cBtn cBtnLarge cBtnTheme" type="submit">Resend
|
|
Password</Button>
|
|
</Grid>
|
|
<Grid className="loginWithSocial">
|
|
<Button className="facebook"><i className="fa fa-facebook"></i></Button>
|
|
<Button className="twitter"><i className="fa fa-twitter"></i></Button>
|
|
<Button className="linkedin"><i className="fa fa-linkedin"></i></Button>
|
|
</Grid>
|
|
<p className="noteHelp">Already have an account? <Link href="/login">Return to Sign In</Link>
|
|
</p>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
<div className="shape-img">
|
|
<i className="fi flaticon-honeycomb"></i>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
)
|
|
};
|
|
|
|
export default ForgotPassword; |