stitch-ui/src/session/components/Login.js

/* global window */
// TODO proptypes
/* eslint-disable react/prop-types */
// TODO get rid of refs
/* eslint-disable react/no-string-refs */
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { enterPressedCaller } from "../../util";
import { TopNav } from "../../nav";
import { GoogleLogin } from "../../svg";
import {
  Banner,
  FormRow,
  FormRowLabelGroup,
  FormRowInputGroup,
  Button
} from "../../core";
import * as actions from "../actions";
import { getUserProfile } from "../../actions";

class Login extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.doLogin = this.doLogin.bind(this);
    this.doLoginCloud = this.doLoginCloud.bind(this);
  }

  componentDidMount() {
    this.props.loadRootAuthProviders();
  }

  doLogin() {
    this.props
      .login(this.refs.username.value, this.refs.password.value)
      .then(() => this.context.router.history.push("/"))
      .then(() => this.props.getUserProfile())
      .catch(e => this.props.setLoginError(e));
  }

  doLoginCloud() {
    this.props
      .loginCloud(this.refs.username.value, this.refs.apiKey.value)
      .then(() => this.context.router.history.push("/"))
      .then(() => this.props.getUserProfile())
      .catch(e => this.props.setLoginError(e));
  }

  loginOAuth(provider) {
    const redirectUrl = [
      window.location.protocol,
      "//",
      window.location.host,
      "/"
    ].join("");
    this.props.client.client.authWithOAuth(provider, redirectUrl);
  }

  render() {
    return (
      <div>
        <TopNav />
        <div className="main-content">
          <div className="login-form">
            <h1 className="login-form-title">Log in to Stitch</h1>
            <Banner message={this.props.loginError} error />
            {Object.prototype.hasOwnProperty.call(
              this.props.authProviders,
              "local/userpass"
            ) &&
              <div className="login-form-provider">
                <FormRow>
                  <FormRowLabelGroup>
                    <label className="form-row-label" htmlFor="username">
                      Username
                    </label>
                  </FormRowLabelGroup>
                  <FormRowInputGroup>
                    <input
                      type="text"
                      id="username"
                      className="text-input form-row-text-input"
                      placeholder="user@domain.com"
                      ref="username"
                    />
                  </FormRowInputGroup>
                </FormRow>
                <FormRow last>
                  <FormRowLabelGroup>
                    <label className="form-row-label" htmlFor="password">
                      Password
                    </label>
                  </FormRowLabelGroup>
                  <FormRowInputGroup>
                    <input
                      type="password"
                      id="password"
                      className="text-input form-row-text-input"
                      ref="password"
                      onKeyPress={enterPressedCaller(this.doLogin)}
                    />
                  </FormRowInputGroup>
                </FormRow>
                <div className="login-form-submit-panel">
                  <Button
                    primary
                    className="login-form-submit-button"
                    onClick={this.doLogin}
                  >
                    Log In
                  </Button>
                </div>
              </div>}

            {Object.prototype.hasOwnProperty.call(
              this.props.authProviders,
              "oauth2/facebook"
            ) &&
              <div
                className="login-form login-form-provider login-form-oauth-login"
                onClick={() => {
                  this.loginOAuth("facebook");
                }}
              >
                <div className="facebook-signin-logo" />
                <span className="login-form-oauth-login-label">
                  Log in with Facebook
                </span>
              </div>}
            {Object.prototype.hasOwnProperty.call(
              this.props.authProviders,
              "oauth2/google"
            ) &&
              <div
                className="login-form login-form-provider login-form-oauth-login"
                onClick={() => {
                  this.loginOAuth("google");
                }}
              >
                <GoogleLogin />
                <span className="login-form-oauth-login-label">
                  Log in with Google
                </span>
              </div>}
            {Object.prototype.hasOwnProperty.call(
              this.props.authProviders,
              "mongodb/cloud"
            ) &&
              <div className="login-form-provider">
                <h3>Log in with MongoDB Cloud</h3>
                <FormRow>
                  <FormRowLabelGroup>
                    <label className="form-row-label" htmlFor="username">
                      Username
                    </label>
                  </FormRowLabelGroup>
                  <FormRowInputGroup>
                    <input
                      type="text"
                      id="username"
                      className="text-input form-row-text-input"
                      placeholder="user@domain.com"
                      ref="username"
                    />
                  </FormRowInputGroup>
                </FormRow>
                <FormRow last>
                  <FormRowLabelGroup>
                    <label className="form-row-label" htmlFor="apiKey">
                      API Key
                    </label>
                  </FormRowLabelGroup>
                  <FormRowInputGroup>
                    <input
                      type="password"
                      id="apiKey"
                      className="text-input form-row-text-input"
                      ref="apiKey"
                      onKeyPress={enterPressedCaller(this.doLoginCloud)}
                    />
                  </FormRowInputGroup>
                </FormRow>
                <div className="login-form-submit-panel">
                  <Button
                    primary
                    className="login-form-submit-button"
                    onClick={this.doLoginCloud}
                  >
                    Log In
                  </Button>
                </div>
              </div>}
          </div>
        </div>
      </div>
    );
  }
}

Login.contextTypes = {
  router: PropTypes.object
};

const mapStateToProps = state => {
  const { authProviders, loginError } = state.session;
  return { client: state.base.client, authProviders, loginError };
};

const mapDispatchToProps = dispatch => ({
  setLoginError: e => dispatch(actions.setLoginError(e)),
  loadRootAuthProviders: () => dispatch(actions.loadRootAuthProviders()),
  login: (username, password) => dispatch(actions.login(username, password)),
  loginCloud: (username, apiKey) =>
    dispatch(actions.loginCloud(username, apiKey)),
  getUserProfile: () => dispatch(getUserProfile())
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);