Implement Forgot Password

app/request-reset-password/form.js

@@ -0,0 +1,107 @@
+/* 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>
+    </>
+  )
+}

app/request-reset-password/page.js

@@ -0,0 +1,7 @@
+import RequestResetPasswordForm from './form.js'
+
+export default async function RequestResetPasswordPage() {
+  return (
+    <RequestResetPasswordForm />
+  )
+}