2019-07-24 20:50:45 +00:00
|
|
|
<template>
|
2019-11-28 11:04:05 +00:00
|
|
|
<main v-if="!userProfileLoading">
|
2020-04-17 22:27:00 +00:00
|
|
|
<header v-if="isDesktop || isTablet" class="user-page-header">
|
2020-01-27 16:41:16 +00:00
|
|
|
<div class="avatar-name-container">
|
2020-06-06 19:16:25 +00:00
|
|
|
<el-avatar v-if="propertyExists(user, 'avatar')" :src="user.avatar" size="large" />
|
|
|
|
<h1 v-if="propertyExists(user, 'nickname')">{{ user.nickname }}</h1>
|
2020-05-31 22:43:03 +00:00
|
|
|
<h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
|
2020-06-09 20:28:04 +00:00
|
|
|
<a v-if="propertyExists(user, 'url')" :href="user.url" target="_blank">
|
2020-06-09 22:49:20 +00:00
|
|
|
<i :title="$t('userProfile.openAccountInInstance')" class="el-icon-top-right"/>
|
2020-06-09 20:28:04 +00:00
|
|
|
</a>
|
2020-01-27 16:41:16 +00:00
|
|
|
</div>
|
2020-04-17 22:27:00 +00:00
|
|
|
<div class="left-header-container">
|
|
|
|
<moderation-dropdown
|
2020-06-06 19:16:25 +00:00
|
|
|
v-if="propertyExists(user, 'nickname')"
|
2020-04-17 22:27:00 +00:00
|
|
|
:user="user"
|
|
|
|
:page="'userPage'"
|
|
|
|
@open-reset-token-dialog="openResetPasswordDialog"/>
|
|
|
|
<reboot-button/>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div v-if="isMobile" class="user-page-header-container">
|
|
|
|
<header class="user-page-header">
|
|
|
|
<div class="avatar-name-container">
|
2020-06-06 19:16:25 +00:00
|
|
|
<el-avatar v-if="propertyExists(user, 'avatar')" :src="user.avatar" size="large" />
|
|
|
|
<h1 v-if="propertyExists(user, 'nickname')">{{ user.nickname }}</h1>
|
2020-05-31 22:43:03 +00:00
|
|
|
<h1 v-else class="invalid">({{ $t('users.invalidNickname') }})</h1>
|
2020-04-17 22:27:00 +00:00
|
|
|
</div>
|
|
|
|
<reboot-button/>
|
|
|
|
</header>
|
2020-01-28 16:38:56 +00:00
|
|
|
<moderation-dropdown
|
2020-06-06 19:16:25 +00:00
|
|
|
v-if="propertyExists(user, 'nickname')"
|
2020-01-28 16:38:56 +00:00
|
|
|
:user="user"
|
|
|
|
:page="'userPage'"
|
|
|
|
@open-reset-token-dialog="openResetPasswordDialog"/>
|
2020-04-17 22:27:00 +00:00
|
|
|
</div>
|
2020-05-20 19:40:25 +00:00
|
|
|
<reset-password-dialog
|
|
|
|
:reset-password-dialog-open="resetPasswordDialogOpen"
|
|
|
|
@close-reset-token-dialog="closeResetPasswordDialog"/>
|
2020-02-26 23:18:47 +00:00
|
|
|
<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">
|
2020-06-06 19:16:25 +00:00
|
|
|
<el-tag v-if="!propertyExists(user, 'nickname')" type="info" class="invalid-user-tag">
|
|
|
|
{{ $t('users.invalidAccount') }}
|
2020-05-30 19:24:56 +00:00
|
|
|
</el-tag>
|
2020-02-26 23:18:47 +00:00
|
|
|
<table class="user-profile-table">
|
|
|
|
<tbody>
|
|
|
|
<tr class="el-table__row">
|
|
|
|
<td class="name-col">ID</td>
|
|
|
|
<td class="value-col">
|
|
|
|
{{ user.id }}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="el-table__row">
|
|
|
|
<td>{{ $t('userProfile.tags') }}</td>
|
|
|
|
<td>
|
2020-06-06 19:16:25 +00:00
|
|
|
<span v-if="user.tags.length === 0 || !propertyExists(user, 'tags')">—</span>
|
2020-06-06 22:09:34 +00:00
|
|
|
<el-tag v-for="tag in user.tags" v-else :key="tag" class="user-profile-tag">{{ humanizeTag(tag) }}</el-tag>
|
2020-02-26 23:18:47 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="el-table__row">
|
|
|
|
<td>{{ $t('userProfile.roles') }}</td>
|
|
|
|
<td>
|
|
|
|
<el-tag v-if="user.roles.admin" class="user-profile-tag">
|
|
|
|
{{ $t('users.admin') }}
|
|
|
|
</el-tag>
|
|
|
|
<el-tag v-if="user.roles.moderator" class="user-profile-tag">
|
|
|
|
{{ $t('users.moderator') }}
|
|
|
|
</el-tag>
|
2020-06-06 19:16:25 +00:00
|
|
|
<span v-if="!propertyExists(user, 'roles') || (!user.roles.moderator && !user.roles.admin)">—</span>
|
2020-02-26 23:18:47 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="el-table__row">
|
2020-05-29 18:27:33 +00:00
|
|
|
<td>{{ $t('userProfile.accountType') }}</td>
|
2020-02-26 23:18:47 +00:00
|
|
|
<td>
|
|
|
|
<el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
|
|
|
|
<el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr class="el-table__row">
|
2020-05-29 18:27:33 +00:00
|
|
|
<td>{{ $t('userProfile.status') }}</td>
|
2020-02-26 23:18:47 +00:00
|
|
|
<td>
|
|
|
|
<el-tag v-if="!user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
|
|
|
|
<el-tag v-if="user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
2020-06-06 19:16:25 +00:00
|
|
|
<el-button v-if="propertyExists(user, 'nickname')" icon="el-icon-lock" class="security-setting-button" @click="securitySettingsModalVisible = true">
|
2020-03-25 23:21:26 +00:00
|
|
|
{{ $t('userProfile.securitySettings.securitySettings') }}
|
|
|
|
</el-button>
|
|
|
|
<SecuritySettingsModal
|
2020-06-06 19:16:25 +00:00
|
|
|
v-if="propertyExists(user, 'nickname')"
|
2020-03-25 23:21:26 +00:00
|
|
|
:user="user"
|
|
|
|
:visible="securitySettingsModalVisible"
|
|
|
|
@close="securitySettingsModalVisible = false" />
|
2020-02-26 23:18:47 +00:00
|
|
|
</el-card>
|
|
|
|
<div class="recent-statuses-container">
|
|
|
|
<h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
|
|
|
|
<el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
|
2020-02-28 22:02:40 +00:00
|
|
|
{{ $t('statuses.showPrivateStatuses') }}
|
2020-02-26 23:18:47 +00:00
|
|
|
</el-checkbox>
|
2019-11-28 11:04:05 +00:00
|
|
|
<el-timeline v-if="!statusesLoading" class="statuses">
|
|
|
|
<el-timeline-item v-for="status in statuses" :key="status.id">
|
2020-04-08 15:56:01 +00:00
|
|
|
<status :status="status" :account="status.account" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
|
2019-07-24 20:50:45 +00:00
|
|
|
</el-timeline-item>
|
2019-11-28 16:18:33 +00:00
|
|
|
<p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
|
2019-07-24 20:50:45 +00:00
|
|
|
</el-timeline>
|
2020-02-26 23:18:47 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-07-24 20:50:45 +00:00
|
|
|
</main>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-11-18 07:31:29 +00:00
|
|
|
import Status from '@/components/Status'
|
2020-01-27 16:41:16 +00:00
|
|
|
import ModerationDropdown from './components/ModerationDropdown'
|
2020-02-17 01:02:50 +00:00
|
|
|
import SecuritySettingsModal from './components/SecuritySettingsModal'
|
2020-04-17 22:27:00 +00:00
|
|
|
import RebootButton from '@/components/RebootButton'
|
2020-05-20 19:40:25 +00:00
|
|
|
import ResetPasswordDialog from './components/ResetPasswordDialog'
|
2019-11-28 11:04:05 +00:00
|
|
|
|
2019-07-24 20:50:45 +00:00
|
|
|
export default {
|
|
|
|
name: 'UsersShow',
|
2020-05-20 19:40:25 +00:00
|
|
|
components: { ModerationDropdown, RebootButton, ResetPasswordDialog, Status, SecuritySettingsModal },
|
2019-07-24 20:50:45 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2020-01-28 16:38:56 +00:00
|
|
|
showPrivate: false,
|
2020-02-17 01:02:50 +00:00
|
|
|
resetPasswordDialogOpen: false,
|
|
|
|
securitySettingsModalVisible: false
|
2019-07-24 20:50:45 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2020-04-17 22:27:00 +00:00
|
|
|
isDesktop() {
|
|
|
|
return this.$store.state.app.device === 'desktop'
|
|
|
|
},
|
|
|
|
isMobile() {
|
|
|
|
return this.$store.state.app.device === 'mobile'
|
|
|
|
},
|
|
|
|
isTablet() {
|
|
|
|
return this.$store.state.app.device === 'tablet'
|
|
|
|
},
|
2020-01-28 16:38:56 +00:00
|
|
|
loading() {
|
|
|
|
return this.$store.state.users.loading
|
|
|
|
},
|
2019-11-28 11:04:05 +00:00
|
|
|
statuses() {
|
|
|
|
return this.$store.state.userProfile.statuses
|
|
|
|
},
|
|
|
|
statusesLoading() {
|
|
|
|
return this.$store.state.userProfile.statusesLoading
|
2019-07-24 20:50:45 +00:00
|
|
|
},
|
|
|
|
user() {
|
|
|
|
return this.$store.state.userProfile.user
|
|
|
|
},
|
2019-11-28 11:04:05 +00:00
|
|
|
userProfileLoading() {
|
|
|
|
return this.$store.state.userProfile.userProfileLoading
|
2020-02-17 01:02:50 +00:00
|
|
|
},
|
|
|
|
userCredentials() {
|
|
|
|
return this.$store.state.userProfile.userCredentials
|
2019-07-24 20:50:45 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted: function() {
|
2020-04-17 22:27:00 +00:00
|
|
|
this.$store.dispatch('NeedReboot')
|
|
|
|
this.$store.dispatch('GetNodeInfo')
|
2019-11-28 11:04:05 +00:00
|
|
|
this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: false })
|
2019-07-24 20:50:45 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2020-01-28 16:38:56 +00:00
|
|
|
closeResetPasswordDialog() {
|
|
|
|
this.resetPasswordDialogOpen = false
|
|
|
|
this.$store.dispatch('RemovePasswordToken')
|
|
|
|
},
|
2020-05-29 19:33:33 +00:00
|
|
|
humanizeTag(tag) {
|
|
|
|
const mapTags = {
|
2020-08-02 17:20:27 +00:00
|
|
|
'mrf_tag:media-force-nsfw': 'Force NSFW',
|
|
|
|
'mrf_tag:media-strip': 'Strip Media',
|
|
|
|
'mrf_tag:force-unlisted': 'Force Unlisted',
|
|
|
|
'mrf_tag:sandbox': 'Sandbox',
|
|
|
|
'mrf_tag:disable-remote-subscription': 'Disable remote subscription',
|
|
|
|
'mrf_tag:disable-any-subscription': 'Disable any subscription'
|
2020-05-29 19:33:33 +00:00
|
|
|
}
|
|
|
|
return mapTags[tag]
|
|
|
|
},
|
2019-07-24 20:50:45 +00:00
|
|
|
onTogglePrivate() {
|
2019-11-28 11:04:05 +00:00
|
|
|
this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate })
|
2020-01-28 16:38:56 +00:00
|
|
|
},
|
|
|
|
openResetPasswordDialog() {
|
|
|
|
this.resetPasswordDialogOpen = true
|
2020-06-06 19:16:25 +00:00
|
|
|
},
|
|
|
|
propertyExists(account, property) {
|
|
|
|
return account[property]
|
2019-07-24 20:50:45 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2020-05-02 17:56:00 +00:00
|
|
|
<style rel='stylesheet/scss' lang='scss'>
|
2019-07-24 20:50:45 +00:00
|
|
|
header {
|
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
margin: 22px 0;
|
|
|
|
padding-left: 15px;
|
|
|
|
h1 {
|
|
|
|
margin: 0 0 0 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
table {
|
|
|
|
margin: 10px 0 0 15px;
|
|
|
|
.name-col {
|
|
|
|
width: 150px;
|
|
|
|
}
|
|
|
|
}
|
2020-03-25 23:21:26 +00:00
|
|
|
.avatar-name-container {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-06-09 20:28:04 +00:00
|
|
|
.el-icon-top-right {
|
|
|
|
font-size: 2em;
|
|
|
|
line-height: 36px;
|
|
|
|
color: #606266;
|
|
|
|
}
|
2020-03-25 23:21:26 +00:00
|
|
|
}
|
2020-05-31 22:43:03 +00:00
|
|
|
.invalid {
|
2020-06-06 21:58:51 +00:00
|
|
|
color: gray;
|
|
|
|
}
|
2019-07-24 20:50:45 +00:00
|
|
|
.el-table--border::after, .el-table--group::after, .el-table::before {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
.image {
|
|
|
|
width: 20%;
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
2020-05-30 19:24:56 +00:00
|
|
|
.invalid-user-tag {
|
|
|
|
font-size: 14px;
|
|
|
|
width: inherit;
|
|
|
|
height: auto;
|
|
|
|
text-align: center;
|
|
|
|
word-wrap: break-word;
|
|
|
|
white-space: normal;
|
|
|
|
}
|
2020-04-17 22:27:00 +00:00
|
|
|
.left-header-container {
|
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
2019-11-28 16:18:33 +00:00
|
|
|
.no-statuses {
|
|
|
|
margin-left: 28px;
|
|
|
|
color: #606266;
|
|
|
|
}
|
2020-05-20 20:10:32 +00:00
|
|
|
.password-reset-token {
|
|
|
|
margin: 0 0 14px 0;
|
|
|
|
}
|
|
|
|
.password-reset-token-dialog {
|
|
|
|
width: 50%
|
|
|
|
}
|
2020-03-25 23:21:26 +00:00
|
|
|
.poll ul {
|
|
|
|
list-style-type: none;
|
|
|
|
padding: 0;
|
|
|
|
width: 30%;
|
|
|
|
}
|
2020-04-17 22:27:00 +00:00
|
|
|
.reboot-button {
|
|
|
|
padding: 10px;
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
2020-02-26 23:18:47 +00:00
|
|
|
.recent-statuses-container {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
width: 67%;
|
|
|
|
}
|
2019-10-01 19:54:13 +00:00
|
|
|
.recent-statuses-header {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
2020-05-20 20:10:32 +00:00
|
|
|
.reset-password-link {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
2020-03-25 23:21:26 +00:00
|
|
|
.security-setting-button {
|
|
|
|
margin-top: 20px;
|
|
|
|
width: 100%;
|
|
|
|
}
|
2019-07-24 20:50:45 +00:00
|
|
|
.statuses {
|
2019-10-01 19:54:13 +00:00
|
|
|
padding: 0 20px 0 0;
|
2019-07-24 20:50:45 +00:00
|
|
|
}
|
|
|
|
.show-private {
|
2020-01-27 18:01:28 +00:00
|
|
|
width: 200px;
|
2020-01-27 16:41:16 +00:00
|
|
|
text-align: left;
|
2019-07-24 20:50:45 +00:00
|
|
|
line-height: 67px;
|
2020-01-27 16:41:16 +00:00
|
|
|
margin-right: 20px;
|
2019-07-24 20:50:45 +00:00
|
|
|
}
|
2020-02-26 23:18:47 +00:00
|
|
|
.show-private-statuses {
|
|
|
|
margin-left: 28px;
|
2020-02-26 23:58:03 +00:00
|
|
|
margin-bottom: 20px;
|
2020-02-26 23:18:47 +00:00
|
|
|
}
|
2019-11-11 01:49:42 +00:00
|
|
|
.recent-statuses {
|
2019-11-28 16:18:33 +00:00
|
|
|
margin-left: 28px;
|
2019-11-11 01:49:42 +00:00
|
|
|
}
|
2020-01-27 16:41:16 +00:00
|
|
|
.user-page-header {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
2020-06-06 22:09:34 +00:00
|
|
|
margin: 22px 15px 22px 20px;
|
|
|
|
padding: 0;
|
2020-04-17 22:27:00 +00:00
|
|
|
align-items: center;
|
2020-01-27 16:41:16 +00:00
|
|
|
h1 {
|
|
|
|
display: inline
|
|
|
|
}
|
|
|
|
}
|
2019-10-01 19:54:13 +00:00
|
|
|
.user-profile-card {
|
2020-01-27 16:41:16 +00:00
|
|
|
margin: 0 20px;
|
2020-02-26 23:18:47 +00:00
|
|
|
width: 30%;
|
|
|
|
height: fit-content;
|
|
|
|
}
|
|
|
|
.user-profile-container {
|
|
|
|
display: flex;
|
2019-10-01 19:54:13 +00:00
|
|
|
}
|
|
|
|
.user-profile-table {
|
|
|
|
margin: 0;
|
2020-05-30 19:24:56 +00:00
|
|
|
width: inherit;
|
2019-10-01 19:54:13 +00:00
|
|
|
}
|
|
|
|
.user-profile-tag {
|
|
|
|
margin: 0 4px 4px 0;
|
|
|
|
}
|
2020-02-26 23:18:47 +00:00
|
|
|
|
|
|
|
@media only screen and (max-width:480px) {
|
|
|
|
.avatar-name-container {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
2020-05-02 17:56:00 +00:00
|
|
|
.el-timeline-item__wrapper {
|
|
|
|
padding-left: 18px;
|
|
|
|
}
|
2020-05-20 20:10:32 +00:00
|
|
|
.password-reset-token-dialog {
|
|
|
|
width: 85%
|
|
|
|
}
|
2020-02-26 23:58:03 +00:00
|
|
|
.recent-statuses {
|
|
|
|
margin: 20px 10px 15px 10px;
|
|
|
|
}
|
|
|
|
.recent-statuses-container {
|
|
|
|
width: 100%;
|
2020-05-02 17:56:00 +00:00
|
|
|
margin: 0;
|
2020-02-26 23:58:03 +00:00
|
|
|
}
|
|
|
|
.show-private-statuses {
|
|
|
|
margin: 0 10px 20px 10px;
|
|
|
|
}
|
2020-05-02 17:56:00 +00:00
|
|
|
.status-container {
|
|
|
|
margin: 0 10px;
|
|
|
|
}
|
|
|
|
.statuses {
|
|
|
|
padding-right: 10px;
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
2020-02-26 23:18:47 +00:00
|
|
|
.user-page-header {
|
|
|
|
padding: 0;
|
2020-04-17 22:27:00 +00:00
|
|
|
margin: 7px 15px 15px 10px;
|
|
|
|
}
|
|
|
|
.user-page-header-container {
|
|
|
|
.el-dropdown {
|
|
|
|
width: 95%;
|
|
|
|
margin: 0 15px 15px 10px;
|
|
|
|
}
|
2020-02-26 23:18:47 +00:00
|
|
|
}
|
2020-02-26 23:58:03 +00:00
|
|
|
.user-profile-card {
|
|
|
|
margin: 0 10px;
|
|
|
|
width: 95%;
|
|
|
|
td {
|
|
|
|
width: 80px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.user-profile-container {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (max-width:801px) and (min-width: 481px) {
|
|
|
|
.recent-statuses {
|
|
|
|
margin: 20px 10px 15px 0;
|
|
|
|
}
|
|
|
|
.recent-statuses-container {
|
|
|
|
width: 97%;
|
|
|
|
margin: 0 20px;
|
|
|
|
}
|
|
|
|
.show-private-statuses {
|
|
|
|
margin: 0 10px 20px 0;
|
|
|
|
}
|
|
|
|
.user-page-header {
|
|
|
|
padding: 0;
|
2020-04-17 22:27:00 +00:00
|
|
|
margin: 7px 15px 20px 20px;
|
2020-02-26 23:58:03 +00:00
|
|
|
}
|
|
|
|
.user-profile-card {
|
|
|
|
margin: 0 20px;
|
|
|
|
width: fit-content;
|
|
|
|
}
|
|
|
|
.user-profile-container {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2020-02-26 23:18:47 +00:00
|
|
|
}
|
2019-07-24 20:50:45 +00:00
|
|
|
</style>
|