Merge branch 'deactivated-accounts' into 'develop'

Remove info from deactivated account pages

Closes #291

See merge request soapbox-pub/soapbox-fe!157

app/soapbox/features/account/components/header.js

@@ -222,12 +222,12 @@ class Header extends ImmutablePureComponent {
     const menu = this.makeMenu();
 
     const headerMissing = (account.get('header').indexOf('/headers/original/missing.png') > -1);
-
     const avatarSize = isSmallScreen ? 90 : 200;
+    const deactivated = account.getIn(['pleroma', 'deactivated'], false);
 
     return (
       <div className={classNames('account__header', { inactive: !!account.get('moved') })}>
-        <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing })}>
+        <div className={classNames('account__header__image', { 'account__header__image--none': headerMissing || deactivated })}>
           <div className='account__header__info'>
             {info}
           </div>
@@ -239,9 +239,10 @@ class Header extends ImmutablePureComponent {
           <div className='account__header__extra'>
 
             <div className='account__header__avatar'>
-              <Avatar account={account} size={avatarSize} />
+              { !deactivated && <Avatar account={account} size={avatarSize} /> }
             </div>
 
+            { !deactivated &&
               <div className='account__header__extra__links'>
 
                 <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
@@ -279,16 +280,17 @@ class Header extends ImmutablePureComponent {
                   </div>
                 }
               </div>
+            }
 
             {
               isSmallScreen &&
-              <div className='account-mobile-container'>
+              <div className={classNames('account-mobile-container', { 'deactivated': deactivated })}>
                 <ProfileInfoPanel username={username} account={account} />
               </div>
             }
 
             {
-              me &&
+              me && !deactivated &&
               <div className='account__header__extra__buttons'>
                 <ActionButton account={account} />
                 {account.get('id') !== me &&

app/soapbox/features/ui/components/profile_info_panel.js

@@ -11,10 +11,12 @@ import VerificationBadge from 'soapbox/components/verification_badge';
 import Badge from 'soapbox/components/badge';
 import { List as ImmutableList } from 'immutable';
 import { acctFull, isAdmin, isModerator } from 'soapbox/utils/accounts';
+import classNames from 'classnames';
 
 const messages = defineMessages({
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
   account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
+  deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
 });
 
 const dateFormatOptions = {
@@ -57,23 +59,25 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const badge = account.get('bot') ? (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Bot' /></div>) : null;
     const content = { __html: account.get('note_emojified') };
     const fields = account.get('fields');
-    const displayNameHtml = { __html: account.get('display_name_html') };
+    const deactivated = account.getIn(['pleroma', 'deactivated'], false);
+    const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
     const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
-    const verified = account.get('pleroma').get('tags').includes('verified');
+    const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
 
     return (
-      <div className='profile-info-panel'>
+      <div className={classNames('profile-info-panel', { 'deactivated': deactivated })} >
         <div className='profile-info-panel__content'>
 
           <div className='profile-info-panel-content__name'>
             <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} />
+              <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
               {verified && <VerificationBadge />}
               {badge}
-              <small>@{acctFull(account)} {lockedIcon}</small>
+              { !deactivated && <small>@{acctFull(account)} {lockedIcon}</small> }
             </h1>
           </div>
 
+          { !deactivated &&
             <div className='profile-info-panel-content__badges'>
               {isAdmin(account) && <Badge slug='admin' title='Admin' />}
               {isModerator(account) && <Badge slug='moderator' title='Moderator' />}
@@ -87,6 +91,15 @@ class ProfileInfoPanel extends ImmutablePureComponent {
                 />
               </div>}
             </div>
+          }
+
+          { deactivated &&
+            <div className='profile-info-panel-content__deactivated'>
+              <FormattedMessage
+                id='account.deactivated_description' defaultMessage='This account has been deactivated.'
+              />
+            </div>
+          }
 
           {
             (account.get('note').length > 0 && account.get('note') !== '<p></p>') &&

app/styles/components/account-header.scss

@@ -207,6 +207,10 @@
       padding: 10px 10px 0;
       &--nonuser {padding: 10px 10px 15px;}
     }
+
+    .account-mobile-container.deactivated {
+      margin-top: 50px;
+    }
   }
 } // end .account__header
 

app/styles/components/columns.scss

@@ -678,6 +678,7 @@
   align-items: center;
   justify-content: center;
   min-height: 160px;
+  border-radius: 0 0 10px 10px;
 
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;

app/styles/components/profile-info-panel.scss

@@ -128,3 +128,21 @@
     }
   }
 }
+
+.profile-info-panel.deactivated {
+  .profile-info-panel__name-content {
+    text-transform: uppercase;
+  }
+
+  .profile-info-panel__name-content::before {
+    content: '[';
+  }
+
+  .profile-info-panel__name-content::after {
+    content: ']';
+  }
+
+  .profile-info-panel-content__deactivated {
+    color: var(--primary-text-color--faint);
+  }
+}