From 7b7a05170a787f3d5557f851a3a8eda99c23e4e7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 18 May 2020 20:07:26 +0300
Subject: [PATCH 01/18] Disable moderation of users that don't have nicknames
 or IDs

---
 src/lang/en.js                                |  3 ++-
 src/views/reports/components/Report.vue       |  5 +++-
 .../users/components/MultipleUsersMenu.vue    | 24 +++++++++----------
 src/views/users/index.vue                     | 20 +++++++++++-----
 src/views/users/show.vue                      |  5 ++++
 5 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 2e504315..d25fff70 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -238,7 +238,8 @@ export default {
     unconfirmedEmail: 'User didn\'t confirm the email',
     confirmAccount: 'Confirm account',
     confirmAccounts: 'Confirm accounts',
-    resendConfirmation: 'Resend confirmation email'
+    resendConfirmation: 'Resend confirmation email',
+    invalidUser: 'This user is invalid and can\'t be modified'
   },
   statuses: {
     statuses: 'Statuses',
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 565b3cb0..56a13372 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -24,7 +24,7 @@
                   <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <moderate-user-dropdown :account="report.account"/>
+              <moderate-user-dropdown v-if="validAccount(report.account)" :account="report.account"/>
             </div>
           </div>
           <div>
@@ -179,6 +179,9 @@ export default {
     },
     showStatuses(statuses = []) {
       return statuses.length > 0
+    },
+    validAccount(account) {
+      return account.nickname && account.id
     }
   }
 }
diff --git a/src/views/users/components/MultipleUsersMenu.vue b/src/views/users/components/MultipleUsersMenu.vue
index eaf6d742..f7476c0b 100644
--- a/src/views/users/components/MultipleUsersMenu.vue
+++ b/src/views/users/components/MultipleUsersMenu.vue
@@ -165,33 +165,33 @@ export default {
       }
       return {
         grantRight: (right) => () => {
-          const filterUsersFn = user => user.local && !user.roles[right] && this.$store.state.user.id !== user.id
+          const filterUsersFn = user => user.nickname && user.id && user.local && !user.roles[right] && this.$store.state.user.id !== user.id
           const addRightFn = async(users) => await this.$store.dispatch('AddRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
           applyAction(filtered, addRightFn)
         },
         revokeRight: (right) => () => {
-          const filterUsersFn = user => user.local && user.roles[right] && this.$store.state.user.id !== user.id
+          const filterUsersFn = user => user.nickname && user.id && user.local && user.roles[right] && this.$store.state.user.id !== user.id
           const deleteRightFn = async(users) => await this.$store.dispatch('DeleteRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
           applyAction(filtered, deleteRightFn)
         },
         activate: () => {
-          const filtered = this.selectedUsers.filter(user => user.deactivated && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.deactivated && this.$store.state.user.id !== user.id)
           const activateUsersFn = async(users) => await this.$store.dispatch('ActivateUsers', { users })
 
           applyAction(filtered, activateUsersFn)
         },
         deactivate: () => {
-          const filtered = this.selectedUsers.filter(user => !user.deactivated && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && !user.deactivated && this.$store.state.user.id !== user.id)
           const deactivateUsersFn = async(users) => await this.$store.dispatch('DeactivateUsers', { users })
 
           applyAction(filtered, deactivateUsersFn)
         },
         remove: () => {
-          const filtered = this.selectedUsers.filter(user => this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && this.$store.state.user.id !== user.id)
           const deleteAccountFn = async(users) => await this.$store.dispatch('DeleteUsers', { users })
 
           applyAction(filtered, deleteAccountFn)
@@ -199,34 +199,34 @@ export default {
         addTag: (tag) => () => {
           const filtered = this.selectedUsers.filter(user =>
             tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? user.local && !user.tags.includes(tag)
-              : !user.tags.includes(tag))
+              ? user.nickname && user.id && user.local && !user.tags.includes(tag)
+              : user.nickname && user.id && !user.tags.includes(tag))
           const addTagFn = async(users) => await this.$store.dispatch('AddTag', { users, tag })
           applyAction(filtered, addTagFn)
         },
         removeTag: (tag) => async() => {
           const filtered = this.selectedUsers.filter(user =>
             tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? user.local && user.tags.includes(tag)
-              : user.tags.includes(tag))
+              ? user.nickname && user.id && user.local && user.tags.includes(tag)
+              : user.nickname && user.id && user.tags.includes(tag))
           const removeTagFn = async(users) => await this.$store.dispatch('RemoveTag', { users, tag })
 
           applyAction(filtered, removeTagFn)
         },
         requirePasswordReset: () => {
-          const filtered = this.selectedUsers.filter(user => user.local)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.local)
           const requirePasswordResetFn = async(users) => await this.$store.dispatch('RequirePasswordReset', users)
 
           applyAction(filtered, requirePasswordResetFn)
         },
         confirmAccounts: () => {
-          const filtered = this.selectedUsers.filter(user => user.local && user.confirmation_pending)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.local && user.confirmation_pending)
           const confirmAccountFn = async(users) => await this.$store.dispatch('ConfirmUsersEmail', { users })
 
           applyAction(filtered, confirmAccountFn)
         },
         resendConfirmation: () => {
-          const filtered = this.selectedUsers.filter(user => user.local && user.confirmation_pending)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.local && user.confirmation_pending)
           const resendConfirmationFn = async(users) => await this.$store.dispatch('ResendConfirmationEmail', users)
 
           applyAction(filtered, resendConfirmationFn)
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 6d6deb47..d3edbf5b 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -75,9 +75,11 @@
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
           <moderation-dropdown
+            v-if="validUser(scope.row)"
             :user="scope.row"
             :page="'users'"
             @open-reset-token-dialog="openResetPasswordDialog"/>
+          <span v-else class="invalid-user">{{ $t('users.invalidUser') }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -140,12 +142,6 @@ export default {
     normalizedUsersCount() {
       return numeral(this.$store.state.users.totalUsersCount).format('0a')
     },
-    users() {
-      return this.$store.state.users.fetchedUsers
-    },
-    usersCount() {
-      return this.$store.state.users.totalUsersCount
-    },
     pageSize() {
       return this.$store.state.users.pageSize
     },
@@ -164,6 +160,12 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    users() {
+      return this.$store.state.users.fetchedUsers
+    },
+    usersCount() {
+      return this.$store.state.users.totalUsersCount
+    },
     width() {
       return this.isMobile ? 55 : false
     }
@@ -211,6 +213,9 @@ export default {
     },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
+    },
+    validUser(user) {
+      return user.nickname && user.id
     }
   }
 }
@@ -248,6 +253,9 @@ export default {
 .create-account > .el-icon-plus {
   margin-right: 5px;
 }
+.invalid-user {
+  color: gray;
+}
 .users-header-container {
   display: flex;
   align-items: center;
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index a4ae844a..9ccb530e 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -7,6 +7,7 @@
       </div>
       <div class="left-header-container">
         <moderation-dropdown
+          v-if="validUser(user)"
           :user="user"
           :page="'userPage'"
           @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -22,6 +23,7 @@
         <reboot-button/>
       </header>
       <moderation-dropdown
+        v-if="validUser(user)"
         :user="user"
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -182,6 +184,9 @@ export default {
     },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
+    },
+    validUser(user) {
+      return user.nickname && user.id
     }
   }
 }

From 1c2782a5228a8506e89b23bb7e1d1cb67a5d413b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 18 May 2020 20:10:33 +0300
Subject: [PATCH 02/18] Fix sorting users if there are users without nicknames
 or IDs

---
 src/store/modules/users.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 2a1540e3..0b6061cb 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -51,9 +51,11 @@ const users = {
         return
       }
 
-      state.fetchedUsers = [...usersWithoutSwapped, ...users].sort((a, b) =>
-        a.nickname.localeCompare(b.nickname)
-      )
+      const updatedUsers = [...usersWithoutSwapped, ...users]
+      state.fetchedUsers = updatedUsers
+        .filter(user => user.nickname && user.id)
+        .sort((a, b) => a.nickname.localeCompare(b.nickname))
+        .concat(updatedUsers.filter(user => !user.nickname || !user.id))
     },
     SET_COUNT: (state, count) => {
       state.totalUsersCount = count

From 20a56bb21f9acc8ae5411130c7985efe28e588bb Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 18 May 2020 22:50:32 +0300
Subject: [PATCH 03/18] Clear search and filter inputs when vue instance is
 destroyed

---
 src/store/modules/users.js | 4 ++++
 src/views/users/index.vue  | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 0b6061cb..76a844bb 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -124,6 +124,10 @@ const users = {
 
       dispatch('ApplyChanges', { updatedUsers, callApiFn, userId: _userId })
     },
+    ClearUsersState({ commit }) {
+      commit('SET_SEARCH_QUERY', '')
+      commit('SET_USERS_FILTERS', { local: false, external: false, active: false, deactivated: false })
+    },
     async ClearFilters({ commit, dispatch, state }) {
       commit('CLEAR_USERS_FILTERS')
       dispatch('SearchUsers', { query: state.searchQuery, page: 1 })
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index d3edbf5b..56df8612 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -179,6 +179,9 @@ export default {
     this.$store.dispatch('NeedReboot')
     this.$store.dispatch('FetchUsers', { page: 1 })
   },
+  destroyed() {
+    this.$store.dispatch('ClearUsersState')
+  },
   methods: {
     activationIcon(status) {
       return status ? 'el-icon-error' : 'el-icon-success'

From 8fddbb69d28fe02f31b3ed41d0ab2bbd5dc892b7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 18 May 2020 23:00:23 +0300
Subject: [PATCH 04/18] Update styles for deactivated users

---
 src/components/Status/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 90058332..25c62d5e 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -229,6 +229,10 @@ export default {
     line-height: 26px;
     font-size: 13px;
   }
+  .deactivated {
+    color: gray;
+    font-size: 15px;
+  }
   .image {
     width: 20%;
     img {

From f4d7ad945386b7292941626e191ecfef10923451 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 30 May 2020 21:51:13 +0300
Subject: [PATCH 05/18] Refactoring and unification of function names

---
 src/views/reports/components/Report.vue       |  8 +++---
 .../users/components/MultipleUsersMenu.vue    | 27 ++++++++++---------
 src/views/users/index.vue                     |  8 +++---
 src/views/users/show.vue                      | 10 +++----
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 56a13372..0df17b10 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -24,7 +24,7 @@
                   <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <moderate-user-dropdown v-if="validAccount(report.account)" :account="report.account"/>
+              <moderate-user-dropdown v-if="isValid(report.account)" :account="report.account"/>
             </div>
           </div>
           <div>
@@ -174,14 +174,14 @@ export default {
     handlePageChange(page) {
       this.$store.dispatch('FetchReports', page)
     },
+    isValid(account) {
+      return account.nickname && account.id
+    },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     },
     showStatuses(statuses = []) {
       return statuses.length > 0
-    },
-    validAccount(account) {
-      return account.nickname && account.id
     }
   }
 }
diff --git a/src/views/users/components/MultipleUsersMenu.vue b/src/views/users/components/MultipleUsersMenu.vue
index f7476c0b..70883598 100644
--- a/src/views/users/components/MultipleUsersMenu.vue
+++ b/src/views/users/components/MultipleUsersMenu.vue
@@ -165,33 +165,33 @@ export default {
       }
       return {
         grantRight: (right) => () => {
-          const filterUsersFn = user => user.nickname && user.id && user.local && !user.roles[right] && this.$store.state.user.id !== user.id
+          const filterUsersFn = user => this.isValid(user) && user.local && !user.roles[right] && this.$store.state.user.id !== user.id
           const addRightFn = async(users) => await this.$store.dispatch('AddRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
           applyAction(filtered, addRightFn)
         },
         revokeRight: (right) => () => {
-          const filterUsersFn = user => user.nickname && user.id && user.local && user.roles[right] && this.$store.state.user.id !== user.id
+          const filterUsersFn = user => this.isValid(user) && user.local && user.roles[right] && this.$store.state.user.id !== user.id
           const deleteRightFn = async(users) => await this.$store.dispatch('DeleteRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
           applyAction(filtered, deleteRightFn)
         },
         activate: () => {
-          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.deactivated && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.deactivated && this.$store.state.user.id !== user.id)
           const activateUsersFn = async(users) => await this.$store.dispatch('ActivateUsers', { users })
 
           applyAction(filtered, activateUsersFn)
         },
         deactivate: () => {
-          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && !user.deactivated && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => this.isValid(user) && !user.deactivated && this.$store.state.user.id !== user.id)
           const deactivateUsersFn = async(users) => await this.$store.dispatch('DeactivateUsers', { users })
 
           applyAction(filtered, deactivateUsersFn)
         },
         remove: () => {
-          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => this.isValid(user) && this.$store.state.user.id !== user.id)
           const deleteAccountFn = async(users) => await this.$store.dispatch('DeleteUsers', { users })
 
           applyAction(filtered, deleteAccountFn)
@@ -199,40 +199,43 @@ export default {
         addTag: (tag) => () => {
           const filtered = this.selectedUsers.filter(user =>
             tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? user.nickname && user.id && user.local && !user.tags.includes(tag)
-              : user.nickname && user.id && !user.tags.includes(tag))
+              ? this.isValid(user) && user.local && !user.tags.includes(tag)
+              : this.isValid(user) && !user.tags.includes(tag))
           const addTagFn = async(users) => await this.$store.dispatch('AddTag', { users, tag })
           applyAction(filtered, addTagFn)
         },
         removeTag: (tag) => async() => {
           const filtered = this.selectedUsers.filter(user =>
             tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? user.nickname && user.id && user.local && user.tags.includes(tag)
-              : user.nickname && user.id && user.tags.includes(tag))
+              ? this.isValid(user) && user.local && user.tags.includes(tag)
+              : this.isValid(user) && user.tags.includes(tag))
           const removeTagFn = async(users) => await this.$store.dispatch('RemoveTag', { users, tag })
 
           applyAction(filtered, removeTagFn)
         },
         requirePasswordReset: () => {
-          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.local)
+          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.local)
           const requirePasswordResetFn = async(users) => await this.$store.dispatch('RequirePasswordReset', users)
 
           applyAction(filtered, requirePasswordResetFn)
         },
         confirmAccounts: () => {
-          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.local && user.confirmation_pending)
+          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.local && user.confirmation_pending)
           const confirmAccountFn = async(users) => await this.$store.dispatch('ConfirmUsersEmail', { users })
 
           applyAction(filtered, confirmAccountFn)
         },
         resendConfirmation: () => {
-          const filtered = this.selectedUsers.filter(user => user.nickname && user.id && user.local && user.confirmation_pending)
+          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.local && user.confirmation_pending)
           const resendConfirmationFn = async(users) => await this.$store.dispatch('ResendConfirmationEmail', users)
 
           applyAction(filtered, resendConfirmationFn)
         }
       }
     },
+    isValid(user) {
+      return user.nickname && user.id
+    },
     grantRightToMultipleUsers(right) {
       const { grantRight } = this.mappers()
       this.confirmMessage(
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 56df8612..474a438e 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -75,7 +75,7 @@
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
           <moderation-dropdown
-            v-if="validUser(scope.row)"
+            v-if="isValid(scope.row)"
             :user="scope.row"
             :page="'users'"
             @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -211,14 +211,14 @@ export default {
     handleSelectionChange(value) {
       this.$data.selectedUsers = value
     },
+    isValid(user) {
+      return user.nickname && user.id
+    },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
     },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
-    },
-    validUser(user) {
-      return user.nickname && user.id
     }
   }
 }
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 9ccb530e..0d6d081b 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="left-header-container">
         <moderation-dropdown
-          v-if="validUser(user)"
+          v-if="isValid(user)"
           :user="user"
           :page="'userPage'"
           @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -23,7 +23,7 @@
         <reboot-button/>
       </header>
       <moderation-dropdown
-        v-if="validUser(user)"
+        v-if="isValid(user)"
         :user="user"
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -179,14 +179,14 @@ export default {
       this.resetPasswordDialogOpen = false
       this.$store.dispatch('RemovePasswordToken')
     },
+    isValid(user) {
+      return user.nickname && user.id
+    },
     onTogglePrivate() {
       this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate })
     },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
-    },
-    validUser(user) {
-      return user.nickname && user.id
     }
   }
 }

From 1fa258ff23d86885124085b1176a857fe039e695 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 30 May 2020 22:24:56 +0300
Subject: [PATCH 06/18] Add tag for invalid accounts on User profile

---
 src/lang/en.js           |  2 +-
 src/views/users/show.vue | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index d25fff70..288bdf53 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -239,7 +239,7 @@ export default {
     confirmAccount: 'Confirm account',
     confirmAccounts: 'Confirm accounts',
     resendConfirmation: 'Resend confirmation email',
-    invalidUser: 'This user is invalid and can\'t be modified'
+    invalidUser: 'This account is invalid and can\'t be modified'
   },
   statuses: {
     statuses: 'Statuses',
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 0d6d081b..f6b08715 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -44,6 +44,9 @@
     <div class="user-profile-container">
       <el-card class="user-profile-card">
         <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
+          <el-tag v-if="!isValid(user)" type="info" class="invalid-user-tag">
+            {{ $t('users.invalidUser') }}
+          </el-tag>
           <table class="user-profile-table">
             <tbody>
               <tr class="el-table__row">
@@ -222,6 +225,14 @@ table {
     width: 100%;
   }
 }
+.invalid-user-tag {
+  font-size: 14px;
+  width: inherit;
+  height: auto;
+  text-align: center;
+  word-wrap: break-word;
+  white-space: normal;
+}
 .left-header-container {
   align-items: center;
   display: flex;
@@ -287,6 +298,7 @@ table {
 }
 .user-profile-table {
   margin: 0;
+  width: inherit;
 }
 .user-profile-tag {
   margin: 0 4px 4px 0;

From 41c26db820201d4dc15eb0c5c5ba6148f4243e6b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 1 Jun 2020 01:43:03 +0300
Subject: [PATCH 07/18] Update user profile page for users without valid
 nickame

---
 src/components/Status/index.vue | 18 ++++++++++--------
 src/lang/en.js                  |  3 ++-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 25c62d5e..5f430c28 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -6,16 +6,14 @@
           <div class="status-account-container">
             <div class="status-account">
               <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-              <img :src="account.avatar" class="status-avatar-img">
-              <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
-                <h3 class="status-account-name">{{ account.display_name }}</h3>
+              <img v-if="isValid(account)" :src="account.avatar" class="status-avatar-img">
+              <a v-if="isValid(account)" :href="account.url" target="_blank" class="account">
+                <h3 class="status-account-name">{{ account.nickname }}</h3>
               </a>
-              <span v-else>
-                <h3 class="status-account-name">{{ account.display_name }}</h3>
-                <h3 class="status-account-name deactivated"> (deactivated)</h3>
+              <span v-else class="deactivated">
+                <h3 class="status-account-name">({{ $t('users.invalidNickname') }})</h3>
               </span>
             </div>
-
           </div>
           <div class="status-actions">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
@@ -204,6 +202,9 @@ export default {
         })
       })
     },
+    isValid(account) {
+      return account.nickname && account.id
+    },
     optionPercent(poll, pollOption) {
       const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
       if (allVotes === 0) {
@@ -231,7 +232,8 @@ export default {
   }
   .deactivated {
     color: gray;
-    font-size: 15px;
+    line-height: 32px;
+    vertical-align: middle;
   }
   .image {
     width: 20%;
diff --git a/src/lang/en.js b/src/lang/en.js
index 288bdf53..7eee1950 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -239,7 +239,8 @@ export default {
     confirmAccount: 'Confirm account',
     confirmAccounts: 'Confirm accounts',
     resendConfirmation: 'Resend confirmation email',
-    invalidUser: 'This account is invalid and can\'t be modified'
+    invalidUser: 'This account is invalid and can\'t be modified',
+    invalidNickname: 'invalid nickname'
   },
   statuses: {
     statuses: 'Statuses',

From 54f6c90f067d9a6ac8b9a3232865f7bbc11cd388 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 1 Jun 2020 01:43:03 +0300
Subject: [PATCH 08/18] Update user profile page for users without valid
 nickame

---
 src/components/Status/index.vue | 18 ++++++++++--------
 src/lang/en.js                  |  3 ++-
 src/views/users/show.vue        | 13 +++++++++----
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 25c62d5e..5f430c28 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -6,16 +6,14 @@
           <div class="status-account-container">
             <div class="status-account">
               <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-              <img :src="account.avatar" class="status-avatar-img">
-              <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
-                <h3 class="status-account-name">{{ account.display_name }}</h3>
+              <img v-if="isValid(account)" :src="account.avatar" class="status-avatar-img">
+              <a v-if="isValid(account)" :href="account.url" target="_blank" class="account">
+                <h3 class="status-account-name">{{ account.nickname }}</h3>
               </a>
-              <span v-else>
-                <h3 class="status-account-name">{{ account.display_name }}</h3>
-                <h3 class="status-account-name deactivated"> (deactivated)</h3>
+              <span v-else class="deactivated">
+                <h3 class="status-account-name">({{ $t('users.invalidNickname') }})</h3>
               </span>
             </div>
-
           </div>
           <div class="status-actions">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
@@ -204,6 +202,9 @@ export default {
         })
       })
     },
+    isValid(account) {
+      return account.nickname && account.id
+    },
     optionPercent(poll, pollOption) {
       const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
       if (allVotes === 0) {
@@ -231,7 +232,8 @@ export default {
   }
   .deactivated {
     color: gray;
-    font-size: 15px;
+    line-height: 32px;
+    vertical-align: middle;
   }
   .image {
     width: 20%;
diff --git a/src/lang/en.js b/src/lang/en.js
index 288bdf53..7eee1950 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -239,7 +239,8 @@ export default {
     confirmAccount: 'Confirm account',
     confirmAccounts: 'Confirm accounts',
     resendConfirmation: 'Resend confirmation email',
-    invalidUser: 'This account is invalid and can\'t be modified'
+    invalidUser: 'This account is invalid and can\'t be modified',
+    invalidNickname: 'invalid nickname'
   },
   statuses: {
     statuses: 'Statuses',
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index f6b08715..c8a71b08 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -3,7 +3,8 @@
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
         <el-avatar :src="user.avatar" size="large" />
-        <h1>{{ user.display_name }}</h1>
+        <h1 v-if="isValid(user)">{{ user.nickname }}</h1>
+        <h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
       </div>
       <div class="left-header-container">
         <moderation-dropdown
@@ -18,7 +19,8 @@
       <header class="user-page-header">
         <div class="avatar-name-container">
           <el-avatar :src="user.avatar" size="large" />
-          <h1>{{ user.display_name }}</h1>
+          <h1 v-if="isValid(user)">{{ user.nickname }}</h1>
+          <h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
         </div>
         <reboot-button/>
       </header>
@@ -97,10 +99,11 @@
             </tbody>
           </table>
         </div>
-        <el-button icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
+        <el-button v-if="isValid(user)" icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
           {{ $t('userProfile.securitySettings.securitySettings') }}
         </el-button>
         <SecuritySettingsModal
+          v-if="isValid(user)"
           :user="user"
           :visible="securitySettingsModalVisible"
           @close="securitySettingsModalVisible = false" />
@@ -215,7 +218,9 @@ table {
   display: flex;
   align-items: center;
 }
-
+.invalid {
+    color: gray;
+  }
 .el-table--border::after, .el-table--group::after, .el-table::before {
   background-color: transparent;
 }

From 8b5bd59267897310ef9286a1369245f1a6a0e113 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 2 Jun 2020 00:01:56 +0300
Subject: [PATCH 09/18] Replace display_name with nickname in Reports and
 Report Notes, check if account is valid

---
 src/store/modules/reports.js              |  5 ++---
 src/views/reports/components/NoteCard.vue | 10 +++++-----
 src/views/reports/components/Report.vue   | 19 ++++++++-----------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index 3a836a2f..6bc98993 100644
--- a/src/store/modules/reports.js
+++ b/src/store/modules/reports.js
@@ -61,9 +61,8 @@ const reports = {
       const optimisticNote = {
         user: {
           avatar: rootState.user.avatar,
-          display_name: rootState.user.name,
-          url: `${rootState.user.authHost}/${rootState.user.name}`,
-          acct: rootState.user.name
+          nickname: rootState.user.name,
+          id: rootState.user.id
         },
         content: content,
         created_at: new Date().getTime()
diff --git a/src/views/reports/components/NoteCard.vue b/src/views/reports/components/NoteCard.vue
index 79637f16..b4fc6225 100644
--- a/src/views/reports/components/NoteCard.vue
+++ b/src/views/reports/components/NoteCard.vue
@@ -4,12 +4,9 @@
       <div class="note-header">
         <div class="note-actor-container">
           <div class="note-actor">
-            <img :src="note.user.avatar" class="note-avatar-img">
-            <h3 class="note-actor-name">{{ note.user.display_name }}</h3>
+            <img v-if="isValid(note.user)" :src="note.user.avatar" class="note-avatar-img">
+            <h3 v-if="isValid(note.user)" class="note-actor-name">{{ note.user.nickname }}</h3>
           </div>
-          <a :href="note.user.url" target="_blank">
-            @{{ note.user.display_name }}
-          </a>
         </div>
         <div>
           <el-popconfirm
@@ -47,6 +44,9 @@ export default {
     }
   },
   methods: {
+    isValid(account) {
+      return account.nickname && account.id
+    },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('YYYY-MM-DD HH:mm')
     },
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 0df17b10..cead25a5 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -10,7 +10,7 @@
         <el-card class="report">
           <div class="report-header-container">
             <div class="title-container">
-              <h3 v-if="accountExists(report.account, 'display_name')" class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
+              <h3 v-if="isValid(report.account)" class="report-title">{{ $t('reports.reportOn') }} {{ report.account.nickname }}</h3>
               <h3 v-else class="report-title">{{ $t('reports.report') }}</h3>
               <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
             </div>
@@ -30,16 +30,16 @@
           <div>
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.account') }}:</span>
-            <span v-if="accountExists(report.account, 'avatar') && accountExists(report.account, 'display_name')">
+            <span v-if="isValid(report.account)">
               <img
                 :src="report.account.avatar"
                 alt="avatar"
                 class="avatar-img">
-              <a v-if="!report.account.deactivated" :href="report.account.url" target="_blank" class="account">
-                <span>{{ report.account.display_name }}</span>
+              <a v-if="isValid(report.account)" :href="report.account.url" target="_blank" class="account">
+                <span>{{ report.account.nickname }}</span>
               </a>
               <span v-else>
-                {{ report.account.display_name }}
+                {{ report.account.nickname }}
                 <span class="deactivated"> (deactivated)</span>
               </span>
             </span>
@@ -54,13 +54,13 @@
           <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
-            <span v-if="accountExists(report.actor, 'avatar') && accountExists(report.actor, 'display_name')">
+            <span v-if="isValid(report.actor)">
               <img
                 :src="report.actor.avatar"
                 alt="avatar"
                 class="avatar-img">
               <a :href="report.actor.url" target="_blank" class="account">
-                <span>{{ report.actor.display_name }}</span>
+                <span>{{ report.actor.nickname }}</span>
               </a>
             </span>
             <span v-else class="deactivated">({{ $t('reports.notFound') }})</span>
@@ -69,7 +69,7 @@
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
                 <div v-for="status in report.statuses" :key="status.id">
-                  <status :status="status" :account="status.account.display_name ? status.account : report.account" :show-checkbox="false" :page="currentPage"/>
+                  <status :status="status" :account="status.account.nickname ? status.account : report.account" :show-checkbox="false" :page="currentPage"/>
                 </div>
               </el-collapse-item>
             </el-collapse>
@@ -142,9 +142,6 @@ export default {
     }
   },
   methods: {
-    accountExists(account, key) {
-      return account[key]
-    },
     changeReportState(state, id) {
       this.$store.dispatch('ChangeReportState', [{ state, id }])
     },

From e67fc33600653a5a86aa8adefc175e4afe869bb0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 2 Jun 2020 22:52:04 +0300
Subject: [PATCH 10/18] Make the whole table row clickable to go to users show
 page

---
 src/views/users/components/ModerationDropdown.vue |  2 +-
 src/views/users/index.vue                         | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index a893b5d5..b385fdbe 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dropdown :hide-on-click="false" size="small" trigger="click">
+  <el-dropdown :hide-on-click="false" size="small" trigger="click" @click.native.stop>
     <div>
       <span v-if="page === 'users'" class="el-dropdown-link">
         {{ $t('users.moderation') }}
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 474a438e..d2f5d00c 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -37,6 +37,7 @@
       :data="users"
       row-key="id"
       style="width: 100%"
+      @row-click="handleRowClick($event)"
       @selection-change="handleSelectionChange">
       <el-table-column
         v-if="isDesktop"
@@ -47,7 +48,7 @@
       <el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
       <el-table-column :label="$t('users.name')" prop="nickname">
         <template slot-scope="scope">
-          <router-link :to="{ name: 'UsersShow', params: { id: scope.row.id }}">{{ scope.row.nickname }}</router-link>
+          {{ scope.row.nickname }}
           <el-tag v-if="isDesktop" type="info" size="mini">
             <span>{{ scope.row.local ? $t('users.local') : $t('users.external') }}</span>
           </el-tag>
@@ -208,6 +209,11 @@ export default {
         this.$store.dispatch('SearchUsers', { query: searchQuery, page })
       }
     },
+    handleRowClick(row) {
+      if (row.id) {
+        this.$router.push({ name: 'UsersShow', params: { id: row.id }})
+      }
+    },
     handleSelectionChange(value) {
       this.$data.selectedUsers = value
     },
@@ -278,6 +284,9 @@ export default {
     margin: 10px 0 0 15px;
     height: 40px;
   }
+  .el-table__row:hover {
+    cursor: pointer;
+  }
   .pagination {
     margin: 25px 0;
     text-align: center;

From 789fa36e1ac4a92b58400f5fb9db1ccd77c0f522 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 6 Jun 2020 22:16:25 +0300
Subject: [PATCH 11/18] Replace checking if acccount is valid with checking if
 property exists

---
 src/components/Status/index.vue               | 30 +++++----
 src/lang/en.js                                |  2 +-
 src/views/reports/components/Report.vue       | 63 +++++++++++--------
 .../users/components/MultipleUsersMenu.vue    | 28 ++++-----
 src/views/users/index.vue                     | 15 +++--
 src/views/users/show.vue                      | 38 +++++------
 6 files changed, 96 insertions(+), 80 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 5f430c28..bde254e5 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -6,12 +6,15 @@
           <div class="status-account-container">
             <div class="status-account">
               <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-              <img v-if="isValid(account)" :src="account.avatar" class="status-avatar-img">
-              <a v-if="isValid(account)" :href="account.url" target="_blank" class="account">
-                <h3 class="status-account-name">{{ account.nickname }}</h3>
+              <img v-if="propertyExists(account, 'avatar')" :src="account.avatar" class="status-avatar-img">
+              <a v-if="propertyExists(account, 'url', 'nickname')" :href="account.url" target="_blank" class="account">
+                <span class="status-account-name">{{ account.nickname }}</span>
               </a>
-              <span v-else class="deactivated">
-                <h3 class="status-account-name">({{ $t('users.invalidNickname') }})</h3>
+              <span v-else>
+                <span v-if="propertyExists(account, 'nickname')" class="status-account-name">
+                  {{ account.nickname }}
+                </span>
+                <span v-else class="status-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
               </span>
             </div>
           </div>
@@ -202,8 +205,8 @@ export default {
         })
       })
     },
-    isValid(account) {
-      return account.nickname && account.id
+    handleStatusSelection(account) {
+      this.$emit('status-selection', account)
     },
     optionPercent(poll, pollOption) {
       const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
@@ -215,8 +218,11 @@ export default {
     parseTimestamp(timestamp) {
       return moment(timestamp).format('YYYY-MM-DD HH:mm')
     },
-    handleStatusSelection(account) {
-      this.$emit('status-selection', account)
+    propertyExists(account, property, _secondProperty) {
+      if (_secondProperty) {
+        return account[property] && account[_secondProperty]
+      }
+      return account[property]
     }
   }
 }
@@ -232,7 +238,7 @@ export default {
   }
   .deactivated {
     color: gray;
-    line-height: 32px;
+    line-height: 28px;
     vertical-align: middle;
   }
   .image {
@@ -257,7 +263,9 @@ export default {
   .status-account-name {
     display: inline-block;
     margin: 0;
-    height: 22px;
+    height: 28px;
+    font-size: 15px;
+    font-weight: 500;
   }
   .status-body {
     display: flex;
diff --git a/src/lang/en.js b/src/lang/en.js
index 7eee1950..c1f610a1 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -239,7 +239,7 @@ export default {
     confirmAccount: 'Confirm account',
     confirmAccounts: 'Confirm accounts',
     resendConfirmation: 'Resend confirmation email',
-    invalidUser: 'This account is invalid and can\'t be modified',
+    invalidAccount: 'This account has invalid nickname and can\'t be modified',
     invalidNickname: 'invalid nickname'
   },
   statuses: {
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index cead25a5..cd938c91 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -10,9 +10,9 @@
         <el-card class="report">
           <div class="report-header-container">
             <div class="title-container">
-              <h3 v-if="isValid(report.account)" class="report-title">{{ $t('reports.reportOn') }} {{ report.account.nickname }}</h3>
+              <h3 v-if="propertyExists(report.account, 'nickname')" class="report-title">{{ $t('reports.reportOn') }} {{ report.account.nickname }}</h3>
               <h3 v-else class="report-title">{{ $t('reports.report') }}</h3>
-              <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
+              <h5 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
             </div>
             <div>
               <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
@@ -24,26 +24,26 @@
                   <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
-              <moderate-user-dropdown v-if="isValid(report.account)" :account="report.account"/>
+              <moderate-user-dropdown v-if="propertyExists(report.account, 'nickname')" :account="report.account"/>
             </div>
           </div>
           <div>
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.account') }}:</span>
-            <span v-if="isValid(report.account)">
-              <img
-                :src="report.account.avatar"
-                alt="avatar"
-                class="avatar-img">
-              <a v-if="isValid(report.account)" :href="report.account.url" target="_blank" class="account">
-                <span>{{ report.account.nickname }}</span>
-              </a>
-              <span v-else>
+            <img
+              v-if="propertyExists(report.account, 'avatar')"
+              :src="report.account.avatar"
+              alt="avatar"
+              class="avatar-img">
+            <a v-if="propertyExists(report.account, 'url', 'nickname')" :href="report.account.url" target="_blank" class="account">
+              <span class="report-account-name">{{ report.account.nickname }}</span>
+            </a>
+            <span v-else>
+              <span v-if="propertyExists(report.account, 'nickname')" class="report-account-name">
                 {{ report.account.nickname }}
-                <span class="deactivated"> (deactivated)</span>
               </span>
+              <span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
             </span>
-            <span v-else class="deactivated">({{ $t('reports.notFound') }})</span>
           </div>
           <div v-if="report.content && report.content.length > 0">
             <el-divider class="divider"/>
@@ -54,16 +54,20 @@
           <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
-            <span v-if="isValid(report.actor)">
-              <img
-                :src="report.actor.avatar"
-                alt="avatar"
-                class="avatar-img">
-              <a :href="report.actor.url" target="_blank" class="account">
-                <span>{{ report.actor.nickname }}</span>
-              </a>
+            <img
+              v-if="propertyExists(report.actor, 'avatar')"
+              :src="report.actor.avatar"
+              alt="avatar"
+              class="avatar-img">
+            <a v-if="propertyExists(report.actor, 'url', 'nickname')" :href="report.actor.url" target="_blank" class="account">
+              <span class="report-account-name">{{ report.actor.nickname }}</span>
+            </a>
+            <span v-else>
+              <span v-if="propertyExists(report.actor, 'nickname')" class="report-account-name">
+                {{ report.actor.nickname }}
+              </span>
+              <span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
             </span>
-            <span v-else class="deactivated">({{ $t('reports.notFound') }})</span>
           </div>
           <div v-if="showStatuses(report.statuses)" class="statuses">
             <el-collapse>
@@ -171,12 +175,15 @@ export default {
     handlePageChange(page) {
       this.$store.dispatch('FetchReports', page)
     },
-    isValid(account) {
-      return account.nickname && account.id
-    },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     },
+    propertyExists(account, property, _secondProperty) {
+      if (_secondProperty) {
+        return account[property] && account[_secondProperty]
+      }
+      return account[property]
+    },
     showStatuses(statuses = []) {
       return statuses.length > 0
     }
@@ -262,6 +269,10 @@ export default {
     font-style: italic;
     color: gray;
   }
+  .report-account-name {
+    font-size: 15px;
+    font-weight: 500;
+  }
   .report-row-key {
     font-size: 14px;
     font-weight: 500;
diff --git a/src/views/users/components/MultipleUsersMenu.vue b/src/views/users/components/MultipleUsersMenu.vue
index 70883598..8af223fd 100644
--- a/src/views/users/components/MultipleUsersMenu.vue
+++ b/src/views/users/components/MultipleUsersMenu.vue
@@ -165,33 +165,33 @@ export default {
       }
       return {
         grantRight: (right) => () => {
-          const filterUsersFn = user => this.isValid(user) && user.local && !user.roles[right] && this.$store.state.user.id !== user.id
+          const filterUsersFn = user => this.isLocalUser(user) && !user.roles[right] && this.$store.state.user.id !== user.id
           const addRightFn = async(users) => await this.$store.dispatch('AddRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
           applyAction(filtered, addRightFn)
         },
         revokeRight: (right) => () => {
-          const filterUsersFn = user => this.isValid(user) && user.local && user.roles[right] && this.$store.state.user.id !== user.id
+          const filterUsersFn = user => this.isLocalUser(user) && user.roles[right] && this.$store.state.user.id !== user.id
           const deleteRightFn = async(users) => await this.$store.dispatch('DeleteRight', { users, right })
           const filtered = this.selectedUsers.filter(filterUsersFn)
 
           applyAction(filtered, deleteRightFn)
         },
         activate: () => {
-          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.deactivated && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => user.nickname && user.deactivated && this.$store.state.user.id !== user.id)
           const activateUsersFn = async(users) => await this.$store.dispatch('ActivateUsers', { users })
 
           applyAction(filtered, activateUsersFn)
         },
         deactivate: () => {
-          const filtered = this.selectedUsers.filter(user => this.isValid(user) && !user.deactivated && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => user.nickname && !user.deactivated && this.$store.state.user.id !== user.id)
           const deactivateUsersFn = async(users) => await this.$store.dispatch('DeactivateUsers', { users })
 
           applyAction(filtered, deactivateUsersFn)
         },
         remove: () => {
-          const filtered = this.selectedUsers.filter(user => this.isValid(user) && this.$store.state.user.id !== user.id)
+          const filtered = this.selectedUsers.filter(user => user.nickname && this.$store.state.user.id !== user.id)
           const deleteAccountFn = async(users) => await this.$store.dispatch('DeleteUsers', { users })
 
           applyAction(filtered, deleteAccountFn)
@@ -199,42 +199,42 @@ export default {
         addTag: (tag) => () => {
           const filtered = this.selectedUsers.filter(user =>
             tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? this.isValid(user) && user.local && !user.tags.includes(tag)
-              : this.isValid(user) && !user.tags.includes(tag))
+              ? this.isLocalUser(user) && !user.tags.includes(tag)
+              : user.nickname && !user.tags.includes(tag))
           const addTagFn = async(users) => await this.$store.dispatch('AddTag', { users, tag })
           applyAction(filtered, addTagFn)
         },
         removeTag: (tag) => async() => {
           const filtered = this.selectedUsers.filter(user =>
             tag === 'disable_remote_subscription' || tag === 'disable_any_subscription'
-              ? this.isValid(user) && user.local && user.tags.includes(tag)
-              : this.isValid(user) && user.tags.includes(tag))
+              ? this.isLocalUser(user) && user.tags.includes(tag)
+              : user.nickname && user.tags.includes(tag))
           const removeTagFn = async(users) => await this.$store.dispatch('RemoveTag', { users, tag })
 
           applyAction(filtered, removeTagFn)
         },
         requirePasswordReset: () => {
-          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.local)
+          const filtered = this.selectedUsers.filter(user => this.isLocalUser(user))
           const requirePasswordResetFn = async(users) => await this.$store.dispatch('RequirePasswordReset', users)
 
           applyAction(filtered, requirePasswordResetFn)
         },
         confirmAccounts: () => {
-          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.local && user.confirmation_pending)
+          const filtered = this.selectedUsers.filter(user => this.isLocalUser(user) && user.confirmation_pending)
           const confirmAccountFn = async(users) => await this.$store.dispatch('ConfirmUsersEmail', { users })
 
           applyAction(filtered, confirmAccountFn)
         },
         resendConfirmation: () => {
-          const filtered = this.selectedUsers.filter(user => this.isValid(user) && user.local && user.confirmation_pending)
+          const filtered = this.selectedUsers.filter(user => this.isLocalUser(user) && user.confirmation_pending)
           const resendConfirmationFn = async(users) => await this.$store.dispatch('ResendConfirmationEmail', users)
 
           applyAction(filtered, resendConfirmationFn)
         }
       }
     },
-    isValid(user) {
-      return user.nickname && user.id
+    isLocalUser(user) {
+      return user.nickname && user.local
     },
     grantRightToMultipleUsers(right) {
       const { grantRight } = this.mappers()
diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index d2f5d00c..91893560 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -76,11 +76,14 @@
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
           <moderation-dropdown
-            v-if="isValid(scope.row)"
+            v-if="propertyExists(scope.row, 'nickname')"
             :user="scope.row"
             :page="'users'"
             @open-reset-token-dialog="openResetPasswordDialog"/>
-          <span v-else class="invalid-user">{{ $t('users.invalidUser') }}</span>
+          <el-button v-else type="text" disabled>
+            {{ $t('users.moderation') }}
+            <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -217,12 +220,12 @@ export default {
     handleSelectionChange(value) {
       this.$data.selectedUsers = value
     },
-    isValid(user) {
-      return user.nickname && user.id
-    },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
     },
+    propertyExists(account, property) {
+      return account[property]
+    },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id
     }
@@ -262,7 +265,7 @@ export default {
 .create-account > .el-icon-plus {
   margin-right: 5px;
 }
-.invalid-user {
+.invalid-account {
   color: gray;
 }
 .users-header-container {
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index c8a71b08..ff8fd75e 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -2,13 +2,13 @@
   <main v-if="!userProfileLoading">
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
-        <el-avatar :src="user.avatar" size="large" />
-        <h1 v-if="isValid(user)">{{ user.nickname }}</h1>
+        <el-avatar v-if="propertyExists(user, 'avatar')" :src="user.avatar" size="large" />
+        <h1 v-if="propertyExists(user, 'nickname')">{{ user.nickname }}</h1>
         <h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
       </div>
       <div class="left-header-container">
         <moderation-dropdown
-          v-if="isValid(user)"
+          v-if="propertyExists(user, 'nickname')"
           :user="user"
           :page="'userPage'"
           @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -18,14 +18,14 @@
     <div v-if="isMobile" class="user-page-header-container">
       <header class="user-page-header">
         <div class="avatar-name-container">
-          <el-avatar :src="user.avatar" size="large" />
-          <h1 v-if="isValid(user)">{{ user.nickname }}</h1>
+          <el-avatar v-if="propertyExists(user, 'avatar')" :src="user.avatar" size="large" />
+          <h1 v-if="propertyExists(user, 'nickname')">{{ user.nickname }}</h1>
           <h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
         </div>
         <reboot-button/>
       </header>
       <moderation-dropdown
-        v-if="isValid(user)"
+        v-if="propertyExists(user, 'nickname')"
         :user="user"
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
@@ -46,17 +46,11 @@
     <div class="user-profile-container">
       <el-card class="user-profile-card">
         <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
-          <el-tag v-if="!isValid(user)" type="info" class="invalid-user-tag">
-            {{ $t('users.invalidUser') }}
+          <el-tag v-if="!propertyExists(user, 'nickname')" type="info" class="invalid-user-tag">
+            {{ $t('users.invalidAccount') }}
           </el-tag>
           <table class="user-profile-table">
             <tbody>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.nickname') }}</td>
-                <td>
-                  {{ user.nickname }}
-                </td>
-              </tr>
               <tr class="el-table__row">
                 <td class="name-col">ID</td>
                 <td class="value-col">
@@ -66,8 +60,8 @@
               <tr class="el-table__row">
                 <td>{{ $t('userProfile.tags') }}</td>
                 <td>
-                  <el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
-                  <span v-if="user.tags.length === 0">—</span>
+                  <span v-if="user.tags.length === 0 || !propertyExists(user, 'tags')">—</span>
+                  <el-tag v-for="tag in user.tags" v-else :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
                 </td>
               </tr>
               <tr class="el-table__row">
@@ -79,7 +73,7 @@
                   <el-tag v-if="user.roles.moderator" class="user-profile-tag">
                     {{ $t('users.moderator') }}
                   </el-tag>
-                  <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
+                  <span v-if="!propertyExists(user, 'roles') || (!user.roles.moderator && !user.roles.admin)">—</span>
                 </td>
               </tr>
               <tr class="el-table__row">
@@ -99,11 +93,11 @@
             </tbody>
           </table>
         </div>
-        <el-button v-if="isValid(user)" icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
+        <el-button v-if="propertyExists(user, 'nickname')" icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
           {{ $t('userProfile.securitySettings.securitySettings') }}
         </el-button>
         <SecuritySettingsModal
-          v-if="isValid(user)"
+          v-if="propertyExists(user, 'nickname')"
           :user="user"
           :visible="securitySettingsModalVisible"
           @close="securitySettingsModalVisible = false" />
@@ -185,14 +179,14 @@ export default {
       this.resetPasswordDialogOpen = false
       this.$store.dispatch('RemovePasswordToken')
     },
-    isValid(user) {
-      return user.nickname && user.id
-    },
     onTogglePrivate() {
       this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate })
     },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
+    },
+    propertyExists(account, property) {
+      return account[property]
     }
   }
 }

From 727f72f0583a89e6ddeb8e1f2da5d441d29320b0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 6 Jun 2020 22:17:15 +0300
Subject: [PATCH 12/18] Add confirmation fot note deletion

---
 src/views/reports/components/NoteCard.vue     | 54 +++++++++++--------
 .../users/components/ModerationDropdown.vue   |  4 +-
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/views/reports/components/NoteCard.vue b/src/views/reports/components/NoteCard.vue
index b4fc6225..a2a6a427 100644
--- a/src/views/reports/components/NoteCard.vue
+++ b/src/views/reports/components/NoteCard.vue
@@ -2,22 +2,14 @@
   <el-card class="note-card">
     <div slot="header">
       <div class="note-header">
-        <div class="note-actor-container">
-          <div class="note-actor">
-            <img v-if="isValid(note.user)" :src="note.user.avatar" class="note-avatar-img">
-            <h3 v-if="isValid(note.user)" class="note-actor-name">{{ note.user.nickname }}</h3>
-          </div>
+        <div class="note-actor">
+          <img v-if="propertyExists(note.user, 'avatar')" :src="note.user.avatar" class="note-avatar-img">
+          <span v-if="propertyExists(note.user, 'nickname')" class="note-actor-name">{{ note.user.nickname }}</span>
         </div>
         <div>
-          <el-popconfirm
-            title="Are you sure to delete this?"
-            confirm-button-text="Yes"
-            cancel-button-text="No"
-            @onConfirm="handleNoteDeletion(note.id, report.id)">
-            <el-button slot="reference" size="mini">
-              {{ $t('reports.deleteNote') }}
-            </el-button>
-          </el-popconfirm>
+          <el-button size="mini" @click.native="handleNoteDeletion(note.id, report.id)">
+            {{ $t('reports.deleteNote') }}
+          </el-button>
         </div>
       </div>
     </div>
@@ -44,14 +36,29 @@ export default {
     }
   },
   methods: {
-    isValid(account) {
-      return account.nickname && account.id
+    handleNoteDeletion(noteID, reportID) {
+      this.$confirm('Are you sure you want to delete this note?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('DeleteReportNote', { noteID, reportID })
+        this.$message({
+          type: 'success',
+          message: 'Delete completed'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Delete canceled'
+        })
+      })
     },
     parseTimestamp(timestamp) {
       return moment(timestamp).format('YYYY-MM-DD HH:mm')
     },
-    handleNoteDeletion(noteID, reportID) {
-      this.$store.dispatch('DeleteReportNote', { noteID, reportID })
+    propertyExists(account, property) {
+      return account[property]
     }
   }
 }
@@ -76,7 +83,7 @@ export default {
   }
   .note-actor-name {
     margin: 0;
-    height: 22px;
+    height: 28px;
   }
   .note-avatar-img {
     width: 15px;
@@ -96,6 +103,10 @@ export default {
   .note-header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    height: 28px;
+    font-size: 15px;
+    font-weight: 500;
   }
 
   @media only screen and (max-width:480px) {
@@ -105,14 +116,15 @@ export default {
     .note-header {
       display: flex;
       flex-direction: column;
-      height: 80px;
+      height: 65px;
     }
-    .note-actor-container {
+    .note-actor {
       margin-bottom: 5px;
     }
     .note-header {
       display: flex;
       flex-direction: column;
+      align-items: flex-start;
     }
   }
 </style>
diff --git a/src/views/users/components/ModerationDropdown.vue b/src/views/users/components/ModerationDropdown.vue
index b385fdbe..57d56562 100644
--- a/src/views/users/components/ModerationDropdown.vue
+++ b/src/views/users/components/ModerationDropdown.vue
@@ -1,10 +1,10 @@
 <template>
   <el-dropdown :hide-on-click="false" size="small" trigger="click" @click.native.stop>
     <div>
-      <span v-if="page === 'users'" class="el-dropdown-link">
+      <el-button v-if="page === 'users'" type="text" class="el-dropdown-link">
         {{ $t('users.moderation') }}
         <i v-if="isDesktop" class="el-icon-arrow-down el-icon--right"/>
-      </span>
+      </el-button>
       <el-button v-if="page === 'userPage'" class="moderate-user-button">
         <span class="moderate-user-button-container">
           <span>

From e211e26d16f604dec5337fae2f3afb35ef9294ca Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 6 Jun 2020 22:33:08 +0300
Subject: [PATCH 13/18] Fix tests

---
 src/api/__mocks__/reports.js      | 18 +++++++++---------
 src/api/__mocks__/status.js       |  6 +++---
 src/api/__mocks__/users.js        |  2 +-
 test/views/statuses/index.test.js |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/api/__mocks__/reports.js b/src/api/__mocks__/reports.js
index 5c6fe3a1..5d2e2097 100644
--- a/src/api/__mocks__/reports.js
+++ b/src/api/__mocks__/reports.js
@@ -1,14 +1,14 @@
 const reports = [
-  { created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '2', content: 'This is a report', statuses: [] },
-  { created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '3', content: '', statuses: [] },
-  { created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '5', content: 'This is a report', statuses: [] },
-  { created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
-    { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'public', sensitive: false, id: '11', content: 'Hey!', url: '', created_at: '2019-05-10T21:35:33.000Z' },
-    { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'unlisted', sensitive: true, id: '10', content: 'Bye!', url: '', created_at: '2019-05-10T21:00:33.000Z' }
+  { created_at: '2019-05-21T21:35:33.000Z', account: { nickname: 'benjamin', tags: [] }, actor: {}, state: 'open', id: '2', content: 'This is a report', statuses: [] },
+  { created_at: '2019-05-20T22:45:33.000Z', account: { nickname: 'alice', tags: [] }, actor: {}, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
+  { created_at: '2019-05-18T13:01:33.000Z', account: { nickname: 'nick_keys', tags: [] }, actor: {}, state: 'closed', id: '3', content: '', statuses: [] },
+  { created_at: '2019-05-21T21:35:33.000Z', account: { nickname: 'benjamin', tags: [] }, actor: {}, state: 'open', id: '5', content: 'This is a report', statuses: [] },
+  { created_at: '2019-05-20T22:45:33.000Z', account: { nickname: 'alice', tags: [] }, actor: {}, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
+    { account: { nickname: 'alice', avatar: '' }, visibility: 'public', sensitive: false, id: '11', content: 'Hey!', url: '', created_at: '2019-05-10T21:35:33.000Z' },
+    { account: { nickname: 'alice', avatar: '' }, visibility: 'unlisted', sensitive: true, id: '10', content: 'Bye!', url: '', created_at: '2019-05-10T21:00:33.000Z' }
   ] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '6', content: '', statuses: [] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '4', content: '', statuses: [] }
+  { created_at: '2019-05-18T13:01:33.000Z', account: { nickname: 'nick_keys', tags: [] }, actor: {}, state: 'closed', id: '6', content: '', statuses: [] },
+  { created_at: '2019-05-18T13:01:33.000Z', account: { nickname: 'nick_keys', tags: [] }, actor: {}, state: 'closed', id: '4', content: '', statuses: [] }
 ]
 
 export async function fetchReports(filter, page, pageSize, authHost, token) {
diff --git a/src/api/__mocks__/status.js b/src/api/__mocks__/status.js
index c8f98545..ec5271cc 100644
--- a/src/api/__mocks__/status.js
+++ b/src/api/__mocks__/status.js
@@ -13,7 +13,7 @@ export async function fetchStatusesByInstance({ instance, authHost, token, pageS
       ? [{
         'account': {
           'avatar': 'http://localhost:4000/images/avi.png',
-          'display_name': 'sky',
+          'nickname': 'sky',
           'url': 'http://localhost:4000/users/sky'
         },
         'content': 'A nice young couple contacted us from Brazil to decorate their newly acquired apartment.',
@@ -29,7 +29,7 @@ export async function fetchStatusesByInstance({ instance, authHost, token, pageS
       {
         'account': {
           'avatar': 'http://localhost:4000/images/avi.png',
-          'display_name': 'sky',
+          'nickname': 'sky',
           'url': 'http://localhost:4000/users/sky'
         },
         'content': 'A nice young couple contacted us from Brazil to decorate their newly acquired apartment.',
@@ -42,7 +42,7 @@ export async function fetchStatusesByInstance({ instance, authHost, token, pageS
       {
         'account': {
           'avatar': 'http://localhost:4000/images/avi.png',
-          'display_name': 'sky',
+          'nickname': 'sky',
           'url': 'http://localhost:4000/users/sky'
         },
         'content': 'the happiest man ever',
diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 9a3afd41..3e4975ef 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -4,7 +4,7 @@ export let users = [
   { active: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['strip_media'] }
 ]
 
-const userProfile = { avatar: 'avatar.jpg', display_name: 'Allis', nickname: 'allis', id: '2', tags: [], roles: { admin: true, moderator: false }, local: true, external: false }
+const userProfile = { avatar: 'avatar.jpg', nickname: 'allis', id: '2', tags: [], roles: { admin: true, moderator: false }, local: true, external: false }
 
 const userStatuses = []
 
diff --git a/test/views/statuses/index.test.js b/test/views/statuses/index.test.js
index e6173883..62921650 100644
--- a/test/views/statuses/index.test.js
+++ b/test/views/statuses/index.test.js
@@ -73,7 +73,7 @@ describe('Statuses', () => {
     await flushPromises()
 
     expect(wrapper.vm.selectedUsers.length).toEqual(1)
-    expect(wrapper.vm.selectedUsers[0].display_name).toBe('sky')
+    expect(wrapper.vm.selectedUsers[0].nickname).toBe('sky')
     done()
   })
 

From d3b1191fb2d36282f9ba7dd3ae4811e5faa6587e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 6 Jun 2020 22:50:43 +0300
Subject: [PATCH 14/18] Update Changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f51d123..d604a408 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add a dialog window with a confirmation when a remove button is clicked on the Settings page
 - Disable tab on the Settings page if there are no settings on this tab that can be changed in Admin FE
 - Settings that can't be altered in Admin FE are removed: HTTP Signatures settings, Federation publisher modules and Oban Repo
+- When rendering user's profile, statuses, reports and notes check if required properties exist
+- Remove ability to moderate users that don't have valid nickname
 
 ### Fixed
 

From cd126c107f0a3d43fa3f6d40e241bcc75d3a1bbf Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 6 Jun 2020 23:02:06 +0300
Subject: [PATCH 15/18] Remove unnecessary styles

---
 src/views/users/index.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/views/users/index.vue b/src/views/users/index.vue
index 91893560..c5ffe46c 100644
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@@ -265,9 +265,6 @@ export default {
 .create-account > .el-icon-plus {
   margin-right: 5px;
 }
-.invalid-account {
-  color: gray;
-}
 .users-header-container {
   display: flex;
   align-items: center;

From b48e047a070f45ea4391a3413ecda0d5ce761f1d Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 7 Jun 2020 00:37:28 +0300
Subject: [PATCH 16/18] Fix tests

---
 src/api/__mocks__/status.js      | 2 +-
 src/api/__mocks__/users.js       | 6 +++---
 test/views/statuses/show.test.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/api/__mocks__/status.js b/src/api/__mocks__/status.js
index ec727650..0fa2ccf5 100644
--- a/src/api/__mocks__/status.js
+++ b/src/api/__mocks__/status.js
@@ -11,7 +11,7 @@ export async function fetchStatus(id, authHost, token) {
     account: {
       id: '9n1bySks25olxWrku0',
       avatar: 'http://localhost:4000/images/avi.png',
-      display_name: 'dolin',
+      nickname: 'dolin',
       tags: ['strip_media', 'sandbox', 'disable_any_subscription', 'force_nsfw'],
       url: 'http://localhost:4000/users/dolin'
     },
diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 99f32543..7d4172d6 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -7,9 +7,9 @@ export let users = [
 const userProfile = { avatar: 'avatar.jpg', nickname: 'allis', id: '2', tags: [], roles: { admin: true, moderator: false }, local: true, external: false }
 
 const userStatuses = [
-  { account: { id: '9n1bySks25olxWrku0', display_name: 'dolin' }, content: 'pizza makes everything better', id: '9vJOO3iFPyjNaEhJ5s', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' },
-  { account: { id: '9n1bySks25olxWrku0', display_name: 'dolin' }, content: 'pizza time', id: '9vJPD5XKOdzQ0bvGLY', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' },
-  { account: { id: '9n1bySks25olxWrku0', display_name: 'dolin' }, content: 'what is yout favorite pizza?', id: '9jop82OBXeFPYulVjM', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' }
+  { account: { id: '9n1bySks25olxWrku0', nickname: 'dolin' }, content: 'pizza makes everything better', id: '9vJOO3iFPyjNaEhJ5s', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' },
+  { account: { id: '9n1bySks25olxWrku0', nickname: 'dolin' }, content: 'pizza time', id: '9vJPD5XKOdzQ0bvGLY', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' },
+  { account: { id: '9n1bySks25olxWrku0', nickname: 'dolin' }, content: 'what is yout favorite pizza?', id: '9jop82OBXeFPYulVjM', created_at: '2020-05-22T17:34:34.000Z', visibility: 'public' }
 ]
 
 const filterUsers = (str) => {
diff --git a/test/views/statuses/show.test.js b/test/views/statuses/show.test.js
index 6bf4fdff..66da0712 100644
--- a/test/views/statuses/show.test.js
+++ b/test/views/statuses/show.test.js
@@ -45,7 +45,7 @@ describe('Status show page', () => {
 
     expect(wrapper.find('.status-container').isVisible()).toBe(true)
     expect(store.state.status.fetchedStatus.id).toBe('9vJOO3iFPyjNaEhJ5s')
-    expect(store.state.status.fetchedStatus.account.display_name).toBe('dolin')
+    expect(store.state.status.fetchedStatus.account.nickname).toBe('dolin')
     expect(store.state.userProfile.statuses.length).toEqual(3)
     done()
   })
@@ -81,7 +81,7 @@ describe('Status show page', () => {
     await flushPromises()
 
     expect(wrapper.find('.status-card').exists()).toBe(true)
-    expect(wrapper.find('router-link-stub h3').text()).toBe('dolin')
+    expect(wrapper.find('router-link-stub span.status-account-name').text()).toBe('dolin')
     expect(wrapper.find('span.el-tag').text()).not.toBe('Sensitive')
     expect(wrapper.find('span.el-tag').text()).toBe('Public')
     expect(wrapper.find('button.status-actions-button').exists()).toBe(true)

From 5554413a7c29e8c7a06dd10f8f1d30e5913a9dea Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 7 Jun 2020 00:58:51 +0300
Subject: [PATCH 17/18] Standardize function names, replace display_name with
 nickname on Status show page

---
 src/components/Status/index.vue |  1 -
 src/views/statuses/show.vue     | 28 ++++++++++++++++++----------
 src/views/users/show.vue        |  4 ++--
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/Status/index.vue b/src/components/Status/index.vue
index 90185840..292e8e68 100644
--- a/src/components/Status/index.vue
+++ b/src/components/Status/index.vue
@@ -280,7 +280,6 @@ export default {
   .status-account-name {
     display: inline-block;
     margin: 0;
-    height: 28px;
     font-size: 15px;
     font-weight: 500;
   }
diff --git a/src/views/statuses/show.vue b/src/views/statuses/show.vue
index 8ae05bcb..d6136129 100644
--- a/src/views/statuses/show.vue
+++ b/src/views/statuses/show.vue
@@ -2,13 +2,14 @@
   <div v-if="!loading" class="status-show-container">
     <header v-if="isDesktop || isTablet" class="user-page-header">
       <div class="avatar-name-container">
-        <router-link :to="{ name: 'UsersShow', params: { id: user.id }}">
+        <router-link v-if="propertyExists(user, 'id')" :to="{ name: 'UsersShow', params: { id: user.id }}">
           <div class="avatar-name-header">
-            <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
-            <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+            <el-avatar v-if="propertyExists(user, 'avatar')" :src="user.avatar" size="large" />
+            <h1 v-if="propertyExists(user, 'nickname')">{{ user.nickname }}</h1>
+            <h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
           </div>
         </router-link>
-        <a v-if="accountExists(user, 'url')" :href="user.url" target="_blank" class="account">
+        <a v-if="propertyExists(user, 'url')" :href="user.url" target="_blank" class="account">
           <i class="el-icon-top-right" title="Open user in instance"/>
         </a>
       </div>
@@ -24,8 +25,8 @@
     <div v-if="isMobile" class="status-page-header-container">
       <header class="user-page-header">
         <div class="avatar-name-container">
-          <el-avatar v-if="accountExists(user, 'avatar')" :src="user.avatar" size="large" />
-          <h1 v-if="accountExists(user, 'display_name')">{{ user.display_name }}</h1>
+          <el-avatar v-if="propertyExists(user, 'avatar')" :src="user.avatar" size="large" />
+          <h1 v-if="propertyExists(user, 'nickname')">{{ user.nickname }}</h1>
         </div>
         <reboot-button/>
       </header>
@@ -41,7 +42,10 @@
       <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
     </div>
     <div class="recent-statuses-container-show">
-      <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }} by {{ user.display_name }}</h2>
+      <h2 v-if="propertyExists(user, 'nickname')" class="recent-statuses">
+        {{ $t('userProfile.recentStatuses') }} by {{ user.nickname }}
+      </h2>
+      <h2 v-else class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
       <el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
         {{ $t('statuses.showPrivateStatuses') }}
       </el-checkbox>
@@ -102,9 +106,6 @@ export default {
     this.$store.dispatch('FetchStatus', this.$route.params.id)
   },
   methods: {
-    accountExists(account, key) {
-      return account[key]
-    },
     closeResetPasswordDialog() {
       this.resetPasswordDialogOpen = false
       this.$store.dispatch('RemovePasswordToken')
@@ -114,6 +115,9 @@ export default {
     },
     openResetPasswordDialog() {
       this.resetPasswordDialogOpen = true
+    },
+    propertyExists(account, property) {
+      return account[property]
     }
   }
 }
@@ -134,6 +138,9 @@ export default {
   height: 40px;
   align-items: center;
 }
+.invalid {
+  color: gray;
+}
 .no-statuses {
   margin-left: 28px;
   color: #606266;
@@ -176,6 +183,7 @@ export default {
   display: flex;
   justify-content: space-between;
   margin: 22px 15px 22px 20px;
+  padding: 0;
   align-items: center;
   h1 {
     display: inline;
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 0e1fd5f0..872883ef 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -209,8 +209,8 @@ table {
   align-items: center;
 }
 .invalid {
-    color: gray;
-  }
+  color: gray;
+}
 .el-table--border::after, .el-table--group::after, .el-table::before {
   background-color: transparent;
 }

From 2d6ff4d6107f7ea92a1efb9982e896da28363149 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 7 Jun 2020 01:09:34 +0300
Subject: [PATCH 18/18] Add translation, fix tag display

---
 src/lang/en.js                                     | 4 +++-
 src/views/users/components/ResetPasswordDialog.vue | 4 ++--
 src/views/users/show.vue                           | 5 +++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 3907cec0..291bbde3 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -240,7 +240,9 @@ export default {
     confirmAccounts: 'Confirm accounts',
     resendConfirmation: 'Resend confirmation email',
     invalidAccount: 'This account has invalid nickname and can\'t be modified',
-    invalidNickname: 'invalid nickname'
+    invalidNickname: 'invalid nickname',
+    passwordResetTokenGenerated: 'Password reset token was generated:',
+    linkToResetPassword: 'You can also use this link to reset password:'
   },
   statuses: {
     statuses: 'Statuses',
diff --git a/src/views/users/components/ResetPasswordDialog.vue b/src/views/users/components/ResetPasswordDialog.vue
index b70f289d..f47886cc 100644
--- a/src/views/users/components/ResetPasswordDialog.vue
+++ b/src/views/users/components/ResetPasswordDialog.vue
@@ -6,8 +6,8 @@
     custom-class="password-reset-token-dialog"
     @close="closeResetPasswordDialog">
     <div>
-      <p class="password-reset-token">Password reset token was generated: {{ passwordResetToken }}</p>
-      <p>You can also use this link to reset password:
+      <p class="password-reset-token">{{ $t('users.passwordResetTokenGenerated') }} {{ passwordResetToken }}</p>
+      <p>{{ $t('users.linkToResetPassword') }}
         <a :href="passwordResetLink" target="_blank" class="reset-password-link">{{ passwordResetLink }}</a>
       </p>
     </div>
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 872883ef..424096b9 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -51,7 +51,7 @@
                 <td>{{ $t('userProfile.tags') }}</td>
                 <td>
                   <span v-if="user.tags.length === 0 || !propertyExists(user, 'tags')">—</span>
-                  <el-tag v-for="tag in user.tags" v-else :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
+                  <el-tag v-for="tag in user.tags" v-else :key="tag" class="user-profile-tag">{{ humanizeTag(tag) }}</el-tag>
                 </td>
               </tr>
               <tr class="el-table__row">
@@ -286,7 +286,8 @@ table {
 .user-page-header {
   display: flex;
   justify-content: space-between;
-  padding: 0 15px 0 20px;
+  margin: 22px 15px 22px 20px;
+  padding: 0;
   align-items: center;
   h1 {
     display: inline