konstitisyon.nu/app/request-reset-password/form.js

/* 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('Si vous êtes inscrit, un courriel contenant un lien de réinitialisation vous sera envoyé !')
      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='warning' />}
      <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>
    </>
  )
}