Use client side translation for public login page

The translation strings are meant to be synced from Transifex.
This commit is contained in:
Chocobo1 2024-03-04 15:02:12 +08:00
parent c06817f4eb
commit ac91c1348b
No known key found for this signature in database
GPG Key ID: 210D9C873253A68C
65 changed files with 560 additions and 19 deletions

View File

@ -78,7 +78,11 @@ repos:
m4/.* |
src/base/3rdparty/.* |
src/searchengine/nova3/socks.py |
src/webui/www/private/scripts/lib/.*
src/webui/www/private/lang/.* |
src/webui/www/private/scripts/lib/.* |
src/webui/www/public/lang/.* |
src/webui/www/public/scripts/lib/.* |
src/webui/www/transifex/.*
)$
exclude_types:
- ts
@ -102,7 +106,11 @@ repos:
m4/.* |
src/base/3rdparty/.* |
src/searchengine/nova3/socks.py |
src/webui/www/private/scripts/lib/.*
src/webui/www/private/lang/.* |
src/webui/www/private/scripts/lib/.* |
src/webui/www/public/lang/.* |
src/webui/www/public/scripts/lib/.* |
src/webui/www/transifex/.*
)$
exclude_types:
- svg

View File

@ -17,6 +17,14 @@ type = QT
minimum_perc = 23
lang_map = pt: pt_PT, zh: zh_CN
[o:sledgehammer999:p:qbittorrent:r:qbittorrent_webui_json]
file_filter = src/webui/www/transifex/<lang>.json
source_file = src/webui/www/transifex/en.json
source_lang = en
type = KEYVALUEJSON
minimum_perc = 23
lang_map = pt: pt_PT, zh: zh_CN
[o:sledgehammer999:p:qbittorrent:r:qbittorrentdesktop_master]
source_file = dist/unix/org.qbittorrent.qBittorrent.desktop
source_lang = en

View File

@ -6,6 +6,7 @@
"url": "https://github.com/qbittorrent/qBittorrent.git"
},
"scripts": {
"extract_translation": "i18next -c public/i18next-parser.config.mjs public/index.html public/scripts/login.js",
"format": "js-beautify -r private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && prettier --write **.css",
"lint": "eslint private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint **/*.css && html-validate private public"
},
@ -13,6 +14,7 @@
"eslint": "*",
"eslint-plugin-html": "*",
"html-validate": "*",
"i18next-parser": "*",
"js-beautify": "*",
"prettier": "*",
"stylelint": "*",

View File

@ -31,7 +31,7 @@ body {
color: #f00;
}
#login {
#loginButton {
float: right;
}

View File

@ -0,0 +1,10 @@
export default {
createOldCatalogs: false,
failOnWarnings: true,
keySeparator: false,
lineEnding: 'lf',
locales: ['en'],
namespaceSeparator: false,
output: 'public/lang/$LOCALE.json',
sort: true
}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="${LANG}">
<html lang="en">
<head>
<meta charset="UTF-8" />
@ -16,7 +16,8 @@
<link rel="stylesheet" type="text/css" href="css/noscript.css?v=${CACHEID}" />
</noscript>
<script defer src="scripts/login.js?locale=${LANG}&v=${CACHEID}"></script>
<script defer src="scripts/lib/i18next.min.js"></script>
<script defer src="scripts/login.js?v=${CACHEID}"></script>
</head>
<body>
@ -29,17 +30,17 @@
<img src="images/qbittorrent-tray.svg" alt="qBittorrent logo" />
</div>
<div id="formplace" class="col">
<form id="loginform" method="post" onsubmit="submitLoginForm(event);">
<form id="loginform">
<div class="row">
<label for="username">Username</label><br />
<input type="text" id="username" name="username" autocomplete="username" required />
<label for="username" class="qbt-translatable" data-i18n="Username">Username</label><br />
<input type="text" id="username" name="username" autocomplete="username" autofocus required />
</div>
<div class="row">
<label for="password">Password</label><br />
<label for="password" class="qbt-translatable" data-i18n="Password">Password</label><br />
<input type="password" id="password" name="password" autocomplete="current-password" required />
</div>
<div class="row">
<input type="submit" id="login" value="Login" />
<input type="submit" id="loginButton" class="qbt-translatable" data-i18n="Login" value="Login" />
</div>
</form>
</div>

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "Invalid Username or Password.",
"Login": "Login",
"Password": "Password",
"Unable to log in, server is probably unreachable.": "Unable to log in, server is probably unreachable.",
"Username": "Username"
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

View File

@ -0,0 +1,7 @@
{
"Invalid Username or Password.": "",
"Login": "",
"Password": "",
"Unable to log in, server is probably unreachable.": "",
"Username": ""
}

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
/*
* Bittorrent Client using Qt and libtorrent.
* Copyright (C) 2019 Mike Tzou (Chocobo1)
* Copyright (C) 2019-2024 Mike Tzou (Chocobo1)
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
@ -28,10 +28,64 @@
'use strict';
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('username').focus();
document.getElementById('username').select();
});
async function setupI18n() {
const languages = (() => {
const langs = new Set();
for (const lang of navigator.languages) {
langs.add(lang.replace('-', '_'));
const idx = lang.indexOf('-');
if (idx > 0)
langs.add(lang.slice(0, idx));
}
langs.add('en'); // fallback
return Array.from(langs);
})();
// it is faster to fetch all translation files at once than one by one
const fetches = languages.map(lang => fetch(`lang/${lang}.json`));
const fetchResults = await Promise.allSettled(fetches);
const translations = fetchResults
.map((value, idx) => ({ lang: languages[idx], result: value }))
.filter(v => (v.result.value.status === 200));
const translation = {
lang: (translations.length > 0) ? translations[0].lang.replace('_', '-') : undefined,
data: (translations.length > 0) ? (await translations[0].result.value.json()) : {}
};
// present it to i18next
const i18nextOptions = {
lng: translation.lang,
fallbackLng: false,
load: 'currentOnly',
resources: {
[translation.lang]: { translation: translation.data }
},
returnEmptyString: false
};
i18next.init(i18nextOptions, replaceI18nText);
}
function replaceI18nText() {
const tr = i18next.t; // workaround for warnings from i18next-parser
for (const element of document.getElementsByClassName('qbt-translatable')) {
const translationKey = element.getAttribute('data-i18n');
const translatedValue = tr(translationKey);
switch (element.nodeName) {
case 'INPUT':
element.value = translatedValue;
break;
case 'LABEL':
element.textContent = translatedValue;
break;
default:
console.error(`Unhandled element: ${element}`);
break;
}
}
document.documentElement.lang = i18next.language.split('-')[0];
}
function submitLoginForm(event) {
event.preventDefault();
@ -40,18 +94,18 @@ function submitLoginForm(event) {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'api/v2/auth/login', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.addEventListener('readystatechange', function() {
xhr.addEventListener('readystatechange', () => {
if (xhr.readyState === 4) { // DONE state
if ((xhr.status === 200) && (xhr.responseText === "Ok."))
location.replace(location);
else
errorMsgElement.textContent = 'Invalid Username or Password.';
errorMsgElement.textContent = i18next.t('Invalid Username or Password.');
}
});
xhr.addEventListener('error', function() {
xhr.addEventListener('error', () => {
errorMsgElement.textContent = (xhr.responseText !== "")
? xhr.responseText
: 'Unable to log in, qBittorrent is probably unreachable.';
: i18next.t('Unable to log in, server is probably unreachable.');
});
const usernameElement = document.getElementById('username');
@ -62,3 +116,11 @@ function submitLoginForm(event) {
// clear the field
passwordElement.value = '';
}
document.addEventListener('DOMContentLoaded', () => {
const loginForm = document.getElementById('loginform');
loginForm.setAttribute('method', 'POST');
loginForm.addEventListener('submit', submitLoginForm);
setupI18n();
});

View File

@ -423,6 +423,63 @@
<file>public/images/qbittorrent-tray.svg</file>
<file>public/images/qbittorrent32.png</file>
<file>public/index.html</file>
<file>public/lang/ar.json</file>
<file>public/lang/az@latin.json</file>
<file>public/lang/be.json</file>
<file>public/lang/bg.json</file>
<file>public/lang/ca.json</file>
<file>public/lang/cs.json</file>
<file>public/lang/da.json</file>
<file>public/lang/de.json</file>
<file>public/lang/el.json</file>
<file>public/lang/en.json</file>
<file>public/lang/en_AU.json</file>
<file>public/lang/en_GB.json</file>
<file>public/lang/eo.json</file>
<file>public/lang/es.json</file>
<file>public/lang/et.json</file>
<file>public/lang/eu.json</file>
<file>public/lang/fa.json</file>
<file>public/lang/fi.json</file>
<file>public/lang/fr.json</file>
<file>public/lang/gl.json</file>
<file>public/lang/he.json</file>
<file>public/lang/hi_IN.json</file>
<file>public/lang/hr.json</file>
<file>public/lang/hu.json</file>
<file>public/lang/hy.json</file>
<file>public/lang/id.json</file>
<file>public/lang/is.json</file>
<file>public/lang/it.json</file>
<file>public/lang/ja.json</file>
<file>public/lang/ka.json</file>
<file>public/lang/ko.json</file>
<file>public/lang/lt.json</file>
<file>public/lang/ltg.json</file>
<file>public/lang/lv_LV.json</file>
<file>public/lang/mn_MN.json</file>
<file>public/lang/ms_MY.json</file>
<file>public/lang/nb.json</file>
<file>public/lang/nl.json</file>
<file>public/lang/oc.json</file>
<file>public/lang/pl.json</file>
<file>public/lang/pt_BR.json</file>
<file>public/lang/pt_PT.json</file>
<file>public/lang/ro.json</file>
<file>public/lang/ru.json</file>
<file>public/lang/sk.json</file>
<file>public/lang/sl.json</file>
<file>public/lang/sr.json</file>
<file>public/lang/sv.json</file>
<file>public/lang/th.json</file>
<file>public/lang/tr.json</file>
<file>public/lang/uk.json</file>
<file>public/lang/uz@Latn.json</file>
<file>public/lang/vi.json</file>
<file>public/lang/zh_CN.json</file>
<file>public/lang/zh_HK.json</file>
<file>public/lang/zh_TW.json</file>
<file>public/scripts/lib/i18next.min.js</file>
<file>public/scripts/login.js</file>
</qresource>
</RCC>