Sotoontech/Vitron-Front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(auth): 6-digit OTP in LoginRequiredDialog

Browse Source 
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
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/LoginRequiredDialog.tsx
View File

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