Create ResetPassword component

2022-02-07 16:22:07 +04:00
parent 7973c5f355
commit 4549cfa702
1 changed files with 75 additions and 0 deletions
@@ -0,0 +1,75 @@
+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 email utilisée lors de votre inscription. Vous receverez des instructions par email.'
+        open={open}
+        setOpen={setOpen}
+        setLoading={setLoading}
+        setError={setError}
+        setSuccess={setSuccess}
+      />
+    </>
+  )
+}