Landing page markup is complete, wiring - WIP
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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">© 2016 Eventuate.io</Col>
|
||||
<Col xs="12" sm="6" className="text-right">
|
||||
<a href="#">Terms</a> |
|
||||
<a href="#">Policy</a> |
|
||||
<a href="#">Contact</a> |
|
||||
<a href="#">About</a>
|
||||
</Col>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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) {
|
||||
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>);
|
||||
//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>
|
||||
My Accounts
|
||||
<Nav pullRight="true">
|
||||
<ButtonGroup pullRight="true">
|
||||
<Button bsStyle="link">Create Account</Button>
|
||||
<Button bsStyle="link">Add 3rd Party Recipients</Button>
|
||||
</ButtonGroup>
|
||||
</Nav>
|
||||
</PageHeader>
|
||||
|
||||
<Row>
|
||||
<IndexPanel header="Current User">
|
||||
<label>current user provider</label>
|
||||
<p>{this.props.currentUserUid}</p>
|
||||
<IndexPanel header="Personal Info:">
|
||||
|
||||
<label>current user uid</label>
|
||||
<p>{this.props.currentUserProvider}</p>
|
||||
<Row>
|
||||
<Col xs="4">Customer:</Col>
|
||||
<Col xs="8"><strong>Kevin McCallister</strong></Col>
|
||||
</Row>
|
||||
|
||||
<IndexLink to="/">Home</IndexLink><br/>
|
||||
<Link to="/signin">Login</Link><br/>
|
||||
<Link to="/register">Register</Link><br/>
|
||||
<Link to="/account">Account</Link><br/>
|
||||
<Row>
|
||||
<Col xs="4">Email:</Col>
|
||||
<Col xs="8"><strong>current@email.com</strong></Col>
|
||||
</Row>
|
||||
|
||||
<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)} />
|
||||
<Row>
|
||||
<Col xs="4">SSN:</Col>
|
||||
<Col xs="8"><strong>1234567890-09876</strong></Col>
|
||||
</Row>
|
||||
|
||||
<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 ({
|
||||
|
||||
@@ -331,4 +331,5 @@
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user