Reset Passwords

app/reset-password/form.js

@@ -0,0 +1,171 @@
+'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
+}

app/reset-password/page.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import {redirect} from 'next/navigation'
+import ResetPasswordForm from './form.js'
+
+export default async function ResetPasswordPage({searchParams}) {
+  console.log('searchParams', searchParams)
+  const {token} = searchParams
+
+  if (!token) {
+    redirect('/login')
+  }
+
+  return (<ResetPasswordForm token={token} />)
+}
+
+ResetPasswordPage.propTypes = {
+  searchParams: PropTypes.object
+}