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

76 lines
1.9 KiB
Vue
Raw Normal View History

2018-10-26 01:37:30 +02:00
<template>
<ui-card>
<div slot="title"><fa icon="key"/> API</div>
2018-10-26 01:37:30 +02:00
<section class="fit-top">
<ui-input :value="$store.state.i.token" readonly>
<span>{{ $t('token') }}</span>
2018-10-26 01:37:30 +02:00
</ui-input>
<p>{{ $t('intro') }}</p>
<ui-info warn>{{ $t('caution') }}</ui-info>
<p>{{ $t('regeneration-of-token') }}</p>
<ui-button @click="regenerateToken"><fa icon="sync-alt"/> {{ $t('regenerate-token') }}</ui-button>
2018-10-26 01:37:30 +02:00
</section>
<section>
<header><fa icon="terminal"/> {{ $t('console.title') }}</header>
2018-10-26 01:37:30 +02:00
<ui-input v-model="endpoint">
<span>{{ $t('console.endpoint') }}</span>
2018-10-26 01:37:30 +02:00
</ui-input>
<ui-textarea v-model="body">
<span>{{ $t('console.parameter') }} (JSON or JSON5)</span>
<span slot="desc">{{ $t('console.credential-info') }}</span>
2018-10-26 01:37:30 +02:00
</ui-textarea>
<ui-button @click="send" :disabled="sending">
<template v-if="sending">{{ $t('console.sending') }}</template>
<template v-else><fa icon="paper-plane"/> {{ $t('console.send') }}</template>
2018-10-26 01:37:30 +02:00
</ui-button>
2018-10-26 07:47:30 +02:00
<ui-textarea v-if="res" v-model="res" readonly tall>
<span>{{ $t('console.response') }}</span>
2018-10-26 01:37:30 +02:00
</ui-textarea>
</section>
</ui-card>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-10-26 01:37:30 +02:00
import * as JSON5 from 'json5';
export default Vue.extend({
i18n: i18n('common/views/components/api-settings.vue'),
2018-10-26 01:37:30 +02:00
data() {
return {
endpoint: '',
body: '{}',
res: null,
sending: false
};
},
methods: {
regenerateToken() {
(this as any).apis.input({
title: this.$t('enter-password'),
2018-10-26 01:37:30 +02:00
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>