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 (