feat : updae

components/auth/registration-otp-form.tsx

@@ -3,11 +3,13 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useRef, useState, type FormEvent } from "react";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { authClient } from "@/lib/auth/client";
 
 export function RegistrationOtpForm({ email, nextPath, setup }: {
@@ -66,8 +68,12 @@ export function RegistrationOtpForm({ email, nextPath, setup }: {
             <Input ref={emailRef} id="otp-email" name="email" type="email" defaultValue={email} autoComplete="email" required disabled={busy || sending} />
           </Field>
           <Field><FieldLabel htmlFor="otp-code">รหัส OTP</FieldLabel>
-            <Input id="otp-code" name="otp" inputMode="numeric" autoComplete="one-time-code"
-              pattern="[0-9]{6}" minLength={6} maxLength={6} required disabled={busy || sending} />
+            <InputOTP id="otp-code" name="otp" containerClassName="w-full" inputMode="numeric" autoComplete="one-time-code"
+              pattern={REGEXP_ONLY_DIGITS} minLength={6} maxLength={6} required disabled={busy || sending}>
+              <InputOTPGroup className="w-full">
+                {Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} className="flex-1" />)}
+              </InputOTPGroup>
+            </InputOTP>
           </Field>
           <Button type="submit" disabled={busy || sending}>{busy ? "กำลังยืนยัน..." : "ยืนยันอีเมล"}</Button>
         </FieldGroup>