Я не вижу ошибок при регитсрации 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';

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={`${style.form_input} ${errors.username ? style.error : ''}`}
                    type="text"
                    name="username"
                    placeholder="Username"
                    value={formData.username}
                    onChange={handleChange}
                />
                {errors.username && <span className={style.error_message}>{errors.username}</span>}
                
                <input
                    className={`${style.form_input} ${errors.password ? style.error : ''}`}
                    type="password"
                    name="password"
                    placeholder="Password"
                    value={formData.password}
                    onChange={handleChange}
                />
                {errors.password && <span className={style.error_message}>{errors.password}</span>}
                
                <input
                    className={`${style.form_input} ${errors.repeatPassword ? style.error : ''}`}
                    type="password"
                    name="repeatPassword"
                    placeholder="Repeat Password"
                    value={formData.repeatPassword}
                    onChange={handleChange}
                />
                {errors.repeatPassword && <span className={style.error_message}>{errors.repeatPassword}</span>}
                
                <input
                    className={`${style.form_input} ${errors.firstName ? style.error : ''}`}
                    type="text"
                    name="firstName"
                    placeholder="First Name"
                    value={formData.firstName}
                    onChange={handleChange}
                />
                {errors.firstName && <span className={style.error_message}>{errors.firstName}</span>}
                
                <input
                    className={`${style.form_input} ${errors.lastName ? style.error : ''}`}
                    type="text"
                    name="lastName"
                    placeholder="Last Name"
                    value={formData.lastName}
                    onChange={handleChange}
                />
                {errors.lastName && <span className={style.error_message}>{errors.lastName}</span>}
                
                <input
                    className={`${style.form_input} ${errors.age ? style.error : ''}`}
                    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>
    );
}; .form_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.form {
    display: flex;
    flex-direction: column;
    max-width: 450px;
    gap: 15px;
}

.form_title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.header__logo {
    width: 350px;
    height: 46.7px;
    margin-bottom: 30px;
}

.form_input {
    font-size: 16px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline-color: rgba(84, 212, 137, 0.5);
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    transition: border-color 0.3s;
}

.form_button_submit {
    background-color: rgb(84, 212, 127);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgba(84, 212, 137, 0.5);
    box-shadow: rgba(60, 66, 87, 0.16) 0px 0px 0px 1px;
}

.form_button_submit:hover {
    background-color: rgb(25, 204, 2);
    transition: 0.3s ease;
}

.switch_form_button {
    border: none;
    background: none;
    color: rgb(76, 76, 76);
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

.form_input.error {
    border-color: red;
}

.error_message {
    position: relative;
    color: red;
    font-size: 12px;
    top: -8px;
    margin-bottom: 5px; 
}
import 'dotenv/config';
import express from 'express';
import cors from 'cors';
import { cards } from './cards.js';
import { pool } from './db.js';
import 'dotenv/config';

const app = express();
const PORT = 5000;

app.use(cors());
app.use(express.json());
app.use('/img', express.static('img'));

app.post('/login', async (req, res) => {
    const { username, password } = req.body;

    try {
        const userCheck = await pool.query('SELECT * FROM users WHERE username = $1', [username]);
        if (userCheck.rows.length === 0) {
            return res.status(401).json({ message: 'Invalid username or password' });
        }

        const user = userCheck.rows[0];

        if (user.password !== password) {
            return res.status(401).json({ message: 'Invalid username or password' });
        }

        res.status(200).json({ message: 'Login successful' });
    } catch (error) {
        console.error(error);
        res.status(500).json({ message: 'Server error' });
    }
});
app.get('/api/cards', (req, res) => {
    const { search } = req.query;

    if (search) {
        const searchLower = search.toLowerCase();
        const filteredCards = cards.filter((cardObj) => {
            const title = cardObj.card.text.heading.toLowerCase();
            const description = cardObj.card.text.description.toLowerCase();
            return (
                title.includes(searchLower) || description.includes(searchLower)
            );
        });

        return res.status(200).json(filteredCards);
    }

    res.status(200).json(cards);
});

app.post('/signup', async (req, res) => {
    const { username, password, repeatPassword, firstName, lastName, age } = req.body;

    if (username.length < 3) {
        return res.status(400).json({ message: 'Username must contain 3 symbols or more' });
    }
    if (password.length < 4 || !/\d/.test(password) || !/[a-zA-Z]/.test(password)) {
        return res.status(400).json({ message: 'Password must contain at least 1 number, 1 letter, and be 4 symbols or more' });
    }
    if (password !== repeatPassword) {
        return res.status(400).json({ message: 'Passwords do not match' });
    }
    if (firstName.length < 3) {
        return res.status(400).json({ message: 'First name must contain 3 symbols or more' });
    }
    if (lastName.length < 3) {
        return res.status(400).json({ message: 'Last name must contain 3 symbols or more' });
    }
    if (isNaN(age) || age <= 0) {
        return res.status(400).json({ message: 'Age must be a number and cannot be zero' });
    }

    try {
        const userCheck = await pool.query('SELECT * FROM users WHERE username = $1', [username]);
        if (userCheck.rows.length > 0) {
            return res.status(400).json({ message: 'Username already exists' });
        }

        const newUser = await pool.query(
            'INSERT INTO users (username, password, first_name, last_name, age) VALUES ($1, $2, $3, $4, $5) RETURNING *',
            [username, password, firstName, lastName, age]
        );

        res.status(201).json({ message: 'User registered successfully', user: newUser.rows[0] });
    } catch (error) {
        console.error(error);
        res.status(500).json({ message: 'Server error' });
    }
});
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});