diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js index 17913bc5..c5c60506 100644 --- a/js/components/ascribe_routes/proxy_handler.js +++ b/js/components/ascribe_routes/proxy_handler.js @@ -1,7 +1,8 @@ 'use strict'; import React from 'react'; -import { History, RouteContext } from 'react-router'; +import { RouteContext } from 'react-router'; +import history from '../../history'; import UserStore from '../../stores/user_store'; import UserActions from '../../actions/user_actions'; @@ -12,18 +13,12 @@ import AppConstants from '../../constants/application_constants'; const { object } = React.PropTypes; const WHEN_ENUM = ['loggedIn', 'loggedOut']; - - /** - * Can be used in combination with `Route` as an intermediate Handler - * between the actual component we want to display dependent on a certain state - * that is required to display that component. + * Redirects the user conditionally according to his authentication * - * @param {string} options.to Any type of route path that is defined in routes.js * @param {enum/string} options.when ('loggedIn' || 'loggedOut') */ -export function ProxyHandler({to, when}) { - +export function AuthRedirect({to, when}) { // validate `when`, must be contained in `WHEN_ENUM`. // Throw an error otherwise. if(WHEN_ENUM.indexOf(when) === -1) { @@ -31,6 +26,52 @@ export function ProxyHandler({to, when}) { throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`); } + return function(currentUser, query) { + const { redirectAuthenticated, redirect } = query; + + // The user of this handler specifies with `when`, what kind of status + // needs to be checked to conditionally do - if that state is `true` - + // a redirect. + // + // So if when === 'loggedIn', we're checking if the user is logged in (and + // vice versa) + let exprToValidate = when === 'loggedIn' ? currentUser && currentUser.email + : currentUser && !currentUser.email; + + // and redirect if `true`. + if(exprToValidate) { + window.setTimeout(() => history.replaceState(null, to, query)); + + // Otherwise there can also be the case that the backend + // wants to redirect the user to a specific route when the user is logged out already + } else if(!exprToValidate && when === 'loggedIn' && redirect) { + + delete query.redirect; + window.setTimeout(() => history.replaceState(null, '/' + redirect, query)); + + } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { + /* + * redirectAuthenticated contains an arbitrary path + * eg pieces/, editions/, collection, settings, ... + * hence transitionTo cannot be used directly. + * + * While we're getting rid of `query.redirect` explicitly in the + * above `else if` statement, here it's sufficient to just call + * `baseUrl` + `redirectAuthenticated`, as it gets rid of queries as well. + */ + window.location = AppConstants.baseUrl + redirectAuthenticated; + } + }; +} + +/** + * Can be used in combination with `Route` as an intermediate Handler + * between the actual component we want to display dependent on a certain state + * that is required to display that component. + * + * @param {[function]} redirectFn A function that conditionally redirects + */ +export function ProxyHandler(redirectFn) { return (Component) => { return React.createClass({ displayName: 'ProxyHandler', @@ -41,7 +82,7 @@ export function ProxyHandler({to, when}) { // We need insert `RouteContext` here in order to be able // to use the `Lifecycle` widget in further down nested components - mixins: [History, RouteContext], + mixins: [RouteContext], getInitialState() { return UserStore.getState(); @@ -53,10 +94,10 @@ export function ProxyHandler({to, when}) { }, componentDidUpdate() { - // Only refresh this component, when UserSources are not loading - // data from the server if(!UserStore.isLoading()) { - this.redirectConditionally(); + const { currentUser } = this.state; + const { query } = this.props.location; + redirectFn(currentUser, query); } }, @@ -64,45 +105,6 @@ export function ProxyHandler({to, when}) { UserStore.unlisten(this.onChange); }, - redirectConditionally() { - const { query } = this.props.location; - const { redirectAuthenticated, redirect } = query; - - // The user of this handler specifies with `when`, what kind of status - // needs to be checked to conditionally do - if that state is `true` - - // a redirect. - // - // So if when === 'loggedIn', we're checking if the user is logged in (and - // vice versa) - let exprToValidate = when === 'loggedIn' ? - this.state.currentUser && this.state.currentUser.email : - this.state.currentUser && !this.state.currentUser.email; - - // and redirect if `true`. - if(exprToValidate) { - window.setTimeout(() => this.history.replaceState(null, to, query)); - - // Otherwise there can also be the case that the backend - // wants to redirect the user to a specific route when the user is logged out already - } else if(!exprToValidate && when === 'loggedIn' && redirect) { - - delete query.redirect; - window.setTimeout(() => this.history.replaceState(null, '/' + redirect, query)); - - } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { - /* - * redirectAuthenticated contains an arbitrary path - * eg pieces/, editions/, collection, settings, ... - * hence transitionTo cannot be used directly. - * - * While we're getting rid of `query.redirect` explicitly in the - * above `else if` statement, here it's sufficient to just call - * `baseUrl` + `redirectAuthenticated`, as it gets rid of queries as well. - */ - window.location = AppConstants.baseUrl + redirectAuthenticated; - } - }, - onChange(state) { this.setState(state); }, diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js index a9b0ef56..19215f08 100644 --- a/js/components/whitelabel/prize/prize_routes.js +++ b/js/components/whitelabel/prize/prize_routes.js @@ -22,7 +22,7 @@ import PasswordResetContainer from '../../password_reset_container'; import CoaVerifyContainer from '../../coa_verify_container'; import ErrorNotFoundPage from '../../error_not_found_page'; -import { ProxyHandler } from '../../../components/ascribe_routes/proxy_handler'; +import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler'; const ROUTES = { @@ -31,26 +31,26 @@ const ROUTES = { + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPSignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/> @@ -64,20 +64,20 @@ const ROUTES = { + component={ProxyHandler(AuthRedirect({to: '/register_piece', when: 'loggedIn'}))(SPLoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/register_piece', when: 'loggedIn'}))(SPSignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/register_piece', when: 'loggedIn'}))(PasswordResetContainer)} /> diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 192cd31d..92c6d77b 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -40,7 +40,7 @@ import LumenusLanding from './components/lumenus/lumenus_landing'; import Vivi23Landing from './components/23vivi/23vivi_landing'; import Vivi23PieceList from './components/23vivi/23vivi_piece_list'; -import { ProxyHandler } from '../../../components/ascribe_routes/proxy_handler'; +import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler'; import WalletApp from './wallet_app'; @@ -51,29 +51,29 @@ let ROUTES = { + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> @@ -85,29 +85,29 @@ let ROUTES = { + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> @@ -120,39 +120,39 @@ let ROUTES = { + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)}/> @@ -161,32 +161,32 @@ let ROUTES = { ), 'lumenus': ( - + + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> @@ -196,33 +196,33 @@ let ROUTES = { ), '23vivi': ( - + + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> diff --git a/js/routes.js b/js/routes.js index 2fef9483..49a284af 100644 --- a/js/routes.js +++ b/js/routes.js @@ -25,39 +25,39 @@ import ErrorNotFoundPage from './components/error_not_found_page'; import RegisterPiece from './components/register_piece'; -import { ProxyHandler } from './components/ascribe_routes/proxy_handler'; +import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_handler'; let COMMON_ROUTES = ( + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(LogoutContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>