cluedin-widget/plugin/auth/pages/ChromeMenu.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 { connect } from 'react-redux';
import { forgotPasswordLink } from '../styling';
import AuthBox from '../generic/AuthBox.jsx';
import { shouldFetchCurrentUser } from '../../../core/action/user';
import { location } from '../../../core/config';
import FormItem from '../generic/FormItem.jsx';

class ChromeMenu extends Component {
  componentWillMount() {
    this.props.dispatch(shouldFetchCurrentUser());
  }

  render() {
    const {
      org,
      mode,
      user,
    } = this.props;

    let content;

    if (user) {
      content = (
        <FormItem>
          <div>
            Hello <strong>{user.client.UserName}</strong>,
          </div>
          <div style={{ marginTop: '15px' }}>
            You are logged in to the <strong>{org}</strong> team.
          </div>
          <div style={{marginTop: '15px'}}>
            <a target="_blank" style={forgotPasswordLink} href={location.goToEntity(user.entity, true)}>
              Visit Your CluedIn Profile</a>
          </div>
          <div style={{ marginTop: '15px' }}>
            <a target="_blank" style={forgotPasswordLink} href={location.goToSignOut()}>Logout</a>
          </div>
          <div style={{ marginTop: '15px' }}>
            <a style={forgotPasswordLink} href="#">How the plugin works?</a>
          </div>
          <div style={{ marginTop: '15px' }}>
            <a style={forgotPasswordLink}>Help</a>
          </div>
          <div style={{marginTop: '15px'}}>
            © CluedIn 2016
          </div>
        </FormItem>
      );
    } else {
      content = (<div>
        Loading....
      </div>);
    }
    return (
      <AuthBox mode={mode}>
        {content}
      </AuthBox>
    );
  }
}

ChromeMenu.propTypes = {
  org: PropTypes.string,
  mode: PropTypes.string,
};

const select = (state) => ({
  org: state.core.org,
  mode: state.auth.mode,
  user: state.user.currentUser,
});

export default connect(select)(ChromeMenu);