From c98233ddafb31ab6314d4110d2bcede244873ff0 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Mon, 18 Nov 2024 17:14:21 +0800
Subject: [PATCH] misc: finalized design of totp registration

---
 frontend/src/components/mfa/TotpRegistration.tsx | 16 ++++++++++------
 frontend/src/views/Login/Mfa.tsx                 |  1 +
 .../SecuritySection/MFASection.tsx               |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/mfa/TotpRegistration.tsx b/frontend/src/components/mfa/TotpRegistration.tsx
index 59d4914f5..d9d73748f 100644
--- a/frontend/src/components/mfa/TotpRegistration.tsx
+++ b/frontend/src/components/mfa/TotpRegistration.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import QRCode from "qrcode";
+import { twMerge } from "tailwind-merge";
 
 import { useGetUserTotpRegistration } from "@app/hooks/api";
 import { useVerifyUserTotpRegistration } from "@app/hooks/api/users/mutation";
@@ -9,9 +10,10 @@ import { Button, ContentLoader, Input } from "../v2";
 
 type Props = {
   onComplete?: () => Promise<void>;
+  shouldCenterQr?: boolean;
 };
 
-const TotpRegistration = ({ onComplete }: Props) => {
+const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
   const { data: registration, isLoading } = useGetUserTotpRegistration();
   const { mutateAsync: verifyUserTotp, isLoading: isVerifyLoading } =
     useVerifyUserTotpRegistration();
@@ -48,16 +50,18 @@ const TotpRegistration = ({ onComplete }: Props) => {
   if (isLoading) {
     return <ContentLoader />;
   }
+
   return (
-    <div className="flex max-w-sm flex-col text-bunker-200">
-      <div className="mb-4 text-center">
-        Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR code.
+    <div className="flex max-w-lg flex-col text-bunker-200">
+      <div className="mb-8">
+        1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
+        code.
       </div>
-      <div className="mb-10 flex items-center justify-center">
+      <div className={twMerge("mb-8 flex items-center", shouldCenterQr && "justify-center")}>
         <img src={qrCodeUrl} alt="registration-qr" />
       </div>
       <form onSubmit={handleTotpVerify}>
-        <div className="mb-4 text-center">Enter the resulting verification code</div>
+        <div className="mb-4">2. Enter the resulting verification code</div>
         <div className="mb-4 flex flex-row gap-2">
           <Input
             onChange={(e) => setTotp(e.target.value)}
diff --git a/frontend/src/views/Login/Mfa.tsx b/frontend/src/views/Login/Mfa.tsx
index d49455190..ce8442a69 100644
--- a/frontend/src/views/Login/Mfa.tsx
+++ b/frontend/src/views/Login/Mfa.tsx
@@ -118,6 +118,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         </div>
         <div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
           <TotpRegistration
+            shouldCenterQr
             onComplete={async () => {
               setShouldShowTotpRegistration(false);
               await successCallback();
diff --git a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
index 221b51e82..f27bf65dd 100644
--- a/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx
@@ -203,7 +203,7 @@ export const MFASection = () => {
                   For added security, you can configure a mobile authenticator and set it as your
                   selected 2FA method.
                 </div>
-                <div className="mt-6 flex min-w-full justify-center">
+                <div className="ml-6 mt-6 flex min-w-full">
                   <TotpRegistration
                     onComplete={async () => {
                       await queryClient.invalidateQueries(userKeys.totpConfiguration);