Merge branch 'unstable' into 'main'
Unstable into main See merge request internship-2025/survey-webapp/survey-webapp!14
This commit is contained in:
Tatyana Nikolaeva
commit
8d9a9fe918
39 changed files with 963 additions and 157 deletions
|
|
@ -1,6 +1,9 @@
|
|||
using Microsoft.AspNetCore.Authorization;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using SurveyBackend.Core.Contexts;
|
||||
using SurveyBackend.Core.Services;
|
||||
using SurveyBackend.DTOs;
|
||||
using SurveyBackend.DTOs.User;
|
||||
using SurveyBackend.Mappers;
|
||||
using IAuthorizationService = SurveyBackend.Core.Services.IAuthorizationService;
|
||||
|
||||
|
|
@ -14,14 +17,19 @@ namespace SurveyBackend.Controllers;
|
|||
public class AuthController : ControllerBase
|
||||
{
|
||||
private readonly IAuthorizationService _authorizationService;
|
||||
private readonly IUserContext _userContext;
|
||||
private readonly IUserService _userService;
|
||||
|
||||
/// <summary>
|
||||
/// Нет ну вы прикалываетесь что ли мне ща каждый контроллер описывать?
|
||||
/// </summary>
|
||||
/// <param name="authorizationService"></param>
|
||||
public AuthController(IAuthorizationService authorizationService)
|
||||
public AuthController(IAuthorizationService authorizationService, IUserContext userContext,
|
||||
IUserService userService)
|
||||
{
|
||||
_authorizationService = authorizationService;
|
||||
_userContext = userContext;
|
||||
_userService = userService;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
|
@ -55,7 +63,19 @@ public class AuthController : ControllerBase
|
|||
public async Task<IActionResult> Register([FromBody] UserRegistrationDto registerData)
|
||||
{
|
||||
var token = await _authorizationService.RegisterUser(
|
||||
AuthMapper.UserRegistrationToModel(registerData));
|
||||
UserMapper.UserRegistrationToModel(registerData));
|
||||
return Ok(new { token = token });
|
||||
}
|
||||
|
||||
[Authorize]
|
||||
[HttpGet("me")]
|
||||
[ProducesResponseType(StatusCodes.Status401Unauthorized)]
|
||||
[ProducesResponseType(StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> GetMe()
|
||||
{
|
||||
var userId = _userContext.UserId;
|
||||
var user = await _userService.GetUserById(userId);
|
||||
var result = UserMapper.ModelToOutput(user);
|
||||
return Ok(result);
|
||||
}
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ public class QuestionController : ControllerBase
|
|||
[AllowAnonymous]
|
||||
[HttpGet]
|
||||
[ProducesResponseType(StatusCodes.Status404NotFound)]
|
||||
[ProducesResponseType(typeof(List<OutputQuestionDto>), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(List<QuestionOutputDto>), StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> GetBySurveyId([FromRoute] int surveyId)
|
||||
{
|
||||
var questions = await _questionService.GetQuestionsBySurveyIdAsync(surveyId);
|
||||
|
|
@ -47,11 +47,31 @@ public class QuestionController : ControllerBase
|
|||
[Authorize]
|
||||
[HttpPost]
|
||||
[ProducesResponseType(StatusCodes.Status404NotFound)]
|
||||
[ProducesResponseType(StatusCodes.Status201Created)]
|
||||
public async Task<IActionResult> AddQuestion(CreateQuestionDto dto, [FromRoute] int surveyId)
|
||||
[ProducesResponseType(StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> AddQuestion(QuestionCreateDto dto, [FromRoute] int surveyId)
|
||||
{
|
||||
var model = QuestionMapper.QuestionCreationToModel(dto, surveyId);
|
||||
await _questionService.AddQuestionAsync(model);
|
||||
return Created();
|
||||
var result = QuestionMapper.ModelToQuestionDto(model);
|
||||
return Ok(result);
|
||||
}
|
||||
|
||||
[Authorize]
|
||||
[HttpPut("{id}")]
|
||||
public async Task<IActionResult> UpdateQuestion([FromBody] QuestionUpdateDto dto, [FromRoute] int id,
|
||||
[FromRoute] int surveyId)
|
||||
{
|
||||
var question = QuestionMapper.QuestionUpdateToModel(dto, surveyId, id);
|
||||
await _questionService.UpdateQuestionAsync(question);
|
||||
var result = QuestionMapper.ModelToQuestionDto(question);
|
||||
return Ok(result);
|
||||
}
|
||||
|
||||
[Authorize]
|
||||
[HttpDelete("{id}")]
|
||||
public async Task<IActionResult> DeleteQuestion([FromRoute] int id, [FromRoute] int surveyId)
|
||||
{
|
||||
await _questionService.DeleteQuestionAsync(id);
|
||||
return Ok();
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@ public class SurveyController : ControllerBase
|
|||
/// <returns></returns>
|
||||
[AllowAnonymous]
|
||||
[HttpGet]
|
||||
[ProducesResponseType(typeof(List<OutputSurveyDto>), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(List<SurveyOutputDto>), StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> Get()
|
||||
{
|
||||
var surveys = await _surveyService.GetSurveysAsync();
|
||||
|
|
@ -49,7 +49,7 @@ public class SurveyController : ControllerBase
|
|||
[AllowAnonymous]
|
||||
[HttpGet("{id}")]
|
||||
[ProducesResponseType(StatusCodes.Status404NotFound)]
|
||||
[ProducesResponseType(typeof(OutputSurveyDto), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(SurveyOutputDto), StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> Get(int id)
|
||||
{
|
||||
var survey = await _surveyService.GetSurveyAsync(id);
|
||||
|
|
@ -65,14 +65,32 @@ public class SurveyController : ControllerBase
|
|||
/// <returns></returns>
|
||||
[Authorize]
|
||||
[HttpPost]
|
||||
[ProducesResponseType(StatusCodes.Status201Created)]
|
||||
public async Task<IActionResult> Post([FromBody] CreateSurveyDto dto)
|
||||
[ProducesResponseType(StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> Post([FromBody] SurveyCreateDto dto)
|
||||
{
|
||||
var userId = _userContext.UserId;
|
||||
|
||||
var survey = SurveyMapper.CreateDtoToModel(dto, userId);
|
||||
await _surveyService.AddSurveyAsync(survey);
|
||||
return Created();
|
||||
var result = SurveyMapper.ModelToOutputDto(survey);
|
||||
return Ok(result);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Обновляет опрос целиком
|
||||
/// </summary>
|
||||
/// <param name="id"></param>
|
||||
/// <param name="dto"></param>
|
||||
/// <returns></returns>
|
||||
[Authorize]
|
||||
[HttpPut("{id}")]
|
||||
public async Task<IActionResult> Put(int id, [FromBody] SurveyUpdateDto dto)
|
||||
{
|
||||
var userId = _userContext.UserId;
|
||||
var survey = SurveyMapper.UpdateDtoToModel(dto, userId, id);
|
||||
await _surveyService.UpdateSurveyAsync(survey);
|
||||
var result = SurveyMapper.ModelToOutputDto(survey);
|
||||
return Ok(result);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
|
@ -100,7 +118,7 @@ public class SurveyController : ControllerBase
|
|||
[Authorize]
|
||||
[HttpGet("my")]
|
||||
[ProducesResponseType(StatusCodes.Status401Unauthorized)]
|
||||
[ProducesResponseType(typeof(List<OutputSurveyDto>), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(List<SurveyOutputDto>), StatusCodes.Status200OK)]
|
||||
public async Task<IActionResult> GetMySurveys()
|
||||
{
|
||||
var userId = _userContext.UserId;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,15 @@ namespace SurveyBackend.DTOs.Question;
|
|||
/// <summary>
|
||||
/// Схема для создания нового Question
|
||||
/// </summary>
|
||||
public class CreateQuestionDto
|
||||
public class QuestionCreateDto
|
||||
{
|
||||
/// <summary>
|
||||
/// Название вопроса
|
||||
/// </summary>
|
||||
public required string Title { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Тип вопроса
|
||||
/// </summary>
|
||||
public required string QuestionType { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Варианты ответа (только если вопрос с выбором)
|
||||
/// </summary>
|
||||
public List<string>? AnswerVariants { get; set; }
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ namespace SurveyBackend.DTOs.Question;
|
|||
/// <summary>
|
||||
/// Выходнпя схема вопроса
|
||||
/// </summary>
|
||||
public class OutputQuestionDto
|
||||
public class QuestionOutputDto
|
||||
{
|
||||
/// <summary>
|
||||
/// ID вопроса
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
namespace SurveyBackend.DTOs.Question;
|
||||
|
||||
public class QuestionUpdateDto : QuestionCreateDto
|
||||
{
|
||||
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ namespace SurveyBackend.DTOs.Survey;
|
|||
/// <summary>
|
||||
/// Схема для создания нового опроса
|
||||
/// </summary>
|
||||
public class CreateSurveyDto
|
||||
public class SurveyCreateDto
|
||||
{
|
||||
/// <summary>
|
||||
/// Название опроса
|
||||
|
|
@ -3,7 +3,7 @@ namespace SurveyBackend.DTOs.Survey;
|
|||
/// <summary>
|
||||
/// Выходная схема опроса
|
||||
/// </summary>
|
||||
public class OutputSurveyDto
|
||||
public class SurveyOutputDto
|
||||
{
|
||||
/// <summary>
|
||||
/// ID опроса
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
namespace SurveyBackend.DTOs.Survey;
|
||||
|
||||
public class SurveyUpdateDto : SurveyCreateDto
|
||||
{
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
namespace SurveyBackend.DTOs;
|
||||
namespace SurveyBackend.DTOs.User;
|
||||
|
||||
/// <summary>
|
||||
/// Схема авторизации пользователя
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
namespace SurveyBackend.DTOs.User;
|
||||
|
||||
public class UserOutputDto
|
||||
{
|
||||
public long Id { get; set; }
|
||||
public required string Email { get; set; }
|
||||
public required string FirstName { get; set; }
|
||||
public string? LastName { get; set; }
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
namespace SurveyBackend.DTOs;
|
||||
namespace SurveyBackend.DTOs.User;
|
||||
|
||||
/// <summary>
|
||||
/// Схема регистрации пользователя
|
||||
|
|
@ -10,11 +10,6 @@ public record UserRegistrationDto
|
|||
/// </summary>
|
||||
public required string Email { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Юзернейм
|
||||
/// </summary>
|
||||
public string Username { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Имя
|
||||
/// </summary>
|
||||
|
|
@ -17,7 +17,7 @@ public static class QuestionMapper
|
|||
/// <param name="surveyId"></param>
|
||||
/// <returns></returns>
|
||||
/// <exception cref="BadRequestException"></exception>
|
||||
public static QuestionBase QuestionCreationToModel(CreateQuestionDto dto, int surveyId)
|
||||
public static QuestionBase QuestionCreationToModel(QuestionCreateDto dto, int surveyId)
|
||||
{
|
||||
return dto.QuestionType.ToLower() switch
|
||||
{
|
||||
|
|
@ -30,13 +30,13 @@ public static class QuestionMapper
|
|||
{
|
||||
Title = dto.Title,
|
||||
SurveyId = surveyId,
|
||||
AnswerVariants = dto.AnswerVariants?.Select(v => new AnswerVariant { Text = v }).ToList() ?? [],
|
||||
AnswerVariants = [],
|
||||
},
|
||||
"multipleanswerquestion" => new MultipleAnswerQuestion
|
||||
{
|
||||
Title = dto.Title,
|
||||
SurveyId = surveyId,
|
||||
AnswerVariants = dto.AnswerVariants?.Select(v => new AnswerVariant { Text = v }).ToList() ?? []
|
||||
AnswerVariants = []
|
||||
},
|
||||
_ => throw new BadRequestException("Unknown question type")
|
||||
};
|
||||
|
|
@ -47,10 +47,10 @@ public static class QuestionMapper
|
|||
/// </summary>
|
||||
/// <param name="question"></param>
|
||||
/// <returns></returns>
|
||||
public static OutputQuestionDto ModelToQuestionDto(QuestionBase question)
|
||||
public static QuestionOutputDto ModelToQuestionDto(QuestionBase question)
|
||||
{
|
||||
var withAnswerVariants = question.GetType() != typeof(TextQuestion);
|
||||
return new OutputQuestionDto
|
||||
return new QuestionOutputDto
|
||||
{
|
||||
Id = question.Id,
|
||||
SurveyId = question.SurveyId,
|
||||
|
|
@ -60,6 +60,34 @@ public static class QuestionMapper
|
|||
};
|
||||
}
|
||||
|
||||
public static QuestionBase QuestionUpdateToModel(QuestionCreateDto dto, int surveyId, int questionId)
|
||||
{
|
||||
return dto.QuestionType.ToLower() switch
|
||||
{
|
||||
"textquestion" => new TextQuestion
|
||||
{
|
||||
Id = questionId,
|
||||
Title = dto.Title,
|
||||
SurveyId = surveyId,
|
||||
},
|
||||
"singleanswerquestion" => new SingleAnswerQuestion
|
||||
{
|
||||
Id = questionId,
|
||||
Title = dto.Title,
|
||||
SurveyId = surveyId,
|
||||
AnswerVariants = [],
|
||||
},
|
||||
"multipleanswerquestion" => new MultipleAnswerQuestion
|
||||
{
|
||||
Id = questionId,
|
||||
Title = dto.Title,
|
||||
SurveyId = surveyId,
|
||||
AnswerVariants = []
|
||||
},
|
||||
_ => throw new BadRequestException("Unknown question type")
|
||||
};
|
||||
}
|
||||
|
||||
private static List<OutputAnswerVariantDto> AnswerVariantsToDto(IEnumerable<AnswerVariant> answerVariants)
|
||||
{
|
||||
return answerVariants.Select(av => new OutputAnswerVariantDto
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ public static class SurveyMapper
|
|||
/// <param name="dto"></param>
|
||||
/// <param name="userId"></param>
|
||||
/// <returns></returns>
|
||||
public static Survey CreateDtoToModel(CreateSurveyDto dto, int userId)
|
||||
public static Survey CreateDtoToModel(SurveyCreateDto dto, int userId)
|
||||
{
|
||||
return new Survey
|
||||
{
|
||||
|
|
@ -24,14 +24,22 @@ public static class SurveyMapper
|
|||
};
|
||||
}
|
||||
|
||||
public static Survey UpdateDtoToModel(SurveyUpdateDto dto, int userId, int surveyId) => new Survey
|
||||
{
|
||||
Id = surveyId,
|
||||
Title = dto.Title,
|
||||
Description = dto.Description,
|
||||
CreatedBy = userId
|
||||
};
|
||||
|
||||
/// <summary>
|
||||
/// Модель в выходную схему
|
||||
/// </summary>
|
||||
/// <param name="survey"></param>
|
||||
/// <returns></returns>
|
||||
public static OutputSurveyDto ModelToOutputDto(Survey survey)
|
||||
public static SurveyOutputDto ModelToOutputDto(Survey survey)
|
||||
{
|
||||
return new OutputSurveyDto
|
||||
return new SurveyOutputDto
|
||||
{
|
||||
Id = survey.Id,
|
||||
Title = survey.Title,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
using SurveyBackend.Core.Models;
|
||||
using SurveyBackend.DTOs;
|
||||
using SurveyBackend.DTOs.User;
|
||||
|
||||
namespace SurveyBackend.Mappers;
|
||||
|
||||
/// <summary>
|
||||
/// Маппер всего связанного с авторизацией
|
||||
/// </summary>
|
||||
public static class AuthMapper
|
||||
public static class UserMapper
|
||||
{
|
||||
/// <summary>
|
||||
/// Перегнать схему регистрации в нового юзера
|
||||
|
|
@ -20,4 +21,12 @@ public static class AuthMapper
|
|||
LastName = dto.LastName,
|
||||
Password = dto.Password,
|
||||
};
|
||||
|
||||
public static UserOutputDto ModelToOutput(User model) => new UserOutputDto
|
||||
{
|
||||
Id = model.Id,
|
||||
FirstName = model.FirstName,
|
||||
LastName = model.LastName,
|
||||
Email = model.Email,
|
||||
};
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ namespace SurveyBackend.Core.Services;
|
|||
public interface IUserService
|
||||
{
|
||||
public Task<User> GetUserByEmail(string email);
|
||||
public Task<User> GetUserById(int id);
|
||||
public Task<bool> IsEmailTaken(string email);
|
||||
public Task CreateUserAsync(User user);
|
||||
}
|
||||
|
|
@ -10,12 +10,14 @@ public class QuestionService : IQuestionService
|
|||
{
|
||||
private readonly IQuestionRepository _questionRepository;
|
||||
private readonly ISurveyRepository _surveyRepository;
|
||||
private readonly IUserContext _userContext;
|
||||
|
||||
public QuestionService(IQuestionRepository questionRepository, ISurveyRepository surveyRepository,
|
||||
IUserContext userContext)
|
||||
{
|
||||
_questionRepository = questionRepository;
|
||||
_surveyRepository = surveyRepository;
|
||||
_userContext = userContext;
|
||||
}
|
||||
|
||||
public async Task AddQuestionAsync(QuestionBase question)
|
||||
|
|
|
|||
|
|
@ -19,6 +19,11 @@ public class UserService : IUserService
|
|||
return await _userRepository.GetUserByEmail(email) ?? throw new NotFoundException("Email not found");
|
||||
}
|
||||
|
||||
public async Task<User> GetUserById(int id)
|
||||
{
|
||||
return await _userRepository.GetByIdAsync(id) ?? throw new NotFoundException("User not found");
|
||||
}
|
||||
|
||||
public async Task<bool> IsEmailTaken(string email)
|
||||
{
|
||||
return await _userRepository.GetUserByEmail(email) != null;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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
29
SurveyFrontend/src/api/QuestionApi.ts
Normal 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
117
SurveyFrontend/src/api/SurveyApi.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
85
SurveyFrontend/src/components/LoginForm/LoginForm.module.css
Normal 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
65
SurveyFrontend/src/components/LoginForm/LoginForm.tsx
Normal 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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@
|
|||
margin-bottom: 5px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
overflow-y: hidden;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.buttonQuestion{
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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
99
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
Normal 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;
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
}
|
||||
|
||||
.param{
|
||||
border-radius: 4px;
|
||||
background-color: #FFFFFF;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 97px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
12
SurveyFrontend/src/pages/AuthForm/AuthForm.module.css
Normal 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
35
SurveyFrontend/src/pages/AuthForm/AuthForm.tsx
Normal 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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue