login.jsx

import React from "react"
import PropTypes from "prop-types"

export default class LogIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      email_ready: undefined,
      password: '',
      password_ready: undefined
    };

    this.userEmail = React.createRef();
    this.userPassword = React.createRef();

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);

  }

  handleEmail() {
    let user_email = this.userEmail.current
    if (user_email == undefined) {
      return
    }
    user_email = user_email.value;

    function validateEmail(email) {
      const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return regex.test(String(email).toLowerCase());
    }

    if (validateEmail(user_email)) {
      this.setState({email_ready: true, email: 'valid'})
    } else {
      this.setState({email_ready: false, email: ''})
    }
  }

  handlePassword() {
    let user_password = this.userPassword.current
    if (user_password == undefined) {
      return
    }
    user_password = user_password.value;

    if (user_password == '') {
      console.log("Password not ready");
      this.setState({password_ready: false, password: ''});
    } else {
      this.setState({password_ready: true, password: 'valid'})
    }
  }

  render() {
    return (
      <div>
        <div className={'center'}>
          <h2>{this.props.login}</h2>
        </div>
        <div className='center'>
          <form onKeyUpCapture={this.updateButton} className="new_user" id="new_user" action="/users/sign_in" acceptCharset="UTF-8" method="post">
            <input name="utf8" type="hidden" value="✓"/>
            <input type="hidden" name="authenticity_token" value={this.props.csrf}/>
            <input type="hidden" name="return_url" value={window.location}/>

            <div className="field">
              <label htmlFor="user_email">Email</label><br/>
              <input onChange={this.handleEmail} className={this.state.email} autoFocus="autofocus"
                autoComplete="email" type="email" name="user[email]"
                id="user_email" ref={this.userEmail}/>
            </div>
            <div className="field">
              <label htmlFor="user_password">Password</label><br/>
              <input onKeyUp={this.handlePassword} className={this.state.password}
                autoComplete="current-password" type="password" name="user[password]"
                id="user_password" ref={this.userPassword}/>
            </div>

            <div className="field checkbox_container">
              <input name="user[remember_me]" type="hidden" value="0"/>
              <input defaultChecked type="checkbox" value="1"
                name="user[remember_me]"
                id="user_remember_me"/>
              <label htmlFor="user_remember_me">Remember me</label>
            </div>

            <div className="actions center">
              <input type="submit" className={this.state.password_ready && this.state.email_ready ? "ready" : ""} name="commit" value="Log in"
                data-disable-with="Log in"/>
            </div>
          </form>
        </div>
      </div>
    )
  }
}