108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
/* eslint-disable camelcase */
|
||
'use client'
|
||
|
||
import Link from 'next/link'
|
||
import {useState} from 'react'
|
||
import Container from '@mui/material/Container'
|
||
import Typography from '@mui/material/Typography'
|
||
import Box from '@mui/material/Box'
|
||
import FormControl from '@mui/material/FormControl'
|
||
import InputLabel from '@mui/material/InputLabel'
|
||
import OutlinedInput from '@mui/material/OutlinedInput'
|
||
import Button from '@mui/material/Button'
|
||
import {passwordRequest} from '@directus/sdk'
|
||
import {directusClient} from '@/lib/directus.js'
|
||
import AuthAlert from '@/components/auth-form/auth-alert.js'
|
||
|
||
const appUrl = process.env.NEXT_PUBLIC_URL
|
||
|
||
export default function RequestResetPasswordForm() {
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
const [email, setEmail] = useState('')
|
||
const [success, setSuccess] = useState('')
|
||
const [error, setError] = useState('')
|
||
|
||
const reset_url = `${appUrl}/reset-password`
|
||
|
||
const handleFormSubmit = async e => {
|
||
e.preventDefault()
|
||
|
||
try {
|
||
await directusClient.request(
|
||
passwordRequest(email, reset_url)
|
||
)
|
||
|
||
setSuccess('Un courriel contenant un lien de réinitialisation du mot de passe a été envoyé à votre adresse électronique !')
|
||
setIsOpen(true)
|
||
} catch (error) {
|
||
console.log(error)
|
||
if (error) {
|
||
setError('Une erreur s’est produite, veuillez réessayer !')
|
||
setIsOpen(true)
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{error && <AuthAlert isOpen={isOpen} setIsOpen={setIsOpen} message={error} severity='error' />}
|
||
{success && <AuthAlert isOpen={isOpen} setIsOpen={setIsOpen} message={success} severity='success' />}
|
||
<Container
|
||
maxWidth='sm'
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minHeight: '100vh',
|
||
}}
|
||
>
|
||
<Box
|
||
component='form'
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: 2,
|
||
width: '100%',
|
||
p: 3,
|
||
border: '1px solid #ccc',
|
||
borderRadius: '8px',
|
||
boxShadow: 3,
|
||
bgcolor: 'background.paper'
|
||
}}
|
||
onSubmit={handleFormSubmit}
|
||
>
|
||
<Typography variant='h4' component='h1' align='center'>
|
||
Réinitialiser votre mot de passe
|
||
</Typography>
|
||
<Typography variant='body1' align='center'>
|
||
Saisissez votre adresse e-mail enregistrée et un lien de réinitialisation du mot de passe vous sera envoyé.
|
||
</Typography>
|
||
<FormControl required>
|
||
<InputLabel htmlFor='email'>E-mail</InputLabel>
|
||
<OutlinedInput
|
||
required
|
||
fullWidth
|
||
autoComplete='email'
|
||
label='E-mail'
|
||
type='email'
|
||
name='email'
|
||
id='email'
|
||
value={email}
|
||
onChange={e => setEmail(e.target.value)}
|
||
/>
|
||
</FormControl>
|
||
<Button fullWidth variant='contained' color='success' type='submit'>
|
||
Envoyer le lien de réinitialisation
|
||
</Button>
|
||
<Typography variant='body2' align='center'>
|
||
<Link passHref href='/login'>
|
||
<Button color='success'>Page de connexion</Button>
|
||
</Link>
|
||
</Typography>
|
||
</Box>
|
||
</Container>
|
||
</>
|
||
)
|
||
}
|