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>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|