From c72f5e27734e13fe5d14499a1d728f0b641a4d38 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal <andreas.nedbal@in2code.de> Date: Wed, 4 May 2022 03:15:43 +0200 Subject: [PATCH] refactor(client): refactor settings/api to use Composition API (#8569) --- packages/client/src/pages/settings/api.vue | 67 +++++++++------------- 1 file changed, 28 insertions(+), 39 deletions(-) diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue index 23e34e3343..e6375763f1 100644 --- a/packages/client/src/pages/settings/api.vue +++ b/packages/client/src/pages/settings/api.vue @@ -1,56 +1,45 @@ <template> <div class="_formRoot"> - <FormButton primary class="_formBlock" @click="generateToken">{{ $ts.generateAccessToken }}</FormButton> - <FormLink to="/settings/apps" class="_formBlock">{{ $ts.manageAccessTokens }}</FormLink> + <FormButton primary class="_formBlock" @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton> + <FormLink to="/settings/apps" class="_formBlock">{{ i18n.ts.manageAccessTokens }}</FormLink> <FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink> </div> </template> -<script lang="ts"> -import { defineAsyncComponent, defineComponent } from 'vue'; +<script lang="ts" setup> +import { defineAsyncComponent, defineExpose, ref } from 'vue'; import FormLink from '@/components/form/link.vue'; import FormButton from '@/components/ui/button.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { - FormButton, - FormLink, - }, +const isDesktop = ref(window.innerWidth >= 1100); - emits: ['info'], +function generateToken() { + os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {}, { + done: async result => { + const { name, permissions } = result; + const { token } = await os.api('miauth/gen-token', { + session: null, + name: name, + permission: permissions, + }); - data() { - return { - [symbols.PAGE_INFO]: { - title: 'API', - icon: 'fas fa-key', - bg: 'var(--bg)', - }, - isDesktop: window.innerWidth >= 1100, - }; - }, - - methods: { - generateToken() { - os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {}, { - done: async result => { - const { name, permissions } = result; - const { token } = await os.api('miauth/gen-token', { - session: null, - name: name, - permission: permissions, - }); - - os.alert({ - type: 'success', - title: this.$ts.token, - text: token - }); - }, - }, 'closed'); + os.alert({ + type: 'success', + title: i18n.ts.token, + text: token + }); }, + }, 'closed'); +} + +defineExpose({ + [symbols.PAGE_INFO]: { + title: 'API', + icon: 'fas fa-key', + bg: 'var(--bg)', } }); </script>