/* eslint-disable react/no-array-index-key */ import React, { Component } from 'react'; import { Link, Redirect } from 'react-router-dom'; import { Form, Button } from 'react-bootstrap'; class Login extends Component { constructor(props) { super(props); this.state = { loginVerify: false, loginError: '', }; this.sendLogin = this.sendLogin.bind(this); } sendLogin(e) { e.preventDefault(); fetch('/artist/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: e.target.loginUsernameInput.value, password: e.target.loginPasswordInput.value, }), }) .then(data => data.json()) .then(res => { this.props.updateState(res.id, res.name); console.log(res.id, res.name); this.setState({ loginVerify: true, loginError: '' }); }) .catch(err => { this.setState({ loginError: 'Invalid username/password', }); }); } render() { if (this.state.loginVerify) { return <Redirect to="/dashboard" />; } return ( <Form className="login" onSubmit={this.sendLogin}> <h1>Login to get started</h1> <div className="loginBox"> <Form.Group controlId="loginUsernameInput"> <Form.Label>Username</Form.Label> <Form.Control type="text" /> </Form.Group> <Form.Group controlId="loginPasswordInput"> <Form.Label>Password</Form.Label> <Form.Control type="password" /> </Form.Group> <p>{this.state.loginError}</p> <div className="buttons"> <Button type="submit" variant="info"> Login </Button> <Button type="submit" variant="outline-info"> <Link className="signupLink" to={'/signup'}> Sign Up </Link> </Button> </div> </div> </Form> ); } } export default Login;