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:
2026-03-30 11:23:24 +03:00
parent 0088457f51
commit 1970afdd13
3 changed files with 62 additions and 24 deletions

View File

@@ -175,13 +175,21 @@ export const api = {
register: (data: {
hotelName: string
address?: string
address: string
contact: string
email: string
phone?: string
phone: string
password: string
}) =>
req<{ ok: boolean; message: string }>('POST', '/api/auth/register', data),
// Snake_case вручную — req() конвертирует camelCase→snake_case автоматически
req<{ ok: boolean; message: string }>('POST', '/api/auth/register', {
hotel_name: data.hotelName,
address: data.address,
contact: data.contact,
email: data.email,
phone: data.phone,
password: data.password,
}),
forgotPassword: (email: string) =>
req<{ ok: boolean }>('POST', '/api/auth/forgot-password', { email }),

View File

@@ -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>