reorganization of some settings

src/components/user_card/user_card.js

@@ -115,7 +115,6 @@ export default {
       newCoverPhoto: user.cover_photo,
       newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
       editingFields: false,
-      newLocked: user.locked,
       newShowRole: user.show_role,
     }
   },
@@ -123,9 +122,18 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
+    groupActorAvailable () {
+      return this.$store.state.instance.groupActorAvailable
+    },
+    availableActorTypes () {
+      return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
+    },
     user () {
       return this.$store.getters.findUser(this.userId)
     },
+    role () {
+      return this.user.role
+    },
     relationship () {
       return this.$store.getters.relationship(this.userId)
     },
@@ -428,13 +436,11 @@ export default {
       this.newShowBirthday = user.show_birthday
       this.newCoverPhoto = user.cover_photo
       this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
-      this.newLocked = user.locked
       this.newShowRole = user.show_role
     },
     updateProfile () {
       const params = {
         note: this.newBio,
-        locked: this.newLocked,
 
         // Backend notation.
         display_name: this.newName,

src/components/user_card/user_card.scss

@@ -27,7 +27,6 @@
     display: block;
     line-height: 1.3;
     padding: 0 0.6em;
-    margin: 0 0.6em;
 
     img {
       object-fit: contain;
@@ -37,8 +36,14 @@
     }
   }
 
+  .user-card-setting {
+    margin-left: 0.6em;
+    margin-right: 0.6em;
+  }
+
   .user-card-bio {
     text-align: center;
+    margin: 0 0.6em;
 
     &.input {
       margin: 0 1em;

src/components/user_card/user_card.vue

@@ -331,7 +331,41 @@
         </div>
       </div>
     </div>
-    <slot />
+    <template v-if="editable">
+      <h4>{{ $t('settings.user_preferences') }}</h4>
+      <p
+        v-if="role === 'admin' || role === 'moderator'"
+        class="user-card-setting"
+      >
+        <Checkbox v-model="newShowRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p class="user-card-setting">
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="newActorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + option) }}
+            </option>
+          </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
+        </label>
+      </p>
+    </template>
     <div
       v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
@@ -671,7 +705,7 @@
               <button
                 class="button-default btn"
                 type="button"
-                @click="destroy"
+                @click="editImage = false"
               >
                 {{ this.$t('image_cropper.cancel') }}
               </button>