OpenDroneMap-WebODM/coreplugins/lightning/public/Login.jsx

import React from 'react';
import './Login.scss';
import ErrorMessage from 'webodm/components/ErrorMessage';
import PropTypes from 'prop-types';
import $ from 'jquery';
import { _ } from 'webodm/classes/gettext';

export default class Login extends React.Component {
  static defaultProps = {
  };
  static propTypes = {
    onLogin: PropTypes.func.isRequired
  }

  constructor(props){
    super(props);

    this.state = {
        error: "",
        loggingIn: false,
        email: "",
        password: ""
    }
  }

  handleEmailChange = (e) => {
    this.setState({email: e.target.value});
  }

  handlePasswordChange = (e) => {
      this.setState({password: e.target.value});
  }

  handleLogin = () => {
      this.setState({loggingIn: true});

      $.post("https://webodm.net/r/auth/login",
        {
          username: this.state.email,
          password: this.state.password
        }
      ).done(json => {
          if (json.api_key){
              this.saveApiKey(json.api_key, (err) => {
                this.setState({loggingIn: false});

                if (!err){
                    this.props.onLogin(json.api_key);
                }else{
                    this.setState({ error: err.message });
                }
              });
          }else if (json.message){
              this.setState({ loggingIn: false, error: json.message });
          }else{
              this.setState({ loggingIn: false, error: _("Cannot login. Invalid response:") + " " + JSON.stringify(json)});
          }
      })
      .fail(() => {
          this.setState({loggingIn: false, error: _("Cannot login. Please make sure you are connected to the internet, or try again in an hour.")});
      });
  }

  handleKeyPress = (e) => {
    if (e.key === 'Enter'){
        this.handleLogin();
    }
  }

  saveApiKey = (api_key, cb) => {
      $.post("save_api_key", {
          api_key: api_key
      }).done(json => {
        if (!json.success){
            cb(new Error(`Cannot save API key: ${JSON.stringify(json)}`));
        }else cb();
      }).fail(e => {
        cb(new Error(`Cannot save API key: ${JSON.stringify(e)}`));
      });
  }

  render(){
    return (<div className="lightning-login">
        <div className="row">
            <div className="col-md-6 col-md-offset-3 col-sm-12">
                <ErrorMessage bind={[this, "error"]} />
                <div className="form-group text-left">
                    <input id="next" name="next" type="hidden" value="" />
                    <p>
                        <label htmlFor="email">{_("E-mail Address")}</label> 
                        <input className="form-control" id="email" name="email" required="" 
                            type="text" value={this.state.email} 
                            onChange={this.handleEmailChange} 
                            onKeyPress={this.handleKeyPress} />
                    </p>
                    <p>
                        <label htmlFor="password">{_("Password")}</label> 
                        <input className="form-control" id="password" name="password" required="" 
                            type="password" value={this.state.password} 
                            onChange={this.handlePasswordChange} 
                            onKeyPress={this.handleKeyPress} />
                    </p>
                    <div style={{float: 'right'}} >
                        <a href="https://webodm.net/register" target="_blank">{_("Don't have an account?")}</a><br/>
                        <a href="https://webodm.net/reset" target="_blank">{_("Forgot password?")}</a>
                    </div>
                    <p><button className="btn btn-primary" onClick={this.handleLogin} disabled={this.state.loggingIn}>
                        {this.state.loggingIn ? 
                        <span><i className="fa fa-spin fa-circle-notch"></i></span> : 
                        <span><i className="fa fa-lock"></i> {_("Login and Sync")}</span>}
                    </button></p>
                </div>
            </div>
        </div>
    </div>);
  }
}