diff options
author | Claire <claire.github-309c@sitedethib.com> | 2022-11-05 18:28:13 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-05 18:28:13 +0100 |
commit | 312d616371096235f1f317041300b8220c447613 (patch) | |
tree | 5cadb0f45adb1eb9096528db331209240e753968 /app/javascript/mastodon/features | |
parent | 0498b106c9d632d761dc556e9d471eb6aec846c5 (diff) |
Change sign-in banner to reflect disabled or moved account status (#19773)
Diffstat (limited to 'app/javascript/mastodon/features')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/disabled_account_banner.js | 92 | ||||
-rw-r--r-- | app/javascript/mastodon/features/ui/components/navigation_panel.js | 5 |
2 files changed, 95 insertions, 2 deletions
diff --git a/app/javascript/mastodon/features/ui/components/disabled_account_banner.js b/app/javascript/mastodon/features/ui/components/disabled_account_banner.js new file mode 100644 index 000000000..c9845d917 --- /dev/null +++ b/app/javascript/mastodon/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 'mastodon/initial_state'; +import { openModal } from 'mastodon/actions/modal'; +import { logOut } from 'mastodon/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/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js index 4e9e39e2f..9a9309be0 100644 --- a/app/javascript/mastodon/features/ui/components/navigation_panel.js +++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js @@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'; import Logo from 'mastodon/components/logo'; import { timelinePreview, showTrends } from 'mastodon/initial_state'; import ColumnLink from './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'; @@ -41,7 +42,7 @@ class NavigationPanel extends React.Component { render () { const { intl } = this.props; - const { signedIn } = this.context.identity; + const { signedIn, disabledAccountId } = this.context.identity; return ( <div className='navigation-panel'> @@ -74,7 +75,7 @@ class NavigationPanel extends React.Component { {!signedIn && ( <div className='navigation-panel__sign-in-banner'> <hr /> - <SignInBanner /> + { disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> } </div> )} |