Init

src/Registration/API.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const registrationAPI = async (username, display_name, password, password_confirm) => {
+    const newUser = { username, display_name, password, password_confirm};
+    await axios.post('/api/users/register', newUser);
+};

src/Registration/Logic.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { registrationAPI } from './API';
+
+export const useLogic = (setError, setLoading) => {
+    const navigate = useNavigate();
+
+    const registration = useCallback(async (username, display_name, password, password_confirm) => {
+        setLoading(true);
+        setError(null);
+        try {
+            await registrationAPI(username, display_name, password, password_confirm);
+            alert("Регистрация прошла успешно")
+            navigate('/login');
+        } catch (err) {
+            setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
+        } finally {
+            setLoading(false);
+        }
+    }, [ setLoading, setError, navigate]);
+
+    return {
+        registration
+    };
+};

src/Registration/index.js

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useLogic } from './Logic';
+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 { registration } = useLogic(setError, setLoading);
+
+    const handleReg = async (e) => {
+        e.preventDefault();   
+        await registration(username, display_name, password, password_confirm);
+    };     
+	
+    const handleLoginClick = () => { navigate('/login') };
+    
+    return (
+        <><Header />
+		<div className="login-page">
+      		<h2>Регистрация</h2>
+			{
+                error && <div className="error">{error}</div>
+            }
+      		<form onSubmit={handleReg}>
+        		<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;