requests for auth/register

SurveyFrontend/src/components/LoginForm/LoginForm.tsx

@@ -1,20 +1,45 @@
-import { Link } from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import styles from './LoginForm.module.css';
-import { useState } from 'react';
+import {useRef, useState} from 'react';
+import {authUser} from "../../api/AuthApi.ts";
 
-const RegisterForm = () => {
+const LoginForm = () => {
     const [focused, setFocused] = useState({
         email: false,
         password: false
     });
+
+    const navigate = useNavigate();
+
+    const emailRef = useRef<HTMLInputElement>(null); // ref для поля email
+    const passwordRef = useRef<HTMLInputElement>(null); // ref для поля password
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const email = emailRef.current?.value || '';
+        const password = passwordRef.current?.value || '';
+
+        try{
+            const responseData =  await authUser({email, password});
+            if (responseData && !responseData.error)
+                navigate('/my-surveys');
+            else
+                console.error('Ошибка аутентификации:', responseData);
+        }
+        catch(err){
+            console.error('Ошибка при отправке запроса:', err);
+        }
+    }
+
     return (
         <div className={styles.loginContainer}>
             <h2 className={styles.title}>С возвращением!</h2>
-            <form className={styles.form}>
+            <form className={styles.form} onSubmit={handleSubmit}>
                 <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' }}
@@ -23,11 +48,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.signIn}>Войти</button>
+                <button className={styles.signIn} type="submit">Войти</button>
             </form>
             <p className={styles.recommendation}>Еще не с нами?
                 <Link className={styles.recommendationLink} to='/register'>Зарегистрируйтесь!</Link>
@@ -36,4 +62,4 @@ const RegisterForm = () => {
     );
 }
 
-export default RegisterForm;
+export default LoginForm;