Make editing display names of verified users configurable

app/soapbox/actions/soapbox.js

@@ -39,6 +39,7 @@ export const defaultConfig = ImmutableMap({
     homeFooter: ImmutableList(),
   }),
   allowedEmoji: allowedEmoji,
+  verifiedCanEditName: false,
 });
 
 export function getSoapboxConfig(state) {

app/soapbox/features/edit_profile/index.js

@@ -22,6 +22,7 @@ import {
 import { patchMe } from 'soapbox/actions/me';
 import { unescape } from 'lodash';
 import { isVerified } from 'soapbox/utils/accounts';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
 const messages = defineMessages({
   heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' },
@@ -32,9 +33,11 @@ const messages = defineMessages({
 
 const mapStateToProps = state => {
   const me = state.get('me');
+  const soapbox = getSoapboxConfig(state);
   return {
     account: state.getIn(['accounts', me]),
     maxFields: state.getIn(['instance', 'pleroma', 'metadata', 'fields_limits', 'max_fields'], 4),
+    verifiedCanEditName: soapbox.get('verifiedCanEditName'),
   };
 };
 
@@ -61,6 +64,7 @@ class EditProfile extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     account: ImmutablePropTypes.map,
     maxFields: PropTypes.number,
+    verifiedCanEditName: PropTypes.bool,
   };
 
   state = {
@@ -161,8 +165,9 @@ class EditProfile extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, maxFields, account } = this.props;
+    const { intl, maxFields, account, verifiedCanEditName } = this.props;
     const verified = isVerified(account);
+    const canEditName = verifiedCanEditName || !verified;
 
     return (
       <Column icon='user' heading={intl.formatMessage(messages.heading)} backBtnSlim>
@@ -170,13 +175,13 @@ class EditProfile extends ImmutablePureComponent {
           <fieldset disabled={this.state.isLoading}>
             <FieldsGroup>
               <TextInput
-                className={verified ? 'disabled' : ''}
+                className={canEditName ? '' : '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}
+                disabled={!canEditName}
-                hint={verified && intl.formatMessage(messages.verified)}
+                hint={!canEditName && intl.formatMessage(messages.verified)}
               />
               <SimpleTextarea
                 label={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}

app/soapbox/features/soapbox_config/index.js

@@ -12,6 +12,7 @@ import {
   SimpleTextarea,
   FileChooserLogo,
   FormPropTypes,
+  Checkbox,
 } from 'soapbox/features/forms';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { updateConfig } from 'soapbox/actions/admin';
@@ -39,6 +40,7 @@ const messages = defineMessages({
   customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
   rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
   rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
+  verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
 });
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
@@ -232,6 +234,14 @@ class SoapboxConfig extends ImmutablePureComponent {
                 onChange={this.handleChange(['copyright'], (e) => e.target.value)}
               />
             </FieldsGroup>
+            <FieldsGroup>
+              <Checkbox
+                name='verifiedCanEditName'
+                label={intl.formatMessage(messages.verifiedCanEditNameLabel)}
+                checked={soapbox.get('verifiedCanEditName') === true}
+                onChange={this.handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
+              />
+            </FieldsGroup>
             <FieldsGroup>
               <div className='input with_block_label popup'>
                 <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>