From 51c29ca044bd3830370ec007e41ac69817c4c9dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Wed, 3 Apr 2019 20:13:32 +0200 Subject: [PATCH] fix: Cleanup logut flow --- frontend/src/component/app.jsx | 3 ++- .../src/component/feature/list-component.jsx | 6 ----- .../src/component/feature/list-container.jsx | 2 -- .../user/authentication-component.jsx | 2 ++ .../user/authentication-simple-component.jsx | 6 ++++- .../src/component/user/logout-component.jsx | 23 +++++++++++++++++++ .../src/component/user/logout-container.jsx | 11 +++++++++ frontend/src/page/user/logout.js | 9 ++------ frontend/src/store/feature-store.js | 5 ++++ frontend/src/store/user/actions.js | 7 +++++- frontend/src/store/user/index.js | 4 +++- 11 files changed, 59 insertions(+), 19 deletions(-) create mode 100644 frontend/src/component/user/logout-component.jsx create mode 100644 frontend/src/component/user/logout-container.jsx diff --git a/frontend/src/component/app.jsx b/frontend/src/component/app.jsx index d75d5b58a7..a2623659cc 100644 --- a/frontend/src/component/app.jsx +++ b/frontend/src/component/app.jsx @@ -17,12 +17,13 @@ export default class App extends PureComponent { static propTypes = { location: PropTypes.object.isRequired, match: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, }; render() { return (
- +
diff --git a/frontend/src/component/feature/list-component.jsx b/frontend/src/component/feature/list-component.jsx index aef75559f5..1777538229 100644 --- a/frontend/src/component/feature/list-component.jsx +++ b/frontend/src/component/feature/list-component.jsx @@ -13,8 +13,6 @@ 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,10 +22,6 @@ export default class FeatureListComponent extends React.Component { }; componentDidMount() { - if (this.props.logout) { - this.props.logoutUser(); - this.props.history.push(`/`); - } if (this.props.fetchFeatureToggles) { this.props.fetchFeatureToggles(); } else { diff --git a/frontend/src/component/feature/list-container.jsx b/frontend/src/component/feature/list-container.jsx index 56dc606639..743301ed3f 100644 --- a/frontend/src/component/feature/list-container.jsx +++ b/frontend/src/component/feature/list-container.jsx @@ -3,7 +3,6 @@ import { toggleFeature, fetchFeatureToggles } from '../../store/feature-actions' import { updateSettingForGroup } from '../../store/settings/actions'; import FeatureListComponent from './list-component'; -import { logoutUser } from '../../store/user/actions'; import { hasPermission } from '../../permissions'; export const mapStateToPropsConfigurable = isFeature => state => { @@ -74,7 +73,6 @@ export const mapStateToPropsConfigurable = isFeature => state => { }; const mapStateToProps = mapStateToPropsConfigurable(true); const mapDispatchToProps = { - logoutUser, toggleFeature, fetchFeatureToggles, updateSetting: updateSettingForGroup('feature'), diff --git a/frontend/src/component/user/authentication-component.jsx b/frontend/src/component/user/authentication-component.jsx index dd93373c61..8bd46ead22 100644 --- a/frontend/src/component/user/authentication-component.jsx +++ b/frontend/src/component/user/authentication-component.jsx @@ -35,6 +35,7 @@ class AuthComponent extends React.Component { user: PropTypes.object.isRequired, unsecureLogin: PropTypes.func.isRequired, fetchFeatureToggles: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, }; render() { @@ -48,6 +49,7 @@ class AuthComponent extends React.Component { unsecureLogin={this.props.unsecureLogin} authDetails={authDetails} fetchFeatureToggles={this.props.fetchFeatureToggles} + history={this.props.history} /> ); } else { diff --git a/frontend/src/component/user/authentication-simple-component.jsx b/frontend/src/component/user/authentication-simple-component.jsx index d00a5f3959..f9b91390a3 100644 --- a/frontend/src/component/user/authentication-simple-component.jsx +++ b/frontend/src/component/user/authentication-simple-component.jsx @@ -7,6 +7,7 @@ class SimpleAuthenticationComponent extends React.Component { authDetails: PropTypes.object.isRequired, unsecureLogin: PropTypes.func.isRequired, fetchFeatureToggles: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, }; handleSubmit = evt => { @@ -15,7 +16,10 @@ class SimpleAuthenticationComponent extends React.Component { const user = { email }; const path = evt.target.action; - this.props.unsecureLogin(path, user).then(this.props.fetchFeatureToggles); + this.props + .unsecureLogin(path, user) + .then(this.props.fetchFeatureToggles) + .then(() => this.props.history.push(`/`)); }; render() { diff --git a/frontend/src/component/user/logout-component.jsx b/frontend/src/component/user/logout-component.jsx new file mode 100644 index 0000000000..2f88b3eb07 --- /dev/null +++ b/frontend/src/component/user/logout-component.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Card, CardText, CardTitle } from 'react-mdl'; +import { styles as commonStyles } from '../common'; + +export default class FeatureListComponent extends React.Component { + static propTypes = { + logoutUser: PropTypes.func.isRequired, + }; + + componentDidMount() { + this.props.logoutUser(); + } + + render() { + return ( + + Logged out + You have now been successfully logged out of Unleash. Thank you for using Unleash. + + ); + } +} diff --git a/frontend/src/component/user/logout-container.jsx b/frontend/src/component/user/logout-container.jsx new file mode 100644 index 0000000000..115949d841 --- /dev/null +++ b/frontend/src/component/user/logout-container.jsx @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import LogoutComponent from './logout-component'; +import { logoutUser } from '../../store/user/actions'; + +const mapDispatchToProps = { + logoutUser, +}; + +const mapStateToProps = () => ({}); + +export default connect(mapStateToProps, mapDispatchToProps)(LogoutComponent); diff --git a/frontend/src/page/user/logout.js b/frontend/src/page/user/logout.js index 710ea681cd..5a90542feb 100644 --- a/frontend/src/page/user/logout.js +++ b/frontend/src/page/user/logout.js @@ -1,11 +1,6 @@ import React from 'react'; -import FeatureListContainer from './../../component/feature/list-container'; -import PropTypes from 'prop-types'; +import LogoutContainer from './../../component/user/logout-container'; -const render = ({ history }) => ; - -render.propTypes = { - history: PropTypes.object.isRequired, -}; +const render = () => ; export default render; diff --git a/frontend/src/store/feature-store.js b/frontend/src/store/feature-store.js index c42809ec2c..681ea60a8a 100644 --- a/frontend/src/store/feature-store.js +++ b/frontend/src/store/feature-store.js @@ -9,6 +9,8 @@ import { TOGGLE_FEATURE_TOGGLE, } from './feature-actions'; +import { USER_LOGOUT } from './user/actions'; + const features = (state = new List([]), action) => { switch (action.type) { case ADD_FEATURE_TOGGLE: @@ -38,6 +40,9 @@ const features = (state = new List([]), action) => { case RECEIVE_FEATURE_TOGGLES: debug(RECEIVE_FEATURE_TOGGLES, action); return new List(action.featureToggles.map($Map)); + case USER_LOGOUT: + debug(USER_LOGOUT, action); + return new List([]); default: return state; } diff --git a/frontend/src/store/user/actions.js b/frontend/src/store/user/actions.js index ba8cf0a852..1d9bc195d5 100644 --- a/frontend/src/store/user/actions.js +++ b/frontend/src/store/user/actions.js @@ -1,6 +1,7 @@ import api from '../../data/user-api'; import { dispatchAndThrow } from '../util'; export const UPDATE_USER = 'UPDATE_USER'; +export const USER_LOGOUT = 'USER_LOGOUT'; export const START_FETCH_USER = 'START_FETCH_USER'; export const ERROR_FETCH_USER = 'ERROR_FETCH_USER'; const debug = require('debug')('unleash:user-actions'); @@ -38,5 +39,9 @@ export function unsecureLogin(path, user) { } export function logoutUser() { - return () => api.logoutUser().catch(handleError); + return dispatch => { + dispatch({ type: USER_LOGOUT }); + + return api.logoutUser().catch(handleError); + }; } diff --git a/frontend/src/store/user/index.js b/frontend/src/store/user/index.js index 91a8b332fa..0be48a59c6 100644 --- a/frontend/src/store/user/index.js +++ b/frontend/src/store/user/index.js @@ -1,5 +1,5 @@ import { Map as $Map } from 'immutable'; -import { UPDATE_USER } from './actions'; +import { UPDATE_USER, USER_LOGOUT } from './actions'; import { AUTH_REQUIRED } from '../util'; const userStore = (state = new $Map(), action) => { @@ -13,6 +13,8 @@ const userStore = (state = new $Map(), action) => { case AUTH_REQUIRED: state = state.set('authDetails', action.error.body).set('showDialog', true); return state; + case USER_LOGOUT: + return new $Map(); default: return state; }