فهرست منبع

add name field and password confirmation to registration forms

neyrogovnarik 1 ماه پیش
والد
کامیت
c92a55b558
3فایلهای تغییر یافته به همراه53 افزوده شده و 5 حذف شده
  1. 25 1
      frontend/src/app/auth/register/page.tsx
  2. 25 1
      frontend/src/components/RegisterModal.tsx
  3. 3 3
      frontend/src/hooks/useAuth.tsx

+ 25 - 1
frontend/src/app/auth/register/page.tsx

@@ -13,15 +13,21 @@ import Link from 'next/link'
 export default function RegisterPage() {
   const router = useRouter()
   const { register } = useAuth()
+  const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
   const [role, setRole] = useState('customer')
   const [error, setError] = useState('')
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+    if (password !== confirmPassword) {
+      setError('Пароли не совпадают')
+      return
+    }
     try {
-      await register(email, password, role)
+      await register(email, password, role, name || undefined)
       router.push('/')
     } catch (err: any) {
       setError(err.message || 'Registration failed')
@@ -35,6 +41,14 @@ export default function RegisterPage() {
 
         {error && <p className="text-sm text-red-400">{error}</p>}
 
+        <input
+          type="text"
+          placeholder="Имя"
+          value={name}
+          onChange={(e) => setName(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"
+        />
+
         <input
           type="email"
           placeholder="Email"
@@ -54,6 +68,16 @@ export default function RegisterPage() {
           minLength={8}
         />
 
+        <input
+          type="password"
+          placeholder="Повторите пароль"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(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={8}
+        />
+
         <select
           value={role}
           onChange={(e) => setRole(e.target.value)}

+ 25 - 1
frontend/src/components/RegisterModal.tsx

@@ -5,8 +5,10 @@ import { useAuth } from '@/hooks/useAuth'
 
 export default function RegisterModal({ onClose }: { onClose: () => void }) {
   const { register } = useAuth()
+  const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
   const [role, setRole] = useState('customer')
   const [error, setError] = useState('')
   const [success, setSuccess] = useState(false)
@@ -19,8 +21,12 @@ export default function RegisterModal({ onClose }: { onClose: () => void }) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+    if (password !== confirmPassword) {
+      setError('Пароли не совпадают')
+      return
+    }
     try {
-      await register(email, password, role)
+      await register(email, password, role, name || undefined)
       setSuccess(true)
     } catch (err: any) {
       setError(err.message || 'Registration failed')
@@ -44,6 +50,14 @@ export default function RegisterModal({ onClose }: { onClose: () => void }) {
 
             {error && <p className="text-sm text-red-400">{error}</p>}
 
+            <input
+              type="text"
+              placeholder="Имя"
+              value={name}
+              onChange={(e) => setName(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"
+            />
+
             <input
               type="email"
               placeholder="Email"
@@ -63,6 +77,16 @@ export default function RegisterModal({ onClose }: { onClose: () => void }) {
               minLength={8}
             />
 
+            <input
+              type="password"
+              placeholder="Повторите пароль"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(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={8}
+            />
+
             <select
               value={role}
               onChange={(e) => setRole(e.target.value)}

+ 3 - 3
frontend/src/hooks/useAuth.tsx

@@ -17,7 +17,7 @@ interface AuthState {
   user: User | null
   isLoading: boolean
   login: (email: string, password: string) => Promise<void>
-  register: (email: string, password: string, role: string) => Promise<void>
+  register: (email: string, password: string, role: string, name?: string) => Promise<void>
   logout: () => Promise<void>
   refreshSession: () => Promise<void>
 }
@@ -53,8 +53,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setUser(res.user)
   }, [])
 
-  const register = useCallback(async (email: string, password: string, role: string) => {
-    const res = await api.post<{ user: User; access_token: string }>('/auth/register', { email, password, role })
+  const register = useCallback(async (email: string, password: string, role: string, name?: string) => {
+    const res = await api.post<{ user: User; access_token: string }>('/auth/register', { email, password, role, name })
     setAccessToken(res.access_token)
     setUser(res.user)
   }, [])