mobile: allow user to cancel 2fa auth

streetwriters · Nov 6, 2024 · 3cf00cb · 3cf00cb
1 parent 5659576
commit 3cf00cb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/apps/mobile/app/components/auth/two-factor.js b/apps/mobile/app/components/auth/two-factor.js
@@ -40,7 +40,7 @@ import { useCallback } from "react";
 import { ScrollView } from "react-native-actions-sheet";
 import { strings } from "@notesnook/intl";
 
-const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
+const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
   const code = useRef();
   const [currentMethod, setCurrentMethod] = useState({
@@ -138,7 +138,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
       <View
         style={{
           alignItems: "center",
-          paddingHorizontal: currentMethod.method ? 12 : 0
+          paddingHorizontal: currentMethod.method ? 12 : 0,
+          gap: 12
         }}
       >
         <IconButton
@@ -167,8 +168,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
             strings.select2faCodeHelpText()}
         </Paragraph>
 
-        <Seperator />
-
         {currentMethod.method === "sms" || currentMethod.method === "email" ? (
           <Button
             onPress={onSendCode}
@@ -187,8 +186,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           />
         ) : null}
 
-        <Seperator />
-
         {currentMethod.method ? (
           <>
             <Input
@@ -227,16 +224,15 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 minWidth: "50%"
               }}
             />
-            <Seperator />
+
             <Button
               title={loading ? null : strings.next()}
               type="accent"
               width={250}
               loading={loading}
               onPress={onNext}
               style={{
-                borderRadius: 100,
-                marginBottom: 10
+                borderRadius: 100
               }}
             />
 
@@ -248,6 +244,13 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
               onPress={onRequestSecondaryMethod}
               height={30}
             />
+
+            <Button
+              title={strings.cancel()}
+              type="plain"
+              onPress={onCancel}
+              height={30}
+            />
           </>
         ) : (
           <>
@@ -298,15 +301,16 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   );
 };
 
-TwoFactorVerification.present = (onMfaLogin, data, context) => {
+TwoFactorVerification.present = (onMfaLogin, data, onCancel, context) => {
   presentSheet({
     component: () => (
-      <TwoFactorVerification onMfaLogin={onMfaLogin} mfaInfo={data} />
+      <TwoFactorVerification
+        onMfaLogin={onMfaLogin}
+        mfaInfo={data}
+        onCancel={onCancel}
+      />
     ),
     context: context || "two_factor_verify",
-    onClose: () => {
-      onMfaLogin();
-    },
     disableClosing: true
   });
 };

diff --git a/apps/mobile/app/components/auth/use-login.js b/apps/mobile/app/components/auth/use-login.js
@@ -72,31 +72,39 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
           const mfaInfo = await db.user.authenticateEmail(email.current);
           console.log("email auth", mfaInfo);
           if (mfaInfo) {
-            TwoFactorVerification.present(async (mfa, callback) => {
-              try {
-                const success = await db.user.authenticateMultiFactorCode(
-                  mfa.code,
-                  mfa.method
-                );
+            TwoFactorVerification.present(
+              async (mfa, callback) => {
+                try {
+                  const success = await db.user.authenticateMultiFactorCode(
+                    mfa.code,
+                    mfa.method
+                  );
 
-                if (success) {
-                  setStep(LoginSteps.passwordAuth);
-                  setLoading(false);
-                  setTimeout(() => {
-                    passwordInputRef.current?.focus();
-                  }, 500);
-                  callback && callback(true);
-                }
-                callback && callback(false);
-              } catch (e) {
-                callback && callback(false);
-                if (e.message === "invalid_grant") {
-                  eSendEvent(eCloseSheet, "two_factor_verify");
-                  setLoading(false);
-                  setStep(LoginSteps.emailAuth);
+                  if (success) {
+                    setStep(LoginSteps.passwordAuth);
+                    setLoading(false);
+                    setTimeout(() => {
+                      passwordInputRef.current?.focus();
+                    }, 500);
+                    callback && callback(true);
+                  }
+                  callback && callback(false);
+                } catch (e) {
+                  callback && callback(false);
+                  if (e.message === "invalid_grant") {
+                    eSendEvent(eCloseSheet, "two_factor_verify");
+                    setLoading(false);
+                    setStep(LoginSteps.emailAuth);
+                  }
                 }
+              },
+              mfaInfo,
+              () => {
+                eSendEvent(eCloseSheet, "two_factor_verify");
+                setLoading(false);
+                setStep(LoginSteps.emailAuth);
               }
-            }, mfaInfo);
+            );
           } else {
             finishWithError(new Error(strings.unableToSend2faCode()));
           }