Refactor admin/email-settings to use Composition API (#8656)

* refactor(client): refactor admin/email-settings to use Composition API

* Update packages/client/src/pages/admin/email-settings.vue

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

packages/client/src/pages/admin/email-settings.vue

@@ -3,37 +3,37 @@
 	<FormSuspense :p="init">
 		<div class="_formRoot">
 			<FormSwitch v-model="enableEmail" class="_formBlock">
-				<template #label>{{ $ts.enableEmail }}</template>
+				<template #label>{{ i18n.ts.enableEmail }}</template>
-				<template #caption>{{ $ts.emailConfigInfo }}</template>
+				<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
 			</FormSwitch>
 
 			<template v-if="enableEmail">
 				<FormInput v-model="email" type="email" class="_formBlock">
-					<template #label>{{ $ts.emailAddress }}</template>
+					<template #label>{{ i18n.ts.emailAddress }}</template>
 				</FormInput>
 
 				<FormSection>
-					<template #label>{{ $ts.smtpConfig }}</template>
+					<template #label>{{ i18n.ts.smtpConfig }}</template>
 					<FormSplit :min-width="280">
 						<FormInput v-model="smtpHost" class="_formBlock">
-							<template #label>{{ $ts.smtpHost }}</template>
+							<template #label>{{ i18n.ts.smtpHost }}</template>
 						</FormInput>
 						<FormInput v-model="smtpPort" type="number" class="_formBlock">
-							<template #label>{{ $ts.smtpPort }}</template>
+							<template #label>{{ i18n.ts.smtpPort }}</template>
 						</FormInput>
 					</FormSplit>
 					<FormSplit :min-width="280">
 						<FormInput v-model="smtpUser" class="_formBlock">
-							<template #label>{{ $ts.smtpUser }}</template>
+							<template #label>{{ i18n.ts.smtpUser }}</template>
 						</FormInput>
 						<FormInput v-model="smtpPass" type="password" class="_formBlock">
-							<template #label>{{ $ts.smtpPass }}</template>
+							<template #label>{{ i18n.ts.smtpPass }}</template>
 						</FormInput>
 					</FormSplit>
-					<FormInfo class="_formBlock">{{ $ts.emptyToDisableSmtpAuth }}</FormInfo>
+					<FormInfo class="_formBlock">{{ i18n.ts.emptyToDisableSmtpAuth }}</FormInfo>
 					<FormSwitch v-model="smtpSecure" class="_formBlock">
-						<template #label>{{ $ts.smtpSecure }}</template>
+						<template #label>{{ i18n.ts.smtpSecure }}</template>
-						<template #caption>{{ $ts.smtpSecureInfo }}</template>
+						<template #caption>{{ i18n.ts.smtpSecureInfo }}</template>
 					</FormSwitch>
 				</FormSection>
 			</template>
@@ -42,8 +42,8 @@
 </MkSpacer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormInfo from '@/components/ui/info.vue';
@@ -52,64 +52,33 @@ import FormSplit from '@/components/form/split.vue';
 import FormSection from '@/components/form/section.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
-import { fetchInstance } from '@/instance';
+import { fetchInstance, instance } from '@/instance';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+let enableEmail: boolean = $ref(false);
-	components: {
+let email: any = $ref(null);
-		FormSwitch,
+let smtpSecure: boolean = $ref(false);
-		FormInput,
+let smtpHost: string = $ref('');
-		FormSplit,
+let smtpPort: number = $ref(0);
-		FormSection,
+let smtpUser: string = $ref('');
-		FormInfo,
+let smtpPass: string = $ref('');
-		FormSuspense,
-	},
 
-	emits: ['info'],
+async function init() {
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.emailServer,
-				icon: 'fas fa-envelope',
-				bg: 'var(--bg)',
-				actions: [{
-					asFullButton: true,
-					text: this.$ts.testEmail,
-					handler: this.testEmail,
-				}, {
-					asFullButton: true,
-					icon: 'fas fa-check',
-					text: this.$ts.save,
-					handler: this.save,
-				}],
-			},
-			enableEmail: false,
-			email: null,
-			smtpSecure: false,
-			smtpHost: '',
-			smtpPort: 0,
-			smtpUser: '',
-			smtpPass: '',
-		}
-	},
-
-	methods: {
-		async init() {
 	const meta = await os.api('admin/meta');
-			this.enableEmail = meta.enableEmail;
+	enableEmail = meta.enableEmail;
-			this.email = meta.email;
+	email = meta.email;
-			this.smtpSecure = meta.smtpSecure;
+	smtpSecure = meta.smtpSecure;
-			this.smtpHost = meta.smtpHost;
+	smtpHost = meta.smtpHost;
-			this.smtpPort = meta.smtpPort;
+	smtpPort = meta.smtpPort;
-			this.smtpUser = meta.smtpUser;
+	smtpUser = meta.smtpUser;
-			this.smtpPass = meta.smtpPass;
+	smtpPass = meta.smtpPass;
-		},
+}
 
-		async testEmail() {
+async function testEmail() {
 	const { canceled, result: destination } = await os.inputText({
-				title: this.$ts.destination,
+		title: i18n.ts.destination,
 		type: 'email',
-				placeholder: this.$instance.maintainerEmail
+		placeholder: instance.maintainerEmail
 	});
 	if (canceled) return;
 	os.apiWithDialog('admin/send-email', {
@@ -117,21 +86,37 @@ export default defineComponent({
 		subject: 'Test email',
 		text: 'Yo'
 	});
-		},
+}
 
-		save() {
+function save() {
 	os.apiWithDialog('admin/update-meta', {
-				enableEmail: this.enableEmail,
+		enableEmail,
-				email: this.email,
+		email,
-				smtpSecure: this.smtpSecure,
+		smtpSecure,
-				smtpHost: this.smtpHost,
+		smtpHost,
-				smtpPort: this.smtpPort,
+		smtpPort,
-				smtpUser: this.smtpUser,
+		smtpUser,
-				smtpPass: this.smtpPass,
+		smtpPass,
 	}).then(() => {
 		fetchInstance();
 	});
-		}
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.emailServer,
+		icon: 'fas fa-envelope',
+		bg: 'var(--bg)',
+		actions: [{
+			asFullButton: true,
+			text: i18n.ts.testEmail,
+			handler: testEmail,
+		}, {
+			asFullButton: true,
+			icon: 'fas fa-check',
+			text: i18n.ts.save,
+			handler: save,
+		}],
 	}
 });
 </script>