From cfe0f3ca671339c5c440f99e771f142f67335296 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Tue, 1 Nov 2022 01:40:54 -0400
Subject: [PATCH] client: Add LibreTranslate support

This adds a new "Translation Settings" page to the admin interface where
the admin can configure the instance's translation settings. The
existing settigns for DeepL translation settings will now be located in
that page alongside the new LibreTranslate stuff.

Also made the translation service settings localizable, which funnily
enough was not already the case.
---
 locales/en-US.yml                             |  9 ++
 packages/client/src/pages/admin/index.vue     |  6 ++
 packages/client/src/pages/admin/settings.vue  | 20 +----
 .../src/pages/admin/translation-settings.vue  | 86 +++++++++++++++++++
 4 files changed, 102 insertions(+), 19 deletions(-)
 create mode 100644 packages/client/src/pages/admin/translation-settings.vue

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 28cabce03..c746e460e 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -849,6 +849,8 @@ misskeyUpdated: "FoundKey has been updated!"
 whatIsNew: "Show changes"
 translate: "Translate"
 translatedFrom: "Translated from {x}"
+translationSettings: "Translation Settings"
+translationService: "Translation Service"
 accountDeletionInProgress: "Account deletion is currently in progress."
 usernameInfo: "A name that identifies your account from others on this server.  You\
   \ can use the alphabet (a~z, A~Z), digits (0~9) or underscores (_). Usernames cannot\
@@ -1525,3 +1527,10 @@ _services:
   _github:
     connected: "GitHub: @{login} connected to FoundKey: @{userName}!"
     disconnected: "GitHub linkage has been removed."
+_translationService:
+  _deepl:
+    authKey: "DeepL Auth Key"
+    pro: "Pro Account"
+  _libreTranslate:
+    endpoint: "LibreTranslate API Endpoint"
+    authKey: "LibreTranslate Auth Key (optional)"
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 441b4953a..e45ac1772 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -172,6 +172,11 @@ const menuDef = $computed(() => [{
 		text: i18n.ts.proxyAccount,
 		to: '/admin/proxy-account',
 		active: props.initialPage === 'proxy-account',
+	}, {
+		icon: 'fas fa-language',
+		text: i18n.ts.translationSettings,
+		to: '/admin/translation-settings',
+		active: props.initialPage === 'translation-settings',
 	}],
 }, {
 	title: i18n.ts.info,
@@ -202,6 +207,7 @@ const component = $computed(() => {
 		case 'integrations': return defineAsyncComponent(() => import('./integrations.vue'));
 		case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue'));
 		case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
+		case 'translation-settings': return defineAsyncComponent(() => import('./translation-settings.vue'));
 		default: return null;
 	}
 });
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index a6c98f49a..daf5a58fb 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -128,18 +128,6 @@
 							</FormInput>
 						</template>
 					</FormSection>
-
-					<FormSection>
-						<template #label>DeepL Translation</template>
-
-						<FormInput v-model="deeplAuthKey" class="_formBlock">
-							<template #prefix><i class="fas fa-key"></i></template>
-							<template #label>DeepL Auth Key</template>
-						</FormInput>
-						<FormSwitch v-model="deeplIsPro" class="_formBlock">
-							<template #label>Pro account</template>
-						</FormSwitch>
-					</FormSection>
 				</div>
 			</FormSuspense>
 		</MkSpacer>
@@ -182,8 +170,6 @@ let emailRequiredForSignup: boolean = $ref(false);
 let enableServiceWorker: boolean = $ref(false);
 let swPublicKey: any = $ref(null);
 let swPrivateKey: any = $ref(null);
-let deeplAuthKey: string = $ref('');
-let deeplIsPro: boolean = $ref(false);
 
 async function init(): Promise<void> {
 	const meta = await os.api('admin/meta');
@@ -209,11 +195,9 @@ async function init(): Promise<void> {
 	enableServiceWorker = meta.enableServiceWorker;
 	swPublicKey = meta.swPublickey;
 	swPrivateKey = meta.swPrivateKey;
-	deeplAuthKey = meta.deeplAuthKey;
-	deeplIsPro = meta.deeplIsPro;
 }
 
-function save() {
+function save(): void {
 	os.apiWithDialog('admin/update-meta', {
 		name,
 		description,
@@ -237,8 +221,6 @@ function save() {
 		enableServiceWorker,
 		swPublicKey,
 		swPrivateKey,
-		deeplAuthKey,
-		deeplIsPro,
 	}).then(() => {
 		fetchInstance();
 	});
diff --git a/packages/client/src/pages/admin/translation-settings.vue b/packages/client/src/pages/admin/translation-settings.vue
new file mode 100644
index 000000000..15085940b
--- /dev/null
+++ b/packages/client/src/pages/admin/translation-settings.vue
@@ -0,0 +1,86 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions"/></template>
+	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+		<FormSuspense :p="init">
+			<div class="_formRoot">
+				<FormSelect v-model="translationService" class="_formBlock">
+					<template #label>{{ i18n.ts.translationService }}</template>
+					<option value="none">{{ i18n.ts.none }}</option>
+					<option value="deepl">DeepL</option>
+					<option value="libretranslate">LibreTranslate</option>
+				</FormSelect>
+
+				<template v-if="translationService === 'deepl'">
+					<FormSwitch v-model="deeplIsPro" class="_formBlock">
+						<template #label>{{ i18n.ts._translationService._deepl.pro }}</template>
+					</FormSwitch>
+					<FormInput v-model="deeplAuthKey" class="_formBlock">
+						<template #prefix><i class="fas fa-key"></i></template>
+						<template #label>{{ i18n.ts._translationService._deepl.authKey }}</template>
+					</FormInput>
+				</template>
+				<template v-else-if="translationService === 'libretranslate'">
+					<FormInput v-model="libreTranslateEndpoint" class="_formBlock">
+						<template #label>{{ i18n.ts._translationService._libreTranslate.endpoint }}</template>
+					</FormInput>
+					<FormInput v-model="libreTranslateAuthKey" class="_formBlock">
+						<template #prefix><i class="fas fa-key"></i></template>
+						<template #label>{{ i18n.ts._translationService._libreTranslate.authKey }}</template>
+					</FormInput>
+				</template>
+			</div>
+		</FormSuspense>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import FormInput from '@/components/form/input.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { fetchInstance } from '@/instance';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let translationService: string = $ref('none');
+let deeplIsPro: boolean = $ref(false);
+let deeplAuthKey: string = $ref('');
+let libreTranslateEndpoint: string = $ref('');
+let libreTranslateAuthKey: string = $ref('');
+
+async function init(): Promise<void> {
+	const meta = await os.api('admin/meta');
+	translationService = meta.translationService ?? 'none';
+	deeplIsPro = meta.deeplIsPro;
+	deeplAuthKey = meta.deeplAuthKey;
+	libreTranslateEndpoint = meta.libreTranslateEndpoint;
+	libreTranslateAuthKey = meta.libreTranslateAuthKey;
+}
+
+function save(): void {
+	os.apiWithDialog('admin/update-meta', {
+		translationService: translationService === 'none' ? null : translationService,
+		deeplAuthKey,
+		deeplIsPro,
+		libreTranslateEndpoint,
+		libreTranslateAuthKey,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'fas fa-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+definePageMetadata({
+	title: i18n.ts.translationSettings,
+	icon: 'fas fa-language',
+});
+</script>