Sharkey/src/client/app/admin/views/users.vue

286 lines
6.9 KiB
Vue
Raw Normal View History

2018-11-02 16:05:53 +02:00
<template>
<div class="ucnffhbtogqgscfmqcymwmmupoknpfsw">
2018-11-02 16:05:53 +02:00
<ui-card>
<div slot="title"><fa :icon="faTerminal"/> {{ $t('operation') }}</div>
2018-11-02 16:05:53 +02:00
<section class="fit-top">
<ui-input v-model="target" type="text">
<span>{{ $t('username-or-userid') }}</span>
2018-11-02 16:05:53 +02:00
</ui-input>
<ui-button @click="resetPassword"><fa :icon="faKey"/> {{ $t('reset-password') }}</ui-button>
2018-11-21 07:44:49 +02:00
<ui-horizon-group>
<ui-button @click="verifyUser" :disabled="verifying"><fa :icon="faCertificate"/> {{ $t('verify') }}</ui-button>
2018-11-21 07:44:49 +02:00
<ui-button @click="unverifyUser" :disabled="unverifying">{{ $t('unverify') }}</ui-button>
</ui-horizon-group>
<ui-horizon-group>
<ui-button @click="suspendUser" :disabled="suspending"><fa :icon="faSnowflake"/> {{ $t('suspend') }}</ui-button>
<ui-button @click="unsuspendUser" :disabled="unsuspending">{{ $t('unsuspend') }}</ui-button>
</ui-horizon-group>
<ui-button @click="showUser"><fa :icon="faSearch"/> {{ $t('lookup') }}</ui-button>
<ui-textarea v-if="user" :value="user | json5" readonly tall style="margin-top:16px;"></ui-textarea>
2018-11-02 16:05:53 +02:00
</section>
</ui-card>
<ui-card>
<div slot="title"><fa :icon="faUsers"/> {{ $t('users.title') }}</div>
2018-11-02 16:05:53 +02:00
<section class="fit-top">
<ui-horizon-group inputs>
<ui-select v-model="sort">
<span slot="label">{{ $t('users.sort.title') }}</span>
<option value="-createdAt">{{ $t('users.sort.createdAtAsc') }}</option>
<option value="+createdAt">{{ $t('users.sort.createdAtDesc') }}</option>
<option value="-updatedAt">{{ $t('users.sort.updatedAtAsc') }}</option>
<option value="+updatedAt">{{ $t('users.sort.updatedAtDesc') }}</option>
</ui-select>
<ui-select v-model="origin">
<span slot="label">{{ $t('users.origin.title') }}</span>
<option value="combined">{{ $t('users.origin.combined') }}</option>
<option value="local">{{ $t('users.origin.local') }}</option>
<option value="remote">{{ $t('users.origin.remote') }}</option>
</ui-select>
2018-11-21 07:44:49 +02:00
</ui-horizon-group>
<div class="kofvwchc" v-for="user in users">
<div>
<a :href="user | userPage(null, true)">
<mk-avatar class="avatar" :user="user" :disable-link="true"/>
</a>
</div>
<div>
<header>
<b><mk-user-name :user="user"/></b>
<span class="username">@{{ user | acct }}</span>
</header>
<div>
2018-11-24 00:01:40 +02:00
<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
</div>
<div>
2018-11-24 00:01:40 +02:00
<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
</div>
</div>
</div>
<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
2018-11-02 16:05:53 +02:00
</section>
</ui-card>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../i18n';
2018-11-02 16:05:53 +02:00
import parseAcct from "../../../../misc/acct/parse";
import { faCertificate, faUsers, faTerminal, faSearch, faKey } from '@fortawesome/free-solid-svg-icons';
2018-11-21 07:44:49 +02:00
import { faSnowflake } from '@fortawesome/free-regular-svg-icons';
2018-11-02 16:05:53 +02:00
export default Vue.extend({
i18n: i18n('admin/views/users.vue'),
2018-11-14 21:24:40 +02:00
2018-11-02 16:05:53 +02:00
data() {
return {
user: null,
target: null,
2018-11-02 16:05:53 +02:00
verifying: false,
unverifying: false,
suspending: false,
2018-11-21 07:44:49 +02:00
unsuspending: false,
sort: '+createdAt',
origin: 'combined',
limit: 10,
offset: 0,
users: [],
existMore: false,
faTerminal, faCertificate, faUsers, faSnowflake, faSearch, faKey
2018-11-02 16:05:53 +02:00
};
},
watch: {
sort() {
this.users = [];
this.offset = 0;
this.fetchUsers();
},
origin() {
this.users = [];
this.offset = 0;
this.fetchUsers();
}
},
mounted() {
this.fetchUsers();
},
2018-11-02 16:05:53 +02:00
methods: {
async fetchUser() {
try {
return await this.$root.api('users/show', this.target.startsWith('@') ? parseAcct(this.target) : { userId: this.target });
} catch (e) {
if (e == 'user not found') {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
type: 'error',
text: this.$t('user-not-found')
});
} else {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
type: 'error',
text: e.toString()
});
}
}
},
async showUser() {
const user = await this.fetchUser();
this.$root.api('admin/show-user', { userId: user.id }).then(info => {
this.user = info;
});
},
async resetPassword() {
const user = await this.fetchUser();
this.$root.api('admin/reset-password', { userId: user.id }).then(res => {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
type: 'success',
text: this.$t('password-updated', { password: res.password })
});
});
},
2018-11-02 16:05:53 +02:00
async verifyUser() {
this.verifying = true;
const process = async () => {
const user = await this.fetchUser();
2018-11-14 21:24:40 +02:00
await this.$root.api('admin/verify-user', { userId: user.id });
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'success',
text: this.$t('verified')
});
2018-11-02 16:05:53 +02:00
};
await process().catch(e => {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'error',
text: e.toString()
});
2018-11-02 16:05:53 +02:00
});
this.verifying = false;
},
async unverifyUser() {
this.unverifying = true;
const process = async () => {
const user = await this.fetchUser();
2018-11-14 21:24:40 +02:00
await this.$root.api('admin/unverify-user', { userId: user.id });
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'success',
text: this.$t('unverified')
});
2018-11-02 16:05:53 +02:00
};
await process().catch(e => {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'error',
text: e.toString()
});
2018-11-02 16:05:53 +02:00
});
this.unverifying = false;
},
async suspendUser() {
this.suspending = true;
const process = async () => {
const user = await this.fetchUser();
2018-11-14 21:24:40 +02:00
await this.$root.api('admin/suspend-user', { userId: user.id });
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'success',
text: this.$t('suspended')
});
2018-11-02 16:05:53 +02:00
};
await process().catch(e => {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'error',
text: e.toString()
});
2018-11-02 16:05:53 +02:00
});
this.suspending = false;
},
async unsuspendUser() {
this.unsuspending = true;
const process = async () => {
const user = await this.fetchUser();
2018-11-14 21:24:40 +02:00
await this.$root.api('admin/unsuspend-user', { userId: user.id });
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'success',
text: this.$t('unsuspended')
});
2018-11-02 16:05:53 +02:00
};
await process().catch(e => {
2018-12-02 08:28:52 +02:00
this.$root.dialog({
2018-11-14 21:24:40 +02:00
type: 'error',
text: e.toString()
});
2018-11-02 16:05:53 +02:00
});
this.unsuspending = false;
},
fetchUsers() {
this.$root.api('users', {
origin: this.origin,
sort: this.sort,
offset: this.offset,
limit: this.limit + 1
}).then(users => {
if (users.length == this.limit + 1) {
users.pop();
this.existMore = true;
} else {
this.existMore = false;
}
this.users = this.users.concat(users);
this.offset += this.limit;
});
2018-11-02 16:05:53 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
.ucnffhbtogqgscfmqcymwmmupoknpfsw
@media (min-width 500px)
padding 16px
.kofvwchc
display flex
padding 16px 0
border-top solid 1px var(--faceDivider)
> div:first-child
> a
> .avatar
width 64px
height 64px
> div:last-child
flex 1
padding-left 16px
2018-12-14 16:35:07 +02:00
@media (max-width 500px)
font-size 14px
> header
> .username
margin-left 8px
opacity 0.7
</style>