Add ability to moderate user from a user's page

src/lang/en.js

@@ -202,6 +202,7 @@ export default {
     disableAnySubscriptionForMultiple: 'Disallow following users at all',
     requirePasswordReset: 'Require password reset on next login',
     selectUsers: 'Select users to apply actions to multiple users',
+    moderateUser: 'Moderate user',
     moderateUsers: 'Moderate multiple users',
     createAccount: 'Create new account',
     apply: 'apply',

src/store/modules/users.js

@@ -93,6 +93,8 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async AddRight({ commit, dispatch, getters, state }, { users, right }) {
@@ -109,6 +111,8 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async AddTag({ commit, dispatch, getters, state }, { users, tag }) {
@@ -125,6 +129,8 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async ClearFilters({ commit, dispatch, state }) {
@@ -155,6 +161,8 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async ConfirmUsersEmail({ commit, dispatch, getters, state }, users) {
@@ -196,6 +204,8 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async DeleteUsers({ commit, dispatch, getters, state }, users) {
@@ -208,6 +218,8 @@ const users = {
       const deletedUsersIds = users.map(deletedUser => deletedUser.id)
       const updatedUsers = state.fetchedUsers.filter(user => !deletedUsersIds.includes(user.id))
       commit('SET_USERS', updatedUsers)
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async FetchUsers({ commit, dispatch, getters, state }, { page }) {
@@ -238,6 +250,8 @@ const users = {
       } finally {
         dispatch('SearchUsers', { query: state.searchQuery, page: state.currentPage })
       }
+
+      dispatch('FetchUserProfile', { userId: users[0].id, godmode: false })
       dispatch('SuccessMessage')
     },
     async RequirePasswordReset({ dispatch, getters }, user) {

src/views/users/components/ModerationDropdown.vue

@@ -1,9 +1,20 @@
 <template>
   <el-dropdown :hide-on-click="false" size="small" trigger="click">
-    <span class="el-dropdown-link">
+    <div>
-      {{ $t('users.moderation') }}
+      <span v-if="page === 'users'" class="el-dropdown-link">
-      <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
+        {{ $t('users.moderation') }}
-    </span>
+        <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-button v-if="page === 'userPage'" class="actions-button">
+        <span class="actions-button-container">
+          <span>
+            <i class="el-icon-edit" />
+            {{ $t('users.moderateUser') }}
+          </span>
+          <i class="el-icon-arrow-down el-icon--right"/>
+        </span>
+      </el-button>
+    </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item
         v-if="showAdminAction(user)"
@@ -100,6 +111,10 @@ export default {
       default: function() {
         return {}
       }
+    },
+    page: {
+      type: String,
+      default: 'users'
     }
   },
   computed: {

src/views/users/index.vue

@@ -66,7 +66,7 @@
       </el-table-column>
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
-          <moderation-dropdown :user="scope.row"/>
+          <moderation-dropdown :user="scope.row" :page="'users'"/>
         </template>
       </el-table-column>
     </el-table>

src/views/users/show.vue

@@ -1,8 +1,11 @@
 <template>
   <main v-if="!userProfileLoading">
-    <header>
+    <header class="user-page-header">
-      <el-avatar :src="user.avatar" size="large" />
+      <div class="avatar-name-container">
-      <h1>{{ user.display_name }}</h1>
+        <el-avatar :src="user.avatar" size="large" />
+        <h1>{{ user.display_name }}</h1>
+      </div>
+      <moderation-dropdown :user="user" :page="'userPage'"/>
     </header>
     <el-row>
       <el-col :span="8">
@@ -84,10 +87,11 @@
 
 <script>
 import Status from '@/components/Status'
+import ModerationDropdown from './components/ModerationDropdown'
 
 export default {
   name: 'UsersShow',
-  components: { Status },
+  components: { ModerationDropdown, Status },
   data() {
     return {
       showPrivate: false
@@ -119,6 +123,10 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss' scoped>
+.avatar-name-container {
+  display: flex;
+  align-items: center;
+}
 header {
   align-items: center;
   display: flex;
@@ -151,7 +159,6 @@ table {
 .no-statuses {
   margin-left: 28px;
   color: #606266;
-
 }
 .recent-statuses-header {
   margin-top: 10px;
@@ -160,16 +167,24 @@ table {
   padding: 0 20px 0 0;
 }
 .show-private {
-  text-align: right;
+  width: 173px;
+  text-align: left;
   line-height: 67px;
-  padding-right: 20px;
+  margin-right: 20px;
 }
 .recent-statuses {
   margin-left: 28px;
 }
+.user-page-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  h1 {
+    display: inline
+  }
+}
 .user-profile-card {
-  margin-left: 15px;
+  margin: 0 20px;
-  margin-right: 20px;
 }
 .user-profile-table {
   margin: 0;