requests for auth/register

SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx

@@ -1,38 +1,75 @@
-import { Link } from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import styles from './RegisterForm.module.css';
-import { useState } from 'react';
+import {useRef, useState} from 'react';
+import {registerUser} from "../../api/AuthApi.ts";
 
 const RegisterForm = () => {
     const [focused, setFocused] = useState({
-        name: false,
-        surname: false,
+        firstName: false,
+        lastName: false,
         email: false,
         password: false
     });
+
+    const nameRef = useRef<HTMLInputElement>(null);
+    const surnameRef = useRef<HTMLInputElement>(null);
+    const emailRef = useRef<HTMLInputElement>(null);
+    const passwordRef = useRef<HTMLInputElement>(null);
+
+    const navigate = useNavigate();
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const firstName = nameRef.current?.value || '';
+        const lastName = surnameRef.current?.value || '';
+        const email = emailRef.current?.value || '';
+        const password = passwordRef.current?.value || '';
+        const username = firstName + lastName || '';
+
+        try{
+            const responseData = await registerUser({username, firstName, lastName, email, password});
+            console.log(responseData); //проверка вывода данных
+            if (responseData && !responseData.error) {
+                console.log('Регистрация успешна')
+                navigate('/my-surveys');
+            }
+            else {
+                console.error(`Ошибка регистрации: ${responseData}`);
+                console.log('Регистраиця не удалась');
+            }
+        }
+        catch (err) {
+            console.error(`Ошибка при отправке запроса ${err}`);
+        }
+    }
+
     return (
         <div className={styles.registerContainer}>
             <h2 className={styles.title}>Регистрация</h2>
-            <form className={styles.form}>
+            <form className={styles.form} onSubmit={handleSubmit}>
                 <input
                     className={`${styles.input} ${styles.name}`}
                     type={'text'}
                     placeholder='Имя'
-                    onFocus={() => setFocused({ ...focused, name: true })}
-                    onBlur={() => setFocused({ ...focused, name: false })}
-                    style={{ color: focused.name ? 'black' : 'inherit' }}
+                    ref={nameRef}
+                    onFocus={() => setFocused({ ...focused, firstName: true })}
+                    onBlur={() => setFocused({ ...focused, firstName: false })}
+                    style={{ color: focused.firstName ? 'black' : 'inherit' }}
                 />
                 <input
                     className={`${styles.input} ${styles.surname}`}
                     type={'text'}
                     placeholder='Фамилия'
-                    onFocus={() => setFocused({ ...focused, surname: true })}
-                    onBlur={() => setFocused({ ...focused, surname: false })}
-                    style={{ color: focused.surname ? 'black' : 'inherit' }}
+                    ref={surnameRef}
+                    onFocus={() => setFocused({ ...focused, lastName: true })}
+                    onBlur={() => setFocused({ ...focused, lastName: false })}
+                    style={{ color: focused.lastName ? 'black' : 'inherit' }}
                 />
                 <input
                     className={`${styles.input} ${styles.email}`}
                     type={'email'}
                     placeholder='Почта'
+                    ref={emailRef}
                     onFocus={() => setFocused({ ...focused, email: true })}
                     onBlur={() => setFocused({ ...focused, email: false })}
                     style={{ color: focused.email ? 'black' : 'inherit' }}
@@ -41,11 +78,12 @@ const RegisterForm = () => {
                     className={`${styles.input} ${styles.password}`}
                     type='password'
                     placeholder='Пароль'
+                    ref={passwordRef}
                     onFocus={() => setFocused({ ...focused, password: true })}
                     onBlur={() => setFocused({ ...focused, password: false })}
                     style={{ color: focused.password ? 'black' : 'inherit' }}
                 />
-                <button className={styles.signUp}>Зарегистрироваться</button>
+                <button className={styles.signUp} type='submit'>Зарегистрироваться</button>
             </form>
             <p className={styles.recommendation}>Уже с нами?
                 <Link className={styles.recommendationLink} to='/login'>Войдите!</Link>