From fa5fe30c34753b61cfdad3621a85bee1c8e7af78 Mon Sep 17 00:00:00 2001
From: Tatiana Nikolaeva <tnik0402@gmail.com>
Date: Wed, 14 May 2025 17:59:36 +0500
Subject: [PATCH] correction of working capacity

---
 SurveyFrontend/src/api/AuthApi.ts             | 12 ++++
 .../AnswerOption/AnswerOption.module.css      | 49 +++++++++----
 .../components/AnswerOption/AnswerOption.tsx  | 35 +++++++---
 .../src/components/Header/Header.tsx          | 14 ++--
 SurveyFrontend/src/components/Logo/Logo.tsx   |  5 +-
 .../QuestionItem/QuestionItem.module.css      |  3 +
 .../components/QuestionItem/QuestionItem.tsx  |  8 +++
 .../components/RegisterForm/RegisterForm.tsx  |  6 +-
 .../SettingSurvey/SettingSurvey.module.css    |  1 +
 .../SurveyInfo/SurveyInfo.module.css          | 60 +++++++++-------
 .../src/components/SurveyInfo/SurveyInfo.tsx  | 69 ++++++++++++-------
 11 files changed, 180 insertions(+), 82 deletions(-)

diff --git a/SurveyFrontend/src/api/AuthApi.ts b/SurveyFrontend/src/api/AuthApi.ts
index 207da21..2855bad 100644
--- a/SurveyFrontend/src/api/AuthApi.ts
+++ b/SurveyFrontend/src/api/AuthApi.ts
@@ -20,6 +20,10 @@ export const registerUser = async (data: IRegistrationData) => {
 
         if (responseData.accessToken) {
             localStorage.setItem("token", responseData.accessToken);
+            localStorage.setItem("user", JSON.stringify({
+                firstName: data.firstName,
+                lastName: data.lastName
+            }));
         }
 
         return responseData;
@@ -41,6 +45,14 @@ export const authUser = async (data: IAuthData) => {
         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;
diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css b/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
index 6a0ec90..9f0ce82 100644
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
+++ b/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{
-    vertical-align: middle;
+.buttonMarker.editing {
+    top: 3px;
+}
+
+.answerIcon {
     width: 24px;
+    height: 24px;
+    display: block;
 }
 
-.answerInput{
-    vertical-align: middle;
+.answerInput {
     font-size: 18px;
     font-weight: 500;
     outline: none;
     border: none;
     resize: none;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
+    width: 70%;
+    padding: 0;
+    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;
diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
index e0c78b1..c08c213 100644
--- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
+++ b/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}
-                          ref={textAreaRef}
-                          value={currentValue}
-                          onChange={handleTextareaChange}
-                          onKeyDown={handleKeyDown}
-                          onBlur={handleBlur}
-                          placeholder={`Ответ ${index}`}
+                <textarea
+                    className={styles.answerInput}
+                    ref={textAreaRef}
+                    value={currentValue}
+                    onChange={handleTextareaChange}
+                    onKeyDown={handleKeyDown}
+                    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;
\ No newline at end of file
diff --git a/SurveyFrontend/src/components/Header/Header.tsx b/SurveyFrontend/src/components/Header/Header.tsx
index 03be8fc..935bb34 100644
--- a/SurveyFrontend/src/components/Header/Header.tsx
+++ b/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
-                href='/profile'
-                user='Иванов Иван'
-            />
+            <Account href={'/profile'} user={'Иванов Иван'}/>
         </div>
     );
 };
diff --git a/SurveyFrontend/src/components/Logo/Logo.tsx b/SurveyFrontend/src/components/Logo/Logo.tsx
index c2bb8cf..5af3dea 100644
--- a/SurveyFrontend/src/components/Logo/Logo.tsx
+++ b/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>
     );
diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css b/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
index 7b4af09..8d7bf34 100644
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
+++ b/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{
diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
index 8c4efb2..499081b 100644
--- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
+++ b/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}>
diff --git a/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx b/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
index d7214f0..0dde592 100644
--- a/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
+++ b/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
@@ -30,7 +30,11 @@ const RegisterForm = () => {
             const responseData = await registerUser({username, firstName, lastName, email, password});
             console.log(responseData); //проверка вывода данных
             if (responseData && !responseData.error) {
-                console.log('Регистрация успешна')
+                console.log('Регистрация успешна');
+                localStorage.setItem("user", JSON.stringify({
+                    firstName,
+                    lastName
+                }));
                 navigate('/my-surveys');
             }
             else {
diff --git a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
index f2a4fe1..44d135a 100644
--- a/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
+++ b/SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
@@ -11,6 +11,7 @@
 }
 
 .param{
+    border-radius: 4px;
     background-color: #FFFFFF;
     padding-top: 15px;
     padding-bottom: 97px;
diff --git a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
index f80ffbd..e4dbd0f 100644
--- a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
+++ b/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{
-    margin-top: -17px;
-    width: 80%;
-    padding-top: 35px;
+.textareaTitle,
+.textareaDescrip {
+    width: 100%;
     resize: none;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 600;
     border: none;
     outline: none;
-    line-height: 30px;
-    word-break: break-word;
+    font-family: inherit;
+    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;
diff --git a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx b/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
index f10360a..fb22d1c 100644
--- a/SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
+++ b/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}>
-                    <textarea
-                        ref={descriptionTextareaRef}
-                        className={styles.textareaDescrip}
-                        value={descriptionSurvey}
-                        placeholder={'Добавить описание'}
-                        onChange={handleDescriptionChange}
-                        onKeyDown={handleDescriptionKeyDown}
-                        onBlur={handleDescriptionBlur}
-                    />
-                </p>
+                <div className={styles.descriptionWrapper}>
+                <textarea
+                    ref={descriptionTextareaRef}
+                    className={styles.textareaDescrip}
+                    value={descriptionSurvey}
+                    placeholder={'Добавить описание'}
+                    onChange={handleDescriptionChange}
+                    onKeyDown={handleDescriptionKeyDown}
+                    onBlur={handleDescriptionBlur}
+                    rows={1} // Начальное количество строк
+                />
+                </div>
             );
         } else {
             return (