feat: move resend callback to uselogin hook

src/hooks/__tests__/useLogin.test.js

@@ -19,15 +19,6 @@ describe('useLogin', () => {
         expect(typeof result.current.login).toBe('function')
     })
 
-    it('has a login mutation that points to auth/login', () => {
-        useDataMutation.mockImplementationOnce((mutation) => [
-            mutation.resource,
-            { loading: false },
-        ])
-        const { result } = renderHook(() => useLogin())
-        expect(result.current.login).toBe('auth/login')
-    })
-
     it('redirects after receiving SUCCESS', async () => {
         useDataMutation.mockImplementation((mutation, options) => [
             () => {

src/hooks/useLogin.js

@@ -47,9 +47,15 @@ export const useLogin = () => {
     const { baseUrl, hashRedirect } = useLoginConfig()
     const [loginStatus, setLoginStatus] = useState(null)
     const [error, setError] = useState(null)
+    const [twoFACodeRequired, setTwoFACodeRequired] = useState(false)
+
+    const twoFAVerificationRequired =
+        invalidTWOFA.includes(loginStatus) ||
+        loginStatus === LOGIN_STATUSES.success2fa
 
     const cancelTwoFA = () => {
         setError(null)
+        setTwoFACodeRequired(false)
         setLoginStatus(null)
     }
 
@@ -120,9 +126,23 @@ export const useLogin = () => {
         },
     })
 
+    const resendTwoFACode = () => {
+        return login({})
+    }
+
+    const loginIfDataAvailable = (values) => {
+        if (twoFAVerificationRequired && !values.twoFA) {
+            setTwoFACodeRequired(true)
+            return
+        }
+        setTwoFACodeRequired(false)
+        return login(values)
+    }
+
     return {
-        login,
+        login: loginIfDataAvailable,
         cancelTwoFA,
+        resendTwoFACode,
         loading:
             loading ||
             fetching ||
@@ -146,6 +166,7 @@ export const useLogin = () => {
         twoFANotEnabled: loginStatus === LOGIN_STATUSES.notEnabled2fa,
         passwordExpired: loginStatus === LOGIN_STATUSES.passwordExpired,
         accountInaccessible: inaccessibleAccountStatuses.includes(loginStatus),
+        twoFACodeRequired,
         unknownStatus:
             loginStatus !== null &&
             !Object.values(LOGIN_STATUSES).includes(loginStatus),

src/pages/login.js

@@ -25,13 +25,15 @@ export const LoginFormContainer = () => {
     const {
         login,
         cancelTwoFA,
+        resendTwoFACode,
         twoFAVerificationRequired,
         OTPtwoFAVerificationRequired,
         emailtwoFAVerificationRequired,
         emailTwoFAIncorrect,
         twoFAIncorrect,
         accountInaccessible,
         passwordExpired,
+        twoFACodeRequired,
         unknownStatus,
         error,
         loading,
@@ -72,10 +74,12 @@ export const LoginFormContainer = () => {
                 lngs={lngs}
                 login={login}
                 cancelTwoFA={cancelTwoFA}
+                resendTwoFACode={resendTwoFACode}
                 twoFAVerificationRequired={twoFAVerificationRequired}
                 emailtwoFAVerificationRequired={emailtwoFAVerificationRequired}
                 twoFAIncorrect={twoFAIncorrect}
                 emailTwoFAIncorrect={emailTwoFAIncorrect}
+                twoFACodeRequired={twoFACodeRequired}
                 accountInaccessible={accountInaccessible}
                 passwordExpired={passwordExpired}
                 passwordResetEnabled={allowAccountRecovery && emailConfigured}

src/pages/login/InnerLoginForm.js

@@ -11,10 +11,12 @@ export const InnerLoginForm = ({
     formSubmitted,
     twoFAVerificationRequired,
     showResentCode,
+    resendTwoFACode,
     cancelTwoFA,
     lngs = ['en'],
     loading,
     setFormUserName,
+    isResetButtonPressed,
     setIsResetButtonPressed,
 }) => {
     const [isResendDisabled, setIsResendDisabled] = useState(false)
@@ -23,16 +25,16 @@ export const InnerLoginForm = ({
         setIsResendDisabled(true)
         form.change('twoFA', undefined)
         setIsResetButtonPressed(true)
-        handleSubmit()
+        resendTwoFACode()
         setTimeout(() => {
             setIsResendDisabled(false)
-            setIsResetButtonPressed(false)
-        }, 30000)
+        }, 1000)
     }
-    const verify = () => {
+
+    const onSubmitPressed = () => {
         setIsResetButtonPressed(false)
-        handleSubmit()
     }
+
     const form = useForm()
     const ref = useRef()
     const clearTwoFA = () => {
@@ -101,11 +103,13 @@ export const InnerLoginForm = ({
             <div className={styles.formButtons}>
                 <Button
                     type="submit"
-                    onClick={verify}
-                    disabled={loading}
+                    onClick={onSubmitPressed}
+                    disabled={loading && !isResetButtonPressed}
                     primary
                 >
-                    {loading ? login2FAButtonText : loginButtonText}
+                    {loading && !isResetButtonPressed
+                        ? login2FAButtonText
+                        : loginButtonText}
                 </Button>
                 {showResentCode && (
                     <Button
@@ -131,8 +135,10 @@ InnerLoginForm.propTypes = {
     cancelTwoFA: PropTypes.func.isRequired,
     handleSubmit: PropTypes.func.isRequired,
     formSubmitted: PropTypes.bool,
+    isResetButtonPressed: PropTypes.bool,
     lngs: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
+    resendTwoFACode: PropTypes.func,
     setFormUserName: PropTypes.func,
     setIsResetButtonPressed: PropTypes.func,
     showResentCode: PropTypes.bool,

src/pages/login/LoginErrors.js

@@ -14,7 +14,7 @@ export const LoginErrors = ({
     unknownStatus,
     emailTwoFAIncorrect,
     isResetButtonPressed,
-    twoFAError,
+    twoFACodeRequired,
     twoFAVerificationRequired,
 }) => {
     if (error) {
@@ -40,7 +40,11 @@ export const LoginErrors = ({
         )
     }
 
-    if (twoFAError && twoFAVerificationRequired && !isResetButtonPressed) {
+    if (
+        twoFACodeRequired &&
+        twoFAVerificationRequired &&
+        !isResetButtonPressed
+    ) {
         return (
             <FormNotice
                 title={i18n.t('Authentication code is required', { lngs })}
@@ -121,7 +125,7 @@ LoginErrors.propTypes = {
     lngs: PropTypes.arrayOf(PropTypes.string),
     passwordExpired: PropTypes.bool,
     passwordResetEnabled: PropTypes.bool,
-    twoFAError: PropTypes.bool,
+    twoFACodeRequired: PropTypes.bool,
     twoFAIncorrect: PropTypes.bool,
     twoFAVerificationRequired: PropTypes.bool,
     unknownStatus: PropTypes.bool,

src/pages/login/LoginForm.js

@@ -10,6 +10,7 @@ export const LoginForm = ({
     cancelTwoFA,
     twoFAVerificationRequired,
     emailtwoFAVerificationRequired,
+    twoFACodeRequired,
     twoFAIncorrect,
     emailTwoFAIncorrect,
     accountInaccessible,
@@ -19,28 +20,22 @@ export const LoginForm = ({
     error,
     loading,
     setFormUserName,
+    resendTwoFACode,
     lngs = ['en'],
 }) => {
     const [formSubmitted, setFormSubmitted] = useState(false)
     const [isResetButtonPressed, setIsResetButtonPressed] = useState(false)
-    const [twoFAError, setTwoFAError] = useState(false)
 
     if (!login) {
         return null
     }
 
     const handleLogin = (values) => {
         setFormSubmitted(true)
-        if (
-            !checkIsLoginFormValid(values) ||
-            (twoFAVerificationRequired &&
-                !values.twoFA &&
-                !isResetButtonPressed)
-        ) {
-            setTwoFAError(true)
+        setIsResetButtonPressed(false)
+        if (!checkIsLoginFormValid(values)) {
             return
         }
-        setTwoFAError(false)
         login({
             username: values.username,
             password: values.password,
@@ -60,7 +55,7 @@ export const LoginForm = ({
                 unknownStatus={unknownStatus}
                 emailTwoFAIncorrect={emailTwoFAIncorrect}
                 isResetButtonPressed={isResetButtonPressed}
-                twoFAError={twoFAError}
+                twoFACodeRequired={twoFACodeRequired}
                 twoFAVerificationRequired={twoFAVerificationRequired}
             />
 
@@ -74,11 +69,13 @@ export const LoginForm = ({
                             emailtwoFAVerificationRequired ||
                             emailTwoFAIncorrect
                         }
+                        resendTwoFACode={resendTwoFACode}
                         twoFAIncorrect={twoFAIncorrect}
                         cancelTwoFA={cancelTwoFA}
                         lngs={lngs}
                         loading={loading}
                         setFormUserName={setFormUserName}
+                        isResetButtonPressed={isResetButtonPressed}
                         setIsResetButtonPressed={setIsResetButtonPressed}
                     />
                 )}
@@ -98,7 +95,9 @@ LoginForm.propTypes = {
     login: PropTypes.func,
     passwordExpired: PropTypes.bool,
     passwordResetEnabled: PropTypes.bool,
+    resendTwoFACode: PropTypes.func,
     setFormUserName: PropTypes.func,
+    twoFACodeRequired: PropTypes.bool,
     twoFAIncorrect: PropTypes.bool,
     twoFAVerificationRequired: PropTypes.bool,
     unknownStatus: PropTypes.bool,