Client: Improve API settings
This commit is contained in:
syuilo
parent
5b1cd3bd3c
commit
e0bf522e7f
12 changed files with 200 additions and 301 deletions
|
|
@ -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: "連携しているアプリケーションはありません"
|
||||
|
|
|
|||
319
package-lock.json
generated
319
package-lock.json
generated
File diff suppressed because it is too large
Load diff
72
src/client/app/common/views/components/api-settings.vue
Normal file
72
src/client/app/common/views/components/api-settings.vue
Normal 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>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
33
src/client/app/common/views/components/ui/info.vue
Normal file
33
src/client/app/common/views/components/ui/info.vue
Normal 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>
|
||||
|
|
@ -66,6 +66,9 @@ export default Vue.extend({
|
|||
root(fill)
|
||||
margin 42px 0 32px 0
|
||||
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
|
||||
> .input
|
||||
padding 12px
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</ui-card>
|
||||
|
||||
<ui-card class="api" v-show="page == 'api'">
|
||||
<div slot="title">%fa:key% API</div>
|
||||
<section class="fit-top">
|
||||
<x-api/>
|
||||
</section>
|
||||
</ui-card>
|
||||
<div class="api" v-show="page == 'api'">
|
||||
<mk-api-settings/>
|
||||
</div>
|
||||
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -120,6 +120,8 @@
|
|||
</section>
|
||||
</ui-card>
|
||||
|
||||
<mk-api-settings />
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,9 @@
|
|||
remoteInfoBg: '#42321c',
|
||||
remoteInfoFg: '#ffbd3e',
|
||||
|
||||
infoWarnBg: '#42321c',
|
||||
infoWarnFg: '#ffbd3e',
|
||||
|
||||
messagingRoomBg: '@bg',
|
||||
messagingRoomInfo: '#fff',
|
||||
messagingRoomDateDividerLine: 'rgba(255, 255, 255, 0.1)',
|
||||
|
|
|
|||
|
|
@ -131,6 +131,9 @@
|
|||
remoteInfoBg: '#fff0db',
|
||||
remoteInfoFg: '#573c08',
|
||||
|
||||
infoWarnBg: '#fff0db',
|
||||
infoWarnFg: '#573c08',
|
||||
|
||||
messagingRoomBg: '#fff',
|
||||
messagingRoomInfo: '#000',
|
||||
messagingRoomDateDividerLine: 'rgba(0, 0, 0, 0.1)',
|
||||
|
|
|
|||
Loading…
Reference in a new issue