From 4ab9b5bb8e7b06be41f7d8f0e8ceb9304558fcdd Mon Sep 17 00:00:00 2001 From: MeiMei <30769358+mei23@users.noreply.github.com> Date: Sat, 26 Jan 2019 17:14:10 +0900 Subject: [PATCH] Improve moderation UI (#3989) * admin users UI * tune --- locales/ja-JP.yml | 5 + src/client/app/admin/views/users.user.vue | 82 ++++++++++++ src/client/app/admin/views/users.vue | 154 ++++++++++------------ 3 files changed, 160 insertions(+), 81 deletions(-) create mode 100644 src/client/app/admin/views/users.user.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index bae7a1173..01b1dfa2c 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1266,14 +1266,19 @@ admin/views/users.vue: user-not-found: "ユーザーが見つかりません" lookup: "照会" reset-password: "パスワードをリセット" + reset-password-confirm: "パスワードをリセットしますか？" password-updated: "パスワードは現在「{password}」です" suspend: "凍結" + suspend-confirm: "凍結しますか？" suspended: "凍結しました" unsuspend: "凍結の解除" + unsuspend-confirm: "凍結を解除しますか？" unsuspended: "凍結を解除しました" verify: "公式アカウントにする" + verify-confirm: "公式アカウントにしますか？" verified: "公式アカウントにしました" unverify: "公式アカウントを解除する" + unverify-confirm: "公式アカウントを解除しますか？" unverified: "公式アカウントを解除しました" users: title: "ユーザー" diff --git a/src/client/app/admin/views/users.user.vue b/src/client/app/admin/views/users.user.vue new file mode 100644 index 000000000..afece18e8 --- /dev/null +++ b/src/client/app/admin/views/users.user.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue index 6f0f1629f..6b829a2f8 100644 --- a/src/client/app/admin/views/users.vue +++ b/src/client/app/admin/views/users.vue @@ -3,20 +3,26 @@
{{ $t('operation') }}
- + {{ $t('username-or-userid') }} - {{ $t('reset-password') }} - - {{ $t('verify') }} - {{ $t('unverify') }} - - - {{ $t('suspend') }} - {{ $t('unsuspend') }} - {{ $t('lookup') }} - + +
+ +
+ {{ $t('reset-password') }} + + {{ $t('verify') }} + {{ $t('unverify') }} + + + {{ $t('suspend') }} + {{ $t('unsuspend') }} + + +
+
@@ -47,29 +53,7 @@ -
-
- - - -
-
-
- - @{{ user | acct }} - admin - moderator - - -
-
- {{ $t('users.updatedAt') }}: -
-
- {{ $t('users.createdAt') }}: -
-
-
+ {{ $t('@.load-more') }} @@ -83,10 +67,13 @@ import i18n from '../../i18n'; import parseAcct from "../../../../misc/acct/parse"; import { faCertificate, faUsers, faTerminal, faSearch, faKey } from '@fortawesome/free-solid-svg-icons'; import { faSnowflake } from '@fortawesome/free-regular-svg-icons'; +import XUser from './users.user.vue'; export default Vue.extend({ i18n: i18n('admin/views/users.vue'), - + components: { + XUser + }, data() { return { user: null, @@ -131,6 +118,7 @@ export default Vue.extend({ }, methods: { + /** テキストエリアのユーザーを解決する */ async fetchUser() { try { return await this.$root.api('users/show', this.target.startsWith('@') ? parseAcct(this.target) : { userId: this.target }); @@ -149,16 +137,27 @@ export default Vue.extend({ } }, + /** テキストエリアから処理対象ユーザーを設定する */ async showUser() { + this.user = null; const user = await this.fetchUser(); this.$root.api('admin/show-user', { userId: user.id }).then(info => { this.user = info; }); + this.target = ''; + }, + + /** 処理対象ユーザーの情報を更新する */ + async refreshUser() { + this.$root.api('admin/show-user', { userId: this.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 => { + if (!await this.getConfirmed(this.$t('reset-password-confirm'))) return; + + this.$root.api('admin/reset-password', { userId: this.user._id }).then(res => { this.$root.dialog({ type: 'success', text: this.$t('password-updated', { password: res.password }) @@ -167,11 +166,12 @@ export default Vue.extend({ }, async verifyUser() { + if (!await this.getConfirmed(this.$t('verify-confirm'))) return; + this.verifying = true; const process = async () => { - const user = await this.fetchUser(); - await this.$root.api('admin/verify-user', { userId: user.id }); + await this.$root.api('admin/verify-user', { userId: this.user._id }); this.$root.dialog({ type: 'success', text: this.$t('verified') @@ -186,14 +186,17 @@ export default Vue.extend({ }); this.verifying = false; + + this.refreshUser(); }, async unverifyUser() { + if (!await this.getConfirmed(this.$t('unverify-confirm'))) return; + this.unverifying = true; const process = async () => { - const user = await this.fetchUser(); - await this.$root.api('admin/unverify-user', { userId: user.id }); + await this.$root.api('admin/unverify-user', { userId: this.user._id }); this.$root.dialog({ type: 'success', text: this.$t('unverified') @@ -208,14 +211,17 @@ export default Vue.extend({ }); this.unverifying = false; + + this.refreshUser(); }, async suspendUser() { + if (!await this.getConfirmed(this.$t('suspend-confirm'))) return; + this.suspending = true; const process = async () => { - const user = await this.fetchUser(); - await this.$root.api('admin/suspend-user', { userId: user.id }); + await this.$root.api('admin/suspend-user', { userId: this.user._id }); this.$root.dialog({ type: 'success', text: this.$t('suspended') @@ -230,14 +236,17 @@ export default Vue.extend({ }); this.suspending = false; + + this.refreshUser(); }, async unsuspendUser() { + if (!await this.getConfirmed(this.$t('unsuspend-confirm'))) return; + this.unsuspending = true; const process = async () => { - const user = await this.fetchUser(); - await this.$root.api('admin/unsuspend-user', { userId: user.id }); + await this.$root.api('admin/unsuspend-user', { userId: this.user._id }); this.$root.dialog({ type: 'success', text: this.$t('unsuspended') @@ -252,8 +261,21 @@ export default Vue.extend({ }); this.unsuspending = false; + + this.refreshUser(); }, + async getConfirmed(text: string): Promise { + const confirm = await this.$root.dialog({ + type: 'warning', + showCancelButton: true, + title: 'confirm', + text, + }); + + return !confirm.canceled; + } + fetchUsers() { this.$root.api('admin/show-users', { state: this.state, @@ -277,42 +299,12 @@ export default Vue.extend({