prevent verified users from updating display name on frontend

app/soapbox/features/edit_profile/components/profile_preview.js

@@ -2,6 +2,9 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { acctFull } from 'soapbox/utils/accounts';
 import StillImage from 'soapbox/components/still_image';
+import VerificationBadge from 'soapbox/components/verification_badge';
+
+
 
 const ProfilePreview = ({ account }) => (
   <div className='card h-card'>
@@ -16,7 +19,10 @@ const ProfilePreview = ({ account }) => (
         <div className='display-name'>
           <span style={{ display: 'none' }}>{account.get('username')}</span>
           <bdi>
-            <strong className='emojify p-name'>{account.get('display_name')}</strong>
+            <strong className='emojify p-name'>
+              {account.get('display_name')}
+              {account.get('pleroma').get('tags').includes('verified') && <VerificationBadge />}
+            </strong>
           </bdi>
           <span>{acctFull(account)}</span>
         </div>

app/soapbox/features/edit_profile/index.js

@@ -24,6 +24,7 @@ const messages = defineMessages({
   heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' },
   metaFieldLabel: { id: 'edit_profile.fields.meta_fields.label_placeholder', defaultMessage: 'Label' },
   metaFieldContent: { id: 'edit_profile.fields.meta_fields.content_placeholder', defaultMessage: 'Content' },
+  verified: { id: 'edit_profile.fields.verified_display_name', defaultMessage: 'Verified users may not update their display name' },
 });
 
 const mapStateToProps = state => {
@@ -155,7 +156,8 @@ class EditProfile extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, maxFields } = this.props;
+    const { intl, maxFields, account } = this.props;
+    const verified = account.get('pleroma').get('tags').includes('verified');
 
     return (
       <Column icon='user' heading={intl.formatMessage(messages.heading)} backBtnSlim>
@@ -163,10 +165,13 @@ class EditProfile extends ImmutablePureComponent {
           <fieldset disabled={this.state.isLoading}>
             <FieldsGroup>
               <TextInput
+                className={verified && 'disabled'}
                 label={<FormattedMessage id='edit_profile.fields.display_name_label' defaultMessage='Display name' />}
                 name='display_name'
                 value={this.state.display_name}
                 onChange={this.handleTextChange}
+                disabled={verified}
+                hint={verified && intl.formatMessage(messages.verified)}
               />
               <TextInput
                 label={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}

app/styles/accounts.scss

@@ -92,6 +92,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
+      bdi, span.verified-icon {
+        display: inline-block;
+      }
     }
   }
 }

app/styles/forms.scss

@@ -342,6 +342,15 @@ code {
     }
   }
 
+  input[type=text][disabled],
+  input[type=number][disabled],
+  input[type=email][disabled],
+  input[type=password][disabled],
+  textarea {
+    color: var(--primary-text-color--faint);
+    border-color: var(--primary-text-color--faint);
+  }
+
   .input.field_with_errors {
     label {
       color: lighten($error-red, 12%);