Improve input dialog

7 files changed, 120 insertions, 59 deletions

diff --git a/src/client/app/common/views/components/api-settings.vue b/src/client/app/common/views/components/api-settings.vue
index 062218b3f4..e96eb28d93 100644
--- a/src/client/app/common/views/components/api-settings.vue
+++ b/src/client/app/common/views/components/api-settings.vue
@@ -50,10 +50,13 @@ export default Vue.extend({
 
 	methods: {
 		regenerateToken() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('enter-password'),
-				type: 'password'
-			}).then(password => {
+				input: {
+					type: 'password'
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
 				this.$root.api('i/regenerate_token', {
 					password: password
 				});
diff --git a/src/client/app/common/views/components/dialog.vue b/src/client/app/common/views/components/dialog.vue
index abbdb8536e..5cc885881b 100644
--- a/src/client/app/common/views/components/dialog.vue
+++ b/src/client/app/common/views/components/dialog.vue
@@ -2,15 +2,17 @@
 <div class="felqjxyj" :class="{ splash }">
 	<div class="bg" ref="bg" @click="onBgClick"></div>
 	<div class="main" ref="main">
-		<div class="icon" v-if="type" :class="type"><fa :icon="icon"/></div>
+		<div class="icon" v-if="!input && !select && !user" :class="type"><fa :icon="icon"/></div>
 		<header v-if="title" v-html="title"></header>
 		<div class="body" v-if="text" v-html="text"></div>
+		<ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input>
+		<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><span slot="prefix">@</span></ui-input>
 		<ui-select v-if="select" v-model="selectedValue">
 			<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 		</ui-select>
 		<ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash">
-			<ui-button @click="ok" primary autofocus>OK</ui-button>
-			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
+			<ui-button @click="ok" primary :autofocus="!input && !select && !user">OK</ui-button>
+			<ui-button @click="cancel" v-if="showCancelButton || input || select || user">Cancel</ui-button>
 		</ui-horizon-group>
 	</div>
 </div>
@@ -20,6 +22,7 @@
 import Vue from 'vue';
 import * as anime from 'animejs';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+import parseAcct from "../../../../../misc/acct/parse";
 
 export default Vue.extend({
 	props: {
@@ -36,9 +39,15 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
+		input: {
+			required: false
+		},
 		select: {
 			required: false
 		},
+		user: {
+			required: false
+		},
 		showCancelButton: {
 			type: Boolean,
 			default: false
@@ -51,6 +60,8 @@ export default Vue.extend({
 
 	data() {
 		return {
+			inputValue: this.input && this.input.default ? this.input.default : null,
+			userInputValue: null,
 			selectedValue: null
 		};
 	},
@@ -94,10 +105,21 @@ export default Vue.extend({
 	},
 
 	methods: {
-		ok() {
-			const result = this.select ? this.selectedValue : true;
-			this.$emit('ok', result);
-			this.close();
+		async ok() {
+			if (this.user) {
+				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
+				if (user) {
+					this.$emit('ok', user);
+					this.close();
+				}
+			} else {
+				const result =
+					this.input ? this.inputValue :
+					this.select ? this.selectedValue :
+					true;
+				this.$emit('ok', result);
+				this.close();
+			}
 		},
 
 		cancel() {
@@ -127,6 +149,14 @@ export default Vue.extend({
 
 		onBgClick() {
 			this.cancel();
+		},
+
+		onInputKeydown(e) {
+			if (e.which == 13) { // Enter
+				e.preventDefault();
+				e.stopPropagation();
+				this.ok();
+			}
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index b82a60a360..07472998de 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -99,23 +99,22 @@ export default Vue.extend({
 			this.$emit('go', game);
 		},
 
-		match() {
-			this.$input({
-				title: this.$t('enter-username')
-			}).then(username => {
-				this.$root.api('users/show', {
-					username
-				}).then(user => {
-					this.$root.api('games/reversi/match', {
-						userId: user.id
-					}).then(res => {
-						if (res == null) {
-							this.$emit('matching', user);
-						} else {
-							this.$emit('go', res);
-						}
-					});
-				});
+		async match() {
+			const { result: user } = await this.$root.dialog({
+				title: this.$t('enter-username'),
+				user: {
+					local: true
+				}
+			});
+			if (user == null) return;
+			this.$root.api('games/reversi/match', {
+				userId: user.id
+			}).then(res => {
+				if (res == null) {
+					this.$emit('matching', user);
+				} else {
+					this.$emit('go', res);
+				}
 			});
 		},
 
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index c4b1a02fee..b8f34beb0c 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -99,8 +99,8 @@ export default Vue.extend({
 				type: 'warning',
 				text: this.$t('delete-confirm'),
 				showCancelButton: true
-			}).then(res => {
-				if (!res) return;
+			}).then(({ canceled }) => {
+				if (canceled) return;
 
 				this.$root.api('notes/delete', {
 					noteId: this.note.id
diff --git a/src/client/app/common/views/components/password-settings.vue b/src/client/app/common/views/components/password-settings.vue
index d41b5a5bd1..bcea32576f 100644
--- a/src/client/app/common/views/components/password-settings.vue
+++ b/src/client/app/common/views/components/password-settings.vue
@@ -11,34 +11,43 @@ import i18n from '../../../i18n';
 export default Vue.extend({
 	i18n: i18n('common/views/components/password-settings.vue'),
 	methods: {
-		reset() {
-			this.$input({
+		async reset() {
+			const { canceled: canceled1, result: currentPassword } = await this.$root.dialog({
 				title: this.$t('enter-current-password'),
-				type: 'password'
-			}).then(currentPassword => {
-				this.$input({
-					title: this.$t('enter-new-password'),
+				input: {
 					type: 'password'
-				}).then(newPassword => {
-					this.$input({
-						title: this.$t('enter-new-password-again'),
-						type: 'password'
-					}).then(newPassword2 => {
-						if (newPassword !== newPassword2) {
-							this.$root.dialog({
-								title: null,
-								text: this.$t('not-match')
-							});
-							return;
-						}
-						this.$root.api('i/change_password', {
-							currentPasword: currentPassword,
-							newPassword: newPassword
-						}).then(() => {
-							this.$notify(this.$t('changed'));
-						});
-					});
+				}
+			});
+			if (canceled1) return;
+
+			const { canceled: canceled2, result: newPassword } = await this.$root.dialog({
+				title: this.$t('enter-new-password'),
+				input: {
+					type: 'password'
+				}
+			});
+			if (canceled2) return;
+
+			const { canceled: canceled3, result: newPassword2 } = await this.$root.dialog({
+				title: this.$t('enter-new-password-again'),
+				input: {
+					type: 'password'
+				}
+			});
+			if (canceled3) return;
+
+			if (newPassword !== newPassword2) {
+				this.$root.dialog({
+					title: null,
+					text: this.$t('not-match')
 				});
+				return;
+			}
+			this.$root.api('i/change_password', {
+				currentPasword: currentPassword,
+				newPassword: newPassword
+			}).then(() => {
+				this.$notify(this.$t('changed'));
 			});
 		}
 	}
diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue
index 80c322fa9e..b402f046b1 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/src/client/app/common/views/components/profile-editor.vue
@@ -222,10 +222,13 @@ export default Vue.extend({
 		},
 
 		updateEmail() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('@.enter-password'),
-				type: 'password'
-			}).then(password => {
+				input: {
+					type: 'password'
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
 				this.$root.api('i/update_email', {
 					password: password,
 					email: this.email == '' ? null : this.email
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 4d77810b47..d735cc1c2f 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -14,17 +14,19 @@
 				:disabled="disabled"
 				:required="required"
 				:readonly="readonly"
+				:placeholder="placeholder"
 				:pattern="pattern"
 				:autocomplete="autocomplete"
 				:spellcheck="spellcheck"
 				@focus="focused = true"
 				@blur="focused = false"
+				@keydown="$emit('keydown', $event)"
 			>
 		</template>
 		<template v-else>
 			<input ref="input"
 				type="text"
-				:value="placeholder"
+				:value="filePlaceholder"
 				readonly
 				@click="chooseFile"
 			>
@@ -74,6 +76,15 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		autocomplete: {
 			required: false
 		},
@@ -109,7 +120,7 @@ export default Vue.extend({
 		filled(): boolean {
 			return this.v != '' && this.v != null;
 		},
-		placeholder(): string {
+		filePlaceholder(): string {
 			if (this.type != 'file') return null;
 			if (this.v == null) return null;
 
@@ -142,6 +153,12 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
+		if (this.autofocus) {
+			this.$nextTick(() => {
+				this.$refs.input.focus();
+			});
+		}
+
 		this.$nextTick(() => {
 			if (this.$refs.prefix) {
 				this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';