1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- import React from "react";
- import {connect} from 'react-redux';
- import {useState} from "react";
- import {actionFullRegister} from '../actions'
- import {Redirect} from 'react-router-dom';
- import ConfirmPass from "../Components/RegErrors/Confirmpass";
- import MinPass from "../Components/RegErrors/MinPass";
- import NumberCheckPass from "../Components/RegErrors/numberCheckPass";
- 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 Button from "../Components/Button";
- const Sign = ({onSign,Reg}) => {
- const [login,setLogin] = useState('')
- const [password,setPassword] = useState('')
- const [password2,setPassword2] = useState('')
- const[show,setShow]=useState(false)
- const[show2,setShow2]=useState(false)
- const[show3,setShow3]=useState(false)
- const [open,setOpen] = useState(false)
- const [open2,setOpen2] = useState(false)
-
- const isRegistrationValid = () => {
- if(!login || password.length<3 || password2.length<3) {
- return false
- }
- if(!password.match(/\d/)){
- return false
- }
- if(password !== password2) {
- return false
- }
- else return true
- }
- const registrationCallback = () => {
- if(isRegistrationValid()) {
- onSign(login, password)
- }
- else {
- setShow(true)
- setShow2(true)
- setShow3(true)
- }
- }
- return (
- <div className="divSign">
- <h4>Регистрация</h4>
- <div className="login-container">
- <label>Придумайте логин</label>
- <input value={login} onChange={e => setLogin(e.target.value)} placeholder="Логин"></input>
- </div>
- <div className='pwd-container1'>
- <label>Придумайте пароль</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='pwd-container2 mb-3'>
- <label>Повторите пароль</label>
- <input value={password2} type={open2 ? "text" : "password"} onChange={e => setPassword2(e.target.value)} placeholder="Пароль" />
- <img src={open2 ? hidePwdImg : showPwdImg} onClick={() => setOpen2(!open2)}/>
- </div>
- <Button
- name='Зарегистрироваться'
- isValid={isRegistrationValid()}
- callback={registrationCallback}
- />
- {show && (!login || password.length<3 || password2.length<3) && <MinPass/>}
- {show2 && (!password.match(/\d/)) && <NumberCheckPass />}
- {show3 && (password !== password2) && <ConfirmPass />}
- {(Reg === null) && <p>Данный пользователь уже зарегистрирован</p>}
- {Reg && <Redirect push to='/'/>}
- </div>
- )
- }
- const ConnectSign = connect(state=> ({Reg:state.promiseReducer.reg?.payload?.data?.createUser}),{onSign: actionFullRegister})(Sign)
- export default ConnectSign
|