12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- import React from "react";
- import {connect} from 'react-redux';
- import {useState} from "react";
- import {actionFullLogin} from '../actions'
- import Button from "../Components/Button";
- import LoginError from "../Components/RegErrors/LoginError";
- import showPwdImg from '../images/3844476-eye-see-show-view-watch_110339.svg';
- import hidePwdImg from '../images/3844477-disable-eye-inactive-see-show-view-watch_110343.svg';
- import {Link, useHistory} from 'react-router-dom';
- const LoginForm = ({onLogin,loggedIn}) => {
- const [login,setLogin] = useState('')
- const [password,setPassword] = useState('')
- const [open,setOpen] = useState(false)
- const[show,setShow]=useState(false)
- let history = useHistory()
- if(localStorage.authToken) {
- history.push('/')
- }
- const isLoginValid = () => {
- if(!login || !password) {
- return false
- }
- else return true
- }
- const loginCallback = () => {
- if(isLoginValid()) {
- onLogin(login, password)
- }
- else {
- setShow(true)
- }
- }
- return (
- <div className="divLogin">
- <h4>Войти</h4>
- <div className="login-container">
- <label>Логин</label>
- <input value={login} onChange={e => setLogin(e.target.value)} placeholder="Логин"></input>
- </div>
- <div className='pwd-container'>
- <label>Ваш текущий пароль от olx</label>
- <input value={password} type={open ? "text" : "password"} onChange={e => setPassword(e.target.value)} placeholder="Пароль" />
- <img src={open ? hidePwdImg : showPwdImg} onClick={() => setOpen(!open)}/>
- </div>
- <div className='login-container'>
- Не зарегистрированы? <Link to='sign' className='mb-3'>Создать аккаунт</Link>
- <Button name='Войти' isValid={isLoginValid()} callback={loginCallback} />
- </div>
- {(loggedIn === null) && <p>Неверный логин или пароль</p>}
- {show && (!login || !password) && <LoginError />}
- </div>
- )
- }
- const ConnectLog = connect(state => ({loggedIn: state.promiseReducer?.login?.payload}), {onLogin: actionFullLogin})(LoginForm)
- export default ConnectLog
|