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.
This commit is contained in:
Norm 2022-11-01 01:40:54 -04:00
parent 0db0db9a87
commit f03e64d157
Signed by untrusted user: norm
GPG key ID: 7123E30E441E80DE
2 changed files with 43 additions and 10 deletions

View file

@ -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"

View file

@ -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>
<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>DeepL Auth Key</template>
<template #label>{{ i18n.ts._translationService._deepl.authKey }}</template>
</FormInput>
<FormSwitch v-model="deeplIsPro" class="_formBlock">
<template #label>Pro account</template>
</FormSwitch>
</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() {