diff options
Diffstat (limited to 'src/views/Authorization/ForgotPasswordView.jsx')
| -rw-r--r-- | src/views/Authorization/ForgotPasswordView.jsx | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/src/views/Authorization/ForgotPasswordView.jsx b/src/views/Authorization/ForgotPasswordView.jsx new file mode 100644 index 0000000..44601eb --- /dev/null +++ b/src/views/Authorization/ForgotPasswordView.jsx @@ -0,0 +1,227 @@ +// create boilerplate for ResetPasswordView: +import { + Box, + Button, + Container, + FormControl, + FormHelperText, + Input, + Sheet, + Snackbar, + Typography, +} from '@mui/joy' +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' + +import { API_URL } from './../../Config' + +const ForgotPasswordView = () => { + const navigate = useNavigate() + // const [showLoginSnackbar, setShowLoginSnackbar] = useState(false) + // const [snackbarMessage, setSnackbarMessage] = useState('') + const [resetStatusOk, setResetStatusOk] = useState(null) + const [email, setEmail] = useState('') + const [emailError, setEmailError] = useState(null) + + const validateEmail = email => { + return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email) + } + + const handleSubmit = async () => { + if (!email) { + return setEmailError('Email is required') + } + + // validate email: + if (validateEmail(email)) { + setEmailError('Please enter a valid email address') + return + } + + if (emailError) { + return + } + + try { + const response = await fetch(`${API_URL}/auth/reset`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ email: email }), + }) + + if (response.ok) { + setResetStatusOk(true) + // wait 3 seconds and then redirect to login: + } else { + setResetStatusOk(false) + } + } catch (error) { + setResetStatusOk(false) + } + } + + const handleEmailChange = e => { + setEmail(e.target.value) + if (validateEmail(e.target.value)) { + setEmailError('Please enter a valid email address') + } else { + setEmailError(null) + } + } + + return ( + <Container + component='main' + maxWidth='xs' + + // make content center in the middle of the page: + > + <Box + sx={{ + marginTop: 4, + display: 'flex', + flexDirection: 'column', + + justifyContent: 'space-between', + alignItems: 'center', + }} + > + <Sheet + component='form' + sx={{ + mt: 1, + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 2, + borderRadius: '8px', + boxShadow: 'md', + minHeight: '70vh', + justifyContent: 'space-between', + justifyItems: 'center', + }} + > + <Box> + <img + src='/src/assets/logo.svg' + alt='logo' + width='128px' + height='128px' + /> + {/* <Logo /> */} + <Typography level='h2'> + Done + <span + style={{ + color: '#06b6d4', + }} + > + tick + </span> + </Typography> + </Box> + {/* HERE */} + <Box sx={{ textAlign: 'center' }}></Box> + {resetStatusOk === null && ( + <form onSubmit={handleSubmit}> + <div className='grid gap-6'> + <Typography level='body2' gutterBottom> + Enter your email, and we'll send you a link to get into your + account. + </Typography> + <FormControl error={emailError !== null}> + <Input + placeholder='Email' + type='email' + variant='soft' + fullWidth + size='lg' + value={email} + onChange={handleEmailChange} + error={emailError !== null} + onKeyDown={e => { + if (e.key === 'Enter') { + e.preventDefault() + handleSubmit() + } + }} + /> + <FormHelperText>{emailError}</FormHelperText> + </FormControl> + <Box> + <Button + variant='solid' + size='lg' + fullWidth + sx={{ + mb: 1, + }} + onClick={handleSubmit} + > + Reset Password + </Button> + <Button + fullWidth + size='lg' + variant='soft' + sx={{ + width: '100%', + border: 'moccasin', + borderRadius: '8px', + }} + onClick={() => { + navigate('/login') + }} + color='neutral' + > + Back to Login + </Button> + </Box> + </div> + </form> + )} + {resetStatusOk != null && ( + <> + <Box mt={-30}> + <Typography level='body-md'> + if there is an account associated with the email you entered, + you will receive an email with instructions on how to reset + your + </Typography> + </Box> + <Button + variant='soft' + size='lg' + sx={{ position: 'relative', bottom: '0' }} + onClick={() => { + navigate('/login') + }} + fullWidth + > + Go to Login + </Button> + </> + )} + <Snackbar + open={resetStatusOk ? resetStatusOk : resetStatusOk === false} + autoHideDuration={5000} + onClose={() => { + if (resetStatusOk) { + navigate('/login') + } + }} + > + {resetStatusOk + ? 'Reset email sent, check your email' + : 'Reset email failed, try again later'} + </Snackbar> + </Sheet> + </Box> + </Container> + ) +} + +export default ForgotPasswordView |