React. Redux. Не получается осуществитесь валидацию пользователей в форме входа на сайт
Есть 2 идентичные страницы: одна страница входа(авторизации), а другая - регистрации. В форме регистрации я осуществила через redux добавление данных пользователей. А вот сравнить данные вводимые на странице входа с данными сохраненными при регистрации не получается. помогите пожалуйста понять в чем моя ошибка.
Страница входа:
import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import '../Pages/Auth.css'
import { useDispatch } from 'react-redux'
import { useState } from 'react'
function Auth() {
const dispatch = useDispatch();
const[entrLogin, setEntrLogin] = useState('');
const[entrPassword, setEntrPassword] = useState('');
const [entrLogError, setEntrLogError] = useState('');
const [entrPassError, setEntrPassError] = useState('');
let entrLogCheck = false;
let entrPassCheck = false;
const navigate = useNavigate();
const entrLogHandler = (event) => {
setEntrLogin(event.target.value)
};
const entrPassHandler = (event) => {
setEntrPassword(event.target.value)
};
const handleUserCheck = (event) => {
event.preventDefault();
if(entrLogin === ''){
setEntrLogError('Поле не должно быть пустым');
entrLogCheck = false;
}
else if(entrLogin.length < 4){
setEntrLogError('Логин должен содержать не менее 4-х символов');
entrLogCheck = false;
}
else{
setEntrLogError('');
entrLogCheck = true;
};
if(entrPassword === ''){
setEntrPassError('Поле не должно быть пустым');
entrPassCheck = false;
}
else if(entrPassword.length < 4){
setEntrPassError('Пароль должен содержать не менее 4-х символов');
entrPassCheck = false;
}
else{
setEntrPassError('');
entrPassCheck = true;
};
console.log(entrLogCheck, entrPassCheck);
console.log(entrLogin, entrPassword);
};
let user = user.find(user => user.login === entrLogin.value);
if (user){
if(user.password === entrLogin){
navigate('/');
}else{
alert('Такого пользователя не существует. Перейдите во вкладку "Регистрация');
};
}
return (
<div className = "auth">
<img className = "auth__background" src = '/Mask Group.png' alt = ''></img>
<form className = "auth__form">
<Link to={'/Registration'} className = "auth__link">Зарегистрироваться</Link>
<h1 className = "auth__header">Вход</h1>
<input type = "text" className = "auth__inpt" placeholder="Логин" onChange = {event => entrLogHandler(event)} value={entrLogin}></input>
<label className = "auth__test">{entrLogError}</label>
<input type = "password" className = "auth__inpt" placeholder="Пароль" onChange = {event => entrPassHandler(event)} value = {entrPassword}></input>
<label className = "auth__test">{entrPassError}</label>
<div className="container">
<div className="round">
<input type="checkbox" id="checkbox"></input>
<label htmlFor="checkbox"></label>
</div>
<div className="auth__checkbox-text">Я согласен получать обновления на почту</div>
</div>
<button type = 'submit' onClick = {handleUserCheck} className="auth__entr-btn">Войти</button>
</form>
</div>
);
}
export default Auth;
Страница регистрации:
import React from 'react'
import './Registration.css'
import { Link, useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addAuth } from '../store/reducers/auth'
function Registration() {
const dispatch = useDispatch();
const[login, setLogin] = useState('');
const[password, setPassword] = useState('');
const [logError, setLogError] = useState('');
const [passError, setPassError] = useState('');
let logCheck = false;
let passCheck = false;
const navigate = useNavigate();
//const back = navigate(-1);
const logHandler = (event) => {
setLogin(event.target.value)
};
const passHandler = (event) => {
setPassword(event.target.value)
};
const handleUserReg = (event) => {
event.preventDefault();
if(login === ''){
setLogError('Поле не должно быть пустым');
logCheck = false;
}
else if(login.length < 4){
setLogError('Логин должен содержать не менее 4-х символов');
logCheck = false;
}
else{
setLogError('');
logCheck = true;
};
if(password === ''){
setPassError('Поле не должно быть пустым');
passCheck = false;
}
else if(password.length < 4){
setPassError('Пароль должен содержать не менее 4-х символов');
passCheck = false;
}
else{
setPassError('');
passCheck = true;
};
console.log(logCheck, passCheck);
console.log(login, password);
if(logCheck === true && passCheck === true){
dispatch(addAuth({
login, password
}));
navigate('/');
};
};
return (
<div className = "reg">
<img className = "reg__background" src = '/Mask Group.png' alt = ''></img>
<form className = "reg__form" action="#">
<Link to={'/Auth'} className = "reg__link">Авторизоваться</Link>
<h1 className = "reg__header">Регистрация</h1>
<input type = "text" className = "reg__inpt" placeholder="Логин" onChange = {event => logHandler(event)} value={login}></input>
<label className = "reg__test">{logError}</label>
<input type = "password" className = "reg__inpt" placeholder="Пароль" onChange = {event => passHandler(event)} value = {password}></input>
<label className = "reg__test">{passError}</label>
<div className="container">
<div className="round">
<input type="checkbox" id="checkbox"></input>
<label htmlFor="checkbox"></label>
</div>
<div className="reg__checkbox-text">Я согласен получать обновления на почту</div>
</div>
<button className="reg__entr-btn" type = 'submit' onClick = {handleUserReg}>Зарегистрироваться</button>
</form>
</div>
);
}
export default Registration;
Страница редьюсера для регистрации:
mport { createSlice } from "@reduxjs/toolkit"
const userSlice = createSlice({
name: 'user',
initialState:{
user:[],
login:'',
password:'',
Authorization:false,
},
reducers:{
addAuth(state,action){
state.user.push(action.payload);
},
entranceAuth(state){
state.Authorization=true;
},
exitAuth(state){
state.Authorization =false;
},
}
});
export const{ addAuth, entranceAuth, exitAuth } = userSlice.actions;
export default userSlice.reducer;