sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added form validation

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-05-24 16:05:35 +05:00
parent 8622f9e9db
commit 3912bc0044
8 changed files with 120 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

56
SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx
View file

@ -11,6 +11,8 @@ const RegisterForm = () => {
password: false
});
const [error, setError] = useState<string | null>(null);
const nameRef = useRef<HTMLInputElement>(null);
const surnameRef = useRef<HTMLInputElement>(null);
const emailRef = useRef<HTMLInputElement>(null);
@ -20,15 +22,16 @@ const RegisterForm = () => {
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 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{
const responseData = await registerUser({username, firstName, lastName, email, password});
console.log(responseData); //проверка вывода данных
if (responseData && !responseData.error) {
console.log('Регистрация успешна');
localStorage.setItem("user", JSON.stringify({
@ -37,16 +40,29 @@ const RegisterForm = () => {
}));
navigate('/my-surveys');
}
else {
console.error(`Ошибка регистрации: ${responseData}`);
console.log('Регистраиця не удалась');
else if (responseData.status === 409){
setError('Аккаунт с такой почтой уже зарегистрирован');
}
}
catch (err) {
console.error(`Ошибка при отправке запроса ${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>
@ -69,15 +85,19 @@ const RegisterForm = () => {
onBlur={() => setFocused({ ...focused, lastName: false })}
style={{ color: focused.lastName ? 'black' : 'inherit' }}
/>
<input
className={`${styles.input} ${styles.email}`}
type={'email'}
placeholder='Почта'
ref={emailRef}
onFocus={() => setFocused({ ...focused, email: true })}
onBlur={() => setFocused({ ...focused, email: false })}
style={{ color: focused.email ? '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'