pawol.nu/components/password/reset-password.js

import {useState, forwardRef} from 'react'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Snackbar from '@mui/material/Snackbar'
import {LinearProgress} from '@mui/material'
import MuiAlert from '@mui/material/Alert'
import ResetDialog from './reset-dialog'

const Alert = forwardRef(function Alert(props, ref) {
  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
})

export default function ResetPassword() {
  const [open, setOpen] = useState(false)
  const [error, setError] = useState(false)
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setError('')
    setSuccess(false)
  }

  return (
    <>
      <Box style={{marginTop: 20}}>
        <Button
          fullWidth
          disabled={loading}
          variant='outlined'
          color='warning'
          onClick={() => setOpen(true)}
        >
          <Typography style={{fontWeight: 'bold'}}>
            Mot de passe oublié
          </Typography>
        </Button>
      </Box>
      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
      {error && (
        <Snackbar
          open={Boolean(error)}
          autoHideDuration={6000}
          onClose={handleClose}
        >
          <Alert severity='error' onClose={handleClose}><strong>{error}</strong></Alert>
        </Snackbar>
      )}
      {success && (
        <Snackbar
          open={success}
          autoHideDuration={15_000}
          onClose={handleClose}
        >
          <Alert severity='success' onClose={handleClose}><strong>Email envoyé avec succès. Vous pouvez changer votre mot de passe via le lien qui vous a été envoyé.</strong></Alert>
        </Snackbar>
      )}
      <ResetDialog
        lyen='forgot-password'
        title='Mot de passe oublié'
        content='Indiquez l’adresse e-mail utilisée lors de votre inscription. Vous receverez des instructions par e-mail.'
        open={open}
        setOpen={setOpen}
        setLoading={setLoading}
        setError={setError}
        setSuccess={setSuccess}
      />
    </>
  )
}