83 lines
4.0 KiB
TypeScript
83 lines
4.0 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { FormEvent, useState } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { ShieldCheck } from 'lucide-react';
|
||
import { BrandLogo } from '@/components/id/brand-logo';
|
||
import { useAuth } from '@/components/id/auth-provider';
|
||
import { useToast } from '@/components/id/toast-provider';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { PhoneInput, phoneCountries, toE164 } from '@/components/ui/phone-input';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
|
||
export default function RegisterPage() {
|
||
const router = useRouter();
|
||
const { sendLoginOtp } = useAuth();
|
||
const { showToast } = useToast();
|
||
const [authTab, setAuthTab] = useState<'email' | 'phone'>('email');
|
||
const [email, setEmail] = useState('');
|
||
const [phoneNumber, setPhoneNumber] = useState('');
|
||
const [country, setCountry] = useState(phoneCountries[0]);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||
event.preventDefault();
|
||
setIsSubmitting(true);
|
||
try {
|
||
const recipient = authTab === 'email' ? email.trim() : toE164(country, phoneNumber);
|
||
await sendLoginOtp(recipient);
|
||
showToast('Код отправлен. Подтвердите его на экране входа.');
|
||
router.push('/auth/login');
|
||
} catch (error) {
|
||
showToast(error instanceof Error ? error.message : 'Не удалось отправить код');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_center,#5d6578_0%,#2c2736_48%,#111016_100%)] px-5">
|
||
<section className="w-full max-w-[430px] rounded-[34px] bg-[#1f2028] px-9 py-10 text-white shadow-2xl">
|
||
<div className="flex flex-col items-center text-center">
|
||
<BrandLogo size="lg" variant="light" />
|
||
<h1 className="mt-8 text-xl font-bold">Создайте ID</h1>
|
||
<p className="mt-2 text-sm text-[#b9bdc9]">Введите почту или телефон. Пароль не нужен.</p>
|
||
</div>
|
||
<form className="mt-8 space-y-3" onSubmit={handleSubmit}>
|
||
<Tabs value={authTab} onValueChange={(value) => setAuthTab(value as 'email' | 'phone')} className="w-full">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="email">Почта</TabsTrigger>
|
||
<TabsTrigger value="phone">Телефон</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="email">
|
||
<Input
|
||
className="h-[56px] border-[#555762] bg-transparent text-white placeholder:text-[#8f92a0]"
|
||
placeholder="name@example.com"
|
||
type="email"
|
||
value={email}
|
||
onChange={(event) => setEmail(event.target.value)}
|
||
required={authTab === 'email'}
|
||
/>
|
||
</TabsContent>
|
||
<TabsContent value="phone">
|
||
<PhoneInput country={country} value={phoneNumber} onCountryChange={setCountry} onValueChange={setPhoneNumber} />
|
||
</TabsContent>
|
||
</Tabs>
|
||
<Button variant="white" size="lg" className="w-full rounded-[18px]" disabled={isSubmitting}>
|
||
{isSubmitting ? 'Отправляем...' : 'Получить код'}
|
||
</Button>
|
||
</form>
|
||
<div className="mt-5 flex items-start gap-3 rounded-[22px] bg-[#2a2c36] p-4 text-sm">
|
||
<ShieldCheck className="mt-0.5 h-5 w-5 text-[#8ec5ff]" />
|
||
<p>Первый зарегистрированный пользователь автоматически станет суперадминистратором.</p>
|
||
</div>
|
||
<Button asChild variant="ghost" className="mt-5 w-full text-white hover:bg-[#2a2c36]">
|
||
<Link href="/auth/login">У меня уже есть ID</Link>
|
||
</Button>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|