cluedin-widget/plugin/auth/pages/SelectClientId.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 { connect } from 'react-redux';
import { fetchTeamDomain } from '../../../core/action/auth';
import RaisedButton from 'material-ui/RaisedButton';
import FormItem from '../generic/FormItem.jsx';
import ArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
import { styleOnDarkBg, linkOnDarkBg, text, styleOnLightBg, linkOnLightBg } from '../styling';
import AuthBox from '../generic/AuthBox.jsx';
import TryingToCreateTeam from '../generic/TryingToCreateTeam.jsx';

class SelectClientId extends Component {
  static propTypes = {
    dispatch: PropTypes.func,
    isFetching: PropTypes.bool,
    teamDomainInfo: PropTypes.object,
    clientIds: PropTypes.array,
    mode: PropTypes.string,
  };

  constructor(props) {
    super(props);

    this.state = {
      clientId: '',
      isClientIdInvalid: false,
    };
  }

  getTeamDomain() {
    if (!this.state.clientId) {
      return;
    }

    this.props.dispatch(fetchTeamDomain(this.state.clientId));
  }

  handleClientIdChange(event) {
    this.setState({
      clientId: event.target.value,
      isClientIdInvalid: (event.target.value === ''),
    });
  }

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

  selectId(id) {
    this.props.dispatch(fetchTeamDomain(id));
  }

  render() {
    const {
      isFetching,
      teamDomainInfo,
      clientIds,
      mode,
    } = this.props;

    let teamdomainErrorMessage;
    let clientIdsSelectors;

    if (this.state.isClientIdInvalid) {
      teamdomainErrorMessage = 'Please enter a valid team domain';
    }

    if (teamDomainInfo && teamDomainInfo.isAvailable) {
      teamdomainErrorMessage = 'Team Domain does not exist';
    }

    let extraStyle = (mode === 'chrome') ? styleOnLightBg : styleOnDarkBg;
    let linkExtraStyle = (mode === 'chrome') ? linkOnLightBg : linkOnDarkBg;

    if (clientIds && clientIds.length > 0) {
      clientIdsSelectors = (
        <div style={extraStyle}>
          <div style={{ marginBottom: '15px' }}>
            Team you have already signed in
          </div>
          {clientIds.map((id) => (
            <RaisedButton
              key={id}
              style={{ marginRight: '15px' }}
              label={id}
              onClick={this.selectId.bind(this, id)}
            />
          ))}
        </div>
      );
    }

    const extraContent = (<div>
      <div style={extraStyle}>
        {clientIdsSelectors}
      </div>
      <TryingToCreateTeam mode={mode}></TryingToCreateTeam>
    </div>);

    return (
      <AuthBox mode={mode} title="CluedIn" subTitle="Sign in to your team" extra={extraContent}>
        <div onKeyPress={this.handleEnter.bind(this)}>
          <p style={text}>
            Enter your team's CluedIn domain.
          </p>
          <FormItem>
            <div style={{ display: 'flex', flexDirection: 'row' }}>
              <div style={{ flex: 1 }}>
                <TextField
                  hintText="teamdomain"
                  floatingLabelText="Team Domain"
                  fullWidth={true}
                  value={this.state.clientId}
                  errorText={teamdomainErrorMessage}
                  onChange={this.handleClientIdChange.bind(this)}
                />
              </div>
              <div style={{ width: '150px', paddingTop: '50px', fontWeight: 'bold' }}>
                .cluedin.net
              </div>
            </div>
          </FormItem>
          <RaisedButton
            onClick={() => { this.getTeamDomain(); }}
            disabled={isFetching}
            style={{ width: '100%' }}
            fullWidth={true}
            secondary={true}
            labelPosition="before"
            label="Continue"
            icon={<ArrowForward />}
          />
        </div>
      </AuthBox>
    );
  }
}

const select = (state) => ({
  isFetching: state.auth.isFetchingTeamDomain,
  teamDomainInfo: state.auth.teamDomainInfo,
  clientIds: state.auth.clientIds,
  mode: state.auth.mode,
});

export default connect(select)(SelectClientId);