Front/src/widgets/AuthForm/AuthForm.tsx - master - Rics/JobReady

Front/src/widgets/AuthForm/AuthForm.tsx
134 строки5 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:5675981cd
import React, {useState} from "react";
import styles from "./authForm.module.scss";
import {Checkbox, SocialButtons, TextField} from "@shared/components";
import {validateEmail, validatePassword, validateRequired} from "@shared/components/TextField/validation.ts";

interface AuthFormProps {
    type: "login" | "register";
}

export const AuthForm: React.FC<AuthFormProps> = ({ type }) => {
    const isRegister = type === "register";

    const [nick, setNick] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [errors, setErrors] = useState<{ [key: string]: string }>({});

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        const newErrors: { [key: string]: string } = {};

        if (isRegister) {
            newErrors.nick = validateRequired(nick);
            newErrors.email = validateEmail(email);
            newErrors.password = validatePassword(password);
        } else {
            newErrors.email = validateEmail(email);
            newErrors.password = validateRequired(password);
        }

        setErrors(newErrors);

        const hasErrors = Object.values(newErrors).some((err) => err);
        if (!hasErrors) {
            console.log("Форма отправлена", { nick, email, password });
        }
    };


    return (
        <div className={styles.wrapper}>
            <h2 className={styles.title}>
                {isRegister
                    ? "Создать аккаунт, чтобы сохранять свой прогресс"
                    : "Войти, чтобы продолжить своё обучение"}
            </h2>

            <SocialButtons />

            <div className={styles.divider}>
                <span>OR</span>
            </div>

            <form className={styles.form} onSubmit={handleSubmit}>
                {isRegister && (
                    <TextField
                        placeholder="Ник"
                        value={nick}
                        onChange={setNick}
                        error={errors.nick}
                    />
                )}
                {isRegister && (
                    <TextField
                        placeholder="Почта*"
                        type="email"
                        value={email}
                        onChange={setEmail}
                        error={errors.email}
                    />
                )}
                {isRegister && (
                    <TextField
                        placeholder="Пароль*"
                        type="password"
                        value={password}
                        onChange={setPassword}
                        error={errors.password}
                    />
                )}

                {!isRegister && (
                    <TextField
                        placeholder="Почта"
                        type="email"
                        value={email}
                        onChange={setEmail}
                        error={errors.email}
                    />
                )}
                {!isRegister && (
                    <TextField
                        placeholder="Пароль"
                        type="password"
                        value={password}
                        onChange={setPassword}
                        error={errors.password}
                    />
                )}

                {isRegister && (
                    <div className={styles.check}>
                        <Checkbox
                            label={
                                <span className={styles.agree}>
                                Соглашаюсь с <a href="#">правилами</a> JobReady
                            </span>
                            }
                        />
                    </div>
                )}

                <button type="submit" className={styles.submitBtn}>
                    {isRegister ? "ЗАРЕГИСТРИРОВАТЬСЯ" : "ВОЙТИ"}
                </button>

                <div className={styles.bottomText}>
                    {isRegister ? (
                        <>
                            Уже есть аккаунт? <a href="/auth">Войти</a>
                        </>
                    ) : (
                        <>
                            Ещё не зарегистрированы? <a href="/reg">Зарегистрироваться</a>
                            <br />
                            <a href="/rec">Забыли пароль?</a>
                        </>
                    )}
                </div>
            </form>
        </div>
    );
};