From b6c0ef70a2c088fecd0609a96ef1a47fb6ee7ce6 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 5 Nov 2022 18:28:13 +0100 Subject: [PATCH] [Glitch] Change sign-in banner to reflect disabled or moved account status Port 312d616371096235f1f317041300b8220c447613 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/containers/mastodon.js | 2 + .../ui/components/disabled_account_banner.js | 92 +++++++++++++++++++ .../ui/components/navigation_panel.js | 5 +- .../flavours/glitch/initial_state.js | 4 + .../glitch/styles/components/signed_out.scss | 14 +++ 5 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js diff --git a/app/javascript/flavours/glitch/containers/mastodon.js b/app/javascript/flavours/glitch/containers/mastodon.js index cf870102b..6c92376d8 100644 --- a/app/javascript/flavours/glitch/containers/mastodon.js +++ b/app/javascript/flavours/glitch/containers/mastodon.js @@ -33,6 +33,7 @@ store.dispatch(fetchCustomEmojis()); const createIdentityContext = state => ({ signedIn: !!state.meta.me, accountId: state.meta.me, + disabledAccountId: state.meta.disabled_account_id, accessToken: state.meta.access_token, permissions: state.role ? state.role.permissions : 0, }); @@ -47,6 +48,7 @@ export default class Mastodon extends React.PureComponent { identity: PropTypes.shape({ signedIn: PropTypes.bool.isRequired, accountId: PropTypes.string, + disabledAccountId: PropTypes.string, accessToken: PropTypes.string, }).isRequired, }; diff --git a/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js b/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js new file mode 100644 index 000000000..9f96b5acb --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/disabled_account_banner.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; +import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; +import { disabledAccountId, movedToAccountId, domain } from 'flavours/glitch/initial_state'; +import { openModal } from 'flavours/glitch/actions/modal'; +import { logOut } from 'flavours/glitch/utils/log_out'; + +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) => ({ + disabledAcct: state.getIn(['accounts', disabledAccountId, 'acct']), + movedToAcct: movedToAccountId ? state.getIn(['accounts', movedToAccountId, 'acct']) : undefined, +}); + +const mapDispatchToProps = (dispatch, { intl }) => ({ + onLogout () { + dispatch(openModal('CONFIRM', { + message: intl.formatMessage(messages.logoutMessage), + confirm: intl.formatMessage(messages.logoutConfirm), + closeWhenConfirm: false, + onConfirm: () => logOut(), + })); + }, +}); + +export default @injectIntl +@connect(mapStateToProps, mapDispatchToProps) +class DisabledAccountBanner extends React.PureComponent { + + static propTypes = { + disabledAcct: PropTypes.string.isRequired, + movedToAcct: PropTypes.string, + onLogout: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + handleLogOutClick = e => { + e.preventDefault(); + e.stopPropagation(); + + this.props.onLogout(); + + return false; + } + + render () { + const { disabledAcct, movedToAcct } = this.props; + + const disabledAccountLink = ( + + {disabledAcct}@{domain} + + ); + + return ( +
+

+ {movedToAcct ? ( + {movedToAcct.includes('@') ? movedToAcct : `${movedToAcct}@{domain}`}, + }} + /> + ) : ( + + )} +

+ + + + +
+ ); + } + +}; diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index affb5ec47..3b46c6eec 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -4,6 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import { timelinePreview, showTrends } from 'flavours/glitch/initial_state'; import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; +import DisabledAccountBanner from './disabled_account_banner'; import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; @@ -42,7 +43,7 @@ class NavigationPanel extends React.Component { render() { const { intl, onOpenSettings } = this.props; - const { signedIn } = this.context.identity; + const { signedIn, disabledAccountId } = this.context.identity; return (
@@ -70,7 +71,7 @@ class NavigationPanel extends React.Component { {!signedIn && (
- + { disabledAccountId ? : }
)} diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js index ce6bf920c..5be177ced 100644 --- a/app/javascript/flavours/glitch/initial_state.js +++ b/app/javascript/flavours/glitch/initial_state.js @@ -54,6 +54,7 @@ * @property {boolean} crop_images * @property {boolean=} delete_modal * @property {boolean=} disable_swiping + * @property {string=} disabled_account_id * @property {boolean} display_media * @property {string} domain * @property {boolean=} expand_spoilers @@ -61,6 +62,7 @@ * @property {string} locale * @property {string | null} mascot * @property {string=} me + * @property {string=} moved_to_account_id * @property {string=} owner * @property {boolean} profile_directory * @property {boolean} registrations_open @@ -111,6 +113,7 @@ export const boostModal = getMeta('boost_modal'); export const cropImages = getMeta('crop_images'); export const deleteModal = getMeta('delete_modal'); export const disableSwiping = getMeta('disable_swiping'); +export const disabledAccountId = getMeta('disabled_account_id'); export const displayMedia = getMeta('display_media'); export const domain = getMeta('domain'); export const expandSpoilers = getMeta('expand_spoilers'); @@ -118,6 +121,7 @@ export const forceSingleColumn = !getMeta('advanced_layout'); export const limitedFederationMode = getMeta('limited_federation_mode'); export const mascot = getMeta('mascot'); export const me = getMeta('me'); +export const movedToAccountId = getMeta('moved_to_account_id'); export const owner = getMeta('owner'); export const profile_directory = getMeta('profile_directory'); export const reduceMotion = getMeta('reduce_motion'); diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.scss index 1051b2f32..efb49305d 100644 --- a/app/javascript/flavours/glitch/styles/components/signed_out.scss +++ b/app/javascript/flavours/glitch/styles/components/signed_out.scss @@ -4,6 +4,20 @@ p { color: $darker-text-color; margin-bottom: 20px; + + a { + color: $secondary-text-color; + text-decoration: none; + unicode-bidi: isolate; + + &:hover { + text-decoration: underline; + + .fa { + color: lighten($dark-text-color, 7%); + } + } + } } .button {