Можно этот код сделать более компактным? import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import logo from '../../../img/LogoSpring.svg';
import style from './AuthUp.module.css';
import { loginSuccess } from '../../Redux/actions';
import classNames from 'classnames'; // Импортируем библиотеку classnames

export const SignUpPage = () => {
    const [formData, setFormData] = useState({
        username: '',
        password: '',
        repeatPassword: '',
        firstName: '',
        lastName: '',
        age: '',
    });

    const [errors, setErrors] = useState({});
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
        setErrors({ ...errors, [name]: '' });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await fetch('http://localhost:5000/signup', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                alert('Signup successful!');
                dispatch(loginSuccess());
                navigate('/');
            } else {
                const data = await response.json();
                setErrors({ ...errors, ...data.errors });
            }
        } catch (error) {
            alert('Signup failed. Please try again.');
        }
    };

    return (
        <div className={style.form_wrapper}>
            <img className={style.header__logo} alt="Spring Framework Logo" src={logo} />
            <h1 className={style.form_title}>Create your account</h1>
            <form onSubmit={handleSubmit} className={style.form}>
                <input
                    className={classNames(style.form_input, { [style.error]: errors.username })}
                    type="text"
                    name="username"
                    placeholder="Username"
                    value={formData.username}
                    onChange={handleChange}
                />
                {errors.username && <span className={style.error_message}>{errors.username}</span>}
                
                <input
                    className={classNames(style.form_input, { [style.error]: errors.password })}
                    type="password"
                    name="password"
                    placeholder="Password"
                    value={formData.password}
                    onChange={handleChange}
                />
                {errors.password && <span className={style.error_message}>{errors.password}</span>}
                
                <input
                    className={classNames(style.form_input, { [style.error]: errors.repeatPassword })}
                    type="password"
                    name="repeatPassword"
                    placeholder="Repeat Password"
                    value={formData.repeatPassword}
                    onChange={handleChange}
                />
                {errors.repeatPassword && <span className={style.error_message}>{errors.repeatPassword}</span>}
                
                <input
                    className={classNames(style.form_input, { [style.error]: errors.firstName })}
                    type="text"
                    name="firstName"
                    placeholder="First Name"
                    value={formData.firstName}
                    onChange={handleChange}
                />
                {errors.firstName && <span className={style.error_message}>{errors.firstName}</span>}
                
                <input
                    className={classNames(style.form_input, { [style.error]: errors.lastName })}
                    type="text"
                    name="lastName"
                    placeholder="Last Name"
                    value={formData.lastName}
                    onChange={handleChange}
                />
                {errors.lastName && <span className={style.error_message}>{errors.lastName}</span>}
                
                <input
                    className={classNames(style.form_input, { [style.error]: errors.age })}
                    type="number"
                    name="age"
                    placeholder="Age"
                    value={formData.age}
                    onChange={handleChange}
                />
                {errors.age && <span className={style.error_message}>{errors.age}</span>}
                
                <button type="submit" className={style.form_button_submit}>
                    Sign Up
                </button>
            </form>
            <button onClick={() => navigate('/login')} className={style.switch_form_button}>
                Already have an account?
            </button>
        </div>
    );
};