Update user profile page for users without valid nickame

This commit is contained in:
Angelina Filippova 2020-06-01 01:43:03 +03:00
parent 1fa258ff23
commit 54f6c90f06
3 changed files with 21 additions and 13 deletions

View file

@ -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%;

View file

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

View file

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