cluedin-widget/plugin/auth/pages/Signin.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { PropTypes, Component } from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { fetchLogin, resetClientId, redirectAfterLogin } from '../../../core/action/auth';
import { connect } from 'react-redux';
import FormItem from '../generic/FormItem.jsx';
import config from '../../../core/config';
import Alert from '../../../core/components/generics/alert.jsx';
import { styleOnDarkBg, linkOnDarkBg, forgotPasswordLink, styleOnLightBg, linkOnLightBg } from '../styling';
import AuthBox from '../generic/AuthBox.jsx';
import TryingToCreateTeam from '../generic/TryingToCreateTeam.jsx';
import { updateAuthToken } from '../../../core/action/core';

class SignIn extends Component {

  static propTypes = {
    dispatch: PropTypes.func,
    isFetching: PropTypes.bool,
    authInfo: PropTypes.object,
    clientId: PropTypes.string,
    invalidLogin: PropTypes.bool,
    teamDomainInfo: PropTypes.object,
    mode: PropTypes.string,
  };

  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
      isUsernameInvalid: false,
      isPasswordInvalid: false,
    };
  }

  componentDidUpdate() {
    const {
      mode,
      authInfo,
      teamDomainInfo,
    } = this.props;

    if (authInfo) {
      this.props.dispatch(updateAuthToken(authInfo));
      this.props.dispatch(redirectAfterLogin(mode, teamDomainInfo.clientId));
    }
  }

  login() {
    const { teamDomainInfo } = this.props;
    this.props.dispatch(
      fetchLogin(this.state.username, this.state.password, teamDomainInfo.clientId)
    );
  }

  handlePasswordChange(event) {
    this.setState({
      password: event.target.value,
      isPasswordInvalid: (event.target.value === ''),
    });
  }

  handleUsernameChange(event) {
    this.setState({
      username: event.target.value,
      isUsernameInvalid: (event.target.value === ''),
    });
  }

  goBack() {
    this.props.dispatch(resetClientId());
  }

  handleEnter(e) {
    if (e.key === 'Enter') {
      this.login();
    }
  }

  render() {
    const {
      isFetching,
      clientId,
      invalidLogin,
      mode,
    } = this.props;

    let extraStyle = (mode === 'chrome') ? styleOnLightBg : styleOnDarkBg;
    let linkExtraStyle = (mode === 'chrome') ? linkOnLightBg : linkOnDarkBg;
    let forgotPasswordHtml = (
      <a
        href="https://app.cluedin.net/forgot"
        style={forgotPasswordLink}
      >
        I forgot my password
      </a>
    );

    if (mode === 'chrome') {
      forgotPasswordHtml = (
        <a
          target="_blank"
          href="https://app.cluedin.net/forgot"
          style={forgotPasswordLink}
        >
          I forgot my password
        </a>
      )
    }

    let userNameErrorMessage;
    let passwordErrorMessage;
    let wrongEmailPassword;

    if (invalidLogin) {
      wrongEmailPassword = (
        <div style={{ marginTop: '15px' }}>
          <Alert type="danger">
            Sorry, you entered an incorrect email address or password.
          </Alert>
        </div>
      );
    }

    if (this.state.isUsernameInvalid) {
      userNameErrorMessage = 'Please enter your email';
    }

    if (this.state.isPasswordInvalid) {
      passwordErrorMessage = 'Please enter your password';
    }

    const extraContent = (
      <div>
        <div style={extraStyle}>
          Not your team? <a href="#" onClick={this.goBack.bind(this)} style={linkExtraStyle}>Back</a>.
        </div>
        <TryingToCreateTeam mode={mode}></TryingToCreateTeam>
      </div>
    );

    const subTitle = `
      SignIn to ${clientId}${config.url.mainDomain.substring(0, config.url.mainDomain.length - 1)}
    `;

    return (
      <AuthBox mode={mode} title="CluedIn" subTitle={subTitle} extra={extraContent}>
        <div onKeyPress={this.handleEnter.bind(this)}>
          {wrongEmailPassword}
          <TextField
            hintText="youemail@example.com"
            floatingLabelText="Email"
            fullWidth={true}
            value={this.state.username}
            errorText={userNameErrorMessage}
            onChange={this.handleUsernameChange.bind(this)}
          />
          <FormItem>
            <TextField
              hintText="your password"
              floatingLabelText="Password"
              type="password"
              value={this.state.password}
              onChange={this.handlePasswordChange.bind(this)}
              errorText={passwordErrorMessage}
              fullWidth={true}
            />
          </FormItem>
          <FormItem>
            <RaisedButton
              onClick={() => { this.login(); }}
              disabled={isFetching}
              style={{ width: '100%' }}
              fullWidth={true}
              secondary={true}
              label="Sign In"
            />
          </FormItem>
          <FormItem>
            <div style={{ textAlign: 'center' }}>
              {forgotPasswordHtml}
            </div>
          </FormItem>
        </div>
      </AuthBox>
    );
  }
}

const select = (state) => ({
  isFetching: state.auth.isFetchingLogin,
  authInfo: state.auth.authInfo,
  clientId: state.auth.clientId,
  invalidLogin: state.auth.invalidLogin,
  teamDomainInfo: state.auth.teamDomainInfo,
  mode: state.auth.mode,
});

export default connect(select)(SignIn);