Client: Improve API settings
This commit is contained in:
parent
5b1cd3bd3c
commit
e0bf522e7f
|
@ -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: "連携しているアプリケーションはありません"
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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>
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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)',
|
||||||
|
|
|
@ -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)',
|
||||||
|
|
Loading…
Reference in New Issue