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>