1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- import React, {useState} from 'react';
- import {Link} from 'react-router-dom';
- import { actionAuthLogin } from '../store/authReducer';
- import { store } from '../store/store';
- import { connect } from 'react-redux';
- export async function sendForm (url, data) {
- let error = await fetch(`http://player-api/api/${url}`, {
- method: 'POST',
- body: data
- }).then(res => res.json())
- .then(data => {
- if(data.token) {
- store.dispatch(actionAuthLogin(data.token, data.user));
- return data
- } else {
- console.log(data);
- return data.login[0];
- }
- })
- return error;
- }
- export const RegisterForm = ({authState}) => {
- const [login, setLogin] = useState('');
- const [password, setPassword] = useState('');
- const [name, setName] = useState('');
- const [passwordConfirm, setPasswordConfirm] = useState('');
- const [textModal, setTextModal] = useState('');
-
- const postForm = async (event) =>{
- event.preventDefault();
- const data = new FormData();
- data.append("login", login);
- data.append("password", password);
- data.append("name", name);
- setTextModal(( typeof(await sendForm('register', data))==='string')? (await sendForm('register', data)) : '');
-
- }
- return (
- <form onSubmit={postForm} id="register_form">
- <div className="register container align-items-center justify-content-center vw-100 vh-100 d-flex">
- <div className="col-4">
- <h4 className="w-100 text-center">Sign Up</h4>
- <hr/>
- <label className="form-label">*Login</label><br/>
- <input type="text" id="username" className="input form-control mb-3" placeholder="asya123"
- value={login} onChange={e => setLogin(e.target.value)}
- />
-
- <label className="form-label">*Full Name</label><br/>
- <input type="text" id="name" className="input form-control mb-3" placeholder="Anastasiia"
- value={name} onChange={e => setName(e.target.value)}
- />
-
- <label className="form-label">*Password (8+ symbols)</label>
- <input type="password" id="password" className="form-control mb-3" value={password} onChange={e => setPassword(e.target.value)} />
-
- <label className="form-label">*Confirm password</label>
- <input type="password" id="confirm_password" className="form-control mb-3" value={passwordConfirm} onChange={e => setPasswordConfirm(e.target.value)}/>
- <p className='text-danger'>{textModal ? ('*' + textModal) : ''}</p>
- <div className="d-flex justify-content-between align-items-center">
- <h6>Already a member? <Link to="/login" className="">Log in</Link></h6>
- <button type="submit" className="btn btn-outline-danger" disabled={password !== passwordConfirm || password.length < 8 || login.length < 3} onClick={() => console.log('/user')}>
- Sign Up
- </button>
- </div>
- </div>
- </div>
- </form>
- )
- }
- export const CRegisterForm = connect(state => ({ authState: state.auth?.token }))(RegisterForm);
|