diff --git a/src/hooks/useLogin.js b/src/hooks/useLogin.js index fe56bf1..8d54210 100644 --- 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 index ea87e9f..2fdc399 100644 --- 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 index 36a3b73..0c1a7ff 100644 --- 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 (
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 index 0c5bc49..cfef500 100644 --- 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} /> )} @@ -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,