client: Add LibreTranslate to admin UI

This adds a dropdown to the admin UI to select which translation service
to use.

Also made the translation service settings localizable, which funilly
enough was not already the case.

locales/en-US.yml

@@ -846,6 +846,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\
@@ -1522,3 +1524,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"

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

@@ -130,15 +130,32 @@
 					</FormSection>
 
 					<FormSection>
-						<template #label>DeepL Translation</template>
+						<template #label>{{ i18n.ts.translationSettings }}</template>
+						<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>
 
-						<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>
+						<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>
 					</FormSection>
 				</div>
 			</FormSuspense>
@@ -153,6 +170,7 @@ import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormInfo from '@/components/ui/info.vue';
 import FormSection from '@/components/form/section.vue';
+import FormSelect from '@/components/form/select.vue';
 import FormSplit from '@/components/form/split.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
@@ -182,8 +200,11 @@ 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 translationService: string = $ref('');
 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');
@@ -209,8 +230,11 @@ async function init(): Promise<void> {
 	enableServiceWorker = meta.enableServiceWorker;
 	swPublicKey = meta.swPublickey;
 	swPrivateKey = meta.swPrivateKey;
-	deeplAuthKey = meta.deeplAuthKey;
+	translationService = meta.translationService;
 	deeplIsPro = meta.deeplIsPro;
+	deeplAuthKey = meta.deeplAuthKey;
+	libreTranslateEndpoint = meta.libreTranslateEndpoint;
+	libreTranslateAuthKey = meta.libreTranslateAuthKey;
 }
 
 function save() {