fix: registration form — phone mask, required fields, snake_case body
- Address and phone now required (frontend + backend) - Phone input mask: +7 (XXX) XXX-XX-XX - Fix Bad Request: register body now sends snake_case keys (req() converts camelCase→snake_case, backend schema updated to match) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -285,6 +285,21 @@ function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
|
||||
)
|
||||
}
|
||||
|
||||
// ── Phone mask helper ──────────────────────────────────────────────────────────
|
||||
function formatPhone(raw: string): string {
|
||||
const digits = raw.replace(/\D/g, '')
|
||||
// Normalize: leading 8 or 7 → keep as +7, otherwise prepend 7
|
||||
const d = digits.startsWith('8') ? '7' + digits.slice(1)
|
||||
: digits.startsWith('7') ? digits
|
||||
: digits.length ? '7' + digits : ''
|
||||
let result = '+7'
|
||||
if (d.length > 1) result += ' (' + d.slice(1, Math.min(4, d.length))
|
||||
if (d.length >= 4) result += ') ' + d.slice(4, Math.min(7, d.length))
|
||||
if (d.length >= 7) result += '-' + d.slice(7, Math.min(9, d.length))
|
||||
if (d.length >= 9) result += '-' + d.slice(9, Math.min(11, d.length))
|
||||
return result
|
||||
}
|
||||
|
||||
// ── Register form ──────────────────────────────────────────────────────────────
|
||||
function RegisterForm({ onSwitch }: { onSwitch: () => void }) {
|
||||
const [done, setDone] = useState(false)
|
||||
@@ -300,14 +315,24 @@ function RegisterForm({ onSwitch }: { onSwitch: () => void }) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
|
||||
const handlePhoneChange = (raw: string) => {
|
||||
// Allow clearing
|
||||
if (raw === '' || raw === '+') { setPhone(''); return }
|
||||
setPhone(formatPhone(raw))
|
||||
setErrors(prev => ({ ...prev, phone: '' }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const err: Record<string, string> = {}
|
||||
if (!hotelName.trim()) err.hotelName = 'Введите название отеля'
|
||||
if (!contact.trim()) err.contact = 'Введите контактное лицо'
|
||||
if (!email.trim()) err.email = 'Введите email'
|
||||
if (!hotelName.trim()) err.hotelName = 'Введите название отеля'
|
||||
if (!address.trim()) err.address = 'Введите адрес отеля'
|
||||
if (!contact.trim()) err.contact = 'Введите контактное лицо'
|
||||
if (!email.trim()) err.email = 'Введите email'
|
||||
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) err.email = 'Некорректный email'
|
||||
if (password.length < 8) err.password = 'Минимум 8 символов'
|
||||
const phoneDigits = phone.replace(/\D/g, '')
|
||||
if (phoneDigits.length < 11) err.phone = 'Введите полный номер телефона'
|
||||
if (password.length < 8) err.password = 'Минимум 8 символов'
|
||||
else if (!/[a-zA-Zа-яА-ЯёЁ]/.test(password)) err.password = 'Пароль должен содержать хотя бы одну букву'
|
||||
if (!agreed) err.agreed = 'Необходимо принять пользовательское соглашение'
|
||||
setErrors(err)
|
||||
@@ -366,12 +391,13 @@ function RegisterForm({ onSwitch }: { onSwitch: () => void }) {
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Адрес" error={errors.address}>
|
||||
<Field label="Адрес *" error={errors.address}>
|
||||
<input
|
||||
type="text" className="input"
|
||||
type="text"
|
||||
className={cn('input', errors.address && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="г. Москва, ул. Примерная, д. 1"
|
||||
value={address}
|
||||
onChange={e => setAddress(e.target.value)}
|
||||
onChange={e => { setAddress(e.target.value); setErrors(prev => ({ ...prev, address: '' })) }}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@@ -396,12 +422,16 @@ function RegisterForm({ onSwitch }: { onSwitch: () => void }) {
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Телефон" error={errors.phone}>
|
||||
<Field label="Телефон *" error={errors.phone}>
|
||||
<input
|
||||
type="tel" className="input"
|
||||
type="tel"
|
||||
className={cn('input', errors.phone && 'border-red-400 focus:ring-red-400')}
|
||||
placeholder="+7 (999) 000-00-00"
|
||||
value={phone}
|
||||
onChange={e => setPhone(e.target.value)}
|
||||
onChange={e => handlePhoneChange(e.target.value)}
|
||||
onFocus={() => { if (!phone) setPhone('+7 (') }}
|
||||
onBlur={() => { if (phone === '+7 (' || phone === '+7') setPhone('') }}
|
||||
inputMode="tel"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user