fix(shadcn): Add SMS description to form

Author: Ehesp

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

@@ -127,6 +127,9 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
           verificationCode: "Verification Code",
           verifyCode: "Verify Code",
         },
+        prompts: {
+          mfaSmsEnrollmentVerificationPrompt: "mfaSmsEnrollmentVerificationPrompt",
+        },
       }),
     });
 
@@ -149,6 +152,10 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
       expect(screen.getByTestId("input-otp")).toBeInTheDocument();
     });
 
+    const description = container.querySelector('[data-slot="form-description"]');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("mfaSmsEnrollmentVerificationPrompt");
+
     expect(screen.getByRole("button", { name: "Verify Code" })).toBeInTheDocument();
   });
 
@@ -196,6 +203,9 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
           verificationCode: "Verification Code",
           verifyCode: "Verify Code",
         },
+        prompts: {
+          mfaSmsEnrollmentVerificationPrompt: "mfaSmsEnrollmentVerificationPrompt",
+        },
       }),
     });
 
@@ -206,7 +216,6 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
       })
     );
 
-    // Fill in display name first
     const displayNameInput = container.querySelector("input[name='displayName']")!;
     fireEvent.change(displayNameInput, { target: { value: "Test User" } });
 
@@ -218,6 +227,10 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
       expect(screen.getByTestId("input-otp")).toBeInTheDocument();
     });
 
+    const description = container.querySelector('[data-slot="form-description"]');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("mfaSmsEnrollmentVerificationPrompt");
+
     const verificationInput = screen.getByTestId("input-otp-slot-0");
     fireEvent.change(verificationInput, { target: { value: "123456" } });
     fireEvent.click(screen.getByRole("button", { name: "Verify Code" }));
@@ -239,6 +252,9 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
           verificationCode: "Verification Code",
           verifyCode: "Verify Code",
         },
+        prompts: {
+          mfaSmsEnrollmentVerificationPrompt: "mfaSmsEnrollmentVerificationPrompt",
+        },
       }),
     });
 
@@ -249,7 +265,6 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
       })
     );
 
-    // Fill in display name first
     const displayNameInput = container.querySelector("input[name='displayName']")!;
     fireEvent.change(displayNameInput, { target: { value: "Test User" } });
 
@@ -261,6 +276,10 @@ describe("<SmsMultiFactorEnrollmentForm />", () => {
       expect(screen.getByTestId("input-otp")).toBeInTheDocument();
     });
 
+    const description = container.querySelector('[data-slot="form-description"]');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("mfaSmsEnrollmentVerificationPrompt");
+
     const verificationInput = screen.getByTestId("input-otp-slot-0");
     fireEvent.change(verificationInput, { target: { value: "123456" } });
     fireEvent.click(screen.getByRole("button", { name: "Verify Code" }));

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

@@ -19,7 +19,7 @@ import {
 import { useForm } from "react-hook-form";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
@@ -136,6 +136,7 @@ export function MultiFactorEnrollmentVerifyPhoneNumberForm(props: MultiFactorEnr
           render={({ field }) => (
             <FormItem>
               <FormLabel>{getTranslation(ui, "labels", "verificationCode")}</FormLabel>
+              <FormDescription>{getTranslation(ui, "prompts", "mfaSmsEnrollmentVerificationPrompt")}</FormDescription>
               <FormControl>
                 <InputOTP maxLength={6} {...field}>
                   <InputOTPGroup>