Show actor type on user show page and manage it from that page

src/lang/en.js

@@ -271,7 +271,9 @@ export default {
     invalidNickname: 'invalid nickname',
     passwordResetTokenGenerated: 'Password reset token was generated:',
     linkToResetPassword: 'You can also use this link to reset password:',
-    registrationReason: 'Registration Reason'
+    registrationReason: 'Registration Reason',
+    service: 'Service',
+    person: 'Person'
   },
   statuses: {
     statuses: 'Statuses',
@@ -292,7 +294,8 @@ export default {
     admin: 'Admin',
     local: 'Local',
     external: 'External',
-    accountType: 'Account type',
+    accountType: 'Account Type',
+    actorType: 'Actor Type',
     nickname: 'Nickname',
     recentStatuses: 'Recent Statuses',
     roles: 'Roles',

src/store/modules/users.js

@@ -281,10 +281,9 @@ const users = {
     },
     async UpdateActorType({ dispatch, getters }, { user, type, _userId, _statusId }) {
       const updatedUsers = [{ ...user, actor_type: type }]
-      const nickname = [user.nickname]
       const credentials = { actor_type: type }
 
-      const callApiFn = async() => await updateUserCredentials(nickname, credentials, getters.authHost, getters.token)
+      const callApiFn = async() => await updateUserCredentials(user.nickname, credentials, getters.authHost, getters.token)
 
       dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId, statusId: _statusId })
     }

src/views/users/components/ModerationDropdown.vue

@@ -18,9 +18,9 @@
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item
         class="actor-type-dropdown">
-        <el-select v-model="actorType" placeholder="Actor Type" class="actor-type-select">
-          <el-option value="Service"/>
-          <el-option value="Person"/>
+        <el-select v-model="actorType" :placeholder="$t('userProfile.actorType')" class="actor-type-select">
+          <el-option :label="$t('users.service')" value="Service"/>
+          <el-option :label="$t('users.person')" value="Person"/>
         </el-select>
       </el-dropdown-item>
       <el-dropdown-item
@@ -151,7 +151,12 @@ export default {
         return this.user.actor_type
       },
       set(type) {
-        this.$store.dispatch('UpdateActorType', { user: this.user, type })
+        this.$store.dispatch('UpdateActorType', {
+          user: this.user,
+          type,
+          _userId: this.user.id,
+          _statusId: this.statusId
+        })
       }
     },
     isDesktop() {

src/views/users/show.vue

@@ -46,10 +46,19 @@
             <tbody>
               <tr class="el-table__row">
                 <td class="name-col">ID</td>
-                <td class="value-col">
+                <td>
                   {{ user.id }}
                 </td>
               </tr>
+              <tr class="el-table__row">
+                <td>{{ $t('userProfile.actorType') }}</td>
+                <td>
+                  <el-tag
+                    :type="userCredentials.actor_type === 'Person' ? 'success' : 'warning'">
+                    {{ userCredentials.actor_type }}
+                  </el-tag>
+                </td>
+              </tr>
               <tr class="el-table__row">
                 <td>{{ $t('userProfile.tags') }}</td>
                 <td>