diff --git a/src/Routes.js b/src/Routes.js
index 139e4f90..3bc6d68d 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -1,6 +1,7 @@
import React from 'react';
import { Match, Miss, Redirect } from 'react-router';
import {
+ AuthenticationPage,
CheckoutPage,
LandingPage,
ListingPage,
@@ -13,25 +14,84 @@ import {
// client and when rendering in the server.
const RedirectLandingPage = () => ;
-const Routes = () => (
-
-
+// Fake authentication module
+// An example from react-router v4 repository
+export const fakeAuth = {
+ isAuthenticated: false,
+ authenticate(cb) {
+ this.isAuthenticated = true;
+ setTimeout(cb, 100); // fake async
+ },
+ signout(cb) {
+ this.isAuthenticated = false;
+ cb();
+ setTimeout(cb, 100); // weird bug if async?
+ }
+};
- {/* Search view */}
-
-
- {/* Listing view */}
-
-
-
- {/* profile / storefront view */}
-
-
-
- {/* checkout */}
-
-
-
+// User must be authenticated before he can see certain pages
+export const MatchWhenAuthorized = ({ component: Component, ...rest }) => (
+ (
+ fakeAuth.isAuthenticated ?
+ ( ) :
+ (
+ )
+ )
+ }/>
);
+class Routes extends React.Component {
+ getChildContext() {
+ return { router: this.props.router };
+ }
+
+ render() {
+ return (
+
+
+
+ {/* Search view */}
+
+
+ {/* Listing view */}
+
+
+
+ {/* profile / storefront view */}
+
+
+
+ {/* checkout */}
+
+
+ {/* Login and signup */}
+
+ } />
+
+ } />
+
+
+
+
+
+ );
+ }
+}
+
+Routes.childContextTypes = {
+ router: React.PropTypes.object
+};
+
export default Routes;
diff --git a/src/app.js b/src/app.js
index 96d90d3a..7bb9e0b8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,9 +4,11 @@ import Helmet from 'react-helmet';
import { BrowserRouter, ServerRouter } from 'react-router';
import Routes from './Routes';
+const RoutesWithRouterProp = ({ router }) =>
+
export const ClientApp = () => (
-
+ { RoutesWithRouterProp }
);
@@ -14,7 +16,7 @@ export const ServerApp = (props) => {
const { url, context } = props;
return (
-
+ { RoutesWithRouterProp }
);
};
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js
new file mode 100644
index 00000000..a7e4c10f
--- /dev/null
+++ b/src/containers/AuthenticationPage/AuthenticationPage.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { Link, Redirect } from 'react-router';
+import { Page } from '../../components';
+import { fakeAuth } from '../../Routes';
+
+class AuthenticationPage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ redirectToReferrer: false,
+ };
+
+ this.login = this.login.bind(this);
+ }
+
+ login() {
+ fakeAuth.authenticate(() => {
+ this.setState({ redirectToReferrer: true });
+ })
+ }
+
+ render() {
+ const { from } = this.props.location.state || '/';
+ const { redirectToReferrer } = this.state;
+
+ const toLogin = Log in;
+ const toSignup = Sign up;
+ const alternativeMethod = this.props.tab === 'login' ? toSignup : toLogin;
+ const currentMethod = this.props.tab === 'login' ? 'Log in' : 'Sign up';
+
+ const fromLoginMsg = from ?
+ (
+ You must log in to view the page at
+ {from.pathname}
+
) :
+ null
+
+ return (
+
+ { redirectToReferrer ?
+ ( ):
+ null
+ }
+ { fromLoginMsg }
+
+ or { alternativeMethod }
+
+ )
+ }
+}
+
+export default AuthenticationPage;
diff --git a/src/containers/index.js b/src/containers/index.js
index 3d8fd6b6..974b66ae 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -1,3 +1,4 @@
+import AuthenticationPage from './AuthenticationPage/AuthenticationPage';
import CheckoutPage from './CheckoutPage/CheckoutPage';
import LandingPage from './LandingPage/LandingPage';
import ListingPage from './ListingPage/ListingPage';
@@ -6,6 +7,7 @@ import SearchPage from './SearchPage/SearchPage';
import NotFoundPage from './NotFoundPage/NotFoundPage';
export {
+ AuthenticationPage,
CheckoutPage,
LandingPage,
ListingPage,