121 lines
5.1 KiB
TypeScript
121 lines
5.1 KiB
TypeScript
import {Link, useNavigate} from "react-router-dom";
|
||
import styles from './RegisterForm.module.css';
|
||
import {useRef, useState} from 'react';
|
||
import {registerUser} from "../../api/AuthApi.ts";
|
||
|
||
const RegisterForm = () => {
|
||
const [focused, setFocused] = useState({
|
||
firstName: false,
|
||
lastName: false,
|
||
email: false,
|
||
password: false
|
||
});
|
||
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const nameRef = useRef<HTMLInputElement>(null);
|
||
const surnameRef = useRef<HTMLInputElement>(null);
|
||
const emailRef = useRef<HTMLInputElement>(null);
|
||
const passwordRef = useRef<HTMLInputElement>(null);
|
||
|
||
const navigate = useNavigate();
|
||
|
||
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 username = firstName + lastName || '';
|
||
|
||
setError(null);
|
||
|
||
try{
|
||
if (email === '' || password === '' || firstName === '' || lastName === '') {
|
||
setError('Заполните все поля');
|
||
}
|
||
else{
|
||
const responseData = await registerUser({username, firstName, lastName, email, password});
|
||
if (responseData && !responseData.error) {
|
||
console.log('Регистрация успешна');
|
||
localStorage.setItem("user", JSON.stringify(responseData.user));
|
||
navigate('/my-surveys', {replace: true});
|
||
}
|
||
else if (responseData.status === 409){
|
||
setError('Аккаунт с такой почтой уже зарегистрирован');
|
||
}
|
||
}
|
||
}
|
||
catch (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>
|
||
<form className={styles.form} onSubmit={handleSubmit}>
|
||
<input
|
||
className={`${styles.input} ${styles.name}`}
|
||
type={'text'}
|
||
placeholder='Имя'
|
||
ref={nameRef}
|
||
onFocus={() => setFocused({ ...focused, firstName: true })}
|
||
onBlur={() => setFocused({ ...focused, firstName: false })}
|
||
style={{ color: focused.firstName ? 'black' : 'inherit' }}
|
||
/>
|
||
<input
|
||
className={`${styles.input} ${styles.surname}`}
|
||
type={'text'}
|
||
placeholder='Фамилия'
|
||
ref={surnameRef}
|
||
onFocus={() => setFocused({ ...focused, lastName: true })}
|
||
onBlur={() => setFocused({ ...focused, lastName: false })}
|
||
style={{ color: focused.lastName ? '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'
|
||
placeholder='Пароль'
|
||
ref={passwordRef}
|
||
onFocus={() => setFocused({ ...focused, password: true })}
|
||
onBlur={() => setFocused({ ...focused, password: false })}
|
||
style={{ color: focused.password ? 'black' : 'inherit' }}
|
||
/>
|
||
<button className={styles.signUp} type='submit'>Зарегистрироваться</button>
|
||
</form>
|
||
<p className={styles.recommendation}>Уже с нами?
|
||
<Link className={styles.recommendationLink} to='/login'>Войдите!</Link>
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default RegisterForm;
|