diff options
5 files changed, 115 insertions, 2 deletions
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 = ( + <Link to={`/@${disabledAcct}`}> + {disabledAcct}@{domain} + </Link> + ); + + return ( + <div className='sign-in-banner'> + <p> + {movedToAcct ? ( + <FormattedMessage + id='moved_to_account_banner.text' + defaultMessage='Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.' + values={{ + disabledAccount: disabledAccountLink, + movedToAccount: <Link to={`/@${movedToAcct}`}>{movedToAcct.includes('@') ? movedToAcct : `${movedToAcct}@{domain}`}</Link>, + }} + /> + ) : ( + <FormattedMessage + id='disabled_account_banner.text' + defaultMessage='Your account {disabledAccount} is currently disabled.' + values={{ + disabledAccount: disabledAccountLink, + }} + /> + )} + </p> + <a href='/auth/edit' className='button button--block'> + <FormattedMessage id='disabled_account_banner.account_settings' defaultMessage='Account settings' /> + </a> + <button type='button' className='button button--block button-tertiary' onClick={this.handleLogOutClick}> + <FormattedMessage id='confirmations.logout.confirm' defaultMessage='Log out' /> + </button> + </div> + ); + } + +}; 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 ( <div className='navigation-panel'> @@ -70,7 +71,7 @@ class NavigationPanel extends React.Component { {!signedIn && ( <div className='navigation-panel__sign-in-banner'> <hr /> - <SignInBanner /> + { disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> } </div> )} 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 { |