Create ResetDialog component

2022-02-07 16:22:35 +04:00
parent 4549cfa702
commit db2667aae9
1 changed files with 97 additions and 0 deletions
@@ -0,0 +1,97 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import axios from 'axios'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+
+import {validateEmail} from '../../lib/utils/emails'
+import {jwennUserEpiEmail} from '../../lib/oki-api'
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+
+export default function ResetDialog({lyen, title, activation, content, open, setOpen, setLoading, setError, setSuccess}) {
+  const [email, setEmail] = useState('')
+
+  const forgotPasswordRequest = async () => {
+    setLoading(true)
+    try {
+      await axios.post(`${API_URL}/auth/${lyen}`, {
+        email
+      })
+
+      if (activation) {
+        const user = await jwennUserEpiEmail(email)
+        localStorage.setItem('user-id', user?._id)
+      }
+
+      setLoading(false)
+      setSuccess(true)
+    } catch {
+      setError('Une erreur s’est produite. Veuillez réessayer ultérieurement')
+      setLoading(false)
+    }
+  }
+
+  const resetFrom = () => {
+    setEmail('')
+  }
+
+  const handleClick = async () => {
+    forgotPasswordRequest()
+    setOpen(false)
+    resetFrom()
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <div>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {content}
+          </DialogContentText>
+          <TextField
+            autoFocus
+            fullWidth
+            value={email}
+            margin='dense'
+            id='email'
+            label='Adresse email'
+            type='email'
+            variant='standard'
+            onChange={event => setEmail(event.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button variant='contained' color='secondary' onClick={handleClose}>Annuler</Button>
+          <Button disabled={!validateEmail(email)} variant='contained' color='primary' onClick={handleClick}>Valider</Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+ResetDialog.defaultProps = {
+  activation: false
+}
+
+ResetDialog.propTypes = {
+  lyen: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  activation: PropTypes.bool,
+  content: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  setLoading: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  setSuccess: PropTypes.func.isRequired,
+}