From 8e2cfe2c03f29309a14b6097852a706ea82ac147 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 1 May 2025 20:26:49 +0800
Subject: [PATCH 1/2] misc: addressed totp visibility issue

---
 frontend/src/components/auth/Mfa.tsx          | 37 +++++++++++++++++++
 .../middlewares/restrict-login-signup.tsx     |  6 ++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/auth/Mfa.tsx b/frontend/src/components/auth/Mfa.tsx
index 3eff8a89c..762b0d883 100644
--- a/frontend/src/components/auth/Mfa.tsx
+++ b/frontend/src/components/auth/Mfa.tsx
@@ -31,6 +31,25 @@ const codeInputProps = {
   }
 } as const;
 
+const codeInputPropsPhone = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "40px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "40px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+
 type Props = {
   successCallback: () => void | Promise<void>;
   closeMfa?: () => void;
@@ -172,6 +191,24 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
             </div>
           )}
         </div>
+        <div className="mx-auto mt-4 block w-max md:hidden">
+          {method === MfaMethod.EMAIL && (
+            <ReactCodeInput
+              name=""
+              inputMode="tel"
+              type="text"
+              fields={6}
+              onChange={setMfaCode}
+              className="mb-2 mt-2"
+              {...codeInputPropsPhone}
+            />
+          )}
+          {method === MfaMethod.TOTP && (
+            <div className="mb-4 mt-2">
+              <Input value={mfaCode} onChange={(e) => setMfaCode(e.target.value)} />
+            </div>
+          )}
+        </div>
         {typeof triesLeft === "number" && (
           <Error text={`Invalid code. You have ${triesLeft} attempt(s) remaining.`} />
         )}
diff --git a/frontend/src/pages/middlewares/restrict-login-signup.tsx b/frontend/src/pages/middlewares/restrict-login-signup.tsx
index 97ffff752..f85ea44f2 100644
--- a/frontend/src/pages/middlewares/restrict-login-signup.tsx
+++ b/frontend/src/pages/middlewares/restrict-login-signup.tsx
@@ -97,7 +97,11 @@ export const Route = createFileRoute("/_restrict-login-signup")({
     }
 
     if (!data.organizationId) {
-      if (location.pathname.endsWith("select-organization")) return;
+      if (
+        location.pathname.endsWith("select-organization") ||
+        location.pathname.endsWith("verify-email")
+      )
+        return;
       throw redirect({ to: "/login/select-organization" });
     }
     throw redirect({

From a9c1c197f728cad68a89745516410c2b92328993 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 1 May 2025 20:35:29 +0800
Subject: [PATCH 2/2] misc: added min width

---
 frontend/src/components/auth/Mfa.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/auth/Mfa.tsx b/frontend/src/components/auth/Mfa.tsx
index 762b0d883..64c8a5ee6 100644
--- a/frontend/src/components/auth/Mfa.tsx
+++ b/frontend/src/components/auth/Mfa.tsx
@@ -191,7 +191,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
             </div>
           )}
         </div>
-        <div className="mx-auto mt-4 block w-max md:hidden">
+        <div className="mx-auto mt-4 block w-max min-w-[18rem] md:hidden">
           {method === MfaMethod.EMAIL && (
             <ReactCodeInput
               name=""