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

requests for auth/register

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-05-10 15:56:50 +05:00
parent 9a3f05ef60
commit bc293f6370
9 changed files with 348 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

38
SurveyFrontend/src/components/LoginForm/LoginForm.tsx
View file

@ -1,20 +1,45 @@
import { Link } from "react-router-dom";
import {Link, useNavigate} from "react-router-dom";
import styles from './LoginForm.module.css';
import { useState } from 'react';
import {useRef, useState} from 'react';
import {authUser} from "../../api/AuthApi.ts";
const RegisterForm = () => {
const LoginForm = () => {
const [focused, setFocused] = useState({
email: false,
password: false
});
const navigate = useNavigate();
const emailRef = useRef<HTMLInputElement>(null); // ref для поля email
const passwordRef = useRef<HTMLInputElement>(null); // ref для поля password
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const email = emailRef.current?.value || '';
const password = passwordRef.current?.value || '';
try{
const responseData = await authUser({email, password});
if (responseData && !responseData.error)
navigate('/my-surveys');
else
console.error('Ошибка аутентификации:', responseData);
}
catch(err){
console.error('Ошибка при отправке запроса:', err);
}
}
return (
<div className={styles.loginContainer}>
<h2 className={styles.title}>С возвращением!</h2>
<form className={styles.form}>
<form className={styles.form} onSubmit={handleSubmit}>
<input
className={`${styles.input} ${styles.email}`}
type={'email'}
placeholder='Почта'
ref={emailRef}
onFocus={() => setFocused({ ...focused, email: true })}
onBlur={() => setFocused({ ...focused, email: false })}
style={{ color: focused.email ? 'black' : 'inherit' }}
@ -23,11 +48,12 @@ const RegisterForm = () => {
className={`${styles.input} ${styles.password}`}
type='password'
placeholder='Пароль'
ref={passwordRef}
onFocus={() => setFocused({ ...focused, password: true })}
onBlur={() => setFocused({ ...focused, password: false })}
style={{ color: focused.password ? 'black' : 'inherit' }}
/>
<button className={styles.signIn}>Войти</button>
<button className={styles.signIn} type="submit">Войти</button>
</form>
<p className={styles.recommendation}>Еще не с нами?
<Link className={styles.recommendationLink} to='/register'>Зарегистрируйтесь!</Link>
@ -36,4 +62,4 @@ const RegisterForm = () => {
);
}
export default RegisterForm;
export default LoginForm;

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

62
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
View file

@ -1,38 +1,75 @@
import { Link } from "react-router-dom";
import {Link, useNavigate} from "react-router-dom";
import styles from './RegisterForm.module.css';
import { useState } from 'react';
import {useRef, useState} from 'react';
import {registerUser} from "../../api/AuthApi.ts";
const RegisterForm = () => {
const [focused, setFocused] = useState({
name: false,
surname: false,
firstName: false,
lastName: false,
email: false,
password: false
});
const nameRef = useRef<HTMLInputElement>(null);
const surnameRef = useRef<HTMLInputElement>(null);
const emailRef = useRef<HTMLInputElement>(null);
const passwordRef = useRef<HTMLInputElement>(null);
const navigate = useNavigate();
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const firstName = nameRef.current?.value || '';
const lastName = surnameRef.current?.value || '';
const email = emailRef.current?.value || '';
const password = passwordRef.current?.value || '';
const username = firstName + lastName || '';
try{
const responseData = await registerUser({username, firstName, lastName, email, password});
console.log(responseData); //проверка вывода данных
if (responseData && !responseData.error) {
console.log('Регистрация успешна')
navigate('/my-surveys');
}
else {
console.error(`Ошибка регистрации: ${responseData}`);
console.log('Регистраиця не удалась');
}
}
catch (err) {
console.error(`Ошибка при отправке запроса ${err}`);
}
}
return (
<div className={styles.registerContainer}>
<h2 className={styles.title}>Регистрация</h2>
<form className={styles.form}>
<form className={styles.form} onSubmit={handleSubmit}>
<input
className={`${styles.input} ${styles.name}`}
type={'text'}
placeholder='Имя'
onFocus={() => setFocused({ ...focused, name: true })}
onBlur={() => setFocused({ ...focused, name: false })}
style={{ color: focused.name ? 'black' : 'inherit' }}
ref={nameRef}
onFocus={() => setFocused({ ...focused, firstName: true })}
onBlur={() => setFocused({ ...focused, firstName: false })}
style={{ color: focused.firstName ? 'black' : 'inherit' }}
/>
<input
className={`${styles.input} ${styles.surname}`}
type={'text'}
placeholder='Фамилия'
onFocus={() => setFocused({ ...focused, surname: true })}
onBlur={() => setFocused({ ...focused, surname: false })}
style={{ color: focused.surname ? 'black' : 'inherit' }}
ref={surnameRef}
onFocus={() => setFocused({ ...focused, lastName: true })}
onBlur={() => setFocused({ ...focused, lastName: false })}
style={{ color: focused.lastName ? 'black' : 'inherit' }}
/>
<input
className={`${styles.input} ${styles.email}`}
type={'email'}
placeholder='Почта'
ref={emailRef}
onFocus={() => setFocused({ ...focused, email: true })}
onBlur={() => setFocused({ ...focused, email: false })}
style={{ color: focused.email ? 'black' : 'inherit' }}
@ -41,11 +78,12 @@ const RegisterForm = () => {
className={`${styles.input} ${styles.password}`}
type='password'
placeholder='Пароль'
ref={passwordRef}
onFocus={() => setFocused({ ...focused, password: true })}
onBlur={() => setFocused({ ...focused, password: false })}
style={{ color: focused.password ? 'black' : 'inherit' }}
/>
<button className={styles.signUp}>Зарегистрироваться</button>
<button className={styles.signUp} type='submit'>Зарегистрироваться</button>
</form>
<p className={styles.recommendation}>Уже с нами?
<Link className={styles.recommendationLink} to='/login'>Войдите!</Link>