fix(auth): 6-digit OTP in LoginRequiredDialog

The login-required popup still rendered a 4-slot OTP (maxLength=4, gated on
length===4) while the main login page already used 6. Users who triggered
login via the dialog saw the old 4-digit code. Match login.tsx: 6 slots,
length===6, same slot sizing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Arda Samadi 2026-06-18 17:53:01 +03:30
parent b4d5f8d8db
commit 501cf28b9a

View File

@ -166,7 +166,7 @@ export function LoginRequiredDialog({
</div>
<div className="w-full flex justify-center">
<InputOTP
maxLength={4}
maxLength={6}
onComplete={(finalValue) => {
const convertedValue = convertPersianToEnglish(finalValue);
setOtpValue(convertedValue);
@ -177,17 +177,19 @@ export function LoginRequiredDialog({
setOtpValue(convertedValue);
}}
>
<InputOTPGroup dir="ltr" className="gap-4">
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPGroup dir="ltr" className="gap-1.5 sm:gap-3">
<InputOTPSlot index={0} className="!w-9 sm:!w-12" />
<InputOTPSlot index={1} className="!w-9 sm:!w-12" />
<InputOTPSlot index={2} className="!w-9 sm:!w-12" />
<InputOTPSlot index={3} className="!w-9 sm:!w-12" />
<InputOTPSlot index={4} className="!w-9 sm:!w-12" />
<InputOTPSlot index={5} className="!w-9 sm:!w-12" />
</InputOTPGroup>
</InputOTP>
</div>
<div className="gap-3 w-full flex flex-col items-center">
<Button
disabled={verifyOtpMutation.isPending || !(otpValue.length === 4)}
disabled={verifyOtpMutation.isPending || !(otpValue.length === 6)}
className="w-full"
size="xl"
variant="dark"