feat(react): Add TOTP description improve layout

Author: Ehesp

packages/react/src/auth/forms/mfa/totp-multi-factor-enrollment-form.test.tsx

@@ -171,6 +171,7 @@ describe("<MultiFactorEnrollmentVerifyTotpForm />", () => {
         },
         prompts: {
           mfaTotpQrCodePrompt: "Scan this QR code with your authenticator app",
+          mfaTotpEnrollmentVerificationPrompt: "Add the code generated by your authenticator app",
         },
       }),
     });
@@ -189,6 +190,10 @@ describe("<MultiFactorEnrollmentVerifyTotpForm />", () => {
 
     expect(screen.getByRole("textbox", { name: /verificationCode/i })).toBeInTheDocument();
 
+    const description = container.querySelector("[data-input-description]");
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("Add the code generated by your authenticator app");
+
     const verifyCodeButton = screen.getByRole("button", { name: "verifyCode" });
     expect(verifyCodeButton).toBeInTheDocument();
     expect(verifyCodeButton).toHaveAttribute("type", "submit");

packages/react/src/auth/forms/mfa/totp-multi-factor-enrollment-form.tsx

@@ -155,12 +155,19 @@ export function MultiFactorEnrollmentVerifyTotpForm(props: MultiFactorEnrollment
     >
       <div className="fui-qr-code-container">
         <img src={qrCodeDataUrl} alt="TOTP QR Code" />
+        <code>{props.secret.secretKey.toString()}</code>
         <p>{getTranslation(ui, "prompts", "mfaTotpQrCodePrompt")}</p>
       </div>
       <form.AppForm>
         <fieldset>
           <form.AppField name="verificationCode">
-            {(field) => <field.Input label={getTranslation(ui, "labels", "verificationCode")} type="text" />}
+            {(field) => (
+              <field.Input
+                label={getTranslation(ui, "labels", "verificationCode")}
+                type="text"
+                description={getTranslation(ui, "prompts", "mfaTotpEnrollmentVerificationPrompt")}
+              />
+            )}
           </form.AppField>
         </fieldset>
         <fieldset>

packages/styles/src/base.css

@@ -84,7 +84,6 @@
 
   :where(.fui-content) {
     @apply space-y-2;
-    
   }
 
   :where(.fui-card) {
@@ -140,6 +139,10 @@
     @apply flex items-center gap-2;
   }
 
+  :where(.fui-form .fui-qr-code-container) {
+    @apply flex flex-col items-center gap-4 text-text-muted text-xs;
+  }
+
   :where(.fui-error) {
     @apply text-error text-left text-xs;
   }

packages/translations/src/locales/en-us.ts

@@ -103,5 +103,6 @@ export const enUS = {
     mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
     mfaTotpQrCodePrompt: "Scan this QR code with your authenticator app",
     mfaSmsEnrollmentVerificationPrompt: "Enter the verification code sent to your phone number",
+    mfaTotpEnrollmentVerificationPrompt: "Add the code generated by your authenticator app",
   },
 } satisfies Translations;

packages/translations/src/types.ts

@@ -109,5 +109,6 @@ export type Translations = {
     mfaAssertionFactorPrompt?: string;
     mfaTotpQrCodePrompt?: string;
     mfaSmsEnrollmentVerificationPrompt?: string;
+    mfaTotpEnrollmentVerificationPrompt?: string;
   };
 };