1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- 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 }) => {
- let [login, setLogin] = useState()
- let [password, setPassword] = useState()
- let [password2, setPassword2] = useState()
- 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} type="password" placeholder='Repeat Password *'
- onChange={(e) => setPassword2(e.target.value)}
- />
- <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
- <br />
- <button
- className='forms__button highlightYellow'
- disabled={!password || !login || password2 !== password}
- onClick={() => onRegister(login, password)}
- >Register</button>
- <br />
- <Link className='sidebar__link highlightYellow' to="/login">Back to log-in page</Link>
- </div>
- </>
- )
- }
- export const RegisterFormConnect = connect(null, { 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)
|