Landing page markup is complete, wiring - WIP

js-frontend/package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "babel-polyfill": "6.1.4",
     "babel-runtime": "6.0.14",
+    "classnames": "^2.2.3",
     "history": "1.17.0",
     "immutable": "^3.7.6",
     "invariant": "^2.1.1",

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

@@ -2,7 +2,7 @@
  * Created by andrew on 17/02/16.
  */
 import React, { PropTypes } from "react";
-import { Grid, Navbar, NavItem, Nav, NavbarBrand } from "react-bootstrap";
+import { Grid, Col, Navbar, NavItem, Nav, NavbarBrand, Footer } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 
 //if (!global.__SERVER__ && !global.__TEST__) {
@@ -35,7 +35,15 @@ class Container extends React.Component {
           {this.props.children}
         </Grid>
 
-
+        <Navbar fixedBottom="true" className="footer-navigation">
+          <Col xs="12" sm="6">&copy; 2016 Eventuate.io</Col>
+          <Col xs="12" sm="6" className="text-right">
+            <a href="#">Terms</a> |&nbsp;
+            <a href="#">Policy</a> |&nbsp;
+            <a href="#">Contact</a> |&nbsp;
+            <a href="#">About</a>
+          </Col>
+        </Navbar>
       </div>
     );
   }

js-frontend/src/main.less

@@ -44,3 +44,20 @@ textarea {
   height: 100%;
   min-height: 100%;
 }
+
+body {
+  padding-bottom: 50px;
+  /* height: 100%; */
+  /* min-height: 100%; */
+  height: auto;
+}
+.footer-navigation {
+  height: 1px;
+  & > .container {
+    height: 100%;
+    & > * {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}

js-frontend/src/views/Main.js

@@ -3,14 +3,13 @@
  */
 import React from "react";
 import IndexPanel from "./../components/partials/IndexPanel";
-import { PageHeader, OverlayTrigger, Tooltip, Row, ButtonGroup, Table } from "react-bootstrap";
+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 Select from "react-select";
 
-
 class Main extends React.Component {
   updateTheme (theme) {
     //this.props.dispatch(updateDemoTheme(theme));
@@ -21,109 +20,127 @@ class Main extends React.Component {
   }
 
   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) {
+    //const deployTooltip = (<Tooltip>
-      case "default":
+    //  Create a new instance of this demo on your own Heroku server.
-        Theme = DefaultTheme;
+    //</Tooltip>);
-        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
+            My Accounts
-
+          <Nav pullRight="true">
-          <OverlayTrigger overlay={deployTooltip} placement="left">
+            <ButtonGroup pullRight="true">
-            <a
+              <Button bsStyle="link">Create Account</Button>
-              className="pull-right"
+              <Button bsStyle="link">Add 3rd Party Recipients</Button>
-              href="https://heroku.com/deploy?template=https://github.com/lynndylanhurley/redux-auth-demo">
+            </ButtonGroup>
-              <img src="https://www.herokucdn.com/deploy/button.svg" />
+          </Nav>
-            </a>
-          </OverlayTrigger>
         </PageHeader>
 
         <Row>
-          <IndexPanel header="Current User">
+          <IndexPanel header="Personal Info:">
-            <label>current user provider</label>
-            <p>{this.props.currentUserUid}</p>
 
-            <label>current user uid</label>
+            <Row>
-            <p>{this.props.currentUserProvider}</p>
+              <Col xs="4">Customer:</Col>
+              <Col xs="8"><strong>Kevin McCallister</strong></Col>
+            </Row>
 
-            <IndexLink to="/">Home</IndexLink><br/>
+            <Row>
-            <Link to="/signin">Login</Link><br/>
+              <Col xs="4">Email:</Col>
-            <Link to="/register">Register</Link><br/>
+              <Col xs="8"><strong>current@email.com</strong></Col>
-            <Link to="/account">Account</Link><br/>
+            </Row>
 
-            <label>currently selected theme</label>
+            <Row>
-            <Select
+              <Col xs="4">SSN:</Col>
-              value={this.props.theme}
+              <Col xs="8"><strong>1234567890-09876</strong></Col>
-              clearable={false}
+            </Row>
-              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>
+        <Table>
+          <thead>
+          <tr>
+            <th>Account Title</th>
+            <th>Balance</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><a href="#">Account Title #1</a></td>
+            <td>$100.00</td>
+          </tr>
+          <tr>
+            <td><a href="#">Account Title #1</a></td>
+            <td>$150.00</td>
+          </tr>
+          </tbody>
+        </Table>
+
       </div>
     );
   }
 }
+/*
+ <IndexPanel header="Other  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>
+*/
 
 export default connect(({auth, demoUi = new Map()}) => {
   return ({

prebuilt-web-client/style2.css

@@ -331,4 +331,5 @@
     to {
         -webkit-transform: rotate(1turn);
     }
-}
+}
+