requests for auth/register

2025-05-10 15:56:50 +05:00 · 2025-05-10 15:56:50 +05:00 · bc293f6370
commit bc293f6370
parent 9a3f05ef60
9 changed files with 348 additions and 63 deletions
--- a/SurveyFrontend/src/App.tsx
+++ b/SurveyFrontend/src/App.tsx
@ -6,14 +6,14 @@ import SettingSurvey from "./components/SettingSurvey/SettingSurvey.tsx";
 import {MySurveysPage} from "./pages/MySurveysPage/MySurveysPage.tsx";
 import {Results} from "./components/Results/Results.tsx";
 import {MySurveyList} from "./components/MySurveyList/MySurveyList.tsx";
-import LoginForm from "./components/LoginForm/LoginForm.tsx";
 import AuthForm from "./pages/AuthForm/AuthForm.tsx";

 const App = () => {
    return(
        <BrowserRouter>
            <Routes>
-                <Route path="/" element={<LoginForm />} />
+                <Route path="/login" element={<AuthForm />} />
+                <Route path="/register" element={<AuthForm />} />

                <Route path="survey/create" element={<SurveyCreateAndEditingPage />}>
                    <Route path="questions" element={<Survey />} />
@ -31,8 +31,6 @@ const App = () => {
                </Route>

                <Route path="*" element={<AuthForm />} />
-                <Route path="/login" element={<AuthForm />} />
-                <Route path="/register" element={<AuthForm />} />
            </Routes>
        </BrowserRouter>
    );
--- a/SurveyFrontend/src/api/AuthApi.ts
+++ b/SurveyFrontend/src/api/AuthApi.ts
@ -16,7 +16,13 @@ export const registerUser = async (data: IRegistrationData) => {
        const response = await fetch(`${BASE_URL}/auth/register`, {
            ...createRequestConfig('POST'), body: JSON.stringify(data),
        })
-        return await handleResponse(response);
+        const responseData = await handleResponse(response);
+
+        if (responseData.accessToken) {
+            localStorage.setItem("token", responseData.accessToken);
+        }
+
+        return responseData;
    } catch (error){
        console.error("Registration error:", error);
        throw error;
@ -26,12 +32,20 @@ export const registerUser = async (data: IRegistrationData) => {
 export const authUser = async (data: IAuthData) => {
    try {
        const response = await fetch(`${BASE_URL}/auth/login`, {
-            ...createRequestConfig('POST'), body: JSON.stringify(data),
-        })
-        return await handleResponse(response);
+            ...createRequestConfig('POST'),
+            body: JSON.stringify(data),
+        });
+        const responseData = await handleResponse(response);
+        console.log("Полный ответ сервера:", responseData); // Добавьте эту строку
+
+        const token = responseData.accessToken || responseData.token;
+        if (token) {
+            localStorage.setItem("token", token);
        }
-    catch(error){
+
+        return responseData;
+    } catch (error) {
        console.error("Login error:", error);
        throw error;
    }
-}
+};
--- a/SurveyFrontend/src/api/BaseApi.ts
+++ b/SurveyFrontend/src/api/BaseApi.ts
@ -13,7 +13,8 @@ interface RequestConfig {
 * @returns Конфигурация для fetch-запроса
 */
 const createRequestConfig = (method: string, isFormData: boolean = false): RequestConfig => {
-    const token = localStorage.getItem("accessToken");
+    const token = localStorage.getItem("token");
+
    const config: RequestConfig = {
        method,
        headers: {},
@ -37,14 +38,36 @@ const createRequestConfig = (method: string, isFormData: boolean = false): Reque
 * @param response Ответ от fetch
 * @returns Распарсенные данные или ошибку
 */
-const handleResponse = async (response: Response) => {
-    const data = await response.json();
+// const handleResponse = async (response: Response) => {
+//     const data = await response.json();
+//
+//     if (!response.ok) {
+//         throw new Error(data.message || "Произошла ошибка");
+//     }
+//
+//     return data;
+// };

-    if (!response.ok) {
-        throw new Error(data.message || "Произошла ошибка");
+const handleResponse = async (response: Response) => {
+    // Проверяем, есть ли контент в ответе
+    const responseText = await response.text();
+
+    if (!responseText) {
+        if (response.ok) {
+            return null; // Если ответ пустой, но статус 200, возвращаем null
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

+    try {
+        const data = JSON.parse(responseText);
+        if (!response.ok) {
+            throw new Error(data.message || `HTTP ${response.status}`);
+        }
        return data;
+    } catch (e) {
+        throw new Error(`Не удалось разобрать ответ сервера: ${e}`);
+    }
 };

 export { BASE_URL, createRequestConfig, handleResponse };
--- a/SurveyFrontend/src/api/QuestionApi.ts
+++ b/SurveyFrontend/src/api/QuestionApi.ts
@ -0,0 +1,29 @@
+import {BASE_URL, createRequestConfig, handleResponse} from "./BaseApi.ts";
+
+export interface INewQuestion{
+    title: string;
+    questionType: string;
+    answerVariants: string[];
+}
+//
+// export interface IErrorQuestionResponse {
+//
+// }
+
+export const addNewQuestion = async (surveyId: number, question: INewQuestion) => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+        throw new Error("Токен отсутствует");
+    }
+
+    try{
+        const response = await fetch(`${BASE_URL}/surveys/${surveyId}/questions`, {
+            ...createRequestConfig('POST'),
+            body: JSON.stringify(question),
+        })
+        return await handleResponse(response)
+    } catch (error){
+        throw new Error(`Error when adding a new question: ${error}`);
+    }
+}
+
--- a/SurveyFrontend/src/api/SurveyApi.ts
+++ b/SurveyFrontend/src/api/SurveyApi.ts
@ -0,0 +1,117 @@
+import {BASE_URL, createRequestConfig, handleResponse} from "./BaseApi.ts";
+
+export interface ISurvey {
+    id: number;
+    title: string;
+    description: string;
+    createdBy: number;
+}
+
+export interface INewSurvey{
+    title: string;
+    description: string;
+}
+
+/**
+ * getMySurveys - запрос на получение моих опросов
+ */
+export const getMySurveys = async (): Promise<ISurvey[]> => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+        throw new Error("Токен отсутствует");
+    }
+
+    try {
+        const response = await fetch(`${BASE_URL}/surveys/my`, {
+            ...createRequestConfig('GET'),
+        });
+        return await handleResponse(response);
+    } catch (error) {
+        console.error("Error receiving surveys:", error);
+        throw error;
+    }
+}
+
+/**
+ * getAllSurvey - запрос на получение всех опросов
+ */
+export const  getAllSurveys = async (): Promise<ISurvey[]> => {
+    try{
+        const response = await fetch(`${BASE_URL}/surveys`, {
+            ...createRequestConfig('GET'),
+        })
+        return await handleResponse(response);
+    } catch (error) {
+        console.error("Error receiving surveys:", error);
+        throw error;
+    }
+}
+
+/**
+ * postNewSurvey - добавление нового опроса
+ * @param survey
+ */
+export const postNewSurvey = async (survey: INewSurvey): Promise<INewSurvey> => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+        throw new Error("Токен отсутствует");
+    }
+
+    try{
+        const response = await fetch(`${BASE_URL}/surveys`, {
+            ...createRequestConfig('POST'),
+            body: JSON.stringify(survey)
+        })
+
+        // return await handleResponse(response);
+
+        if (response.status === 201) {
+            return await handleResponse(response);
+        }
+        throw new Error(`Ожидался код 201, получен ${response.status}`);
+    } catch (error) {
+        console.error(`Error when adding a new survey: ${error}`);
+        throw error;
+    }
+}
+
+/**
+ * Запрос на получение опроса по заданному ID
+ * @param surveyId - ID опроса
+ */
+export const getSurveyById = async (surveyId: number): Promise<ISurvey> => {
+    try{
+        const response = await fetch(`${BASE_URL}/surveys/${surveyId}`, {
+            ...createRequestConfig('GET'),
+        })
+        return await handleResponse(response);
+    } catch (error){
+        console.error(`Error finding the survey by id: ${error}`);
+        throw error;
+    }
+}
+
+/**
+ * Запрос на удаление опроса
+ * @param surveyId - ID выбранного опроса
+ */
+export const deleteSurvey = async (surveyId: string) => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+        throw new Error("Токен отсутствует");
+    }
+
+    try{
+        const response = await fetch(`${BASE_URL}/surveys/${surveyId}`, {
+            ...createRequestConfig('DELETE'),
+        })
+        const responseData = await handleResponse(response);
+        if (response.ok && !responseData){
+            return  {success: true};
+        }
+        return responseData;
+    } catch (error){
+        console.error(`Error deleting a survey: ${error}`);
+        throw error;
+    }
+}
--- a/SurveyFrontend/src/components/LoginForm/LoginForm.tsx
+++ b/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;
--- a/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
+++ b/SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
@ -1,35 +1,58 @@
 import styles from './MySurveysList.module.css'
 import {useNavigate} from "react-router-dom";
+import {useEffect, useState} from "react";
+import {getMySurveys, ISurvey} from "../../api/SurveyApi.ts";

-interface MySurveyItem{
-    id: string,
-    title: string,
-    description: string,
-    date: string
+
+interface MySurveyItem extends ISurvey{
    status: 'active' | 'completed'
 }

 export const MySurveyList = () => {
    const navigate = useNavigate();
+    const [surveys, setSurveys] = useState<MySurveyItem[]>([]);

-    const surveys: MySurveyItem[] = [
-        {
-            id: '1',
-            title: 'Опрос 1',
-            description: 'Описание опроса 1',
-            date: '27-04-2025',
+    useEffect(() => {
+        const fetchSurvey = async () => {
+            try {
+                const mySurveys = await getMySurveys();
+                const surveysWithStatus: MySurveyItem[] = mySurveys.map((survey: ISurvey) => ({
+                    ...survey,
                    status: 'active',
-        },
-        {
-            id: '2',
-            title: 'Опрос 2',
-            description: 'Описание опроса 2',
-            date: '01-01-2025',
-            status: 'completed',
-        }
-    ]
+                }));
+                setSurveys(surveysWithStatus);
+            } catch (error) {
+                console.error('Ошибка при получении списка опросов:', error);

-    const handleSurveyClick = (id: string) => {
+                if (error instanceof Error && error.message.includes("401")) {
+                    // Если ошибка 401, перенаправляем на страницу входа
+                    navigate('/login');
+                } else {
+                    alert("Ошибка при загрузке опросов: " + (error instanceof Error && error.message));
+                }
+            }
+        };
+        fetchSurvey();
+    }, [navigate]);
+
+    // const surveys: MySurveyItem[] = [
+        // {
+        //     id: '1',
+        //     title: 'Опрос 1',
+        //     description: 'Описание опроса 1',
+        //     createdBy: '27-04-2025',
+        //     status: 'active',
+        // },
+        // {
+        //     id: '2',
+        //     title: 'Опрос 2',
+        //     description: 'Описание опроса 2',
+        //     createdBy: '01-01-2025',
+        //     status: 'completed',
+        // }
+    // ]
+
+    const handleSurveyClick = (id: number) => {
        navigate(`/survey/${id}/questions`)
    }

@ -46,7 +69,7 @@ export const MySurveyList = () => {
                            <h1 className={styles.title}>{survey.title}</h1>
                            <h2 className={styles.description}>{survey.description}</h2>
                        </div>
-                        <span className={styles.date}>Дата создания: {survey.date}</span>
+                        <span className={styles.date}>Дата создания: {survey.createdBy}</span>
                    </div>
                    <div className={`${styles.status} ${
                        survey.status === 'active' ? styles.active : styles.completed
--- a/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
+++ b/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>
--- a/SurveyFrontend/src/pages/AuthForm/AuthForm.tsx
+++ b/SurveyFrontend/src/pages/AuthForm/AuthForm.tsx
@ -5,13 +5,30 @@ import {useLocation} from "react-router-dom";


 const AuthForm = () => {
+    // const location = useLocation();
+    // const isLogin = location.pathname === '/login';
+    //
+    // return (
+    //     <div className={`${isLogin ? styles.pageLogin : styles.page}`}>
+    //         {isLogin ? <LoginForm /> : <RegisterForm/>}
+    //     </div>
+    // );
+
    const location = useLocation();
-    const isLogin = location.pathname === '/login';
+    const isLoginPage = location.pathname === '/login';
+    const isRegisterPage = location.pathname === '/register';
+
+    let content;
+    if (isLoginPage) {
+        content = <LoginForm />;
+    } else if (isRegisterPage) {
+        content = <RegisterForm />;
+    } else {
+        content = <LoginForm />; // По умолчанию показываем LoginForm
+    }

    return (
-        <div className={`${isLogin ? styles.pageLogin : styles.page}`}>
-            {isLogin ? <LoginForm /> : <RegisterForm/>}
-        </div>
+        <div className={`${(isLoginPage || location.pathname === '/') ? styles.pageLogin : styles.page}`}>{content}</div>
    );
 }