268 lines
8.5 KiB
TypeScript
268 lines
8.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useCallback } from 'react';
|
|
import { useRegisterForm } from '../lib/useRegisterForm';
|
|
import { formatPhone, normalizeDigits } from '@/shared/lib/formatPhone';
|
|
import PhonePrefix from '@/shared/ui/phonePrefix';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
|
|
|
|
function Field({
|
|
id,
|
|
label,
|
|
type = 'text',
|
|
placeholder,
|
|
value,
|
|
name,
|
|
onChange,
|
|
error,
|
|
}: {
|
|
id: string;
|
|
label: string;
|
|
type?: string;
|
|
placeholder?: string;
|
|
value: string;
|
|
name: string;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
error?: string;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label
|
|
htmlFor={id}
|
|
className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
|
|
>
|
|
{label}
|
|
</label>
|
|
<input
|
|
id={id}
|
|
name={name}
|
|
type={type}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={onChange}
|
|
autoComplete="off"
|
|
className={`
|
|
w-full rounded-sm border bg-stone-50 px-3.5 py-2.5
|
|
font-sans text-[0.95rem] text-stone-900 outline-none
|
|
placeholder:text-stone-300
|
|
transition-all duration-150
|
|
focus:border-stone-400 focus:ring-2 focus:ring-stone-300/30
|
|
${
|
|
error
|
|
? 'border-red-400 ring-2 ring-red-200/40'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}
|
|
`}
|
|
/>
|
|
{error && (
|
|
<span className="text-[0.7rem] text-red-500 tracking-tight">
|
|
{error}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function RegisterFormUI() {
|
|
const [phone, setPhone] = React.useState('');
|
|
const t = useTranslations('Auth.Register');
|
|
const t_login = useTranslations('Auth.Login');
|
|
const tCommon = useTranslations('Common');
|
|
const {
|
|
registerData,
|
|
errors,
|
|
loading,
|
|
success,
|
|
handleChange,
|
|
handleOferta,
|
|
handleSubmit,
|
|
setItem,
|
|
} = useRegisterForm();
|
|
const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
|
|
const toggleRegisterModal = useRegisterModal(
|
|
(state) => state.toggleRegisterModal,
|
|
);
|
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
const handlePhoneChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setPhone(normalizeDigits(e.target.value));
|
|
if (normalizeDigits(e.target.value).length === 9)
|
|
setItem('phone', `998${phone}`);
|
|
},
|
|
[setPhone],
|
|
);
|
|
|
|
if (errors) {
|
|
console.log('Validation errors:', errors);
|
|
}
|
|
|
|
// ── Success state ──────────────────────────────────────
|
|
if (success) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-stone-100 p-8">
|
|
<div className="w-full max-w-sm rounded border border-stone-200 bg-white px-10 py-16 text-center shadow-sm">
|
|
<div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-50 text-2xl text-emerald-600">
|
|
✓
|
|
</div>
|
|
<h2 className="mb-1 font-serif text-2xl text-stone-900">
|
|
{t('successTitle')}
|
|
</h2>
|
|
<p className="text-sm text-stone-400">{t('successMessage')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Form ───────────────────────────────────────────────
|
|
return (
|
|
<div className="w-full">
|
|
{/* Header */}
|
|
<p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
|
|
{t('headerLabel')}
|
|
</p>
|
|
<h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="mb-8 text-sm text-stone-400">{t('description')}</p>
|
|
|
|
<form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
|
|
{/* Name + Surname row */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Field
|
|
id="name"
|
|
name="name"
|
|
label="Name"
|
|
placeholder={t('namePlaceholder')}
|
|
value={registerData.name}
|
|
onChange={handleChange}
|
|
error={errors.name}
|
|
/>
|
|
<Field
|
|
id="surname"
|
|
name="surname"
|
|
label="Surname"
|
|
placeholder={t('surnamePlaceholder')}
|
|
value={registerData.surname}
|
|
onChange={handleChange}
|
|
error={errors.surname}
|
|
/>
|
|
</div>
|
|
|
|
{/* Phone */}
|
|
<div>
|
|
<label
|
|
htmlFor="phone"
|
|
className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
|
|
>
|
|
{t('phoneLabel')}
|
|
</label>
|
|
<div
|
|
className={`relative transition-transform duration-200 ${isFocused ? 'scale-[1.01]' : ''}`}
|
|
>
|
|
<PhonePrefix isFocused={isFocused} />
|
|
<input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder={t('phonePlaceholder')}
|
|
value={formatPhone(phone)}
|
|
onChange={handlePhoneChange}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={() => setIsFocused(false)}
|
|
className={`
|
|
w-full rounded-sm border bg-stone-50 py-2.5 pl-30 pr-3.5
|
|
text-[0.95rem] font-medium text-stone-900 outline-none
|
|
placeholder:text-stone-300 transition-all duration-150
|
|
${
|
|
isFocused
|
|
? 'border-stone-400 ring-2 ring-stone-300/30'
|
|
: 'border-stone-200 hover:border-stone-300'
|
|
}
|
|
`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Digit counter / complete hint */}
|
|
<div className="flex items-center justify-between px-0.5">
|
|
<span className="text-[0.7rem] text-stone-400">
|
|
{phone.length > 0 && t('digitsEntered', { count: phone.length })}
|
|
</span>
|
|
{phone.length === 9 && (
|
|
<span className="text-[0.7rem] font-medium text-emerald-600">
|
|
{tCommon('complete')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Terms checkbox */}
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex items-start gap-2.5">
|
|
<input
|
|
type="checkbox"
|
|
id="oferta"
|
|
checked={!!registerData.oferta}
|
|
onChange={handleOferta}
|
|
className="mt-0.5 h-4 w-4 shrink-0 cursor-pointer accent-stone-700"
|
|
/>
|
|
<label
|
|
htmlFor="oferta"
|
|
className="cursor-pointer text-[0.78rem] leading-relaxed text-stone-500"
|
|
>
|
|
{t('terms')}
|
|
</label>
|
|
</div>
|
|
{errors.oferta && (
|
|
<p className="text-[0.7rem] text-red-500">{errors.oferta}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="
|
|
mt-1 w-full rounded-sm bg-stone-900 py-3
|
|
text-[0.82rem] font-semibold uppercase tracking-widest text-stone-100
|
|
transition-all duration-150
|
|
hover:bg-stone-800 active:scale-[0.99]
|
|
disabled:cursor-not-allowed disabled:opacity-40
|
|
"
|
|
>
|
|
{loading ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
|
|
{tCommon('submitting')}
|
|
</span>
|
|
) : (
|
|
t('submitButton')
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
{/* Divider */}
|
|
<div className="relative flex items-center gap-3 py-1">
|
|
<span className="h-px flex-1 bg-stone-200" />
|
|
<span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
|
|
{tCommon('or')}
|
|
</span>
|
|
<span className="h-px flex-1 bg-stone-200" />
|
|
</div>
|
|
|
|
{/* Register hint */}
|
|
<p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
|
|
{t('loginPrompt')}
|
|
<p
|
|
onClick={() => {
|
|
toggleLoginModal();
|
|
toggleRegisterModal();
|
|
}}
|
|
className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
|
|
>
|
|
{t_login('title')}
|
|
</p>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|