feat: add button for 2fa submit (#14961)

wireapp · Apr 3, 2023 · 92fdea7 · 92fdea7
1 parent 46a2609
commit 92fdea7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -661,6 +661,7 @@
   "login.subhead": "Enter your email address or username.",
   "login.twoFactorLoginSubHead": "Please check your email {email} for the verification code and enter it below.",
   "login.twoFactorLoginTitle": "Verify your account",
+  "login.submitTwoFactorButton": "Submit",
   "mediaBtnPause": "Pause",
   "mediaBtnPlay": "Play",
   "messageCouldNotBeSent": "Message could not be sent due to connectivity issues.",

diff --git a/src/script/auth/page/Login.tsx b/src/script/auth/page/Login.tsx
@@ -31,6 +31,7 @@ import {AnyAction, Dispatch} from 'redux';
 import {Runtime, UrlUtil} from '@wireapp/commons';
 import {
   ArrowIcon,
+  Button,
   Checkbox,
   CheckboxLabel,
   CodeInput,
@@ -39,6 +40,7 @@ import {
   Columns,
   Container,
   ContainerXS,
+  FlexBox,
   Form,
   H1,
   H2,
@@ -103,6 +105,8 @@ const LoginComponent = ({
 
   const [twoFactorSubmitError, setTwoFactorSubmitError] = useState<string | Error>('');
   const [twoFactorLoginData, setTwoFactorLoginData] = useState<LoginData>();
+  const [verificationCode, setVerificationCode] = useState('');
+  const [twoFactorSubmitFailedOnce, setTwoFactorSubmitFailedOnce] = useState(false);
 
   const isOauth = UrlUtil.hasURLParameter(QUERY_KEY.SCOPE);
 
@@ -244,6 +248,7 @@ const LoginComponent = ({
 
           case BackendError.LABEL.CODE_AUTHENTICATION_FAILED: {
             setTwoFactorSubmitError(error);
+            setTwoFactorSubmitFailedOnce(true);
             break;
           }
           case BackendError.LABEL.INVALID_CREDENTIALS:
@@ -281,8 +286,12 @@ const LoginComponent = ({
   };
 
   const submitTwoFactorLogin = (code?: string) => {
+    setVerificationCode(code ?? '');
     setTwoFactorSubmitError('');
-    handleSubmit({...twoFactorLoginData, verificationCode: code}, []);
+    // Do not auto submit if already failed once
+    if (!twoFactorSubmitFailedOnce) {
+      handleSubmit({...twoFactorLoginData, verificationCode: code}, []);
+    }
   };
 
   const storeEntropy = async (entropyData: Uint8Array) => {
@@ -333,10 +342,10 @@ const LoginComponent = ({
                     </Text>
                     <Label markInvalid={!!twoFactorSubmitError}>
                       <CodeInput
+                        disabled={isFetching}
                         style={{marginTop: 60}}
                         onCodeComplete={submitTwoFactorLogin}
                         data-uie-name="enter-code"
-                        markInvalid={!!twoFactorSubmitError}
                       />
                     </Label>
                     <div style={{display: 'flex', justifyContent: 'center', marginTop: 10}}>
@@ -351,6 +360,16 @@ const LoginComponent = ({
                         </TextLink>
                       )}
                     </div>
+                    <FlexBox justify="center">
+                      <Button
+                        disabled={!!twoFactorSubmitError || isFetching}
+                        type="submit"
+                        css={{marginTop: 65}}
+                        onClick={() => handleSubmit({...twoFactorLoginData, verificationCode}, [])}
+                      >
+                        {_({id: 'login.submitTwoFactorButton'})}
+                      </Button>
+                    </FlexBox>
                   </div>
                 ) : (
                   <>

diff --git a/src/script/strings.ts b/src/script/strings.ts
@@ -770,6 +770,10 @@ export const loginStrings = defineMessages({
     defaultMessage: 'Verify your account',
     id: 'login.twoFactorLoginTitle',
   },
+  submitTwoFactorButton: {
+    defaultMessage: 'Submit',
+    id: 'login.submitTwoFactorButton',
+  },
 });
 
 export const ssoLoginStrings = defineMessages({