sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'user-registration' into 'unstable'

Browse source 
User registration

See merge request internship-2025/survey-webapp/survey-webapp!13
This commit is contained in:
Tatyana Nikolaeva 2025-05-14 13:03:14 +00:00
commit 122f14adf7
21 changed files with 804 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

8
SurveyFrontend/src/App.tsx
View file

@ -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>
);

42
SurveyFrontend/src/api/AuthApi.ts
View file

@ -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),
})
return await handleResponse(response);
}
catch(error){
...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);
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;
}
}
};

35
SurveyFrontend/src/api/BaseApi.ts
View file

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

29
SurveyFrontend/src/api/QuestionApi.ts Normal file
View file

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

117
SurveyFrontend/src/api/SurveyApi.ts Normal file
View file

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

49
SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
View file

@ -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;

35
SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
View file

@ -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;

14
SurveyFrontend/src/components/Header/Header.tsx
View file

@ -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>
);
};

85
SurveyFrontend/src/components/LoginForm/LoginForm.module.css Normal file
View file

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

65
SurveyFrontend/src/components/LoginForm/LoginForm.tsx Normal file
View file

@ -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;

5
SurveyFrontend/src/components/Logo/Logo.tsx
View file

@ -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>
);

69
SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx
View file

@ -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',
status: 'active',
},
{
id: '2',
title: 'Опрос 2',
description: 'Описание опроса 2',
date: '01-01-2025',
status: 'completed',
}
]
useEffect(() => {
const fetchSurvey = async () => {
try {
const mySurveys = await getMySurveys();
const surveysWithStatus: MySurveyItem[] = mySurveys.map((survey: ISurvey) => ({
...survey,
status: 'active',
}));
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

3
SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
View file

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

8
SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
View file

@ -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}>

84
SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css Normal file
View file

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

99
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx Normal file
View file

@ -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;

1
SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
View file

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

60
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
View file

@ -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;

69
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
View file

@ -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 (

12
SurveyFrontend/src/pages/AuthForm/AuthForm.module.css Normal file
View file

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

35
SurveyFrontend/src/pages/AuthForm/AuthForm.tsx Normal file
View file

@ -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;