diff --git a/SurveyFrontend/src/api/AuthApi.ts b/SurveyFrontend/src/api/AuthApi.ts index 6592091..4b0b45b 100644 --- a/SurveyFrontend/src/api/AuthApi.ts +++ b/SurveyFrontend/src/api/AuthApi.ts @@ -79,7 +79,6 @@ export const authUser = async (data: IAuthData) => { body: JSON.stringify(data), }); const responseData = await handleResponse(response); - console.log("Полный ответ сервера:", responseData); const token = responseData.accessToken || responseData.token; if (token) { diff --git a/SurveyFrontend/src/components/LoginForm/LoginForm.module.css b/SurveyFrontend/src/components/LoginForm/LoginForm.module.css index fca2331..d3f041b 100644 --- a/SurveyFrontend/src/components/LoginForm/LoginForm.module.css +++ b/SurveyFrontend/src/components/LoginForm/LoginForm.module.css @@ -29,12 +29,30 @@ font-size: 24px; font-weight: 600; line-height: 88%; - color: #000000; /* Цвет текста по умолчанию */ + color: #000000; outline: none; border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */ + border-bottom: 2px solid rgba(0, 0, 0, 0.2); padding: 5px 0; - opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */ + opacity: 1; +} + +.password_container{ + display: flex; + flex-direction: column; + gap: 3px; +} + +.password_container .error{ + border-bottom: 2px solid rgba(192, 35, 31, 1); +} + +.errorMessage{ + text-align: left; + font-size: 14px; + font-weight: 400; + line-height: 88%; + color: #C0231F; } .input::placeholder { @@ -42,21 +60,20 @@ font-weight: 600; line-height: 88%; color: #000000; - opacity: 0.2; /* Прозрачность placeholder */ + opacity: 0.2; } .input:focus::placeholder { - opacity: 0; /* Убираем placeholder при фокусе */ + opacity: 0; } -/* Отключаем стиль для input, когда в нём есть данные */ .input:not(:placeholder-shown) { color: black; opacity: 1; } .input:focus { - border-bottom: 1px solid black; /* Чёрная граница при фокусе */ + border-bottom: 2px solid black; } .signIn{ diff --git a/SurveyFrontend/src/components/LoginForm/LoginForm.tsx b/SurveyFrontend/src/components/LoginForm/LoginForm.tsx index 553cd37..1fcab4d 100644 --- a/SurveyFrontend/src/components/LoginForm/LoginForm.tsx +++ b/SurveyFrontend/src/components/LoginForm/LoginForm.tsx @@ -10,24 +10,33 @@ const LoginForm = () => { }); const navigate = useNavigate(); + const [error, setError] = useState(null); - const emailRef = useRef(null); // ref для поля email - const passwordRef = useRef(null); // ref для поля password + const emailRef = useRef(null); + const passwordRef = useRef(null); const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); - const email = emailRef.current?.value || ''; - const password = passwordRef.current?.value || ''; + const email = emailRef.current?.value ?? ''; + const password = passwordRef.current?.value ?? ''; + setError(null); try{ const responseData = await authUser({email, password}); if (responseData && !responseData.error) navigate('/my-surveys'); else - console.error('Ошибка аутентификации:', responseData); + setError('Неверный логин или пароль') } catch(err){ console.error('Ошибка при отправке запроса:', err); + setError('Неверный логин или пароль') + } + } + + const handleChange = () => { + if (error) { + setError(null); } } @@ -40,19 +49,24 @@ const LoginForm = () => { type={'email'} placeholder='Почта' ref={emailRef} + onChange={handleChange} onFocus={() => setFocused({ ...focused, email: true })} onBlur={() => setFocused({ ...focused, email: false })} style={{ color: focused.email ? 'black' : 'inherit' }} /> - setFocused({ ...focused, password: true })} - onBlur={() => setFocused({ ...focused, password: false })} - style={{ color: focused.password ? 'black' : 'inherit' }} - /> +
+ setFocused({ ...focused, password: true })} + onBlur={() => setFocused({ ...focused, password: false })} + style={{ color: focused.password ? 'black' : 'inherit' }} + /> + {error &&

{error}

} +

Еще не с нами? diff --git a/SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css b/SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css index d2ac3b1..52a9f86 100644 --- a/SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css +++ b/SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css @@ -28,12 +28,12 @@ font-size: 24px; font-weight: 600; line-height: 88%; - color: #000000; /* Цвет текста по умолчанию */ + color: #000000; outline: none; border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */ + border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 5px 0; - opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */ + opacity: 1; } .input::placeholder { @@ -41,11 +41,11 @@ font-weight: 600; line-height: 88%; color: #000000; - opacity: 0.2; /* Прозрачность placeholder */ + opacity: 0.2; } .input:focus::placeholder { - opacity: 0; /* Убираем placeholder при фокусе */ + opacity: 0; } /* Отключаем стиль для input, когда в нём есть данные */ @@ -81,4 +81,23 @@ .recommendationLink{ color: #3788D6; margin-left: 5px; +} + +.emailContainer{ + display: flex; + flex-direction: column; + gap: 3px; +} + +.emailContainer .error{ + border-bottom: 2px solid rgba(192, 35, 31, 1); +} + +.errorMessage{ + text-align: left; + font-size: 14px; + font-weight: 400; + line-height: 88%; + color: #C0231F; + margin: 0; } \ No newline at end of file diff --git a/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx b/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx index 0dde592..380049a 100644 --- a/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx +++ b/SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx @@ -11,6 +11,8 @@ const RegisterForm = () => { password: false }); + const [error, setError] = useState(null); + const nameRef = useRef(null); const surnameRef = useRef(null); const emailRef = useRef(null); @@ -20,15 +22,16 @@ const RegisterForm = () => { const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); - const firstName = nameRef.current?.value || ''; - const lastName = surnameRef.current?.value || ''; - const email = emailRef.current?.value || ''; - const password = passwordRef.current?.value || ''; + const firstName = nameRef.current?.value ?? ''; + const lastName = surnameRef.current?.value ?? ''; + const email = emailRef.current?.value ?? ''; + const password = passwordRef.current?.value ?? ''; const username = firstName + lastName || ''; + setError(null); + try{ const responseData = await registerUser({username, firstName, lastName, email, password}); - console.log(responseData); //проверка вывода данных if (responseData && !responseData.error) { console.log('Регистрация успешна'); localStorage.setItem("user", JSON.stringify({ @@ -37,16 +40,29 @@ const RegisterForm = () => { })); navigate('/my-surveys'); } - else { - console.error(`Ошибка регистрации: ${responseData}`); - console.log('Регистраиця не удалась'); + else if (responseData.status === 409){ + setError('Аккаунт с такой почтой уже зарегистрирован'); } } catch (err) { - console.error(`Ошибка при отправке запроса ${err}`); + if (err instanceof Error) { + if (err.message.includes('409')) { + setError('Аккаунт с такой почтой уже зарегистрирован'); + } else { + setError('Произошла ошибка при регистрации'); + } + } else { + setError('Неизвестная ошибка'); + } } } + const handleEmailChange = () => { + if (error) { + setError(null); + } + }; + return (

Регистрация

@@ -69,15 +85,19 @@ const RegisterForm = () => { onBlur={() => setFocused({ ...focused, lastName: false })} style={{ color: focused.lastName ? 'black' : 'inherit' }} /> - setFocused({ ...focused, email: true })} - onBlur={() => setFocused({ ...focused, email: false })} - style={{ color: focused.email ? 'black' : 'inherit' }} - /> +
+ setFocused({ ...focused, email: true })} + onBlur={() => setFocused({ ...focused, email: false })} + style={{ color: focused.email ? 'black' : 'inherit' }} + /> + {error &&

{error}

} +
{ const [survey, setSurvey] = useState(null); @@ -50,7 +51,7 @@ export const SurveyPage: React.FC = () => { if (!survey) return
Опрос не найден
; return ( -
+
{ - // const location = useLocation(); - // const isLogin = location.pathname === '/login'; - // - // return ( - //
- // {isLogin ? : } - //
- // ); - const location = useLocation(); const isLoginPage = location.pathname === '/login'; const isRegisterPage = location.pathname === '/register'; @@ -24,7 +15,7 @@ const AuthForm = () => { } else if (isRegisterPage) { content = ; } else { - content = ; // По умолчанию показываем LoginForm + content = ; } return (