Merge branch 'user-registration' into 'unstable'

User registration

See merge request internship-2025/survey-webapp/survey-webapp!13

SurveyFrontend/src/App.tsx

@@ -1,17 +1,19 @@
 import './App.css'
-import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
 import {SurveyCreateAndEditingPage} from "./pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx";
 import Survey from "./components/Survey/Survey.tsx";
 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 AuthForm from "./pages/AuthForm/AuthForm.tsx";
 
 const App = () => {
     return(
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Navigate to="/survey/create/questions" replace />} />
+                <Route path="/login" element={<AuthForm />} />
+                <Route path="/register" element={<AuthForm />} />
 
                 <Route path="survey/create" element={<SurveyCreateAndEditingPage />}>
                     <Route path="questions" element={<Survey />} />
@@ -27,6 +29,8 @@ const App = () => {
                     <Route path="settings" element={<SettingSurvey />} />
                     <Route path="results" element={<Results />} />
                 </Route>
+
+                <Route path="*" element={<AuthForm />} />
             </Routes>
         </BrowserRouter>
     );

SurveyFrontend/src/api/AuthApi.ts

@@ -16,7 +16,17 @@ 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);
+            localStorage.setItem("user", JSON.stringify({
+                firstName: data.firstName,
+                lastName: data.lastName
+            }));
+        }
+
+        return responseData;
     } catch (error){
         console.error("Registration error:", error);
         throw error;
@@ -24,14 +34,30 @@ export const registerUser = async (data: IRegistrationData) => {
 }
 
 export const authUser = async (data: IAuthData) => {
-    try{
+    try {
         const response = await fetch(`${BASE_URL}/auth/login`, {
-            ...createRequestConfig('POST'), body: JSON.stringify(data),
+            ...createRequestConfig('POST'),
-        })
+            body: JSON.stringify(data),
-        return await handleResponse(response);
+        });
-    }
+        const responseData = await handleResponse(response);
-    catch(error){
+        console.log("Полный ответ сервера:", responseData);
+
+        const token = responseData.accessToken || responseData.token;
+        if (token) {
+            localStorage.setItem("token", token);
+            const user = localStorage.getItem("user");
+            if (!responseData.user && user) {
+                responseData.user = JSON.parse(user);
+            }
+
+            if (responseData.user) {
+                localStorage.setItem("user", JSON.stringify(responseData.user));
+            }
+        }
+
+        return responseData;
+    } catch (error) {
         console.error("Login error:", error);
         throw error;
     }
-}
+};

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

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}`);
+    }
+}
+

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;
+    }
+}

SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css

@@ -1,46 +1,67 @@
-/*AnswerOption.module.css*/
+/*!*AnswerOption.module.css*!*/
 
-.answer{
+.answer {
     width: 100%;
     display: flex;
     gap: 10px;
     margin-bottom: 17px;
+    align-items: flex-start;
 }
 
-.textAnswer{
+.textAnswer {
     text-align: left;
     border: none;
-    background-color: #ffffff;
+    background: none;
     font-size: 18px;
     font-weight: 500;
     word-break: break-word;
     width: 70%;
+    padding: 0;
+    line-height: 24px;
+    cursor: text;
+    margin-top: 2px;
 }
 
-.buttonMarker{
+.buttonMarker {
     padding: 0;
     border: none;
-    background-color: transparent;
+    background: none;
+    position: relative;
+    top: 0;
+    transition: top 0.1s ease;
+    cursor: pointer;
+    height: 24px;
 }
 
-.answerIcon{
+.buttonMarker.editing {
-    vertical-align: middle;
+    top: 3px;
+}
+
+.answerIcon {
     width: 24px;
+    height: 24px;
+    display: block;
 }
 
-.answerInput{
+.answerInput {
-    vertical-align: middle;
     font-size: 18px;
     font-weight: 500;
     outline: none;
     border: none;
     resize: none;
-    display: flex;
+    width: 70%;
-    align-items: center;
+    padding: 0;
-    box-sizing: border-box;
+    margin-top: 2px;
+    font-family: inherit;
+    min-height: 24px;
+    height: auto;
+    overflow-y: hidden;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
-.deleteButton{
+.deleteButton {
     margin-left: auto;
     border: none;
     background-color: transparent;

SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx

@@ -32,8 +32,22 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
 
     const handleTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         setCurrentValue(event.target.value);
+        // Автоматическое изменение высоты
+        if (textAreaRef.current) {
+            textAreaRef.current.style.height = 'auto';
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+        }
     };
 
+    useEffect(() => {
+        if (isEditing && textAreaRef.current) {
+            textAreaRef.current.focus();
+            // Установка начальной высоты
+            textAreaRef.current.style.height = 'auto';
+            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+        }
+    }, [isEditing]);
+
     const handleSave = () => {
         setIsEditing(false);
         onChange(currentValue);
@@ -66,7 +80,10 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
 
     return (
         <div className={styles.answer}>
-            <button className={styles.buttonMarker} onClick={toggleSelect}>
+            <button
+                className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
+                onClick={toggleSelect}
+            >
                 <img
                     className={styles.answerIcon}
                     src={getImage()}
@@ -74,13 +91,14 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
                 />
             </button>
             {isEditing ? (
-                <textarea className={styles.answerInput}
+                <textarea
-                          ref={textAreaRef}
+                    className={styles.answerInput}
-                          value={currentValue}
+                    ref={textAreaRef}
-                          onChange={handleTextareaChange}
+                    value={currentValue}
-                          onKeyDown={handleKeyDown}
+                    onChange={handleTextareaChange}
-                          onBlur={handleBlur}
+                    onKeyDown={handleKeyDown}
-                          placeholder={`Ответ ${index}`}
+                    onBlur={handleBlur}
+                    placeholder={`Ответ ${index}`}
                 />
             ) : (
                 <button className={styles.textAnswer} onClick={handleSpanClick}>
@@ -92,6 +110,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
             </button>
         </div>
     );
+
 };
 
 export default AnswerOption;

SurveyFrontend/src/components/Header/Header.tsx

@@ -2,19 +2,24 @@ import React from "react";
 import Logo from "../Logo/Logo.tsx";
 import Account from "../Account/Account.tsx";
 import styles from './Header.module.css'
-import {Link, useLocation} from "react-router-dom";
+import {Link, useLocation, useNavigate} from "react-router-dom";
 
 
 
 const Header: React.FC = () => {
     const location = useLocation();
+    const navigate = useNavigate();
     const isCreateSurveyActive = location.pathname.includes('/survey/create');
     const isSurveyPage = location.pathname.includes('/survey/') && !location.pathname.includes('/survey/create');
     const isMySurveysPage = location.pathname === '/my-surveys' || isSurveyPage;
 
+    const handleLogoClick = () => {
+        navigate(location.pathname, { replace: true });
+    };
+
     return (
         <div className={styles.header}>
-            <Logo href='/' />
+            <Logo href={location.pathname} onClick={handleLogoClick} />
             <nav className={styles.pagesNav}>
                 <Link to='/survey/create/questions'
                 className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}>
@@ -27,10 +32,7 @@ const Header: React.FC = () => {
                     {isMySurveysPage && <hr className={styles.activeLine}/>}
                 </Link>
             </nav>
-            <Account
+            <Account href={'/profile'} user={'Иванов Иван'}/>
-                href='/profile'
-                user='Иванов Иван'
-            />
         </div>
     );
 };

SurveyFrontend/src/components/LoginForm/LoginForm.module.css

@@ -0,0 +1,85 @@
+.loginContainer{
+    width: 31%;
+    background-color: #FFFFFF;
+    padding: 42.5px 65px;
+    margin: auto;
+    border-radius: 43px;
+    margin-bottom: 0;
+}
+
+.title{
+    text-align: center;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 88%;
+    padding: 0;
+    margin-bottom: 80px;
+    margin-top: 0;
+}
+
+.form{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    margin-bottom: 80px;
+}
+
+.input {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000; /* Цвет текста по умолчанию */
+    outline: none;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */
+    padding: 5px 0;
+    opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */
+}
+
+.input::placeholder {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000;
+    opacity: 0.2; /* Прозрачность placeholder */
+}
+
+.input:focus::placeholder {
+    opacity: 0; /* Убираем placeholder при фокусе */
+}
+
+/* Отключаем стиль для input, когда в нём есть данные */
+.input:not(:placeholder-shown) {
+    color: black;
+    opacity: 1;
+}
+
+.input:focus {
+    border-bottom: 1px solid black; /* Чёрная граница при фокусе */
+}
+
+.signIn{
+    margin: auto;
+    padding: 26.5px 67px;
+    width: fit-content;
+    border-radius: 24px;
+    background-color: #3788D6;
+    color: #FFFFFF;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 120%;
+    border: none;
+    outline: none;
+}
+
+.recommendation{
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.recommendationLink{
+    color: #3788D6;
+    margin-left: 5px;
+}

SurveyFrontend/src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,65 @@
+import {Link, useNavigate} from "react-router-dom";
+import styles from './LoginForm.module.css';
+import {useRef, useState} from 'react';
+import {authUser} from "../../api/AuthApi.ts";
+
+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} 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' }}
+                />
+                <input
+                    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} type="submit">Войти</button>
+            </form>
+            <p className={styles.recommendation}>Еще не с нами?
+                <Link className={styles.recommendationLink} to='/register'>Зарегистрируйтесь!</Link>
+            </p>
+        </div>
+    );
+}
+
+export default LoginForm;

SurveyFrontend/src/components/Logo/Logo.tsx

@@ -3,11 +3,12 @@ import styles from './Logo.module.css'
 
 interface LogoProps {
     href: string;
+    onClick: () => void
 }
 
-const Logo: React.FC<LogoProps> = ({href}) => {
+const Logo: React.FC<LogoProps> = ({href, onClick}) => {
     return (
-        <a className={styles.logo} href={href}>
+        <a className={styles.logo} href={href} onClick={onClick}>
             <img src='../../../public/logo.svg' alt="" />
         </a>
     );

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

SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css

@@ -30,6 +30,9 @@
     margin-bottom: 5px;
     font-size: 24px;
     font-weight: 600;
+    line-height: 1.5;
+    overflow-y: hidden;
+    min-height: 1em;
 }
 
 .buttonQuestion{

SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx

@@ -38,6 +38,11 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
 
     const handleTextareaQuestionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         setTextQuestion(event.target.value);
+
+        if (textareaQuestionRef.current) {
+            textareaQuestionRef.current.style.height = 'auto';
+            textareaQuestionRef.current.style.height = `${textareaQuestionRef.current.scrollHeight}px`;
+        }
     }
 
     const handleSaveQuestion = () => {
@@ -59,6 +64,8 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
     useEffect(() => {
         if (isEditingQuestion && textareaQuestionRef.current) {
             textareaQuestionRef.current.focus();
+            textareaQuestionRef.current.style.height = 'auto';
+            textareaQuestionRef.current.style.height = `${textareaQuestionRef.current.scrollHeight}px`;
         }
     }, [isEditingQuestion]);
 
@@ -109,6 +116,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
                             onKeyDown={handleQuestionKeyDown}
                             onBlur={handleQuestionBlur}
                             placeholder={initialTextQuestion}
+                            rows={1}
                         />
                     ) : (
                         <button className={styles.buttonQuestion} onClick={handleQuestionClick}>

SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css

@@ -0,0 +1,84 @@
+.registerContainer{
+    width: 31%;
+    background-color: #FFFFFF;
+    padding: 94px 80px;
+    margin: auto;
+    border-radius: 43px;
+}
+
+.title{
+    text-align: center;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 88%;
+    padding: 0;
+    margin-bottom: 80px;
+    margin-top: 0;
+}
+
+.form{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    margin-bottom: 80px;
+}
+
+.input {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000; /* Цвет текста по умолчанию */
+    outline: none;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */
+    padding: 5px 0;
+    opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */
+}
+
+.input::placeholder {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000;
+    opacity: 0.2; /* Прозрачность placeholder */
+}
+
+.input:focus::placeholder {
+    opacity: 0; /* Убираем placeholder при фокусе */
+}
+
+/* Отключаем стиль для input, когда в нём есть данные */
+.input:not(:placeholder-shown) {
+    color: black;
+    opacity: 1;
+}
+
+.input:focus {
+    border-bottom: 1px solid black; /* Чёрная граница при фокусе */
+}
+
+.signUp{
+    margin: auto;
+    padding: 25.5px 16px;
+    width: fit-content;
+    border-radius: 24px;
+    background-color: #3788D6;
+    color: #FFFFFF;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 120%;
+    border: none;
+    outline: none;
+}
+
+.recommendation{
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.recommendationLink{
+    color: #3788D6;
+    margin-left: 5px;
+}

SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,99 @@
+import {Link, useNavigate} from "react-router-dom";
+import styles from './RegisterForm.module.css';
+import {useRef, useState} from 'react';
+import {registerUser} from "../../api/AuthApi.ts";
+
+const RegisterForm = () => {
+    const [focused, setFocused] = useState({
+        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('Регистрация успешна');
+                localStorage.setItem("user", JSON.stringify({
+                    firstName,
+                    lastName
+                }));
+                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} onSubmit={handleSubmit}>
+                <input
+                    className={`${styles.input} ${styles.name}`}
+                    type={'text'}
+                    placeholder='Имя'
+                    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='Фамилия'
+                    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' }}
+                />
+                <input
+                    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} type='submit'>Зарегистрироваться</button>
+            </form>
+            <p className={styles.recommendation}>Уже с нами?
+                <Link className={styles.recommendationLink} to='/login'>Войдите!</Link>
+            </p>
+        </div>
+    );
+}
+
+export default RegisterForm;

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css

@@ -11,6 +11,7 @@
 }
 
 .param{
+    border-radius: 4px;
     background-color: #FFFFFF;
     padding-top: 15px;
     padding-bottom: 97px;

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css

@@ -24,50 +24,60 @@
     text-align: center;
     font-size: 20px;
     font-weight: 600;
-    line-height: 20px;
     margin-bottom: 23px;
     word-break: break-word;
     padding: 0;
 }
 
-.textareaTitle{
+.textareaTitle,
-    margin-top: -17px;
+.textareaDescrip {
-    width: 80%;
+    width: 100%;
-    padding-top: 35px;
     resize: none;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 600;
     border: none;
     outline: none;
-    line-height: 30px;
+    font-family: inherit;
-    word-break: break-word;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    display: block;
+    overflow-y: hidden;
 }
 
-.description{
+.textareaTitle {
+    font-size: 32px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 1.2;
+    min-height: 40px;
+}
+
+.textareaDescrip {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 1.4;
+    min-height: 24px;
+}
+
+.descriptionWrapper {
+    width: 80%;
+    margin: 0 auto;
+    padding: 5px 0;
+}
+
+.description {
     border: none;
-    font-size: 24px;
+    font-size: 18px;
     font-weight: 500;
     text-align: center;
     background-color: white;
     display: block;
     margin: 0 auto;
+    padding: 5px 0;
+    width: 80%;
     word-break: break-word;
-    padding: 0;
 }
 
-.textareaDescrip{
-    width: 80%;
-    outline: none;
-    border: none;
-    resize: none;
-    text-align: center;
-    margin: 0 auto;
-    font-size: 22px;
-    font-weight: 500;
-    word-break: break-word;
-    padding: 0;
-}
 
 .descripButton{
     border: none;

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx

@@ -9,34 +9,50 @@ const SurveyInfo: React.FC = () => {
     const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
     const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
 
+    const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+        if (textarea) {
+            // Сброс высоты перед расчетом
+            textarea.style.height = 'auto';
+            // Устанавливаем высоту равной scrollHeight + небольшой отступ
+            textarea.style.height = `${textarea.scrollHeight}px`;
+            // Центрируем содержимое вертикально
+            textarea.style.paddingTop = `${Math.max(0, (textarea.clientHeight - textarea.scrollHeight) / 2)}px`;
+        }
+    };
+
     const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
         setDescriptionSurvey(descripEvent.target.value);
-    }
+        adjustTextareaHeight(descripEvent.target);
+    };
 
     const handleNewTitleChange = (titleEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
         setTitleSurvey(titleEvent.target.value);
-    }
+        adjustTextareaHeight(titleEvent.target);
+    };
+
+    useEffect(() => {
+        if (showNewTitleField && titleTextareaRef.current) {
+            titleTextareaRef.current.focus();
+            adjustTextareaHeight(titleTextareaRef.current);
+        }
+    }, [showNewTitleField]);
+
+    useEffect(() => {
+        if (showDescriptionField && descriptionTextareaRef.current) {
+            descriptionTextareaRef.current.focus();
+            adjustTextareaHeight(descriptionTextareaRef.current);
+        }
+    }, [showDescriptionField]);
+
 
     const handleAddNewTitleClick = () => {
         setShowNewTitleField(true);
     }
 
-    useEffect(() => {
-        if (showNewTitleField && titleTextareaRef.current) {
-            titleTextareaRef.current.focus();
-        }
-    }, [showNewTitleField]);
-
     const handleAddDescriptionClick = () => {
         setShowDescriptionField(true);
     }
 
-    useEffect(() => {
-        if (showDescriptionField && descriptionTextareaRef.current){
-            descriptionTextareaRef.current.focus();
-        }
-    }, [showDescriptionField]);
-
     const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
         if (titleClickEnter.key === 'Enter'){
             titleClickEnter.preventDefault();
@@ -64,7 +80,7 @@ const SurveyInfo: React.FC = () => {
     };
 
 
-    const renderDescription = ()=> {
+    const renderDescription = () => {
         if (descriptionSurvey && !showDescriptionField) {
             return (
                 <button className={styles.description} onClick={handleParagraphClick}>
@@ -73,17 +89,18 @@ const SurveyInfo: React.FC = () => {
             );
         } else if (showDescriptionField) {
             return (
-                <p className={styles.description}>
+                <div className={styles.descriptionWrapper}>
-                    <textarea
+                <textarea
-                        ref={descriptionTextareaRef}
+                    ref={descriptionTextareaRef}
-                        className={styles.textareaDescrip}
+                    className={styles.textareaDescrip}
-                        value={descriptionSurvey}
+                    value={descriptionSurvey}
-                        placeholder={'Добавить описание'}
+                    placeholder={'Добавить описание'}
-                        onChange={handleDescriptionChange}
+                    onChange={handleDescriptionChange}
-                        onKeyDown={handleDescriptionKeyDown}
+                    onKeyDown={handleDescriptionKeyDown}
-                        onBlur={handleDescriptionBlur}
+                    onBlur={handleDescriptionBlur}
-                    />
+                    rows={1} // Начальное количество строк
-                </p>
+                />
+                </div>
             );
         } else {
             return (

SurveyFrontend/src/pages/AuthForm/AuthForm.module.css

@@ -0,0 +1,12 @@
+.page{
+    width: 100%;
+    min-height: 100vh;
+    background-color: #F6F6F6;
+    padding: 61.5px 0;
+}
+
+.pageLogin{
+    width: 100%;
+    background-color: #F6F6F6;
+    padding: 157px 0;
+}

SurveyFrontend/src/pages/AuthForm/AuthForm.tsx

@@ -0,0 +1,35 @@
+import styles from './AuthForm.module.css';
+import LoginForm from "../../components/LoginForm/LoginForm.tsx";
+import RegisterForm from "../../components/RegisterForm/RegisterForm.tsx";
+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 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={`${(isLoginPage || location.pathname === '/') ? styles.pageLogin : styles.page}`}>{content}</div>
+    );
+}
+
+export default AuthForm;