AkkomaGang/admin-fe
6
2
Fork 9
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

Update user profile page for users without valid nickame

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/Status/index.vue
View file

@ -6,16 +6,14 @@
<div class="status-account-container"> <div class="status-account-container">
<div class="status-account"> <div class="status-account">
<el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/> <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
<img :src="account.avatar" class="status-avatar-img"> <img v-if="isValid(account)" :src="account.avatar" class="status-avatar-img">
<a v-if="!account.deactivated" :href="account.url" target="_blank" class="account"> <a v-if="isValid(account)" :href="account.url" target="_blank" class="account">
<h3 class="status-account-name">{{ account.display_name }}</h3> <h3 class="status-account-name">{{ account.nickname }}</h3>
</a> </a>
<span v-else> <span v-else class="deactivated">
<h3 class="status-account-name">{{ account.display_name }}</h3> <h3 class="status-account-name">({{ $t('users.invalidNickname') }})</h3>
<h3 class="status-account-name deactivated"> (deactivated)</h3>
</span> </span>
</div> </div>
</div> </div>
<div class="status-actions"> <div class="status-actions">
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag> <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) { optionPercent(poll, pollOption) {
const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0) const allVotes = poll.options.reduce((acc, option) => (acc + option.votes_count), 0)
if (allVotes === 0) { if (allVotes === 0) {
@ -231,7 +232,8 @@ export default {
} }
.deactivated { .deactivated {
color: gray; color: gray;
font-size: 15px; line-height: 32px;
vertical-align: middle;
} }
.image { .image {
width: 20%; width: 20%;

3
src/lang/en.js
View file

@ -239,7 +239,8 @@ export default {
confirmAccount: 'Confirm account', confirmAccount: 'Confirm account',
confirmAccounts: 'Confirm accounts', confirmAccounts: 'Confirm accounts',
resendConfirmation: 'Resend confirmation email', 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: 'Statuses', statuses: 'Statuses',

13
src/views/users/show.vue
View file

@ -3,7 +3,8 @@
<header v-if="isDesktop || isTablet" class="user-page-header"> <header v-if="isDesktop || isTablet" class="user-page-header">
<div class="avatar-name-container"> <div class="avatar-name-container">
<el-avatar :src="user.avatar" size="large" /> <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>
<div class="left-header-container"> <div class="left-header-container">
<moderation-dropdown <moderation-dropdown
@ -18,7 +19,8 @@
<header class="user-page-header"> <header class="user-page-header">
<div class="avatar-name-container"> <div class="avatar-name-container">
<el-avatar :src="user.avatar" size="large" /> <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>
<reboot-button/> <reboot-button/>
</header> </header>
@ -97,10 +99,11 @@
</tbody> </tbody>
</table> </table>
</div> </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') }} {{ $t('userProfile.securitySettings.securitySettings') }}
</el-button> </el-button>
<SecuritySettingsModal <SecuritySettingsModal
v-if="isValid(user)"
:user="user" :user="user"
:visible="securitySettingsModalVisible" :visible="securitySettingsModalVisible"
@close="securitySettingsModalVisible = false" /> @close="securitySettingsModalVisible = false" />
@ -215,7 +218,9 @@ table {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.invalid {
color: gray;
}
.el-table--border::after, .el-table--group::after, .el-table::before { .el-table--border::after, .el-table--group::after, .el-table::before {
background-color: transparent; background-color: transparent;
} }