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] 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',