Finalize ProxyRoute and RedirectProxyRoute

js/components/ascribe_forms/form_login.js

@@ -46,26 +46,7 @@ let LoginForm = React.createClass({
         UserStore.listen(this.onChange);
         let { redirect } = this.props.location.query;
         if (redirect && redirect !== 'login'){
-            this.histoy.pushState(null, redirect, this.props.location.query);
+            this.histoy.pushState(null, '/' + redirect, this.props.location.query);
-        }
-    },
-
-    componentDidUpdate() {
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email && this.props.redirectOnLoggedIn
-           && this.props.redirectOnLoginSuccess) {
-            let { redirectAuthenticated } = this.props.location.query;
-            if(redirectAuthenticated) {
-                /*
-                * redirectAuthenticated contains an arbirary path
-                * eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
-                * hence transitionTo cannot be used directly
-                */
-                window.location = AppConstants.baseUrl + redirectAuthenticated;
-            } else {
-                this.history.pushState(null, 'collection');
-            }
-            
         }
     },
 
@@ -77,17 +58,30 @@ let LoginForm = React.createClass({
         this.setState(state);
     },
 
-    handleSuccess(){
+    handleSuccess({ success }){
         let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        // register_piece is waiting for a login success as login_container and it is wrapped
+        if(success && this.props.redirectOnLoggedIn && this.props.redirectOnLoginSuccess) {
-        // in a slides_container component.
+            let { redirectAuthenticated } = this.props.location.query;
-        // The easiest way to check if the user was successfully logged in is to fetch the user
+            if(redirectAuthenticated) {
-        // in the user store (which is obviously only possible if the user is logged in), since
+                /*
-        // register_piece is listening to the changes of the user_store.
+                * redirectAuthenticated contains an arbirary path
-        UserActions.fetchCurrentUser();
+                * eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
-
+                * hence transitionTo cannot be used directly
+                */
+                window.location = AppConstants.baseUrl + redirectAuthenticated;
+            } else {
+                /* Taken from http://stackoverflow.com/a/14916411 */
+                /*
+                 We actually have to trick the Browser into showing the "save password" dialog
+                 as Chrome expects the login page to be reloaded after the login.
+                 Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
+                 Until then, we redirect the HARD way, but reloading the whole page using window.location
+                */
+                window.location = AppConstants.baseUrl + 'collection';
+            }
+        }
     },
 
     render() {

js/components/ascribe_forms/form_signup.js

@@ -46,7 +46,7 @@ let SignupForm = React.createClass({
 
         let { redirect } = this.props.location.query;
         if (redirect && redirect !== 'signup'){
-            this.history.pushState(null, redirect, this.props.location.query);
+            this.history.pushState(null, '/' + redirect, this.props.location.query);
         }
     },
 

js/components/ascribe_routes/auth_component.js

@@ -1,44 +0,0 @@
-'use strict';
-
-import React from 'react';
-import { History } from 'react-router';
-
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
-
-export function AuthComponent(Component) {
-    return React.createClass({
-        mixins: [History],
-
-        getInitialState() {
-            return UserStore.getState();
-        },
-
-        componentDidMount() {
-            UserStore.listen(this.onChange);
-            UserActions.fetchCurrentUser();
-        },
-
-        componentDidUpdate() {
-            if(this.state.currentUser && !this.state.currentUser.email) {
-                console.log('redirect');
-                this.history.pushState(null, '/login');
-            }
-        },
-
-        componentWillUnmount() {
-            UserStore.unlisten(this.onChange);
-        },
-
-        onChange(state) {
-            this.setState(state);
-        },
-
-        render() {
-            return (
-                <Component {...this.props}/>
-            );
-        }
-    });
-}

js/components/ascribe_routes/proxy_route.js

@@ -19,8 +19,10 @@ const ProxyRoute = React.createClass({
 
     statics: {
         createRouteFromReactElement(element) {
+            const createRouteFromReactElementCopy = element.type.createRouteFromReactElement;
             element.type.createRouteFromReactElement = false;
             const [ route ] = createRoutes(element);
+            element.type.createRouteFromReactElement = createRouteFromReactElementCopy;
 
             const Component = route.component;
             const ProxyHandler = element.props.proxyHandler;

js/components/ascribe_routes/proxy_routes/redirect_proxy_handler.js

@@ -0,0 +1,57 @@
+'use strict';
+
+import React from 'react';
+import { History } from 'react-router';
+
+import UserStore from '../../../stores/user_store';
+import UserActions from '../../../actions/user_actions';
+
+
+export default function RedirectProxyHandler({to, when}) {
+    return (Component) => {
+        return React.createClass({
+            mixins: [History],
+
+            getInitialState() {
+                return UserStore.getState();
+            },
+
+            componentDidMount() {
+                UserStore.listen(this.onChange);
+                UserActions.fetchCurrentUser();
+            },
+
+            componentDidUpdate() {
+                this.redirectConditionally();
+            },
+
+            componentWillUnmount() {
+                UserStore.unlisten(this.onChange);
+            },
+
+            redirectConditionally() {
+                if(when === 'loggedIn' || when === 'loggedOut') {
+
+                    let exprToValidate = when === 'loggedIn' ?
+                                     this.state.currentUser && this.state.currentUser.email :
+                                     this.state.currentUser && !this.state.currentUser.email;
+                    if(exprToValidate) {
+                        window.setTimeout(() => this.history.pushState(null, to));
+                    }
+                } else {
+                    throw new Error('"loggedIn" and "loggedOut" are the only valid inputs for when');
+                }
+            },
+
+            onChange(state) {
+                this.setState(state);
+            },
+
+            render() {
+                return (
+                    <Component {...this.props}/>
+                );
+            }
+        });
+    };
+}

js/routes.js

@@ -26,23 +26,26 @@ import ErrorNotFoundPage from './components/error_not_found_page';
 import RegisterPiece from './components/register_piece';
 
 import ProxyRoute from './components/ascribe_routes/proxy_route';
-import { AuthComponent } from './components/ascribe_routes/auth_component';
+import RedirectProxyHandler from './components/ascribe_routes/proxy_routes/redirect_proxy_handler';
 
 import AppConstants from './constants/application_constants';
 
 
 let baseUrl = AppConstants.baseUrl;
 
-const COMMON_ROUTES = (
+let COMMON_ROUTES = (
     <Route path={baseUrl} component={App}>
         <ProxyRoute
-            proxyHandler={AuthComponent}
             path="collection"
+            proxyHandler={RedirectProxyHandler({to: '/login', when: 'loggedOut'})}
             component={PieceList}
             headerTitle="COLLECTION"/>
+        <ProxyRoute
+            path="login"
+            proxyHandler={RedirectProxyHandler({to: '/collection', when: 'loggedIn'})}
+            component={LoginContainer} />
         <Route path="register_piece" component={RegisterPiece} headerTitle="+ NEW WORK" />
         <Route path="signup" component={SignupContainer} />
-        <Route path="login" component={LoginContainer} />
         <Route path="logout" component={LogoutContainer} />
         <Route path="pieces/:pieceId" component={PieceContainer} />
         <Route path="editions/:editionId" component={EditionContainer} />