Themed auth0 lock. Added account page with password reset control. Cl…

…oses #23

src/app/components/Auth0Lock/index.tsx

@@ -3,6 +3,7 @@ const appConfig = require('../../../../config/main');
 import * as React from 'react';
 import auth0Lock from 'auth0-lock';
 import {saveAuth} from 'helpers/auth';
+import './style.less';
 
 let count = 0;
 
@@ -36,6 +37,9 @@ class Auth0Lock extends React.Component<IProps, {}> {
           scope: appConfig.app.auth.scope,
         },
       },
+      theme: {
+        primaryColor: '#935D8C',
+      },
     });
     this.lock = new auth0Lock(appConfig.app.auth.clientID, appConfig.app.auth.domain, options);
     this.lock.show();
@@ -57,7 +61,7 @@ class Auth0Lock extends React.Component<IProps, {}> {
 
   public render() {
     return (
-      <div id={this.divID} />
+      <div id={this.divID} className="impact-auth0-lock" />
     );
   }
 }

src/app/components/Auth0Lock/style.less

@@ -0,0 +1,8 @@
+.impact-auth0-lock {
+  .auth0-lock-header-avatar {
+    display: none !important;
+  }
+  .auth0-lock-header {
+    display: none !important;
+  }
+}

src/app/containers/Account/index.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Grid } from 'semantic-ui-react';
+import {Auth0Lock} from 'components/Auth0Lock';
+
+interface IState {
+  changePasswordStarted: boolean;
+}
+
+class Account extends React.Component<any, IState> {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      changePasswordStarted: false,
+    };
+    this.startChangePassword = this.startChangePassword.bind(this);
+    this.renderChangePassword = this.renderChangePassword.bind(this);
+  }
+
+  private startChangePassword() {
+    this.setState({
+      changePasswordStarted: true,
+    });
+  }
+
+  private renderChangePassword() {
+    if (this.state.changePasswordStarted) {
+      return (
+        <Auth0Lock auth0Options={{initialScreen: 'forgotPassword'}} />
+      );
+    } else {
+      return (
+        <a onClick={this.startChangePassword}>Click here to change your password</a>
+      );
+    }
+  }
+
+  public render() {
+    return (
+      <Grid container columns={1} id="Account">
+        <Grid.Column>
+          <h1>Account</h1>
+          <h3>Change Password</h3>
+          {this.renderChangePassword()}
+          <h3>Delete Account</h3>
+          <p>To delete your account, please send an email to <a href="mailto:support@impactasaurus.org?Subject=DeleteAccount">support@impactasaurus.org</a></p>
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
+
+export { Account }

src/app/containers/Settings/index.tsx

@@ -40,8 +40,9 @@ class Settings extends React.Component<IProps, any> {
     return (
       <div id="settings">
         <Menu pointing secondary>
-          <Menu.Item name="Question Sets" active={this.isSelected('/settings/questions')} onClick={this.handleClick('/settings/questions')} />
+          <Menu.Item name="Account" active={this.isSelected('/settings/account')} onClick={this.handleClick('/settings/account')} />
           <Menu.Item name="Organisation" active={this.isSelected('/settings/organisation')} onClick={this.handleClick('/settings/organisation')} />
+          <Menu.Item name="Question Sets" active={this.isSelected('/settings/questions')} onClick={this.handleClick('/settings/questions')} />
         </Menu>
 
         {this.props.children}

src/app/containers/index.tsx

@@ -10,3 +10,4 @@ export { OutcomeSets } from './OutcomeSets';
 export { OutcomeSet } from './OutcomeSet';
 export { Meeting } from './Meeting';
 export { Organisation } from './Organisation';
+export {Account} from './Account';

src/app/routes/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IndexRoute, Route } from 'react-router';
-import { App, Home, Login, Review, ReviewSelector, Conduct, Settings, OutcomeSets, OutcomeSet, Meeting, Organisation } from 'containers';
+import { App, Home, Login, Review, ReviewSelector, Conduct, Settings, OutcomeSets, OutcomeSet, Meeting, Organisation, Account } from 'containers';
 
 export default (
   <Route path="/" component={App}>
@@ -10,6 +10,7 @@ export default (
       <Route path=":id" component={Review} />
     </Route>
     <Route path="settings" component={Settings}>
+      <Route path="account" component={Account} />
       <Route path="organisation" component={Organisation} />
       <Route path="questions" component={OutcomeSets} />
       <Route path="questions/:id" component={OutcomeSet} />

src/app/theme/typo.less

@@ -12,4 +12,7 @@
     font-size: 1.5em;
     font-weight: 300;
   }
+  a {
+    cursor: pointer;
+  }
 }