first commit

apps/frontend/app/auth/register/page.tsx

@@ -0,0 +1,82 @@
+'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>
+  );
+}