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

'use client'

import PropTypes from 'prop-types'
import {useState} from 'react'
import {passwordReset} from '@directus/sdk'
import {useRouter} from 'next/navigation'
import Typography from '@mui/material/Typography'
import Container from '@mui/material/Container'
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 InputAdornment from '@mui/material/InputAdornment'
import IconButton from '@mui/material/IconButton'
import Button from '@mui/material/Button'
import FormHelperText from '@mui/material/FormHelperText'
import Visibility from '@mui/icons-material/Visibility'
import VisibilityOff from '@mui/icons-material/VisibilityOff'
import {directusClient} from '@/lib/directus.js'
import AuthAlert from '@/components/auth-form/auth-alert.js'

export default function RequestResetForm({token}) {
  const [isOpen, setIsOpen] = useState(false)
  const [newPassword, setNewPassword] = useState('')
  const [newPasswordVerification, setNewPasswordVerification] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [showPasswordVerification, setShowPasswordVerification] = useState(false)
  const [success, setSuccess] = useState('')
  const [error, setError] = useState('')
  const reset_token = token // eslint-disable-line camelcase
  const router = useRouter()

  const handleClickShowPassword = () => {
    setShowPassword(!showPassword)
  }

  const handleMouseDownPassword = event => {
    event.preventDefault()
  }

  const handleClickShowPasswordVerifiation = () => {
    setShowPasswordVerification(!showPasswordVerification)
  }

  const handleMouseDownPasswordVerification = event => {
    event.preventDefault()
  }

  const handleFormSubmit = async e => {
    e.preventDefault()
    try {
      await directusClient.request(
        passwordReset(reset_token, newPassword)
      )
      setSuccess('Mot de passe réinitialisé avec succès, redirection vers la page de connexion...')
      setIsOpen(true)
      setTimeout(() => {
        router.push('/login')
      }, 1000)
    } catch (error) {
      console.log(error)
      setError('Le jeton de réinitialisation du mot de passe n’est pas valide, veuillez demander un nouveau lien de réinitialisation du mot de passe !')
      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'>
            Fournir un nouveau mot de passe pour votre compte
          </Typography>
          <Typography variant='body1' align='center'>
            Entrez votre nouveau mot de passe pour votre compte
          </Typography>
          <FormControl required>
            <InputLabel htmlFor='password'>Mot de passe</InputLabel>
            <OutlinedInput
              required
              fullWidth
              autoComplete='new-password' // Disable auto complete
              label='Mot de passe'
              type={showPassword ? 'text' : 'password'}
              name='password'
              id='password'
              endAdornment={
                <InputAdornment position='end'>
                  <IconButton
                    aria-label='password visibility'
                    size='large'
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                  >
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
              value={newPassword}
              onChange={e => setNewPassword(e.target.value)}
            />
          </FormControl>
          <FormControl required error={newPassword !== newPasswordVerification}>
            <InputLabel htmlFor='password_verification'>Vérification du mot de passe</InputLabel>
            <OutlinedInput
              fullWidth
              autoComplete='new-password' // Disable auto complete
              label='Vérification du mot de passe'
              type={showPasswordVerification ? 'text' : 'password'}
              name='password_verification'
              id='password_verification'
              value={newPasswordVerification}
              error={newPassword !== newPasswordVerification}
              aria-describedby='password_verification'
              endAdornment={
                <InputAdornment position='end'>
                  <IconButton
                    aria-label='password visibility'
                    size='large'
                    onClick={handleClickShowPasswordVerifiation}
                    onMouseDown={handleMouseDownPasswordVerification}
                  >
                    {showPasswordVerification ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
              onChange={e => setNewPasswordVerification(e.target.value)}
            />
            {newPassword !== newPasswordVerification && (
              <FormHelperText id='password_verification'>Les mots de passe ne correspondent pas !</FormHelperText>
            )}
          </FormControl>

          <Button fullWidth variant='contained' color='success' type='submit'>
            Créer un nouveau mot de passe
          </Button>
        </Box>

      </Container>
    </>
  )
}

RequestResetForm.propTypes = {
  token: PropTypes.string.isRequired
}