Parcourir la source

feat: register modal with green tint backdrop

neyrogovnarik il y a 1 mois
Parent
commit
b8d98c3bd2

+ 6 - 3
frontend/src/components/Header.tsx

@@ -4,10 +4,12 @@ import { useState } from 'react'
 import Link from 'next/link'
 import { useAuth } from '@/hooks/useAuth'
 import LoginModal from './LoginModal'
+import RegisterModal from './RegisterModal'
 
 export default function Header() {
   const { user, isLoading, logout } = useAuth()
   const [showLogin, setShowLogin] = useState(false)
+  const [showRegister, setShowRegister] = useState(false)
 
   return (
     <header className="absolute left-0 right-0 top-0 z-30 flex items-center justify-between px-4 py-3">
@@ -29,18 +31,19 @@ export default function Header() {
         ) : (
           <>
             {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
+            {showRegister && <RegisterModal onClose={() => setShowRegister(false)} />}
             <button
               onClick={() => setShowLogin(true)}
               className="rounded-lg bg-white/10 backdrop-blur-md px-4 py-2 text-sm text-white hover:bg-white/20 transition"
             >
               Войти
             </button>
-            <Link
-              href="/auth/register"
+            <button
+              onClick={() => setShowRegister(true)}
               className="rounded-lg bg-green-600 px-4 py-2 text-sm text-white hover:bg-green-500 transition"
             >
               Регистрация
-            </Link>
+            </button>
           </>
         )}
       </nav>

+ 0 - 1
frontend/src/components/LoginModal.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import { useAuth } from '@/hooks/useAuth'
-import { useRouter } from 'next/navigation'
 
 export default function LoginModal({ onClose }: { onClose: () => void }) {
   const router = useRouter()

+ 72 - 0
frontend/src/components/RegisterModal.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useState } from 'react'
+import { useAuth } from '@/hooks/useAuth'
+
+export default function RegisterModal({ onClose }: { onClose: () => void }) {
+  const { register } = useAuth()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [role, setRole] = useState('customer')
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await register(email, password, role)
+      onClose()
+    } catch (err: any) {
+      setError(err.message || 'Registration failed')
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <form
+        onSubmit={handleSubmit}
+        onClick={(e) => e.stopPropagation()}
+        className="w-full max-w-sm space-y-4 rounded-2xl bg-green-600/15 p-8 backdrop-blur-md"
+      >
+        <h1 className="text-center text-2xl font-bold text-white">Регистрация</h1>
+
+        {error && <p className="text-sm text-red-400">{error}</p>}
+
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/40 outline-none focus:border-green-500"
+          required
+        />
+
+        <input
+          type="password"
+          placeholder="Пароль"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/40 outline-none focus:border-green-500"
+          required
+          minLength={6}
+        />
+
+        <select
+          value={role}
+          onChange={(e) => setRole(e.target.value)}
+          className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white outline-none focus:border-green-500"
+        >
+          <option value="customer">Заказчик (ищу места)</option>
+          <option value="landlord">Арендодатель (сдаю студию)</option>
+          <option value="executor">Исполнитель (предлагаю услуги)</option>
+        </select>
+
+        <button
+          type="submit"
+          className="w-full rounded-lg bg-green-600 px-4 py-3 font-medium text-white hover:bg-green-500 transition"
+        >
+          Зарегистрироваться
+        </button>
+      </form>
+    </div>
+  )
+}