From 60792ec75346a80c5912ee3f918acc8d8a88deb2 Mon Sep 17 00:00:00 2001 From: prplecake Date: Sat, 7 Jun 2025 15:12:37 +0200 Subject: [PATCH] [feature] Add logout button to sidebar (#48) This one should probably be scrutinized a little more than my previous two. For example, I don't know why I needed to do this: https://codeberg.org/prplecake/masto-fe-standalone/src/commit/1a1f48ceaa544650a8b8f50f8fa4e8c7cdc44c12/app/javascript/flavours/glitch/features/ui/index.jsx#L152 ~~But, it appears to work.~~ It's live at https://masto-fe.compostintraining.club if you want to test it out. ~~Edit: it breaks stuff. Images don't load anymore...~~ Maybe that was just a network glitch... Fixes #21. Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/48 Co-authored-by: prplecake Co-committed-by: prplecake --- .../features/ui/components/columns_area.jsx | 5 ++-- .../ui/components/navigation_panel.jsx | 6 ++++- .../ui/containers/columns_area_container.js | 23 +++++++++++++++++-- .../flavours/glitch/features/ui/index.jsx | 4 +++- 4 files changed, 32 insertions(+), 6 deletions(-) diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx index 6eb5ee0e5..b28fd83d4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx @@ -55,6 +55,7 @@ export default class ColumnsArea extends ImmutablePureComponent { singleColumn: PropTypes.bool, children: PropTypes.node, openSettings: PropTypes.func, + onLogout: PropTypes.func, }; // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS @@ -139,7 +140,7 @@ export default class ColumnsArea extends ImmutablePureComponent { }; render () { - const { columns, children, singleColumn, openSettings } = this.props; + const { columns, children, singleColumn, openSettings, onLogout } = this.props; const { renderComposePanel } = this.state; if (singleColumn) { @@ -158,7 +159,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
- +
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx index d2e37cc63..b25d6099c 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx @@ -30,6 +30,7 @@ const messages = defineMessages({ advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' }, openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' }, app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, + logout: { id: 'navigation_bar.logout', defaultMessage: 'Log out' }, }); class NavigationPanel extends Component { @@ -42,6 +43,7 @@ class NavigationPanel extends Component { static propTypes = { intl: PropTypes.object.isRequired, onOpenSettings: PropTypes.func, + onLogout: PropTypes.func, }; isFirehoseActive = (match, location) => { @@ -49,7 +51,7 @@ class NavigationPanel extends Component { }; render() { - const { intl, onOpenSettings } = this.props; + const { intl, onOpenSettings, onLogout } = this.props; const { signedIn, disabledAccountId } = this.context.identity; return ( @@ -104,6 +106,7 @@ class NavigationPanel extends Component {
+ )} @@ -112,6 +115,7 @@ class NavigationPanel extends Component { + ); diff --git a/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js b/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js index a69abfb61..877313b91 100644 --- a/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js +++ b/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js @@ -1,14 +1,22 @@ +import { defineMessages, injectIntl } from 'react-intl'; + import { connect } from 'react-redux'; import { openModal } from 'flavours/glitch/actions/modal'; +import { logOut } from 'flavours/glitch/utils/log_out'; import ColumnsArea from '../components/columns_area'; +const messages = defineMessages({ + logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, + logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, +}); + const mapStateToProps = state => ({ columns: state.getIn(['settings', 'columns']), }); -const mapDispatchToProps = dispatch => ({ +const mapDispatchToProps = (dispatch, { intl }) => ({ openSettings (e) { e.preventDefault(); e.stopPropagation(); @@ -17,6 +25,17 @@ const mapDispatchToProps = dispatch => ({ modalProps: {}, })); }, + onLogout () { + dispatch(openModal({ + modalType: 'CONFIRM', + modalProps: { + message: intl.formatMessage(messages.logoutMessage), + confirm: intl.formatMessage(messages.logoutConfirm), + closeWhenConfirm: false, + onConfirm: () => logOut(), + }, + })); + }, }); -export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ColumnsArea); +export default injectIntl(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ColumnsArea)); diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx index 0697cc5e1..7e325f5bc 100644 --- a/app/javascript/flavours/glitch/features/ui/index.jsx +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -149,7 +149,9 @@ class SwitchingColumnsArea extends PureComponent { componentDidUpdate (prevProps) { if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) { - this.node.handleChildrenContentChange(); + if (this.node && this.node.handleChildrenContentChange === 'function') { + this.node.handleChildrenContentChange(); + } } if (prevProps.singleColumn !== this.props.singleColumn) {