natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
locales/ja-JP.yml
View File

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

File diff suppressed because it is too large Load Diff

72
src/client/app/common/views/components/api-settings.vue Normal file
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>

4
src/client/app/common/views/components/index.ts
View File

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

3
src/client/app/common/views/components/ui/textarea.vue
View File

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

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

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

40
src/client/app/desktop/views/components/settings.api.vue
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>

11
src/client/app/desktop/views/components/settings.vue
View File

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

2
src/client/app/mobile/views/pages/settings.vue
View File

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

3
src/client/theme/dark.json5
View File

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

3
src/client/theme/light.json5
View File

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