Allow to configure visibility for admin and moderator badges

src/components/user_card_content/user_card_content.js

@@ -79,6 +79,21 @@ export default {
       set (color) {
         this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
       }
+    },
+    visibleRole () {
+      const user = this.user
+
+      if (!(user.role === 'admin' || user.role === 'moderator')) {
+        return undefined
+      }
+
+      if (this.isOtherUser) {
+        return user.role
+      }
+
+      if (user.show_role) {
+        return user.role
+      }
     }
   },
   components: {

src/components/user_card_content/user_card_content.vue

@@ -20,8 +20,7 @@
 
           <router-link class='user-screen-name' :to="userProfileLink(user)">
             <span class="handle">@{{user.screen_name}}
-              <span class="staff" v-if="user.is_admin">Admin</span>
-              <span class="staff" v-else-if="user.is_moderator">Moderator</span>
+              <span class="staff" v-if="!!visibleRole">{{visibleRole}}</span>
             </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
@@ -254,6 +253,7 @@
     .staff {
       border: 1px solid $admin-border-color;
       color: $admin-color;
+      text-transform: capitalize;
       background-color: $admin-background-color;
       line-height: 12px;
       border-radius: 3px;

src/components/user_settings/user_settings.js

@@ -14,6 +14,8 @@ const UserSettings = {
       newDefaultScope: this.$store.state.users.currentUser.default_scope,
       hideFollows: this.$store.state.users.currentUser.hide_follows,
       hideFollowers: this.$store.state.users.currentUser.hide_followers,
+      showRole: this.$store.state.users.currentUser.show_role,
+      role: this.$store.state.users.currentUser.role,
       followList: null,
       followImportError: false,
       followsImported: false,
@@ -71,6 +73,8 @@ const UserSettings = {
       const no_rich_text = this.newNoRichText
       const hide_follows = this.hideFollows
       const hide_followers = this.hideFollowers
+      const show_role = this.showRole
+
       /* eslint-enable camelcase */
       this.$store.state.api.backendInteractor
         .updateProfile({
@@ -83,7 +87,8 @@ const UserSettings = {
             default_scope,
             no_rich_text,
             hide_follows,
-            hide_followers
+            hide_followers,
+            show_role
             /* eslint-enable camelcase */
           }}).then((user) => {
             if (!user.error) {

src/components/user_settings/user_settings.vue

@@ -37,6 +37,11 @@
               <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
               <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
             </p>
+            <p>
+              <input type="checkbox" v-model="showRole" id="account-show-role">
+              <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
+              <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
+            </p>
             <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
           </div>
           <div class="setting-item">