generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #552 from eea/develop
base volto logout component and user in header appears if token and u…
- Loading branch information
Showing
4 changed files
with
110 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
134 changes: 103 additions & 31 deletions
134
src/customizations/volto/components/theme/Logout/Logout.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,108 @@ | ||
| import { useEffect, useMemo } from 'react'; | ||
| import { useDispatch, useSelector, shallowEqual } from 'react-redux'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| /** | ||
| * Login container. | ||
| * @module components/theme/Logout/Logout | ||
| */ | ||
|
|
||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { connect } from 'react-redux'; | ||
| import { compose } from 'redux'; | ||
| import { defineMessages, injectIntl } from 'react-intl'; | ||
| import qs from 'query-string'; | ||
|
|
||
| import { Login } from '@plone/volto/components'; | ||
| import { logout, purgeMessages } from '@plone/volto/actions'; | ||
| import { toast } from 'react-toastify'; | ||
| import { Toast } from '@plone/volto/components'; | ||
|
|
||
| const Logout = ({ location }) => { | ||
| const token = useSelector((state) => state.userSession.token, shallowEqual); | ||
| const history = useHistory(); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const returnUrl = useMemo( | ||
| () => | ||
| qs.parse(location.search).return_url || | ||
| location.pathname | ||
| .replace(/\/login\/?$/, '') | ||
| .replace(/\/logout\/?$/, '') || | ||
| '/', | ||
| [location], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| dispatch(logout()); | ||
| dispatch(purgeMessages()); | ||
| }, [dispatch]); | ||
|
|
||
| useEffect(() => { | ||
| if (!token) { | ||
| window.location.href = '/'; | ||
| } | ||
| }, [history, returnUrl, token]); | ||
| const messages = defineMessages({ | ||
| loggedOut: { | ||
| id: 'Logged out', | ||
| defaultMessage: 'Logged out', | ||
| }, | ||
| loggedOutContent: { | ||
| id: 'You have been logged out from the site.', | ||
| defaultMessage: 'You have been logged out from the site.', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * Logout class. | ||
| * @class Logout | ||
| * @extends Component | ||
| */ | ||
| class Logout extends Component { | ||
| /** | ||
| * Property types. | ||
| * @property {Object} propTypes Property types. | ||
| * @static | ||
| */ | ||
| static propTypes = { | ||
| logout: PropTypes.func.isRequired, | ||
| purgeMessages: PropTypes.func.isRequired, | ||
| query: PropTypes.shape({ | ||
| return_url: PropTypes.string, | ||
| }), | ||
| }; | ||
|
|
||
| return ''; | ||
| }; | ||
| /** | ||
| * Default properties. | ||
| * @property {Object} defaultProps Default properties. | ||
| * @static | ||
| */ | ||
| static defaultProps = { | ||
| query: null, | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| this.props.logout(); | ||
| this.props.purgeMessages(); | ||
| } | ||
|
|
||
| /** | ||
| * Component will receive props | ||
| * @method componentWillReceiveProps | ||
| * @param {Object} nextProps Next properties | ||
| * @returns {undefined} | ||
| */ | ||
| UNSAFE_componentWillReceiveProps(nextProps) { | ||
| if (!nextProps.token) { | ||
| this.props.history.replace(this.props.returnUrl || '/'); | ||
| if (!toast.isActive('loggedOut')) { | ||
| toast.success( | ||
| <Toast | ||
| success | ||
| title={this.props.intl.formatMessage(messages.loggedOut)} | ||
| content={this.props.intl.formatMessage(messages.loggedOutContent)} | ||
| />, | ||
| { autoClose: false, toastId: 'loggedOut' }, | ||
| ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default Logout; | ||
| /** | ||
| * Render method. | ||
| * @method render | ||
| * @returns {string} Markup for the component. | ||
| */ | ||
| render() { | ||
| return <Login location={{ query: this.props.location.query }} />; | ||
| } | ||
| } | ||
| export default compose( | ||
| injectIntl, | ||
| connect( | ||
| (state, props) => ({ | ||
| query: qs.parse(props.location.search), | ||
| token: state.userSession.token, | ||
| returnUrl: | ||
| qs.parse(props.location.search).return_url || | ||
| props.location.pathname | ||
| .replace(/\/login\/?$/, '') | ||
| .replace(/\/logout\/?$/, '') || | ||
| '/', | ||
| }), | ||
| { logout, purgeMessages }, | ||
| ), | ||
| )(Logout); |