12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- import * as action from '../../actions'
- import { useEffect, useState } from 'react';
- import { connect } from 'react-redux';
- import { Link } from 'react-router-dom';
- import { history } from '../../App';
- const RegisterForm = ({ onRegister, regData }) => {
- let [login, setLogin] = useState()
- let [password, setPassword] = useState()
- let [password2, setPassword2] = useState()
- let [data, setData] = useState()
- let [isReg, setIsReg] = useState(false)
- useEffect(() => {
- setData(regData)
- }, [regData, data])
- return (
- <>
- <h1>Web-player</h1>
- <div className='forms'>
- <h2 className='highlightYellow'>Registration</h2>
- <input className='forms__input' type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
- <input className='forms__input' type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
- <input
- className='forms__input'
- disabled={!password || password.length < 8} type="password" placeholder='Repeat Password *'
- onChange={(e) => setPassword2(e.target.value)}
- />
- <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
- <br />
- {data?.payload && isReg? <small className='highlightGreen'>User {data.payload.login} successfully registered!</small> :
- <button
- className='forms__button highlightYellow'
- disabled={!password || !login || password2 !== password}
- onClick={() => {onRegister(login, password); setIsReg(true)}}
- >Register</button>}
- <br />
- <Link className='forms__link highlightYellow' to="/login">Back to log-in page</Link>
- </div>
- </>
- )
- }
- export const RegisterFormConnect = connect(state => ({regData: state.promise.registration || {}}), { onRegister: action.actionRegister })(RegisterForm)
- const LoginForm = ({ loged, onLogin }) => {
- let [login, setLogin] = useState()
- let [password, setPassword] = useState()
- let [log, setLog] = useState()
- useEffect(() => {
- setLog(loged)
- if (log?.payload && localStorage.authToken) history.push('/player')
- }, [loged, log])
- return (
- <>
- <h1>Web-player</h1>
- <div className='forms'>
- <h2 className='highlightYellow'>Log-in</h2>
- <input className='forms__input' type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
- <input className='forms__input' type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
- <small style={{ color: 'red' }}>
- {loged.status === 'REJECTED' || (loged.status === 'RESOLVED' && !loged.payload)? 'invalid login or password' : ''}
- </small>
- <br />
- <button
- className='forms__button highlightGreen'
- disabled={!password || !login}
- onClick={() => { onLogin(login, password) }}
- >Login</button>
- <p>- OR -</p>
- <Link className='forms__link highlightYellow' to="/registration">Register new user</Link>
- </div>
- </>
- )
- }
- export const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)
|