added form validation

2025-05-24 16:05:35 +05:00 · 2025-05-24 16:05:35 +05:00 · 3912bc0044
commit 3912bc0044
parent 8622f9e9db
8 changed files with 120 additions and 56 deletions
--- 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{
--- 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<string | null>(null);

-    const emailRef = useRef<HTMLInputElement>(null); // ref для поля email
-    const passwordRef = useRef<HTMLInputElement>(null); // ref для поля password
+    const emailRef = useRef<HTMLInputElement>(null);
+    const passwordRef = useRef<HTMLInputElement>(null);

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        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' }}
                />
-                <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' }}
-                />
+                <div className={styles.password_container}>
+                    <input
+                        className={`${styles.input} ${styles.password} ${error ? styles.error : ''}`}
+                        type='password'
+                        placeholder='Пароль'
+                        ref={passwordRef}
+                        onChange={handleChange}
+                        onFocus={() => setFocused({ ...focused, password: true })}
+                        onBlur={() => setFocused({ ...focused, password: false })}
+                        style={{ color: focused.password ? 'black' : 'inherit' }}
+                    />
+                    {error && <p className={styles.errorMessage}>{error}</p>}
+                </div>
                <button className={styles.signIn} type="submit">Войти</button>
            </form>
            <p className={styles.recommendation}>Еще не с нами?
--- 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;
 }
--- 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<string | null>(null);
+
    const nameRef = useRef<HTMLInputElement>(null);
    const surnameRef = useRef<HTMLInputElement>(null);
    const emailRef = useRef<HTMLInputElement>(null);
@ -20,15 +22,16 @@ const RegisterForm = () => {

    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 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 (
        <div className={styles.registerContainer}>
            <h2 className={styles.title}>Регистрация</h2>
@ -69,15 +85,19 @@ const RegisterForm = () => {
                    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' }}
-                />
+                <div className={styles.emailContainer}>
+                    <input
+                        className={`${styles.input} ${styles.email} ${error ? styles.error : ''}`}
+                        type={'email'}
+                        placeholder='Почта'
+                        ref={emailRef}
+                        onChange={handleEmailChange}
+                        onFocus={() => setFocused({ ...focused, email: true })}
+                        onBlur={() => setFocused({ ...focused, email: false })}
+                        style={{ color: focused.email ? 'black' : 'inherit' }}
+                    />
+                    {error && <p className={styles.errorMessage}>{error}</p>}
+                </div>
                <input
                    className={`${styles.input} ${styles.password}`}
                    type='password'
--- a/SurveyFrontend/src/components/SurveyPage/SurveyPage.module.css
+++ b/SurveyFrontend/src/components/SurveyPage/SurveyPage.module.css
@ -0,0 +1,3 @@
+.survey_page{
+    width: 85%;
+}
--- a/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
+++ b/SurveyFrontend/src/components/SurveyPage/SurveyPage.tsx
@ -4,6 +4,7 @@ import {useEffect, useState} from "react";
 import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
 import {useParams} from "react-router-dom";
 import {getListQuestions} from "../../api/QuestionApi.ts";
+import styles from "./SurveyPage.module.css";

 export const SurveyPage: React.FC = () => {
    const [survey, setSurvey] = useState<ISurvey | null>(null);
@ -50,7 +51,7 @@ export const SurveyPage: React.FC = () => {
    if (!survey) return <div>Опрос не найден</div>;

    return (
-        <div className="survey-page">
+        <div className={styles.survey_page}>
            <SurveyInfo
                titleSurvey={survey.title}
                descriptionSurvey={survey.description}