fix(*): Add mfaTotpQrCodePrompt translation

Author: Ehesp

packages/angular/src/lib/auth/forms/mfa/totp-multi-factor-enrollment-form.spec.ts

@@ -55,6 +55,9 @@ describe("<fui-totp-multi-factor-enrollment-form />", () => {
           verificationCode: "Verification Code",
           verifyCode: "Verify Code",
         },
+        prompts: {
+          mfaTotpQrCodePrompt: "Scan this QR code with your authenticator app",
+        },
         errors: {
           unknownError: "An unknown error occurred",
         },
@@ -148,7 +151,7 @@ describe("<fui-totp-multi-factor-enrollment-form />", () => {
     fixture.detectChanges();
 
     expect(screen.getByAltText("TOTP QR Code")).toBeInTheDocument();
-    expect(screen.getByText("TODO: Scan this QR code with your authenticator app")).toBeInTheDocument();
+    expect(screen.getByText("Scan this QR code with your authenticator app")).toBeInTheDocument();
     expect(screen.getByLabelText("Verification Code")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Verify Code" })).toBeInTheDocument();
   });

packages/angular/src/lib/auth/forms/mfa/totp-multi-factor-enrollment-form.ts

@@ -134,7 +134,7 @@ export class TotpMultiFactorSecretGenerationFormComponent {
   template: `
     <div class="fui-qr-code-container">
       <img [src]="qrCodeDataUrl()" alt="TOTP QR Code" />
-      <p>TODO: Scan this QR code with your authenticator app</p>
+      <p>{{ mfaTotpQrCodePrompt() }}</p>
     </div>
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
@@ -165,6 +165,7 @@ export class TotpMultiFactorVerificationFormComponent {
 
   verificationCodeLabel = injectTranslation("labels", "verificationCode");
   verifyCodeLabel = injectTranslation("labels", "verifyCode");
+  mfaTotpQrCodePrompt = injectTranslation("prompts", "mfaTotpQrCodePrompt");
   unknownErrorLabel = injectTranslation("errors", "unknownError");
 
   form = injectForm({

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

@@ -169,6 +169,9 @@ describe("<MultiFactorEnrollmentVerifyTotpForm />", () => {
           verificationCode: "verificationCode",
           verifyCode: "verifyCode",
         },
+        prompts: {
+          mfaTotpQrCodePrompt: "Scan this QR code with your authenticator app",
+        },
       }),
     });
 
@@ -192,6 +195,7 @@ describe("<MultiFactorEnrollmentVerifyTotpForm />", () => {
 
     expect(container.querySelector(".fui-qr-code-container")).toBeInTheDocument();
     expect(container.querySelector("img[alt='TOTP QR Code']")).toBeInTheDocument();
+    expect(screen.getByText("Scan this QR code with your authenticator app")).toBeInTheDocument();
   });
 });
 

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

@@ -155,7 +155,7 @@ export function MultiFactorEnrollmentVerifyTotpForm(props: MultiFactorEnrollment
     >
       <div className="fui-qr-code-container">
         <img src={qrCodeDataUrl} alt="TOTP QR Code" />
-        <p>TODO: Scan this QR code with your authenticator app</p>
+        <p>{getTranslation(ui, "prompts", "mfaTotpQrCodePrompt")}</p>
       </div>
       <form.AppForm>
         <fieldset>

packages/shadcn/src/components/totp-multi-factor-enrollment-form.test.tsx

@@ -87,6 +87,9 @@ describe("<TotpMultiFactorEnrollmentForm />", () => {
           verificationCode: "Verification Code",
           verifyCode: "Verify Code",
         },
+        prompts: {
+          mfaTotpQrCodePrompt: "Scan this QR code with your authenticator app",
+        },
       }),
     });
 
@@ -104,6 +107,7 @@ describe("<TotpMultiFactorEnrollmentForm />", () => {
       expect(screen.getByTestId("input-otp-slot-0")).toBeInTheDocument();
     });
 
+    expect(screen.getByText("Scan this QR code with your authenticator app")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Verify Code" })).toBeInTheDocument();
   });
 

packages/shadcn/src/components/totp-multi-factor-enrollment-form.tsx

@@ -108,7 +108,7 @@ export function MultiFactorEnrollmentVerifyTotpForm(props: MultiFactorEnrollment
         <div className="border rounded-lg p-4">
           <img src={qrCodeDataUrl} alt="TOTP QR Code" className="mx-auto" />
           <p className="text-sm text-muted-foreground text-center mt-2">
-            Scan this QR code with your authenticator app
+            {getTranslation(ui, "prompts", "mfaTotpQrCodePrompt")}
           </p>
         </div>
       </div>

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

@@ -99,5 +99,6 @@ export const enUS = {
     mfaEnrollmentPrompt: "Select a new multi-factor enrollment method",
     mfaAssertionPrompt: "Please complete the multi-factor authentication process",
     mfaAssertionFactorPrompt: "Please choose a multi-factor authentication method",
+    mfaTotpQrCodePrompt: "Scan this QR code with your authenticator app",
   },
 } satisfies Translations;

packages/translations/src/types.ts

@@ -105,5 +105,6 @@ export type Translations = {
     mfaEnrollmentPrompt?: string;
     mfaAssertionPrompt?: string;
     mfaAssertionFactorPrompt?: string;
+    mfaTotpQrCodePrompt?: string;
   };
 };