Merge pull request #123 from corinnekrych/signout.proxy.friendly

fix(signout): make signout works with proxy

frontend/src/component/app.jsx

@@ -112,7 +112,7 @@ export default class App extends Component {
                 return [0, 0];
             }
         };
-        const createListItem = (path, caption, icon, isDrawerNavigation = false, isAnchor = false) => {
+        const createListItem = (path, caption, icon, isDrawerNavigation = false) => {
             const linkColor =
                 isDrawerNavigation && this.context.router.isActive(path)
                     ? 'mdl-color-text--black'
@@ -127,15 +127,7 @@ export default class App extends Component {
                     className={isDrawerNavigation ? [styles.navigationIcon, iconColor].join(' ') : undefined}
                 />
             );
-            return isAnchor ? (
-                <a
-                    href={path}
-                    className={isDrawerNavigation ? [styles.navigationLink, linkColor].join(' ') : undefined}
-                >
-                    {icon && renderIcon}
-                    {caption}
-                </a>
-            ) : (
+            return (
                 <Link
                     to={path}
                     className={isDrawerNavigation ? [styles.navigationLink, linkColor].join(' ') : undefined}
@@ -167,7 +159,7 @@ export default class App extends Component {
                             {createListItem('/history', 'Event History', 'history', true)}
                             {createListItem('/archive', 'Archived Toggles', 'archive', true)}
                             {createListItem('/applications', 'Applications', 'apps', true)}
-                            {createListItem('/api/admin/user/logout', 'Sign out', 'exit_to_app', true, true)}
+                            {createListItem('logout', 'Sign out', 'exit_to_app', true)}
                         </Navigation>
                         <hr />
                         <Navigation className={styles.navigation}>
@@ -197,7 +189,7 @@ export default class App extends Component {
                                             {createListItem('/history', 'Event History', '')}
                                             {createListItem('/archive', 'Archived Toggles', '')}
                                             {createListItem('/applications', 'Applications', '')}
-                                            <a href="/api/admin/user/logout">Sign out</a>
+                                            {createListItem('/logout', 'Sign out', '')}
                                         </FooterLinkList>
                                     </FooterDropDownSection>
                                     <FooterDropDownSection title="Clients">

frontend/src/component/feature/list-component.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Feature from './feature-list-item-component';
-import { Link } from 'react-router';
+import { hashHistory, Link } from 'react-router';
 import { Icon, FABButton, Textfield, Menu, MenuItem, Card, CardActions, List } from 'react-mdl';
-
 import { MenuItemWithIcon, DropdownButton, styles as commonStyles } from '../common';
 import styles from './feature.scss';
 
@@ -13,6 +12,8 @@ export default class FeatureListComponent extends React.Component {
         featureMetrics: PropTypes.object.isRequired,
         fetchFeatureToggles: PropTypes.func,
         fetchArchive: PropTypes.func,
+        logoutUser: PropTypes.func,
+        logout: PropTypes.bool,
         revive: PropTypes.func,
         updateSetting: PropTypes.func.isRequired,
         toggleFeature: PropTypes.func,
@@ -24,6 +25,10 @@ export default class FeatureListComponent extends React.Component {
     };
 
     componentDidMount() {
+        if (this.props.logout) {
+            this.props.logoutUser();
+            hashHistory.push(`/`);
+        }
         if (this.props.fetchFeatureToggles) {
             this.props.fetchFeatureToggles();
         } else {

frontend/src/component/feature/list-container.jsx

@@ -3,6 +3,7 @@ import { toggleFeature, fetchFeatureToggles } from '../../store/feature-actions'
 import { updateSettingForGroup } from '../../store/settings/actions';
 
 import FeatureListComponent from './list-component';
+import { logoutUser } from '../../store/user/actions';
 
 export const mapStateToPropsConfigurable = isFeature => state => {
     const featureMetrics = state.featureMetrics.toJS();
@@ -71,6 +72,7 @@ export const mapStateToPropsConfigurable = isFeature => state => {
 };
 const mapStateToProps = mapStateToPropsConfigurable(true);
 const mapDispatchToProps = {
+    logoutUser,
     toggleFeature,
     fetchFeatureToggles,
     updateSetting: updateSettingForGroup('feature'),

frontend/src/data/user-api.js

@@ -2,6 +2,12 @@ import { throwIfNotSuccess, headers } from './helper';
 
 const URI = 'api/admin/user';
 
+function logoutUser() {
+    return fetch(`${URI}/logout`, { method: 'GET', credentials: 'include' })
+        .then(throwIfNotSuccess)
+        .then(response => response.json());
+}
+
 function fetchUser() {
     return fetch(URI, { credentials: 'include' })
         .then(throwIfNotSuccess)
@@ -17,4 +23,5 @@ function unsecureLogin(path, user) {
 export default {
     fetchUser,
     unsecureLogin,
+    logoutUser,
 };

frontend/src/index.jsx

@@ -26,6 +26,7 @@ import Archive from './page/archive';
 import ShowArchive from './page/archive/show';
 import Applications from './page/applications';
 import ApplicationView from './page/applications/view';
+import LogoutFeatures from './page/user/logout';
 
 let composeEnhancers;
 
@@ -76,6 +77,9 @@ ReactDOM.render(
                     <Route pageTitle="Applications" path="/applications" component={Applications} />
                     <Route pageTitle=":name" path="/applications/:name" component={ApplicationView} />
                 </Route>
+                <Route pageTitle="Logout" link="/logout">
+                    <Route pageTitle="Logout" path="/logout" component={LogoutFeatures} />
+                </Route>
             </Route>
         </Router>
     </Provider>,

frontend/src/page/user/logout.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import FeatureListContainer from './../../component/feature/list-container';
+
+const render = () => <FeatureListContainer logout />;
+
+export default render;

frontend/src/store/user/actions.js

@@ -36,3 +36,7 @@ export function unsecureLogin(path, user) {
             .catch(handleError);
     };
 }
+
+export function logoutUser() {
+    return () => api.logoutUser().catch(handleError);
+}