From 8b92feac7174558ea2e4d2e0c69dffa69c6aac5d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 18 Apr 2019 21:29:19 +0900
Subject: [PATCH] Resolve #4732

---
 .../app/common/views/components/settings/api.vue  | 12 ++++++++++--
 .../app/common/views/components/ui/input.vue      | 12 +++++++++++-
 src/server/api/endpoints/endpoints.ts             | 15 +++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/server/api/endpoints/endpoints.ts

diff --git a/src/client/app/common/views/components/settings/api.vue b/src/client/app/common/views/components/settings/api.vue
index 4f1b75585..74e3eb066 100644
--- a/src/client/app/common/views/components/settings/api.vue
+++ b/src/client/app/common/views/components/settings/api.vue
@@ -14,7 +14,7 @@
 
 	<section>
 		<header><fa icon="terminal"/> {{ $t('console.title') }}</header>
-		<ui-input v-model="endpoint">
+		<ui-input v-model="endpoint" :datalist="endpoints">
 			<span>{{ $t('console.endpoint') }}</span>
 		</ui-input>
 		<ui-textarea v-model="body">
@@ -39,15 +39,23 @@ import * as JSON5 from 'json5';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/api-settings.vue'),
+
 	data() {
 		return {
 			endpoint: '',
 			body: '{}',
 			res: null,
-			sending: false
+			sending: false,
+			endpoints: []
 		};
 	},
 
+	created() {
+		this.$root.api('endpoints').then(endpoints => {
+			this.endpoints = endpoints;
+		});
+	},
+
 	methods: {
 		regenerateToken() {
 			this.$root.dialog({
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index ae9ce249d..bcb87398b 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -23,6 +23,7 @@
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="$emit('keydown', $event)"
+				:list="id"
 			>
 			<input v-else ref="input"
 				:type="type"
@@ -37,7 +38,11 @@
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="$emit('keydown', $event)"
+				:list="id"
 			>
+			<datalist :id="id" v-if="datalist">
+				<option v-for="data in datalist" :value="data"/>
+			</datalist>
 		</template>
 		<template v-else>
 			<input ref="input"
@@ -130,6 +135,10 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+		datalist: {
+			type: Array,
+			required: false,
+		},
 		inline: {
 			type: Boolean,
 			required: false,
@@ -147,7 +156,8 @@ export default Vue.extend({
 		return {
 			v: this.value,
 			focused: false,
-			passwordStrength: ''
+			passwordStrength: '',
+			id: Math.random().toString()
 		};
 	},
 	computed: {
diff --git a/src/server/api/endpoints/endpoints.ts b/src/server/api/endpoints/endpoints.ts
new file mode 100644
index 000000000..d1e4edaa2
--- /dev/null
+++ b/src/server/api/endpoints/endpoints.ts
@@ -0,0 +1,15 @@
+import define from '../define';
+import endpoints from '../endpoints';
+
+export const meta = {
+	requireCredential: false,
+
+	tags: ['meta'],
+
+	params: {
+	},
+};
+
+export default define(meta, async () => {
+	return endpoints.map(x => x.name);
+});