feat: make button accessible via keyboard and do not allow sending em…

…pty codes :wq
dhis2 · Mar 4, 2025 · 414a611 · 414a611
1 parent 80d6281
commit 414a611
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-02-26T10:01:36.204Z\n"
-"PO-Revision-Date: 2025-02-26T10:01:36.204Z\n"
+"POT-Creation-Date: 2025-03-04T11:41:36.161Z\n"
+"PO-Revision-Date: 2025-03-04T11:41:36.161Z\n"
 
 msgid "Please confirm that you are not a robot by checking the checkbox."
 msgstr "Please confirm that you are not a robot by checking the checkbox."
@@ -179,6 +179,9 @@ msgstr "Something went wrong"
 msgid "Incorrect username or password"
 msgstr "Incorrect username or password"
 
+msgid "Authentication code is required"
+msgstr "Authentication code is required"
+
 msgid "Incorrect authentication code"
 msgstr "Incorrect authentication code"
 
@@ -201,11 +204,11 @@ msgid "Enter the code from your two-factor authentication app to log in."
 msgstr "Enter the code from your two-factor authentication app to log in."
 
 msgid ""
-"We have sent you an email with your authentication code, enter it below to "
-"log in"
+"'We have sent you an email with your authentication code. Enter it below to "
+"log in."
 msgstr ""
-"We have sent you an email with your authentication code, enter it below to "
-"log in"
+"'We have sent you an email with your authentication code. Enter it below to "
+"log in."
 
 msgid "Username or email"
 msgstr "Username or email"

diff --git a/src/pages/login.js b/src/pages/login.js
@@ -61,7 +61,7 @@ export const LoginFormContainer = () => {
                 <FormSubtitle>
                     <p>
                         {i18n.t(
-                            'We have sent you an email with your authentication code, enter it below to log in',
+                            'We have sent you an email with your authentication code. Enter it below to log in.',
                             { lngs }
                         )}
                     </p>

diff --git a/src/pages/login/InnerLoginForm.js b/src/pages/login/InnerLoginForm.js
@@ -98,14 +98,20 @@ export const InnerLoginForm = ({
                 />
             </div>
             <div className={styles.formButtons}>
-                <Button onClick={verify} disabled={loading} primary>
+                <Button
+                    type="submit"
+                    onClick={verify}
+                    disabled={loading}
+                    primary
+                >
                     {loading ? login2FAButtonText : loginButtonText}
                 </Button>
                 {showResentCode && (
                     <Button
                         secondary
                         disabled={isResendDisabled || loading}
                         onClick={resendCode}
+                        loading={loading}
                     >
                         {i18n.t('Resend Code', { lngs })}
                     </Button>

diff --git a/src/pages/login/LoginErrors.js b/src/pages/login/LoginErrors.js
@@ -14,6 +14,7 @@ export const LoginErrors = ({
     unknownStatus,
     emailTwoFAIncorrect,
     isResetButtonPressed,
+    twoFAError,
 }) => {
     if (error) {
         return (
@@ -38,6 +39,15 @@ export const LoginErrors = ({
         )
     }
 
+    if (twoFAError) {
+        return (
+            <FormNotice
+                title={i18n.t('Authentication code is required', { lngs })}
+                error
+            />
+        )
+    }
+
     if (twoFAIncorrect) {
         return (
             <FormNotice
@@ -110,6 +120,7 @@ LoginErrors.propTypes = {
     lngs: PropTypes.arrayOf(PropTypes.string),
     passwordExpired: PropTypes.bool,
     passwordResetEnabled: PropTypes.bool,
+    twoFAError: PropTypes.bool,
     twoFAIncorrect: PropTypes.bool,
     unknownStatus: PropTypes.bool,
 }
diff --git a/src/pages/login/LoginForm.js b/src/pages/login/LoginForm.js
@@ -23,17 +23,24 @@ export const LoginForm = ({
 }) => {
     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)) {
+        if (
+            !checkIsLoginFormValid(values) ||
+            (twoFAVerificationRequired &&
+                !values.twoFA &&
+                !isResetButtonPressed)
+        ) {
+            setTwoFAError(true)
             return
         }
+        setTwoFAError(false)
         login({
             username: values.username,
             password: values.password,
@@ -53,6 +60,7 @@ export const LoginForm = ({
                 unknownStatus={unknownStatus}
                 emailTwoFAIncorrect={emailTwoFAIncorrect}
                 isResetButtonPressed={isResetButtonPressed}
+                twoFAError={twoFAError}
             />
 
             <ReactFinalForm.Form onSubmit={handleLogin}>