Init

src/Registration.js

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import Header from './Header';
+
+const Registration = () => {
+    const navigate = useNavigate();
+    const [username, setuserName] = useState('');
+    const [display_name, setdisplayName] = useState('');
+    const [password, setPassword] = useState('');
+    const [password_confirm, setPassword_confirm] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    
+    // Добавление пользователя
+    const addUser = async (e) => {
+        e.preventDefault();   
+        setLoading(true);
+        setError(null);
+        try {
+            const newUser = { username, display_name, password, password_confirm};
+            await axios.post('/api/users/register', newUser);
+            alert('Регистрация успешна! Перейдите на страницу входа.');
+            navigate('/login');
+            setuserName('');
+            setPassword('');
+            setPassword_confirm('');
+        } catch (err) {
+            // Обрабатываем ошибки от сервера (например, дубликат password)
+            setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
+        } finally {
+            setLoading(false);
+        }
+    };     
+	
+    const handleLoginClick = () => {
+        navigate('/login'); // Переход к входу
+    };
+    
+    return (
+        <><Header />
+		<div className="login-page">
+      		<h2>Регистрация</h2>
+			{
+                error && <div className="error">{error}</div>
+            }
+      		<form onSubmit={addUser}>
+        		<div>
+                  	<label>Логин:</label>
+                  	<input
+                        type="text"
+                        value={username}
+                        onChange={(e) => setuserName(e.target.value)}
+                        required
+          			/>
+        		</div>
+				<div>
+                  	<label>Никнейм:</label>
+                  	<input
+                        type="text"
+                        value={display_name}
+                        onChange={(e) => setdisplayName(e.target.value)}
+          			/>
+        		</div>
+        		<div>
+          			<label>Пароль:</label>
+					<input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                    />
+        		</div>
+				<div>
+          			<label>Подтверждение пароля:</label>
+					<input
+                        type="password"
+                        value={password_confirm}
+                        onChange={(e) => setPassword_confirm(e.target.value)}
+                        required
+                    />
+        		</div>
+        		<button type="submit" disabled={loading}>
+                  {loading ? 'Регистрация...' : 'Зарегистрироваться'}
+                </button>
+      		</form>
+			<button onClick={handleLoginClick}>
+                Уже есть аккаунт? Войти
+			</button>
+    	</div></>
+	);
+}
+
+export default Registration;