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] 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;
 }