fix: Update password reset form to accept 8-character alphanumeric codes

Critical fix for password reset flow. The frontend form was still configured
for 6-digit numeric codes while the backend was updated to use 8-character
alphanumeric codes.

Changes:
- Updated maxlength from 6 to 8 characters
- Changed pattern from [0-9]{6} to [0-9A-Za-z]{8}
- Updated placeholder from "000000" to "ABC123XY"
- Changed label from "6-Digit Code" to "Reset Code"
- Updated help text to say "8-character code"
- Added uppercase styling for better UX
- Changed button validation from code.length !== 6 to !== 8

This ensures users can enter the full reset code sent via email.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-05 18:21:49 -05:00
parent df92ebefb8
commit c7142ca6a5

View File

@@ -46,19 +46,20 @@
<form v-if="step === 2" @submit.prevent="verifyCode" class="space-y-6">
<div>
<label for="code" class="block text-sm font-medium text-gray-700">
6-Digit Code
Reset Code
</label>
<input
id="code"
v-model="code"
type="text"
required
maxlength="6"
pattern="[0-9]{6}"
placeholder="000000"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-center text-2xl tracking-widest"
maxlength="8"
pattern="[0-9A-Za-z]{8}"
placeholder="ABC123XY"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-center text-2xl tracking-wider uppercase"
style="text-transform: uppercase"
/>
<p class="mt-2 text-xs text-gray-500">Enter the 6-digit code sent to {{ email }}</p>
<p class="mt-2 text-xs text-gray-500">Enter the 8-character code sent to {{ email }}</p>
</div>
<div v-if="error" class="text-red-600 text-sm">
@@ -67,7 +68,7 @@
<button
type="submit"
:disabled="loading || code.length !== 6"
:disabled="loading || code.length !== 8"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
>
{{ loading ? 'Verifying...' : 'Verify Code' }}