import React, { useState, Component } from 'react'; import { Container, Form, Button } from 'react-bootstrap'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import ReactDOM from 'react-dom'; import './Login.css'; import './App.css'; const [data,setData] = useState({ username:"", password:"" }); const (username,password) = data; const changeHandler = e => { setData({...data,[e.target.name]:[e.target.value]}); } const submitHandler = e => { e.preventDefault(); console.log(data); } class Login extends Component { constructor(props) { super(props); this.state = { isLoginOpen: true, isRegisterOpen: false, isLoggedIn: false, loginParams: { user_id: '', username: '', email: '', password: '', error: '' } }; this.handlePassChange = this.handlePassChange.bind(this); this.handleUserChange = this.handleUserChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.dismissError = this.dismissError.bind(this); } dismissError() { this.setState({ error: '' }); } handleSubmit(event) { event.preventDefault(); if (!this.state.username) { return this.setState({ error: 'Username is required' }); } if (!this.state.password) { return this.setState({ error: 'Password is required' }); } return this.setState({ error: '' }); } handleInputChange(event) { event.preventDefault(); const target = event.target; this.setState({ [target.name]: target.value }); } handleUserChange(event) { this.setState({ username: event.target.value }); } handlePassChange(event) { this.setState({ password: event.target.value }); } handleLogin(event) { event.preventDefault(); login({ method: 'password', emailOrUsername: this.state.emailOrUsername, password: this.state.password }); } render() { // NOTE: I use data-attributes for easier E2E testing // but you don't need to target those (any css-selector will work) return ( <Container> <div className='Login'> <form onSubmit={this.handleSubmit}> {this.state.error && ( <h3 data-test='error' onClick={this.dismissError}> <button onClick={this.dismissError}>✖</button> {this.state.error} </h3> )} <label>User Name</label> <input type='text' data-test='username' value={this.state.username} onChange={this.handleUserChange} /> <label>Password</label> <input type='password' data-test='password' value={this.state.password} onChange={this.handlePassChange} /> <input type='submit' value='Log In' data-test='submit' /> </form> </div> </Container> ); } } onLoginClick = () => {}; export default Login;