refactor(client): refactor settings/security to use Composition API (#8592)

packages/client/src/pages/settings/security.vue

@@ -1,17 +1,17 @@
 <template>
 <div class="_formRoot">
 	<FormSection>
-		<template #label>{{ $ts.password }}</template>
-		<FormButton primary @click="change()">{{ $ts.changePassword }}</FormButton>
+		<template #label>{{ i18n.ts.password }}</template>
+		<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
 	</FormSection>
 
 	<FormSection>
-		<template #label>{{ $ts.twoStepAuthentication }}</template>
+		<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
 		<X2fa/>
 	</FormSection>
 	
 	<FormSection>
-		<template #label>{{ $ts.signinHistory }}</template>
+		<template #label>{{ i18n.ts.signinHistory }}</template>
 		<MkPagination :pagination="pagination">
 			<template v-slot="{items}">
 				<div>
@@ -30,15 +30,15 @@
 
 	<FormSection>
 		<FormSlot>
-			<FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ $ts.regenerateLoginToken }}</FormButton>
-			<template #caption>{{ $ts.regenerateLoginTokenDescription }}</template>
+			<FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
+			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
 		</FormSlot>
 	</FormSection>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineExpose } from 'vue';
 import FormSection from '@/components/form/section.vue';
 import FormSlot from '@/components/form/slot.vue';
 import FormButton from '@/components/ui/button.vue';
@@ -46,48 +46,28 @@ import MkPagination from '@/components/ui/pagination.vue';
 import X2fa from './2fa.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		FormSection,
-		FormButton,
-		MkPagination,
-		FormSlot,
-		X2fa,
-	},
-	
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.security,
-				icon: 'fas fa-lock',
-				bg: 'var(--bg)',
-			},
-			pagination: {
+const pagination = {
 	endpoint: 'i/signin-history' as const,
 	limit: 5,
-			},
-		}
-	},
+};
 
-	methods: {
-		async change() {
+async function change() {
 	const { canceled: canceled1, result: currentPassword } = await os.inputText({
-				title: this.$ts.currentPassword,
+		title: i18n.ts.currentPassword,
 		type: 'password'
 	});
 	if (canceled1) return;
 
 	const { canceled: canceled2, result: newPassword } = await os.inputText({
-				title: this.$ts.newPassword,
+		title: i18n.ts.newPassword,
 		type: 'password'
 	});
 	if (canceled2) return;
 
 	const { canceled: canceled3, result: newPassword2 } = await os.inputText({
-				title: this.$ts.newPasswordRetype,
+		title: i18n.ts.newPasswordRetype,
 		type: 'password'
 	});
 	if (canceled3) return;
@@ -95,7 +75,7 @@ export default defineComponent({
 	if (newPassword !== newPassword2) {
 		os.alert({
 			type: 'error',
-					text: this.$ts.retypedNotMatch
+			text: i18n.ts.retypedNotMatch
 		});
 		return;
 	}
@@ -104,11 +84,11 @@ export default defineComponent({
 		currentPassword,
 		newPassword
 	});
-		},
+}
 
-		regenerateToken() {
+function regenerateToken() {
 	os.inputText({
-				title: this.$ts.password,
+		title: i18n.ts.password,
 		type: 'password'
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
@@ -116,7 +96,13 @@ export default defineComponent({
 			password: password
 		});
 	});
-		},
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.security,
+		icon: 'fas fa-lock',
+		bg: 'var(--bg)',
 	}
 });
 </script>