Client: Improve API settings

locales/ja-JP.yml

@@ -950,13 +950,20 @@ desktop/views/components/settings.2fa.vue:
   failed: "設定に失敗しました。トークンに誤りがないかご確認ください。"
   info: "次回サインインからは、同様にパスワードに加えてデバイスに表示されているトークンを入力します。"
 
-desktop/views/components/settings.api.vue:
+common/views/components/api-settings.vue:
   intro: "APIを利用するには、上記のトークンを「i」というキーでパラメータに付加してリクエストします。"
   caution: "アカウントを不正利用される可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。"
   regeneration-of-token: "万が一このトークンが漏れたりその可能性がある場合はトークンを再生成できます。"
   regenerate-token: "トークンを再生成"
   token: "Token:"
   enter-password: "パスワードを入力してください"
+  console:
+    title: 'APIコンソール'
+    endpoint: 'エンドポイント'
+    parameter: 'パラメータ'
+    send: '送信'
+    sending: '応答待ち'
+    response: '結果'
 
 desktop/views/components/settings.apps.vue:
   no-apps: "連携しているアプリケーションはありません"

src/client/app/common/views/components/api-settings.vue

@@ -0,0 +1,72 @@
+<template>
+<ui-card>
+	<div slot="title">%fa:key% API</div>
+
+	<section class="fit-top">
+		<ui-input :value="$store.state.i.token" readonly>
+			<span>%i18n:@token%</span>
+		</ui-input>
+		<p>%i18n:@intro%</p>
+		<ui-info warn>%i18n:@caution%</ui-info>
+		<p>%i18n:@regeneration-of-token%</p>
+		<ui-button @click="regenerateToken">%fa:sync-alt% %i18n:@regenerate-token%</ui-button>
+	</section>
+
+	<section>
+		<header>%fa:terminal% %i18n:@console.title%</header>
+		<ui-input v-model="endpoint">
+			<span>%i18n:@console.endpoint%</span>
+		</ui-input>
+		<ui-textarea v-model="body">
+			<span>%i18n:@console.parameter% (JSON or JSON5)</span>
+		</ui-textarea>
+		<ui-button @click="send" :disabled="sending">
+			<template v-if="sending">%i18n:@console.sending%</template>
+			<template v-else>%fa:paper-plane% %i18n:@console.send%</template>
+		</ui-button>
+		<ui-textarea v-if="res" v-model="res">
+			<span>%i18n:@console.response%</span>
+		</ui-textarea>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as JSON5 from 'json5';
+
+export default Vue.extend({
+	data() {
+		return {
+			endpoint: '',
+			body: '{}',
+			res: null,
+			sending: false
+		};
+	},
+
+	methods: {
+		regenerateToken() {
+			(this as any).apis.input({
+				title: '%i18n:@enter-password%',
+				type: 'password'
+			}).then(password => {
+				(this as any).api('i/regenerate_token', {
+					password: password
+				});
+			});
+		},
+
+		send() {
+			this.sending = true;
+			(this as any).api(this.endpoint, JSON5.parse(this.body)).then(res => {
+				this.sending = false;
+				this.res = JSON5.stringify(res, null, 2);
+			}, err => {
+				this.sending = false;
+				this.res = JSON5.stringify(err, null, 2);
+			});
+		}
+	}
+});
+</script>

src/client/app/common/views/components/index.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import apiSettings from './api-settings.vue';
 import driveSettings from './drive-settings.vue';
 import profileEditor from './profile-editor.vue';
 import noteSkeleton from './note-skeleton.vue';
@@ -44,9 +45,11 @@ import uiTextarea from './ui/textarea.vue';
 import uiSwitch from './ui/switch.vue';
 import uiRadio from './ui/radio.vue';
 import uiSelect from './ui/select.vue';
+import uiInfo from './ui/info.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-api-settings', apiSettings);
 Vue.component('mk-drive-settings', driveSettings);
 Vue.component('mk-profile-editor', profileEditor);
 Vue.component('mk-note-skeleton', noteSkeleton);
@@ -91,5 +94,6 @@ Vue.component('ui-textarea', uiTextarea);
 Vue.component('ui-switch', uiSwitch);
 Vue.component('ui-radio', uiRadio);
 Vue.component('ui-select', uiSelect);
+Vue.component('ui-info', uiInfo);
 Vue.component('form-button', formButton);
 Vue.component('form-radio', formRadio);

src/client/app/common/views/components/ui/info.vue

@@ -0,0 +1,33 @@
+<template>
+<div class="ymxyweixqwsxauxldgpvecjepnwxbylu" :class="{ warn }">
+	<i v-if="warn">%fa:exclamation-triangle%</i>
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		warn: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.ymxyweixqwsxauxldgpvecjepnwxbylu
+	margin 16px 0
+	padding 16px
+	font-size 90%
+
+	> i
+		margin-right 4px
+
+	&.warn
+		background var(--infoWarnBg)
+		color var(--infoWarnFg)
+</style>

src/client/app/common/views/components/ui/textarea.vue

@@ -66,6 +66,9 @@ export default Vue.extend({
 root(fill)
 	margin 42px 0 32px 0
 
+	&:last-child
+		margin-bottom 0
+
 	> .input
 		padding 12px
 

src/client/app/desktop/views/components/settings.2fa.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="2fa">
 	<p>%i18n:@intro%<a href="%i18n:@url%" target="_blank">%i18n:@detail%</a></p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
+	<ui-info warn>%i18n:@caution%</ui-info>
 	<p v-if="!data && !$store.state.i.twoFactorEnabled"><ui-button @click="register">%i18n:@register%</ui-button></p>
 	<template v-if="$store.state.i.twoFactorEnabled">
 		<p>%i18n:@already-registered%</p>

src/client/app/desktop/views/components/settings.api.vue

@@ -1,40 +0,0 @@
-<template>
-<div class="root api">
-	<ui-input :value="$store.state.i.token" readonly>
-		<span>%i18n:@token%</span>
-	</ui-input>
-	<p>%i18n:@intro%</p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
-	<p>%i18n:@regeneration-of-token%</p>
-	<ui-button @click="regenerateToken">%i18n:@regenerate-token%</ui-button>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	methods: {
-		regenerateToken() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-password%',
-				type: 'password'
-			}).then(password => {
-				(this as any).api('i/regenerate_token', {
-					password: password
-				});
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.api
-	code
-		display inline-block
-		padding 4px 6px
-		color #555
-		background #eee
-		border-radius 2px
-</style>

src/client/app/desktop/views/components/settings.vue

@@ -235,12 +235,9 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="api" v-show="page == 'api'">
+		<div class="api" v-show="page == 'api'">
-			<div slot="title">%fa:key% API</div>
+			<mk-api-settings/>
-			<section class="fit-top">
+		</div>
-				<x-api/>
-			</section>
-		</ui-card>
 
 		<ui-card class="other" v-show="page == 'other'">
 			<div slot="title">%fa:info-circle% %i18n:@about%</div>
@@ -295,7 +292,6 @@ import Vue from 'vue';
 import XMute from './settings.mute.vue';
 import XPassword from './settings.password.vue';
 import X2fa from './settings.2fa.vue';
-import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
 import XTags from './settings.tags.vue';
@@ -307,7 +303,6 @@ export default Vue.extend({
 		XMute,
 		XPassword,
 		X2fa,
-		XApi,
 		XApps,
 		XSignins,
 		XTags

src/client/app/mobile/views/pages/settings.vue

@@ -120,6 +120,8 @@
 				</section>
 			</ui-card>
 
+			<mk-api-settings />
+
 			<ui-card>
 				<div slot="title">%fa:sync-alt% %i18n:@update%</div>
 

src/client/theme/dark.json5

@@ -131,6 +131,9 @@
 		remoteInfoBg: '#42321c',
 		remoteInfoFg: '#ffbd3e',
 
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+
 		messagingRoomBg: '@bg',
 		messagingRoomInfo: '#fff',
 		messagingRoomDateDividerLine: 'rgba(255, 255, 255, 0.1)',

src/client/theme/light.json5

@@ -131,6 +131,9 @@
 		remoteInfoBg: '#fff0db',
 		remoteInfoFg: '#573c08',
 
+		infoWarnBg: '#fff0db',
+		infoWarnFg: '#573c08',
+
 		messagingRoomBg: '#fff',
 		messagingRoomInfo: '#000',
 		messagingRoomDateDividerLine: 'rgba(0, 0, 0, 0.1)',