Client: Improve API settings

This commit is contained in:
syuilo 2018-10-26 08:37:30 +09:00
parent 5b1cd3bd3c
commit e0bf522e7f
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
12 changed files with 200 additions and 301 deletions

View file

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

319
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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>

View file

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

View file

@ -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>

View file

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

View file

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

View file

@ -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>

View file

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

View file

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

View file

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

View file

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