Account Detail page + Modals

js-frontend/gulpfile.babel.js

@@ -14,7 +14,7 @@ const PORT = process.env.PORT || 3000;
 const $ = gulpLoadPlugins({camelize: true});
 
 
-// Main tasks
+// MyAccounts tasks
 gulp.task('serve', () => runSequence('serve:clean', 'serve:index', 'serve:start'));
 gulp.task('dist', () => runSequence('dist:clean', 'dist:build', 'dist:index'));
 gulp.task('clean', ['dist:clean', 'serve:clean']);

js-frontend/src/App.js

@@ -3,22 +3,23 @@
  */
 
 import React from "react";
+import { createStore, compose, applyMiddleware, combineReducers} from "redux";
 import { Provider} from "react-redux";
+import thunk from "redux-thunk";
+
+import { Route, IndexRoute, Link, IndexLink } from "react-router";
 import { ReduxRouter} from "redux-router";
+
 //import { Router, IndexRoute, Route, browserHistory } from 'react-router';
 //import { syncHistory, routeReducer } from 'react-router-redux';
 
-import { Route, IndexRoute, Link, IndexLink} from "react-router";
+import { configure as reduxAuthConfigure, authStateReducer } from "redux-auth";
-import { configure as reduxAuthConfigure, authStateReducer} from "redux-auth";
 import { AuthGlobals } from "redux-auth/bootstrap-theme";
 
-import { createStore, compose, applyMiddleware} from "redux";
 import { createHistory, createHashHistory, createMemoryHistory } from "history";
 import { routerStateReducer, reduxReactRouter as clientRouter} from "redux-router";
 import { reduxReactRouter as serverRouter } from "redux-router/server";
-import { combineReducers} from "redux";
 
-import thunk from "redux-thunk";
 
 import { connect } from 'react-redux';
 import { pushState } from 'redux-router';
@@ -26,7 +27,7 @@ import { pushState } from 'redux-router';
 //import demoButtons from "./reducers/request-test-buttons";
 //import demoUi from "./reducers/demo-ui";
 import Container from "./components/partials/Container";
-import Main from "./views/Main";
+import MyAccounts from "./views/MyAccounts";
 import Account from "./views/Account";
 import SignIn from "./views/SignIn";
 import SignUp from "./views/SignUp";
@@ -71,6 +72,18 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
   //  }, 0);
   //};
 
+  const requireAuth = next =>
+    (nextState, transition, cb) => {
+      debugger;
+      if (!auth.isLoggedIn()) {
+        transition.to('/login', null, {redirect: nextState.location});
+        return;
+      }
+      next(nextState, transition);
+    };
+
+  const mw = compose(requireAuth);
+
   const requireAuthentication = (Component) => {
     class AuthenticatedComponent extends React.Component {
 
@@ -115,24 +128,22 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
 
   // define app routes
   //      <Route path="account" component={Account} onEnter={requireAuth} />
+  //<Route path="account" component={requireAuthentication(Account)} />
 
   const routes = (
     <Route path="/" component={App}>
-      <IndexRoute component={Main} />
+      <IndexRoute component={MyAccounts} />
+      <Route onEnter={mw} path="acc" component={Account} />
+
       <Route path="signin" component={SignIn} />
       <Route path="register" component={SignUp} />
-      <Route path="account" component={requireAuthentication(Account)} />
+      <Route path="account/:id" component={Account} />
     </Route>
   );
 
   // these methods will differ from server to client
-  var reduxReactRouter    = clientRouter;
+  const reduxReactRouter    = isServer ? serverRouter : clientRouter;
-  var createHistoryMethod = createHashHistory;
+  const createHistoryMethod = isServer ? createMemoryHistory : createHashHistory;
-
-  if (isServer) {
-    reduxReactRouter    = serverRouter;
-    createHistoryMethod = createMemoryHistory;
-  }
 
   // create the redux store
   const store = compose(
@@ -192,7 +203,7 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
       return <noscript />;
     }
 
-    console.log(`redirect path: ${redirectPath}`)
+    console.log(`redirect path: ${redirectPath}`);
 
     return ({
       blank,

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

@@ -35,9 +35,9 @@ class Container extends React.Component {
           {this.props.children}
         </Grid>
 
-        <Navbar fixedBottom="true" className="footer-navigation">
+        <Navbar fixedBottom={true} className="footer-navigation">
-          <Col xs="12" sm="6">&copy; 2016 Eventuate.io</Col>
+          <Col xs={12} sm={6}>&copy; 2016 Eventuate.io</Col>
-          <Col xs="12" sm="6" className="text-right">
+          <Col xs={12} sm={6} className="text-right">
             <a href="#">Terms</a> |&nbsp;
             <a href="#">Policy</a> |&nbsp;
             <a href="#">Contact</a> |&nbsp;

js-frontend/src/views/Account.js

@@ -2,16 +2,148 @@
  * 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, Grid, Col, Row, Nav, NavItem, ButtonGroup, Button, Table } from "react-bootstrap";
+import Select from "react-select";
+import { Link, IndexLink} from "react-router";
+import IndexPanel from "./../components/partials/IndexPanel";
+import * as Modals from './modals';
+
+
+const resetModals = {
+  showAccountModal: false,
+  show3rdPartyAccountModal: false,
+  showDeleteAccountModal: false
+};
+
 export class Account extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = { ...resetModals };
+  }
+
+  createAccountModal() {
+    this.setState({
+      showAccountModal: true
+    });
+  }
+
+  createAccountModalConfirmed() {
+
+  }
+
+  accountChanged(){}
+
+  close() {
+    this.setState({
+      ...resetModals
+    });
+  }
+
   render () {
+
+    const { showAccountModal } = this.state;
+
     return (
       <div>
-        <PageHeader>Account page</PageHeader>
+        <PageHeader>
-        <p>This page should only visible to authenticated users.</p>
+          Accounts
+          <Nav pullRight={true}>
+            <ButtonGroup>
+              <Button bsStyle={"link"} onClick={this.createAccountModal.bind(this)}>Edit</Button>
+            </ButtonGroup>
+          </Nav>
+        </PageHeader>
+
+        <Row>
+          <IndexPanel header="Account Info:">
+
+            <Row>
+              <Col xs={4}>Title:</Col>
+              <Col xs={8}><strong>Account Title #1</strong></Col>
+            </Row>
+
+            <Row>
+              <Col xs={4}>Balance:</Col>
+              <Col xs={8}><strong>$100.00</strong></Col>
+            </Row>
+
+            <Row>
+              <Col xs={4}>Description:</Col>
+              <Col xs={8}><strong>Savings with progressive interest (0.7%)</strong></Col>
+            </Row>
+
+          </IndexPanel>
+
+        </Row>
+        <Row>
+          <Col xs={12}>
+            <h3>You can transfer money to accounts:</h3>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={4}>
+            <label>Transfer To:</label>
+            <Select
+              value={''}
+              clearable={false}
+              options={[
+ {value: "default", label: "Default"},
+ {value: "bootstrap", label: "Bootstrap"},
+ {value: "materialUi", label: "Material UI"}
+ ]}
+              onChange={this.accountChanged.bind(this)} />
+          </Col>
+          <Col xs={3}>
+            <label>Amount:</label>
+            </Col>
+          <Col xs={3}>
+            <label>Description:</label>
+            </Col>
+          <Col xs={2}>
+            <br/>
+            <Button bsStyle="primary">Transfer</Button>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col xs={12}>
+            <h3>Account History:</h3>
+          </Col>
+        </Row>
+        <Table>
+          <thead>
+          <tr>
+            <th>Date</th>
+            <th>What</th>
+            <th>Counter Account</th>
+            <th>Amount</th>
+            <th>Description</th>
+            <th>Status</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><a href="#">Account Title #1</a></td>
+            <td>$100.00</td>
+          </tr>
+          <tr>
+            <td><a href="#">Account Title #2</a></td>
+            <td>$100.00</td>
+          </tr>
+          </tbody>
+        </Table>
+
+        <Modals.NewAccountModal show={showAccountModal}
+                                action={this.createAccountModalConfirmed.bind(this)}
+                                onHide={this.close.bind(this)}
+                                key={0} />
+
+
       </div>
+
     );
   }
 }

js-frontend/src/views/MyAccounts.js

@@ -2,15 +2,28 @@
  * Created by andrew on 17/02/16.
  */
 import React from "react";
-import IndexPanel from "./../components/partials/IndexPanel";
 import { PageHeader, OverlayTrigger, Tooltip, Grid, Col, Row, Nav, NavItem, ButtonGroup, Button, 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 * as DefaultTheme from "redux-auth";
 import Select from "react-select";
+import * as Modals from './modals';
+import IndexPanel from "./../components/partials/IndexPanel";
 
-class Main extends React.Component {
+
+const resetModals = {
+  showAccountModal: false,
+  show3rdPartyAccountModal: false,
+  showDeleteAccountModal: false
+};
+
+class MyAccounts extends React.Component {
+
+  constructor(...args) {
+    super(...args);
+    this.state = { ...resetModals };
+  }
   updateTheme (theme) {
     //this.props.dispatch(updateDemoTheme(theme));
   }
@@ -19,20 +32,63 @@ class Main extends React.Component {
     //this.props.dispatch(updateDemoEndpoint(endpoint));
   }
 
+  createAccountModal() {
+    this.setState({
+      showAccountModal: true
+    });
+  }
+
+  createAccountModalConfirmed() {
+
+  }
+
+  create3rdPartyAccountModal() {
+
+    this.setState({
+      show3rdPartyAccountModal: true
+    });
+  }
+
+  create3rdPartyAccountModalConfirmed() {
+
+  }
+
+  remove3rdPartyAccountModal() {
+
+    const account = null;
+    this.setState({
+      accountToRemove: account,
+      showDeleteAccountModal: true
+    });
+  }
+
+  remove3rdPartyAccountModalConfirmed() {
+
+  }
+
+  close() {
+    this.setState({
+      ...resetModals
+    });
+  }
+
   render () {
 
     //const deployTooltip = (<Tooltip>
     //  Create a new instance of this demo on your own Heroku server.
     //</Tooltip>);
 
+    const { showAccountModal, show3rdPartyAccountModal, showDeleteAccountModal } = this.state;
+    const { accountToRemove = null } = this.state;
+
     return (
       <div>
         <PageHeader>
             My Accounts
-          <Nav pullRight="true">
+          <Nav pullRight={true}>
-            <ButtonGroup pullRight="true">
+            <ButtonGroup>
-              <Button bsStyle="link">Create Account</Button>
+              <Button bsStyle={"link"} onClick={this.createAccountModal.bind(this)}>Create Account</Button>
-              <Button bsStyle="link">Add 3rd Party Recipients</Button>
+              <Button bsStyle={"link"} onClick={this.create3rdPartyAccountModal.bind(this)}>Add 3rd Party Recipients</Button>
             </ButtonGroup>
           </Nav>
         </PageHeader>
@@ -41,18 +97,18 @@ class Main extends React.Component {
           <IndexPanel header="Personal Info:">
 
             <Row>
-              <Col xs="4">Customer:</Col>
+              <Col xs={4}>Customer:</Col>
-              <Col xs="8"><strong>Kevin McCallister</strong></Col>
+              <Col xs={8}><strong>Kevin McCallister</strong></Col>
             </Row>
 
             <Row>
-              <Col xs="4">Email:</Col>
+              <Col xs={4}>Email:</Col>
-              <Col xs="8"><strong>current@email.com</strong></Col>
+              <Col xs={8}><strong>current@email.com</strong></Col>
             </Row>
 
             <Row>
-              <Col xs="4">SSN:</Col>
+              <Col xs={4}>SSN:</Col>
-              <Col xs="8"><strong>1234567890-09876</strong></Col>
+              <Col xs={8}><strong>1234567890-09876</strong></Col>
             </Row>
 
 
@@ -73,12 +129,30 @@ class Main extends React.Component {
             <td>$100.00</td>
           </tr>
           <tr>
-            <td><a href="#">Account Title #1</a></td>
+            <td><a href="#">Account Title #2</a></td>
-            <td>$150.00</td>
+            <td><Button bsStyle={"link"} onClick={this.remove3rdPartyAccountModal.bind(this)}>remove</Button>
+            </td>
           </tr>
           </tbody>
         </Table>
 
+
+        <Modals.NewAccountModal show={showAccountModal}
+                                action={this.createAccountModalConfirmed.bind(this)}
+                                onHide={this.close.bind(this)}
+                                key={0} />
+
+        <Modals.Add3rdPartyAccountModal show={show3rdPartyAccountModal}
+                                        action={this.create3rdPartyAccountModalConfirmed.bind(this)}
+                                        onHide={this.close.bind(this)}
+                                        key={1} />
+
+        <Modals.RemoveAccountBookmarkModal show={showDeleteAccountModal}
+                                           account={accountToRemove}
+                                           action={this.remove3rdPartyAccountModalConfirmed.bind(this)}
+                                           onHide={this.close.bind(this)}
+                                           key={2} />
+
       </div>
     );
   }
@@ -147,7 +221,7 @@ export default connect(({auth, demoUi = new Map()}) => {
     currentUserUid: auth.getIn(["user", "attributes", "provider"]) || "none",
     currentUserProvider: auth.getIn(["user", "attributes", "uid"]) || "none",
     currentUserEndpoint: auth.getIn(["user", "endpointKey"]) || "none",
-    theme: demoUi.get("theme"),
+    //theme: demoUi.get("theme"),
     pageEndpoint: demoUi.get("endpoint")
   })
-})(Main);
+})(MyAccounts);

js-frontend/src/views/modals/Add3rdPartyAccountModal.js

@@ -0,0 +1,68 @@
+/**
+ * Created by andrew on 20/02/16.
+ */
+import React from "react";
+import { PageHeader, OverlayTrigger, Modal, Tooltip, Grid, Col, Row, Nav, NavItem, ButtonGroup, Button, Table } from "react-bootstrap";
+import { Link, IndexLink} from "react-router";
+import { connect } from "react-redux";
+import Select from "react-select";
+
+export class Add3rdPartyAccountModal extends React.Component {
+
+  ownerChanged(argq, arg2, arg3) {
+    debugger;
+  }
+
+  accountChanged(argq, arg2, arg3) {
+    debugger;
+  }
+
+  render() {
+
+    return (
+      <Modal show={this.props.show} onHide={this.props.onHide} key={1}>
+        <Modal.Header closeButton>
+          <Modal.Title>Add 3rd Party Account</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <form>
+            <label>Owner:</label>
+            <Select
+              value={this.props.theme}
+              clearable={false}
+              options={[
+ {value: "default", label: "Default"},
+ {value: "bootstrap", label: "Bootstrap"},
+ {value: "materialUi", label: "Material UI"}
+ ]}
+              onChange={this.ownerChanged.bind(this)} />
+            <label>Account:</label>
+            <Select
+              value={this.props.theme}
+              clearable={false}
+              options={[
+ {value: "default", label: "Default"},
+ {value: "bootstrap", label: "Bootstrap"},
+ {value: "materialUi", label: "Material UI"}
+ ]}
+              onChange={this.accountChanged.bind(this)} />
+            <label>Account:</label>
+            <div>Description</div>
+          </form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Cancel</Button>
+          <Button bsStyle="primary" onClick={this.props.action}>Add</Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  //token: state.auth.token,
+  //userName: state.auth.userName,
+  //isAuthenticated: state.auth.isAuthenticated
+});
+
+export default connect(mapStateToProps)(Add3rdPartyAccountModal);

js-frontend/src/views/modals/NewAccountModal.js

@@ -0,0 +1,37 @@
+/**
+ * Created by andrew on 20/02/16.
+ */
+import React from "react";
+import { PageHeader, OverlayTrigger, Modal, Tooltip, Grid, Col, Row, Nav, NavItem, ButtonGroup, Button, Table } from "react-bootstrap";
+import { Link, IndexLink} from "react-router";
+import { connect } from "react-redux";
+import Select from "react-select";
+
+export class NewAccountModal extends React.Component {
+  render() {
+    return (<Modal show={this.props.show} onHide={this.props.onHide} key={0}>
+      <Modal.Header closeButton>
+        <Modal.Title>New Account</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <form>
+          Title <br/>
+          Balance <br/>
+          Description
+        </form>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={this.props.onHide}>Cancel</Button>
+        <Button bsStyle="primary" onClick={this.props.action}>Create</Button>
+      </Modal.Footer>
+    </Modal>);
+  }
+}
+
+const mapStateToProps = (state) => ({
+  //token: state.auth.token,
+  //userName: state.auth.userName,
+  //isAuthenticated: state.auth.isAuthenticated
+});
+
+export default connect(mapStateToProps)(NewAccountModal);

js-frontend/src/views/modals/RemoveAccountBookmarkModal.js

@@ -0,0 +1,44 @@
+/**
+ * Created by andrew on 20/02/16.
+ */
+import React from "react";
+import { PageHeader, OverlayTrigger, Modal, Tooltip, Grid, Col, Row, Nav, NavItem, ButtonGroup, Button, Table } from "react-bootstrap";
+import { Link, IndexLink} from "react-router";
+import { connect } from "react-redux";
+import Select from "react-select";
+
+export class NewAccountModal extends React.Component {
+  render() {
+    const account = this.props.account;
+
+    return (<Modal show={this.props.show} onHide={this.props.onHide} key={0}>
+      <Modal.Header closeButton>
+        <Modal.Title>Remove Account Bookmark</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <form>
+          <label>Title:</label>
+          <div>Acct one</div>
+          <label>Balance:</label>
+          <div>$105.00</div>
+
+          <label>Description:</label>
+          <div>$105.00</div>
+
+        </form>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={this.props.onHide}>Cancel</Button>
+        <Button bsStyle="danger" onClick={this.props.action}>Remove</Button>
+      </Modal.Footer>
+    </Modal>);
+  }
+}
+
+const mapStateToProps = (state) => ({
+  //token: state.auth.token,
+  //userName: state.auth.userName,
+  //isAuthenticated: state.auth.isAuthenticated
+});
+
+export default connect(mapStateToProps)(NewAccountModal);

js-frontend/src/views/modals/index.js

@@ -0,0 +1,6 @@
+/**
+ * Created by andrew on 20/02/16.
+ */
+export { default as Add3rdPartyAccountModal } from './Add3rdPartyAccountModal';
+export { default as NewAccountModal } from './NewAccountModal';
+export { default as RemoveAccountBookmarkModal } from './RemoveAccountBookmarkModal';

js-frontend/webpack.config.js

@@ -9,7 +9,7 @@ export default (DEBUG, PATH, PORT=3000) => ({
   ] : []).concat([
     './src/main.less',
     'babel-polyfill',
-    './src/client',
+    './src/client'
   ]),
 
   output: {
@@ -22,7 +22,8 @@ export default (DEBUG, PATH, PORT=3000) => ({
   debug: DEBUG,
 
   // For options, see http://webpack.github.io/docs/configuration.html#devtool
-  devtool: DEBUG && "eval",
+  //devtool: DEBUG && "eval",
+  devtool: DEBUG && "cheap-module-eval-source-map",
 
   module: {
     loaders: [
@@ -65,7 +66,9 @@ export default (DEBUG, PATH, PORT=3000) => ({
   },
 
   plugins: DEBUG
-    ? []
+    ? [
+    //new
+  ]
     : [
       new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}),
       new ExtractTextPlugin("style.css", {allChunks: false}),