Add email confirmation and forgot password to Koneksyon

components/sesyon/koneksyon.js

@@ -23,6 +23,8 @@ import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRound
 import axios from 'axios'
 
 import {validateEmail} from '../../lib/utils/emails'
+import ResetPassword from '../password/reset-password'
+import ResetDialog from '../password/reset-dialog'
 
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
@@ -65,7 +67,7 @@ const Alert = forwardRef(function Alert(props, ref) {
 })
 
 function Koneksyon({chimen}) {
-  const [loginError, setError] = useState('')
+  const [error, setError] = useState('')
   const [loginCredentials, setLoginCredentials] = useState({username: '', password: ''})
   const [registerCredentials, setRegisterCredentials] = useState({username: '', email: '', password: ''})
   const [passwordVerification, setPasswordVerification] = useState('')
@@ -74,7 +76,8 @@ function Koneksyon({chimen}) {
   const [showVerificationPassword, setShowVerificationPassword] = useState(false)
   const [loading, setLoading] = useState(false)
   const [open, setOpen] = useState(true)
-  const [registrationSuccess, setRegistrationSuccess] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [openDialog, setOpenDialog] = useState(false)
   const [value, setValue] = useState(0)
   const router = useRouter()
 
@@ -100,7 +103,7 @@ function Koneksyon({chimen}) {
         }
       })
       localStorage.setItem('user-id', response?.data?.user?._id)
-      setRegistrationSuccess(true)
+      setSuccess(true)
       resetRegisterForm()
     } catch (error) {
       if (error.message.endsWith(400)) {
@@ -170,19 +173,19 @@ function Koneksyon({chimen}) {
     }
 
     setOpen(false)
-    setRegistrationSuccess(false)
+    setSuccess(false)
     setError('')
   }
 
   useEffect(() => {
-    if (loginError) {
+    if (error) {
       setOpen(true)
     }
 
     return () => {
       setLoading(false)
     }
-  }, [loginError])
+  }, [error])
 
   const handleClickShowPassword = () => {
     setShowPassword(!showPassword)
@@ -278,6 +281,7 @@ function Koneksyon({chimen}) {
               Connexion
             </Typography>
           </Button>
+          <ResetPassword />
         </TabPanel>
         <TabPanel value={value} index={1}>
           <FormControl fullWidth>
@@ -363,28 +367,50 @@ function Koneksyon({chimen}) {
               Inscription
             </Typography>
           </Button>
+          <Button
+            fullWidth
+            style={{marginTop: 20}}
+            variant='outlined'
+            color='warning'
+            onClick={() => setOpenDialog(true)}
+          >
+            <Typography style={{fontWeight: 'bold'}}>
+              Renvoyer l’email de confirmation
+            </Typography>
+          </Button>
         </TabPanel>
       </Box>
+      <ResetDialog
+        activation
+        lyen='send-email-confirmation'
+        title='Envoi de l’email de confirmation'
+        content='Si vous n’avez pas reçu l’email de confirmation, renseignez le champ et validez le formulaire.'
+        open={openDialog}
+        setOpen={setOpenDialog}
+        setLoading={setLoading}
+        setError={setError}
+        setSuccess={setSuccess}
+      />
 
-      {loading && <LinearProgress size={24} style={{width: '100%', marginTop: '1em'}} />}
+      {loading && <LinearProgress size={24} style={{width: '100%'}} />}
 
-      {loginError && (
+      {error && (
         <Snackbar
           open={open}
           autoHideDuration={6000}
           onClose={handleClose}
         >
-          <Alert severity='error' onClose={handleClose}><strong>{loginError}</strong></Alert>
+          <Alert severity='error' onClose={handleClose}><strong>{error}</strong></Alert>
         </Snackbar>
       )}
 
-      {registrationSuccess && (
+      {success && (
         <Snackbar
-          open={registrationSuccess}
+          open={success}
           autoHideDuration={15_000}
           onClose={handleClose}
         >
-          <Alert severity='success' onClose={handleClose}><strong>Inscription réussie. Veuillez confirmer votre adresse email, via le lien qui vous a été envoyé.</strong></Alert>
+          <Alert severity='success' onClose={handleClose}><strong>Veuillez confirmer votre adresse email via le lien qui vous a été envoyé.</strong></Alert>
         </Snackbar>
       )}
     </Container>