Change sign-in banner to reflect disabled or moved account status (#19773)

app/helpers/application_helper.rb

@@ -211,6 +211,11 @@ module ApplicationHelper
       state_params[:admin]             = Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, ''))
     end
 
+    if user_signed_in? && !current_user.functional?
+      state_params[:disabled_account] = current_account
+      state_params[:moved_to_account] = current_account.moved_to_account
+    end
+
     if single_user_mode?
       state_params[:owner] = Account.local.without_suspended.where('id > 0').first
     end

app/javascript/mastodon/containers/mastodon.js

@@ -28,6 +28,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,
 });
@@ -42,6 +43,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,
   };

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>
+    );
+  }
+
+};

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>
         )}
 

app/javascript/mastodon/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
@@ -104,6 +106,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');
@@ -111,6 +114,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');

app/javascript/styles/mastodon/components.scss

@@ -742,6 +742,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 {

app/presenters/initial_state_presenter.rb

@@ -2,7 +2,8 @@
 
 class InitialStatePresenter < ActiveModelSerializers::Model
   attributes :settings, :push_subscription, :token,
-             :current_account, :admin, :owner, :text, :visibility
+             :current_account, :admin, :owner, :text, :visibility,
+             :disabled_account, :moved_to_account
 
   def role
     current_account&.user_role

app/serializers/initial_state_serializer.rb

@@ -57,6 +57,9 @@ class InitialStateSerializer < ActiveModel::Serializer
       store[:crop_images]   = Setting.crop_images
     end
 
+    store[:disabled_account_id] = object.disabled_account.id.to_s if object.disabled_account
+    store[:moved_to_account_id] = object.moved_to_account.id.to_s if object.moved_to_account
+
     if Rails.configuration.x.single_user_mode
       store[:owner] = object.owner&.id&.to_s
     end
@@ -85,6 +88,8 @@ class InitialStateSerializer < ActiveModel::Serializer
     store[object.current_account.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.current_account, serializer: REST::AccountSerializer) if object.current_account
     store[object.admin.id.to_s]           = ActiveModelSerializers::SerializableResource.new(object.admin, serializer: REST::AccountSerializer) if object.admin
     store[object.owner.id.to_s]           = ActiveModelSerializers::SerializableResource.new(object.owner, serializer: REST::AccountSerializer) if object.owner
+    store[object.disabled_account.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.disabled_account, serializer: REST::AccountSerializer) if object.disabled_account
+    store[object.moved_to_account.id.to_s] = ActiveModelSerializers::SerializableResource.new(object.moved_to_account, serializer: REST::AccountSerializer) if object.moved_to_account
     store
   end