feat(Login): enhance resend code functionality with state management …

…and improved user experience
dhis2 · Mar 2, 2025 · 503207a · 503207a
1 parent 75f67f0
commit 503207a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 19 deletions.
diff --git a/src/hooks/useLogin.js b/src/hooks/useLogin.js
@@ -47,12 +47,28 @@ export const useLogin = () => {
     const { baseUrl, hashRedirect } = useLoginConfig()
     const [loginStatus, setLoginStatus] = useState(null)
     const [error, setError] = useState(null)
+    const [isResendDisabled, setIsResendDisabled] = useState(false)
+    const [isResetButtonPressed, setIsResetButtonPressed] = useState(false)
 
     const cancelTwoFA = () => {
         setError(null)
         setLoginStatus(null)
     }
 
+    const resendCode = async (form, handleSubmit) => {
+        setIsResetButtonPressed(true)
+        setIsResendDisabled(true)
+        form.change('twoFA', undefined)
+
+        // Wait for the state update to complete
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        await handleSubmit()
+        setTimeout(() => {
+            setIsResendDisabled(false)
+        }, 30000)
+    }
+
     const handleSuccessfulLogin = (response) => {
         setError(null)
 
@@ -130,6 +146,11 @@ export const useLogin = () => {
                 loginStatus
             ),
         error,
+        isResendDisabled,
+        setIsResendDisabled,
+        resendCode,
+        isResetButtonPressed,
+        setIsResetButtonPressed,
         twoFAVerificationRequired:
             invalidTWOFA.includes(loginStatus) ||
             loginStatus === LOGIN_STATUSES.success2fa,

diff --git a/src/pages/login.js b/src/pages/login.js
@@ -35,6 +35,11 @@ export const LoginFormContainer = () => {
         unknownStatus,
         error,
         loading,
+        isResendDisabled,
+        setIsResendDisabled,
+        resendCode,
+        isResetButtonPressed,
+        setIsResetButtonPressed,
     } = useLogin()
     const [formUserName, setFormUserName] = useState('')
     const { lngs, allowAccountRecovery, emailConfigured } = useLoginConfig()
@@ -82,6 +87,11 @@ export const LoginFormContainer = () => {
                 unknownStatus={unknownStatus}
                 error={error}
                 loading={loading}
+                isResendDisabled={isResendDisabled}
+                setIsResendDisabled={setIsResendDisabled}
+                resendCode={resendCode}
+                isResetButtonPressed={isResetButtonPressed}
+                setIsResetButtonPressed={setIsResetButtonPressed}
             />
             {!twoFAVerificationRequired && (
                 <>

diff --git a/src/pages/login/InnerLoginForm.js b/src/pages/login/InnerLoginForm.js
@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import { Button, InputFieldFF, ReactFinalForm, Tooltip } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useEffect } from 'react'
 import { useForm } from 'react-final-form'
 import { getIsRequired } from '../../helpers/index.js'
 import styles from '../login.module.css'
@@ -16,9 +16,10 @@ export const InnerLoginForm = ({
     loading,
     setFormUserName,
     setIsResetButtonPressed,
+    isResendDisabled,
+    setIsResendDisabled,
+    resendCode,
 }) => {
-    const [isResendDisabled, setIsResendDisabled] = useState(false)
-
     useEffect(() => {
         setIsResendDisabled(true)
         const timer = setTimeout(() => {
@@ -49,20 +50,6 @@ export const InnerLoginForm = ({
         handleSubmit()
     }
 
-    const resendCode = async () => {
-        setIsResetButtonPressed(true)
-        setIsResendDisabled(true)
-        form.change('twoFA', undefined)
-
-        // Wait for the state update to complete
-        await new Promise((resolve) => setTimeout(resolve, 0))
-
-        await handleSubmit()
-        setTimeout(() => {
-            setIsResendDisabled(false)
-        }, 30000)
-    }
-
     return (
         <form onSubmit={handleSubmit}>
             <div
@@ -124,7 +111,7 @@ export const InnerLoginForm = ({
                     <Button
                         secondary
                         disabled={isResendDisabled || loading}
-                        onClick={resendCode}
+                        onClick={() => resendCode(form, handleSubmit)}
                         loading={loading}
                     >
                         {isResendDisabled ? (
@@ -159,9 +146,12 @@ InnerLoginForm.propTypes = {
     cancelTwoFA: PropTypes.func.isRequired,
     handleSubmit: PropTypes.func.isRequired,
     formSubmitted: PropTypes.bool,
+    isResendDisabled: PropTypes.bool,
     lngs: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
+    resendCode: PropTypes.func,
     setFormUserName: PropTypes.func,
+    setIsResendDisabled: PropTypes.func,
     setIsResetButtonPressed: PropTypes.func,
     showResentCode: PropTypes.bool,
     twoFAVerificationRequired: PropTypes.bool,

diff --git a/src/pages/login/LoginForm.js b/src/pages/login/LoginForm.js
@@ -20,9 +20,13 @@ export const LoginForm = ({
     loading,
     setFormUserName,
     lngs,
+    isResendDisabled,
+    setIsResendDisabled,
+    resendCode,
+    isResetButtonPressed,
+    setIsResetButtonPressed,
 }) => {
     const [formSubmitted, setFormSubmitted] = useState(false)
-    const [isResetButtonPressed, setIsResetButtonPressed] = useState(false)
     const [twoFAError, setTwoFAError] = useState(false)
 
     if (!login) {
@@ -80,6 +84,9 @@ export const LoginForm = ({
                         loading={loading}
                         setFormUserName={setFormUserName}
                         setIsResetButtonPressed={setIsResetButtonPressed}
+                        isResendDisabled={isResendDisabled}
+                        setIsResendDisabled={setIsResendDisabled}
+                        resendCode={resendCode}
                     />
                 )}
             </ReactFinalForm.Form>
@@ -97,12 +104,17 @@ LoginForm.propTypes = {
     emailTwoFAIncorrect: PropTypes.bool,
     emailtwoFAVerificationRequired: PropTypes.bool,
     error: PropTypes.object,
+    isResendDisabled: PropTypes.bool,
+    isResetButtonPressed: PropTypes.bool,
     lngs: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
     login: PropTypes.func,
     passwordExpired: PropTypes.bool,
     passwordResetEnabled: PropTypes.bool,
+    resendCode: PropTypes.func,
     setFormUserName: PropTypes.func,
+    setIsResendDisabled: PropTypes.func,
+    setIsResetButtonPressed: PropTypes.func,
     twoFAIncorrect: PropTypes.bool,
     twoFAVerificationRequired: PropTypes.bool,
     unknownStatus: PropTypes.bool,