Merge remote-tracking branch 'remotes/dartandrevinsky/wip-customer' into wip-customer

js-frontend/gulpfile.babel.js

@@ -20,7 +20,7 @@ gulp.task('dist', () => runSequence('dist:clean', 'dist:build', 'dist:index'));
 gulp.task('clean', ['dist:clean', 'serve:clean']);
 gulp.task('open', () => open('http://localhost:3000'));
 
-gulp.task('export', () => runSequence('dist:clean', 'dist:build', 'dist:index', 'export:clean', 'export:copy'));
+gulp.task('export', () => runSequence(/*'dist:clean', 'dist:build', 'dist:index',*/ 'export:clean', 'export:copy'));
 
 // Remove all built files
 gulp.task('serve:clean', cb => del('build', {dot: true}, cb));
@@ -78,11 +78,25 @@ gulp.task('dist:index', () => {
 gulp.task('serve:start', ['serve:static'], () => {
   const config = webpackConfig(true, 'build', PORT);
 
+  // https://webpack.github.io/docs/webpack-dev-server.html
   return new WebpackDevServer(webpack(config), {
     contentBase: 'build',
     publicPath: config.output.publicPath,
     watchDelay: 100,
-    historyApiFallback: true
+    historyApiFallback: true,
+    //proxy: {
+    //  "*": "http://localhost:8080"
+    //}
+
+    proxy: {
+      '/login' : {
+        target: 'http://localhost:8080'
+      },
+      '/customers' : {
+        target: 'http://localhost:8080'
+      }
+
+    }
   })
     .listen(PORT, '0.0.0.0', (err) => {
       if (err) throw new $.util.PluginError('webpack-dev-server', err);

js-frontend/package.json

@@ -57,8 +57,10 @@
     "react-loader": "^2.0.0",
     "react-pacomo": "^0.5.1",
     "react-redux": "^4.4.0",
-    "react-router": "^1.0.3",
+    "react-router": "^2.0.0-rc2",
+    "react-router-bootstrap": "^0.20.1",
     "react-router-redux": "^3.0.0",
+    "react-select": "^0.9.1",
     "redux": "^3.0.2",
     "redux-auth": "0.0.2",
     "redux-batched-subscribe": "^0.1.4",

js-frontend/src/App.js

@@ -8,8 +8,8 @@ import { ReduxRouter} from "redux-router";
 //import { Router, IndexRoute, Route, browserHistory } from 'react-router';
 //import { syncHistory, routeReducer } from 'react-router-redux';
 
-import { Route, IndexRoute} from "react-router";
-import { configure, authStateReducer} from "redux-auth";
+import { Route, IndexRoute, Link, IndexLink} from "react-router";
+import { configure as reduxAuthConfigure, authStateReducer} from "redux-auth";
 import { AuthGlobals } from "redux-auth/bootstrap-theme";
 
 import { createStore, compose, applyMiddleware} from "redux";
@@ -25,8 +25,8 @@ import { pushState } from 'redux-router';
 
 //import demoButtons from "./reducers/request-test-buttons";
 //import demoUi from "./reducers/demo-ui";
-//import Container from "./views/partials/Container";
-//import Main from "./views/Main";
+import Container from "./components/partials/Container";
+import Main from "./views/Main";
 import Account from "./views/Account";
 import SignIn from "./views/SignIn";
 import SignUp from "./views/SignUp";
@@ -34,11 +34,12 @@ import SignUp from "./views/SignUp";
 
 
 // TODO: !!!!
+//         <GlobalComponents />
+
 class App extends React.Component {
   render() {
     return (
       <Container>
-        <GlobalComponents />
         <AuthGlobals />
         {this.props.children}
       </Container>
@@ -46,39 +47,6 @@ class App extends React.Component {
   }
 }
 
-class Main extends React.Component {
-  render() {
-    return (
-      <div className="well">
-        Component: Main <br/>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-class GlobalComponents extends React.Component {
-  render() {
-    return (
-      <div className="well">
-        Component: GlobalComponents <br/>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-class Container extends React.Component {
-  render() {
-    return (
-      <div className="well">
-        Component: Container <br/>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
 export function initialize({cookies, isServer, currentLocation, userAgent} = {}) {
 
   const reducer = combineReducers({
@@ -179,7 +147,7 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
   /**
    * The React Router 1.0 routes for both the server and the client.
    */
-  return store.dispatch(configure([
+  return store.dispatch(reduxAuthConfigure([
     {
       default: {
         //apiUrl: __API_URL__
@@ -211,7 +179,7 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
     cookies,
     isServer,
     currentLocation
-  })).then(({redirectPath, blank} = {}) => {
+  })).then(({ redirectPath, blank } = {}) => {
     // hack for material-ui server-side rendering.
     // see https://github.com/callemall/material-ui/pull/2007
     if (userAgent) {
@@ -224,6 +192,8 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
       return <noscript />;
     }
 
+    console.log(`redirect path: ${redirectPath}`)
+
     return ({
       blank,
       store,

js-frontend/src/components/ApplicationLayout.jsx

@@ -1,7 +1,7 @@
-import './ApplicationLayout.less'
+//import './ApplicationLayout.less'
 
 import React, {PropTypes} from 'react'
-import { pacomoTransformer } from '../utils/pacomo'
+//import { pacomoTransformer } from '../utils/pacomo'
 import Link from './Link'
 
 
@@ -9,7 +9,7 @@ const ApplicationLayout = ({
   children,
   locationName,
 }) =>
-  <div>
+  (<div>
     <nav className='navbar'>
       <Link
         name='documentList'
@@ -24,11 +24,12 @@ const ApplicationLayout = ({
     <main className='content'>
       {children}
     </main>
-  </div>
+  </div>);
 
 ApplicationLayout.propTypes = {
   children: PropTypes.element.isRequired,
-  locationName: PropTypes.string,
-}
+  locationName: PropTypes.string
+};
 
-export default pacomoTransformer(ApplicationLayout)
+export default ApplicationLayout;
+//export default pacomoTransformer(ApplicationLayout)

js-frontend/src/components/Link.jsx

@@ -13,7 +13,7 @@ const Link = ({
 Link.propTypes = {
   name: PropTypes.string.isRequired,
   options: PropTypes.object,
-  children: PropTypes.node.isRequired,
-}
+  children: PropTypes.node.isRequired
+};
 
-export default Link
+export default Link;

js-frontend/src/components/partials/Container.js

@@ -0,0 +1,50 @@
+/**
+ * Created by andrew on 17/02/16.
+ */
+import React, { PropTypes } from "react";
+import { Grid, Navbar, NavItem, Nav, NavbarBrand } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+
+//if (!global.__SERVER__ && !global.__TEST__) {
+//  require("../../styles/main.scss");
+//}
+
+class Container extends React.Component {
+  static propTypes = {
+    children: PropTypes.node
+  };
+
+  render () {
+    return (
+      <div className="wrapper">
+        <Navbar className="main-nav">
+          <LinkContainer to="/">
+            <NavbarBrand>Money Transfer</NavbarBrand>
+          </LinkContainer>
+          <Nav>
+            <LinkContainer to="/" onlyActiveOnIndex={true}>
+              <NavItem eventKey={1}>Home</NavItem>
+            </LinkContainer>
+            <LinkContainer to="/account">
+              <NavItem eventKey={2}>Account</NavItem>
+            </LinkContainer>
+          </Nav>
+        </Navbar>
+
+        <Grid className="content">
+          {this.props.children}
+        </Grid>
+
+
+      </div>
+    );
+  }
+}
+/*<a href="https://github.com/lynndylanhurley/redux-auth">
+ <img
+ style={{position: "absolute", top: 0, right: 0, border: 0}}
+ src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
+ alt="Fork me on GitHub"
+ data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" />
+ </a>*/
+export default Container;

js-frontend/src/components/partials/IndexPanel.js

@@ -0,0 +1,28 @@
+/**
+ * Created by andrew on 17/02/16.
+ */
+import React, { PropTypes } from "react";
+import { Panel, Col } from "react-bootstrap";
+
+class IndexPanel extends React.Component {
+  static propTypes = {
+    bsStyle: PropTypes.string,
+    header: PropTypes.string,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    bsStyle: "info",
+    children: <span />
+  };
+
+  render () {
+    return (
+      <Col sm={6}>
+        <Panel {...this.props} />
+      </Col>
+    );
+  }
+}
+
+export default IndexPanel;

js-frontend/src/controls/bootstrap/EmailSignUpForm.js

@@ -6,6 +6,8 @@ import auth from "redux-auth";
 import Input from "./Input";
 import ButtonLoader from "./ButtonLoader";
 import { emailSignUpFormUpdate, emailSignUp } from "redux-auth";
+import IndexPanel from "./../../components/partials/IndexPanel";
+
 import { Glyphicon } from "react-bootstrap";
 import { connect } from "react-redux";
 
@@ -53,131 +55,119 @@ class EmailSignUpForm extends React.Component {
       this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "loading"])
     );
 
-    /*
-    * <Input type="password"
-     label="Password"
-     placeholder="Password"
-     className="email-sign-up-password"
-     disabled={disabled}
-     value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "password"])}
-     errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "password"])}
-     onChange={this.handleInput.bind(this, "password")}
-     {...this.props.inputProps.password} />
 
-     <Input type="password"
-     label="Password Confirmation"
-     placeholder="Password Confirmation"
-     className="email-sign-up-password-confirmation"
-     disabled={disabled}
-     value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "password_confirmation"])}
-     errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "password_confirmation"])}
-     onChange={this.handleInput.bind(this, "password_confirmation")}
-     {...this.props.inputProps.passwordConfirmation} />
-     */
     return (
       <form className='redux-auth email-sign-up-form clearfix'
             onSubmit={this.handleSubmit.bind(this)}>
 
-        <Input type="text"
-               label="First name"
-               placeholder="First name"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "fname"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "fname"])}
-               onChange={this.handleInput.bind(this, "fname")}
-          {...this.props.inputProps.fname} />
+        <IndexPanel header="basic">
+          <Input type="text"
+                 label="First name"
+                 placeholder="First name"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "fname"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "fname"])}
+                 onChange={this.handleInput.bind(this, "fname")}
+            {...this.props.inputProps.fname} />
 
-        <Input type="text"
-               label="Last name"
-               placeholder="Last name"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "lname"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "lname"])}
-               onChange={this.handleInput.bind(this, "lname")}
-          {...this.props.inputProps.lname} />
+          <Input type="text"
+                 label="Last name"
+                 placeholder="Last name"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "lname"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "lname"])}
+                 onChange={this.handleInput.bind(this, "lname")}
+            {...this.props.inputProps.lname} />
 
-        <Input type="text"
-               label="Email"
-               placeholder="Email"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "email"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "email"])}
-               onChange={this.handleInput.bind(this, "email")}
-          {...this.props.inputProps.email} />
+          <Input type="text"
+                 label="Email"
+                 placeholder="Email"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "email"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "email"])}
+                 onChange={this.handleInput.bind(this, "email")}
+            {...this.props.inputProps.email} />
 
 
-        <Input type="text"
-               label="SSN"
-               placeholder="SSN"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "ssn"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "ssn"])}
-               onChange={this.handleInput.bind(this, "ssn")}
-          {...this.props.inputProps.ssn} />
+        </IndexPanel>
 
-        <Input type="text"
-               label="Phone"
-               placeholder="Phone"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "phone"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "phone"])}
-               onChange={this.handleInput.bind(this, "phone")}
-          {...this.props.inputProps.phone} />
+        <IndexPanel header="advanced">
+          <Input type="text"
+                 label="SSN"
+                 placeholder="SSN"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "ssn"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "ssn"])}
+                 onChange={this.handleInput.bind(this, "ssn")}
+            {...this.props.inputProps.ssn} />
 
-        <Input type="text"
-               label="Address 1"
-               placeholder="Address 1"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "address1"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "address1"])}
-               onChange={this.handleInput.bind(this, "address1")}
-          {...this.props.inputProps.address1} />
+          <Input type="text"
+                 label="Phone"
+                 placeholder="Phone"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "phone"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "phone"])}
+                 onChange={this.handleInput.bind(this, "phone")}
+            {...this.props.inputProps.phone} />
 
-        <Input type="text"
-               label="Address 2"
-               placeholder="Address 2"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "address2"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "address2"])}
-               onChange={this.handleInput.bind(this, "address2")}
-          {...this.props.inputProps.address2} />
+          <Input type="text"
+                 label="Address 1"
+                 placeholder="Address 1"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "address1"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "address1"])}
+                 onChange={this.handleInput.bind(this, "address1")}
+            {...this.props.inputProps.address1} />
 
-        <Input type="text"
-               label="City"
-               placeholder="City"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "city"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "city"])}
-               onChange={this.handleInput.bind(this, "city")}
-          {...this.props.inputProps.city} />
+          <Input type="text"
+                 label="Address 2"
+                 placeholder="Address 2"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "address2"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "address2"])}
+                 onChange={this.handleInput.bind(this, "address2")}
+            {...this.props.inputProps.address2} />
+
+          <Input type="text"
+                 label="City"
+                 placeholder="City"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "city"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "city"])}
+                 onChange={this.handleInput.bind(this, "city")}
+            {...this.props.inputProps.city} />
+
+          <Input type="text"
+                 label="State"
+                 placeholder="State"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "state"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "state"])}
+                 onChange={this.handleInput.bind(this, "state")}
+            {...this.props.inputProps.state} />
+
+          <Input type="text"
+                 label="ZIP"
+                 placeholder="ZIP"
+                 className="email-sign-up-email"
+                 disabled={disabled}
+                 value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "zip"])}
+                 errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "zip"])}
+                 onChange={this.handleInput.bind(this, "zip")}
+                 {...this.props.inputProps.zip} />
+
+        </IndexPanel>
 
-        <Input type="text"
-               label="State"
-               placeholder="State"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "state"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "state"])}
-               onChange={this.handleInput.bind(this, "state")}
-          {...this.props.inputProps.state} />
 
-        <Input type="text"
-               label="ZIP"
-               placeholder="ZIP"
-               className="email-sign-up-email"
-               disabled={disabled}
-               value={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "form", "zip"])}
-               errors={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "errors", "zip"])}
-               onChange={this.handleInput.bind(this, "zip")}
-          {...this.props.inputProps.zip} />
 
         <ButtonLoader loading={this.props.auth.getIn(["emailSignUp", this.getEndpoint(), "loading"])}
                       type="submit"
@@ -185,7 +175,7 @@ class EmailSignUpForm extends React.Component {
                       icon={<Glyphicon glyph="send" />}
                       disabled={disabled}
                       onClick={this.handleSubmit.bind(this)}
-          {...this.props.inputProps.submit}>
+                      { ...this.props.inputProps.submit } >
           Sign Up
         </ButtonLoader>
       </form>

js-frontend/src/index.html

@@ -7,8 +7,11 @@
     <title>Money Transfer App</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="/style2.css">
+
     <!-- inject:app:css -->
     <!-- endinject -->
+
   </head>
   <body>
     <div id="react-app"></div>

js-frontend/src/static/style2.css

@@ -0,0 +1,334 @@
+/**
+ * React Select
+ * ============
+ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
+ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
+ * MIT License: https://github.com/keystonejs/react-select
+*/
+.Select {
+    position: relative;
+}
+.Select,
+.Select div,
+.Select input,
+.Select span {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.Select.is-disabled > .Select-control {
+    background-color: #f9f9f9;
+}
+.Select.is-disabled > .Select-control:hover {
+    box-shadow: none;
+}
+.Select.is-disabled .Select-arrow-zone {
+    cursor: default;
+    pointer-events: none;
+}
+.Select-control {
+    background-color: #fff;
+    border-color: #d9d9d9 #ccc #b3b3b3;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    color: #333;
+    cursor: default;
+    display: table;
+    height: 36px;
+    outline: none;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+.Select-control:hover {
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+.is-searchable.is-open > .Select-control {
+    cursor: text;
+}
+.is-open > .Select-control {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    background: #fff;
+    border-color: #b3b3b3 #ccc #d9d9d9;
+}
+.is-open > .Select-control > .Select-arrow {
+    border-color: transparent transparent #999;
+    border-width: 0 5px 5px;
+}
+.is-searchable.is-focused:not(.is-open) > .Select-control {
+    cursor: text;
+}
+.is-focused:not(.is-open) > .Select-control {
+    border-color: #007eff;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
+}
+.Select-placeholder,
+:not(.Select--multi) > .Select-control .Select-value {
+    bottom: 0;
+    color: #aaa;
+    left: 0;
+    line-height: 34px;
+    padding-left: 10px;
+    padding-right: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.has-value:not(.Select--multi) > .Select-control > .Select-value .Select-value-label,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value .Select-value-label {
+    color: #333;
+}
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label {
+    cursor: pointer;
+    text-decoration: none;
+}
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus {
+    color: #007eff;
+    outline: none;
+    text-decoration: underline;
+}
+.Select-input {
+    height: 34px;
+    padding-left: 10px;
+    padding-right: 10px;
+    vertical-align: middle;
+}
+.Select-input > input {
+    background: none transparent;
+    border: 0 none;
+    box-shadow: none;
+    cursor: default;
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    height: 34px;
+    margin: 0;
+    outline: none;
+    padding: 0;
+    -webkit-appearance: none;
+}
+.is-focused .Select-input > input {
+    cursor: text;
+}
+.has-value.is-pseudo-focused .Select-input {
+    opacity: 0;
+}
+.Select-control:not(.is-searchable) > .Select-input {
+    outline: none;
+}
+.Select-loading-zone {
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 16px;
+}
+.Select-loading {
+    -webkit-animation: Select-animation-spin 400ms infinite linear;
+    -o-animation: Select-animation-spin 400ms infinite linear;
+    animation: Select-animation-spin 400ms infinite linear;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: 2px solid #ccc;
+    border-right-color: #333;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+}
+.Select-clear-zone {
+    -webkit-animation: Select-animation-fadeIn 200ms;
+    -o-animation: Select-animation-fadeIn 200ms;
+    animation: Select-animation-fadeIn 200ms;
+    color: #999;
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 17px;
+}
+.Select-clear-zone:hover {
+    color: #D0021B;
+}
+.Select-clear {
+    display: inline-block;
+    font-size: 18px;
+    line-height: 1;
+}
+.Select--multi .Select-clear-zone {
+    width: 17px;
+}
+.Select-arrow-zone {
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 25px;
+    padding-right: 5px;
+}
+.Select-arrow {
+    border-color: #999 transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 2.5px;
+    display: inline-block;
+    height: 0;
+    width: 0;
+}
+.is-open .Select-arrow,
+.Select-arrow-zone:hover > .Select-arrow {
+    border-top-color: #666;
+}
+@-webkit-keyframes Select-animation-fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes Select-animation-fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.Select-menu-outer {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-top-color: #e6e6e6;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+    margin-top: -1px;
+    max-height: 200px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 1;
+    -webkit-overflow-scrolling: touch;
+}
+.Select-menu {
+    max-height: 198px;
+    overflow-y: auto;
+}
+.Select-option {
+    box-sizing: border-box;
+    background-color: #fff;
+    color: #666666;
+    cursor: pointer;
+    display: block;
+    padding: 8px 10px;
+}
+.Select-option:last-child {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.Select-option.is-focused {
+    background-color: rgba(0, 126, 255, 0.08);
+    color: #333;
+}
+.Select-option.is-disabled {
+    color: #cccccc;
+    cursor: default;
+}
+.Select-noresults {
+    box-sizing: border-box;
+    color: #999999;
+    cursor: default;
+    display: block;
+    padding: 8px 10px;
+}
+.Select--multi .Select-input {
+    vertical-align: middle;
+    margin-left: 10px;
+    padding: 0;
+}
+.Select--multi.has-value .Select-input {
+    margin-left: 5px;
+}
+.Select--multi .Select-value {
+    background-color: rgba(0, 126, 255, 0.08);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 126, 255, 0.24);
+    color: #007eff;
+    display: inline-block;
+    font-size: 0.9em;
+    line-height: 1.4;
+    margin-left: 5px;
+    margin-top: 5px;
+    vertical-align: top;
+}
+.Select--multi .Select-value-icon,
+.Select--multi .Select-value-label {
+    display: inline-block;
+    vertical-align: middle;
+}
+.Select--multi .Select-value-label {
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    cursor: default;
+    padding: 2px 5px;
+}
+.Select--multi a.Select-value-label {
+    color: #007eff;
+    cursor: pointer;
+    text-decoration: none;
+}
+.Select--multi a.Select-value-label:hover {
+    text-decoration: underline;
+}
+.Select--multi .Select-value-icon {
+    cursor: pointer;
+    border-bottom-left-radius: 2px;
+    border-top-left-radius: 2px;
+    border-right: 1px solid rgba(0, 126, 255, 0.24);
+    padding: 1px 5px 3px;
+}
+.Select--multi .Select-value-icon:hover,
+.Select--multi .Select-value-icon:focus {
+    background-color: rgba(0, 113, 230, 0.08);
+    color: #0071e6;
+}
+.Select--multi .Select-value-icon:active {
+    background-color: rgba(0, 126, 255, 0.24);
+}
+.Select--multi.is-disabled .Select-value {
+    background-color: #fcfcfc;
+    border: 1px solid #e3e3e3;
+    color: #333;
+}
+.Select--multi.is-disabled .Select-value-icon {
+    cursor: not-allowed;
+    border-right: 1px solid #e3e3e3;
+}
+.Select--multi.is-disabled .Select-value-icon:hover,
+.Select--multi.is-disabled .Select-value-icon:focus,
+.Select--multi.is-disabled .Select-value-icon:active {
+    background-color: #fcfcfc;
+}
+@keyframes Select-animation-spin {
+    to {
+        transform: rotate(1turn);
+    }
+}
+@-webkit-keyframes Select-animation-spin {
+    to {
+        -webkit-transform: rotate(1turn);
+    }
+}

js-frontend/src/views/Main.js

@@ -0,0 +1,136 @@
+/**
+ * Created by andrew on 17/02/16.
+ */
+import React from "react";
+import IndexPanel from "./../components/partials/IndexPanel";
+import { PageHeader, OverlayTrigger, Tooltip, Row, ButtonGroup, Table } from "react-bootstrap";
+import { Link, IndexLink} from "react-router";
+import { connect } from "react-redux";
+import * as BSTheme from "redux-auth/bootstrap-theme";
+import * as DefaultTheme from "redux-auth";
+import Select from "react-select";
+
+
+class Main extends React.Component {
+  updateTheme (theme) {
+    //this.props.dispatch(updateDemoTheme(theme));
+  }
+
+  updateEndpoint (endpoint) {
+    //this.props.dispatch(updateDemoEndpoint(endpoint));
+  }
+
+  render () {
+    console.log("page endpoint", this.props.pageEndpoint);
+    let Theme = BSTheme;
+    let themePath = "/material-ui-theme";
+    let endpointAttr = (this.props.pageEndpoint === "default")
+      ? ""
+      : "endpoint=\"evilUser\"";
+
+    switch(this.props.theme) {
+      case "default":
+        Theme = DefaultTheme;
+        themePath = "";
+        break;
+      case "bootstrap":
+        Theme = BSTheme;
+        themePath = "/bootstrap-theme";
+        break;
+    }
+
+    const deployTooltip = (<Tooltip>
+      Create a new instance of this demo on your own Heroku server.
+    </Tooltip>);
+
+    return (
+      <div>
+        <PageHeader>
+          Money Transfer Demo
+
+          <OverlayTrigger overlay={deployTooltip} placement="left">
+            <a
+              className="pull-right"
+              href="https://heroku.com/deploy?template=https://github.com/lynndylanhurley/redux-auth-demo">
+              <img src="https://www.herokucdn.com/deploy/button.svg" />
+            </a>
+          </OverlayTrigger>
+        </PageHeader>
+
+        <Row>
+          <IndexPanel header="Current User">
+            <label>current user provider</label>
+            <p>{this.props.currentUserUid}</p>
+
+            <label>current user uid</label>
+            <p>{this.props.currentUserProvider}</p>
+
+            <IndexLink to="/">Home</IndexLink><br/>
+            <Link to="/signin">Login</Link><br/>
+            <Link to="/register">Register</Link><br/>
+            <Link to="/account">Account</Link><br/>
+
+            <label>currently selected theme</label>
+            <Select
+              value={this.props.theme}
+              clearable={false}
+              options={[
+                {value: "default", label: "Default"},
+                {value: "bootstrap", label: "Bootstrap"},
+                {value: "materialUi", label: "Material UI"}
+                ]}
+              onChange={this.updateTheme.bind(this)} />
+
+            <label>currently selected endpoint</label>
+            <Select
+              value={this.props.pageEndpoint}
+              clearable={false}
+              options={[
+                {value: "default", label: "Default User Class"},
+                {value: "evilUser", label: "Alternate User Class"}
+              ]}
+              onChange={this.updateEndpoint.bind(this)} />
+
+            <Table>
+              <thead>
+              <tr>
+                <th colSpan={2}>
+                  ajax test
+                </th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                <td>Default user:</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Alternate user class:</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Group that includes both user classes:</td>
+                <td></td>
+              </tr>
+              </tbody>
+            </Table>
+          </IndexPanel>
+
+          <IndexPanel header="Other  User"></IndexPanel>
+
+
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default connect(({auth, demoUi = new Map()}) => {
+  return ({
+    currentUserUid: auth.getIn(["user", "attributes", "provider"]) || "none",
+    currentUserProvider: auth.getIn(["user", "attributes", "uid"]) || "none",
+    currentUserEndpoint: auth.getIn(["user", "endpointKey"]) || "none",
+    theme: demoUi.get("theme"),
+    pageEndpoint: demoUi.get("endpoint")
+  })
+})(Main);

js-frontend/src/views/SignUp.js

@@ -2,16 +2,26 @@
  * Created by andrew on 12/02/16.
  */
 import React from "react";
-import { PageHeader } from "react-bootstrap";
+//import { PageHeader } from "react-bootstrap";
 import { connect } from "react-redux";
+import { PageHeader, OverlayTrigger, Tooltip, Row, ButtonGroup, Table } from "react-bootstrap";
+import { Link, IndexLink} from "react-router";
 
 //import { EmailSignUpForm } from "redux-auth/bootstrap-theme"
 import EmailSignUpForm from "../controls/bootstrap/EmailSignUpForm";
 
 export class SignUp extends React.Component {
   render () {
-
-    return <EmailSignUpForm endpoint="default" />;
+    return (
+      <div>
+        <PageHeader>
+          Register
+        </PageHeader>
+        <Row>
+          <EmailSignUpForm endpoint="default" />
+        </Row>
+      </div>
+    );
 
   }
 }

prebuilt-web-client/index.html

@@ -7,15 +7,18 @@
     <title>Money Transfer App</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="/style2.css">
+
     <!-- inject:app:css -->
     <link rel="stylesheet" href="/style.css">
     <!-- endinject -->
+
   </head>
   <body>
     <div id="react-app"></div>
 
     <!-- inject:app:js -->
-    <script src="/main-84abb9a403e5ea60b26c.js"></script>
+    <script src="/main-9aec0a6fd78376cd52bb.js"></script>
     <!-- endinject -->
   </body>
 </html>

prebuilt-web-client/style2.css

@@ -0,0 +1,334 @@
+/**
+ * React Select
+ * ============
+ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
+ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
+ * MIT License: https://github.com/keystonejs/react-select
+*/
+.Select {
+    position: relative;
+}
+.Select,
+.Select div,
+.Select input,
+.Select span {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.Select.is-disabled > .Select-control {
+    background-color: #f9f9f9;
+}
+.Select.is-disabled > .Select-control:hover {
+    box-shadow: none;
+}
+.Select.is-disabled .Select-arrow-zone {
+    cursor: default;
+    pointer-events: none;
+}
+.Select-control {
+    background-color: #fff;
+    border-color: #d9d9d9 #ccc #b3b3b3;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    color: #333;
+    cursor: default;
+    display: table;
+    height: 36px;
+    outline: none;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+.Select-control:hover {
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+.is-searchable.is-open > .Select-control {
+    cursor: text;
+}
+.is-open > .Select-control {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    background: #fff;
+    border-color: #b3b3b3 #ccc #d9d9d9;
+}
+.is-open > .Select-control > .Select-arrow {
+    border-color: transparent transparent #999;
+    border-width: 0 5px 5px;
+}
+.is-searchable.is-focused:not(.is-open) > .Select-control {
+    cursor: text;
+}
+.is-focused:not(.is-open) > .Select-control {
+    border-color: #007eff;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
+}
+.Select-placeholder,
+:not(.Select--multi) > .Select-control .Select-value {
+    bottom: 0;
+    color: #aaa;
+    left: 0;
+    line-height: 34px;
+    padding-left: 10px;
+    padding-right: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.has-value:not(.Select--multi) > .Select-control > .Select-value .Select-value-label,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value .Select-value-label {
+    color: #333;
+}
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label {
+    cursor: pointer;
+    text-decoration: none;
+}
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus,
+.has-value.is-pseudo-focused:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus {
+    color: #007eff;
+    outline: none;
+    text-decoration: underline;
+}
+.Select-input {
+    height: 34px;
+    padding-left: 10px;
+    padding-right: 10px;
+    vertical-align: middle;
+}
+.Select-input > input {
+    background: none transparent;
+    border: 0 none;
+    box-shadow: none;
+    cursor: default;
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    height: 34px;
+    margin: 0;
+    outline: none;
+    padding: 0;
+    -webkit-appearance: none;
+}
+.is-focused .Select-input > input {
+    cursor: text;
+}
+.has-value.is-pseudo-focused .Select-input {
+    opacity: 0;
+}
+.Select-control:not(.is-searchable) > .Select-input {
+    outline: none;
+}
+.Select-loading-zone {
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 16px;
+}
+.Select-loading {
+    -webkit-animation: Select-animation-spin 400ms infinite linear;
+    -o-animation: Select-animation-spin 400ms infinite linear;
+    animation: Select-animation-spin 400ms infinite linear;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: 2px solid #ccc;
+    border-right-color: #333;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+}
+.Select-clear-zone {
+    -webkit-animation: Select-animation-fadeIn 200ms;
+    -o-animation: Select-animation-fadeIn 200ms;
+    animation: Select-animation-fadeIn 200ms;
+    color: #999;
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 17px;
+}
+.Select-clear-zone:hover {
+    color: #D0021B;
+}
+.Select-clear {
+    display: inline-block;
+    font-size: 18px;
+    line-height: 1;
+}
+.Select--multi .Select-clear-zone {
+    width: 17px;
+}
+.Select-arrow-zone {
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 25px;
+    padding-right: 5px;
+}
+.Select-arrow {
+    border-color: #999 transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 2.5px;
+    display: inline-block;
+    height: 0;
+    width: 0;
+}
+.is-open .Select-arrow,
+.Select-arrow-zone:hover > .Select-arrow {
+    border-top-color: #666;
+}
+@-webkit-keyframes Select-animation-fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes Select-animation-fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.Select-menu-outer {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-top-color: #e6e6e6;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+    margin-top: -1px;
+    max-height: 200px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 1;
+    -webkit-overflow-scrolling: touch;
+}
+.Select-menu {
+    max-height: 198px;
+    overflow-y: auto;
+}
+.Select-option {
+    box-sizing: border-box;
+    background-color: #fff;
+    color: #666666;
+    cursor: pointer;
+    display: block;
+    padding: 8px 10px;
+}
+.Select-option:last-child {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.Select-option.is-focused {
+    background-color: rgba(0, 126, 255, 0.08);
+    color: #333;
+}
+.Select-option.is-disabled {
+    color: #cccccc;
+    cursor: default;
+}
+.Select-noresults {
+    box-sizing: border-box;
+    color: #999999;
+    cursor: default;
+    display: block;
+    padding: 8px 10px;
+}
+.Select--multi .Select-input {
+    vertical-align: middle;
+    margin-left: 10px;
+    padding: 0;
+}
+.Select--multi.has-value .Select-input {
+    margin-left: 5px;
+}
+.Select--multi .Select-value {
+    background-color: rgba(0, 126, 255, 0.08);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 126, 255, 0.24);
+    color: #007eff;
+    display: inline-block;
+    font-size: 0.9em;
+    line-height: 1.4;
+    margin-left: 5px;
+    margin-top: 5px;
+    vertical-align: top;
+}
+.Select--multi .Select-value-icon,
+.Select--multi .Select-value-label {
+    display: inline-block;
+    vertical-align: middle;
+}
+.Select--multi .Select-value-label {
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    cursor: default;
+    padding: 2px 5px;
+}
+.Select--multi a.Select-value-label {
+    color: #007eff;
+    cursor: pointer;
+    text-decoration: none;
+}
+.Select--multi a.Select-value-label:hover {
+    text-decoration: underline;
+}
+.Select--multi .Select-value-icon {
+    cursor: pointer;
+    border-bottom-left-radius: 2px;
+    border-top-left-radius: 2px;
+    border-right: 1px solid rgba(0, 126, 255, 0.24);
+    padding: 1px 5px 3px;
+}
+.Select--multi .Select-value-icon:hover,
+.Select--multi .Select-value-icon:focus {
+    background-color: rgba(0, 113, 230, 0.08);
+    color: #0071e6;
+}
+.Select--multi .Select-value-icon:active {
+    background-color: rgba(0, 126, 255, 0.24);
+}
+.Select--multi.is-disabled .Select-value {
+    background-color: #fcfcfc;
+    border: 1px solid #e3e3e3;
+    color: #333;
+}
+.Select--multi.is-disabled .Select-value-icon {
+    cursor: not-allowed;
+    border-right: 1px solid #e3e3e3;
+}
+.Select--multi.is-disabled .Select-value-icon:hover,
+.Select--multi.is-disabled .Select-value-icon:focus,
+.Select--multi.is-disabled .Select-value-icon:active {
+    background-color: #fcfcfc;
+}
+@keyframes Select-animation-spin {
+    to {
+        transform: rotate(1turn);
+    }
+}
+@-webkit-keyframes Select-animation-spin {
+    to {
+        -webkit-transform: rotate(1turn);
+    }
+}