added form validation

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}>Еще не с нами?