add multilanguage support and add russian language (#278) from cany748

src/config.js

@@ -28,3 +28,4 @@ iptables -A FORWARD -o wg0 -j ACCEPT;
 
 module.exports.WG_PRE_DOWN = process.env.WG_PRE_DOWN || '';
 module.exports.WG_POST_DOWN = process.env.WG_POST_DOWN || '';
+module.exports.LANG = process.env.LANG || 'en';

src/lib/Server.js

@@ -17,6 +17,7 @@ const {
   WEBUI_HOST,
   RELEASE,
   PASSWORD,
+  LANG,
 } = require('../config');
 
 module.exports = class Server {
@@ -161,6 +162,9 @@ module.exports = class Server {
         const { address } = req.body;
         return WireGuard.updateClientAddress({ clientId, address });
       }))
+      .get('/api/lang', (Util.promisify(async () => {
+        return LANG;
+      })))
 
       .listen(PORT, WEBUI_HOST, () => {
         debug(`Listening on http://${WEBUI_HOST}:${PORT}`);

src/www/index.html

@@ -32,7 +32,8 @@
         <span v-if="requiresPassword"
           class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
           @click="logout">
-          Logout
+          {{$t("logout")}}
+
           <svg class="h-3 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -50,13 +51,13 @@
           :title="`v${currentRelease} → v${latestRelease.version}`">
           <div class="container mx-auto flex flex-row flex-auto items-center">
             <div class="flex-grow">
-              <p class="font-bold">There is an update available!</p>
+              <p class="font-bold">{{$t("updateAvailable")}}</p>
               <p>{{latestRelease.changelog}}</p>
             </div>
 
             <a href="https://github.com/wg-easy/wg-easy#updating" target="_blank"
               class="p-3 rounded-md bg-white dark:bg-red-100 float-right font-sm font-semibold text-red-800 dark:text-red-600 flex-shrink-0 border-2 border-red-800 dark:border-red-600 hover:border-white dark:hover:border-red-600 hover:text-white dark:hover:text-red-100 hover:bg-red-800 dark:hover:bg-red-600 transition-all">
-              Update →
+              {{$t("update")}} →
             </a>
           </div>
         </div>
@@ -64,7 +65,7 @@
         <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
           <div class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600">
             <div class="flex-grow">
-              <p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
+              <p class="text-2xl font-medium dark:text-neutral-200">{{$t("clients")}}</p>
             </div>
             <div class="flex-shrink-0">
               <button @click="clientCreate = true; clientCreateName = '';"
@@ -74,7 +75,7 @@
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                     d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                 </svg>
-                <span class="text-sm">New</span>
+                <span class="text-sm">{{$t("new")}}</span>
               </button>
             </div>
           </div>
@@ -94,7 +95,6 @@
                   style="transform: scaleY(-1);">
                 </apexchart>
               </div>
-
               <div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
                 <div class="flex items-center pb-2 md:pb-0">
                   <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
@@ -118,7 +118,7 @@
 
                     <!-- Name -->
                     <div class="text-gray-700 dark:text-neutral-200 group"
-                      :title="'Created on ' + dateTime(new Date(client.createdAt))">
+                      :title="$t('createdOn') + dateTime(new Date(client.createdAt))">
 
                       <!-- Show -->
                       <input v-show="clientEditNameId === client.id" v-model="clientEditName"
@@ -171,7 +171,7 @@
                       </span>
 
                       <!-- Transfer TX -->
-                      <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
+                      <span v-if="client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
                         ·
                         <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                           fill="currentColor">
@@ -183,7 +183,7 @@
                       </span>
 
                       <!-- Transfer RX -->
-                      <span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)">
+                      <span v-if="client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
                         ·
                         <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                           fill="currentColor">
@@ -196,7 +196,7 @@
 
                       <!-- Last seen -->
                       <span v-if="client.latestHandshakeAt"
-                        :title="'Last seen on ' + dateTime(new Date(client.latestHandshakeAt))">
+                        :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
                         · {{new Date(client.latestHandshakeAt) | timeago}}
                       </span>
                     </div>
@@ -207,19 +207,22 @@
                   <div class="text-gray-400 dark:text-neutral-400 flex gap-1 items-center justify-between">
 
                     <!-- Enable/Disable -->
-                    <div @click="disableClient(client)" v-if="client.enabled === true" title="Disable Client"
+                    <div @click="disableClient(client)" v-if="client.enabled === true" :title="$t('disableClient')"
                       class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-red-800 cursor-pointer hover:bg-red-700 transition-all">
                       <div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
                     </div>
-                    <div @click="enableClient(client)" v-if="client.enabled === false" title="Enable Client"
+
+                    <div @click="enableClient(client)" v-if="client.enabled === false" :title="$t('enableClient')"
                       class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 dark:bg-neutral-400 cursor-pointer hover:bg-gray-300 dark:hover:bg-neutral-500 transition-all">
+
                       <div class="rounded-full w-4 h-4 m-1 bg-white"></div>
                     </div>
 
                     <!-- Show QR-->
+
                     <button
                       class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
-                      title="Show QR Code" @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
+                      :title="$t('showQR')" @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
                       <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -230,7 +233,7 @@
                     <!-- Download Config -->
                     <a :href="'./api/wireguard/client/' + client.id + '/configuration'" download
                       class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
-                      title="Download Configuration">
+                      :title="$t('downloadConfig')">
                       <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -239,9 +242,10 @@
                     </a>
 
                     <!-- Delete -->
+
                     <button
                       class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
-                      title="Delete Client" @click="clientDelete = client">
+                      :title="$t('deleteClient')" @click="clientDelete = client">
                       <svg class="w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd"
                           d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
@@ -256,7 +260,7 @@
             </div>
             <div v-if="clients && clients.length === 0">
               <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
-                There are no clients yet.<br /><br />
+                {{$t("noClients")}}<br /><br />
                 <button @click="clientCreate = true; clientCreateName = '';"
                   class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition">
                   <svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -264,7 +268,7 @@
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                       d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                   </svg>
-                  <span class="text-sm">New Client</span>
+                  <span class="text-sm">{{$t("newClient")}}</span>
                 </button>
               </p>
             </div>
@@ -340,13 +344,13 @@
                   </div>
                   <div class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200" id="modal-headline">
-                      New Client
+                      {{$t("newClient")}}
                     </h3>
                     <div class="mt-2">
                       <p class="text-sm text-gray-500">
                         <input
                           class="rounded p-2 border-2 dark:bg-neutral-700 dark:text-neutral-200 border-gray-100 dark:border-neutral-600 focus:border-gray-200 focus:dark:border-neutral-500 dark:placeholder:text-neutral-400 outline-none w-full"
-                          type="text" v-model.trim="clientCreateName" placeholder="Name" />
+                          type="text" v-model.trim="clientCreateName" :placeholder="$t('name')" />
                       </p>
                     </div>
                   </div>
@@ -355,15 +359,15 @@
               <div class="bg-gray-50 dark:bg-neutral-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                 <button v-if="clientCreateName.length" type="button" @click="createClient(); clientCreate = null"
                   class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
-                  Create
+                  {{$t("create")}}
                 </button>
                 <button v-else type="button"
                   class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-200 dark:bg-neutral-400 text-base font-medium text-white dark:text-neutral-300 sm:ml-3 sm:w-auto sm:text-sm cursor-not-allowed">
-                  Create
+                  {{$t("create")}}
                 </button>
                 <button type="button" @click="clientCreate = null"
                   class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                  Cancel
+                  {{$t("cancel")}}
                 </button>
               </div>
             </div>
@@ -415,12 +419,11 @@
                   </div>
                   <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-neutral-200" id="modal-headline">
-                      Delete Client
+                      {{$t("deleteClient")}}
                     </h3>
                     <div class="mt-2">
                       <p class="text-sm text-gray-500 dark:text-neutral-300">
-                        Are you sure you want to delete <strong>{{clientDelete.name}}</strong>?
-                        This action cannot be undone.
+                        {{$t("deleteDialog1")}} <strong>{{clientDelete.name}}</strong>? {{$t("deleteDialog2")}}
                       </p>
                     </div>
                   </div>
@@ -429,11 +432,11 @@
               <div class="bg-gray-50 dark:bg-neutral-600 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                 <button type="button" @click="deleteClient(clientDelete); clientDelete = null"
                   class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 dark:bg-red-600 text-base font-medium text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
-                  Delete
+                  {{$t("deleteClient")}}
                 </button>
                 <button type="button" @click="clientDelete = null"
                   class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-neutral-500 shadow-sm px-4 py-2 bg-white dark:bg-neutral-500 text-base font-medium text-gray-700 dark:text-neutral-50 hover:bg-gray-50 dark:hover:bg-neutral-600 dark:hover:border-neutral-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                  Cancel
+                  {{$t("cancel")}}
                 </button>
               </div>
             </div>
@@ -454,7 +457,7 @@
             </svg>
           </div>
 
-          <input type="password" name="password" placeholder="Password" v-model="password"
+          <input type="password" name="password" :placeholder="$t('password')" v-model="password"
             class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 outline-none" />
 
           <button v-if="authenticating"
@@ -469,10 +472,10 @@
           </button>
           <input v-if="!authenticating && password" type="submit"
             class="bg-red-800 dark:bg-red-800 w-full rounded shadow py-2 text-sm text-white dark:text-white hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer"
-            value="Sign In">
+            :value="$t('signIn')">
           <input v-if="!authenticating && !password" type="submit"
             class="bg-gray-200 dark:bg-neutral-800 w-full rounded shadow py-2 text-sm text-white dark:text-white cursor-not-allowed"
-            value="Sign In">
+            :value="$t('signIn')">
         </form>
       </div>
 
@@ -494,17 +497,18 @@
         href="https://github.com/wg-easy/wg-easy">WireGuard Easy</a> © 2021-2024 by <a class="hover:underline" target="_blank"
         href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> is licensed under <a class="hover:underline" target="_blank"
         href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> · <a class="hover:underline"
-        href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a></p>
-
+        href="https://github.com/sponsors/WeeJeWel" target="_blank">{{$t("donate")}}</a></p>
 
   </div>
 
   <script src="./js/vendor/vue.min.js"></script>
+  <script src="./js/vendor/vue-i18n.min.js"></script>
   <script src="./js/vendor/apexcharts.min.js"></script>
   <script src="./js/vendor/vue-apexcharts.min.js"></script>
   <script src="./js/vendor/sha512.min.js"></script>
-  <script src="./js/vendor/timeago.min.js"></script>
+  <script src="./js/vendor/timeago.full.min.js"></script>
   <script src="./js/api.js"></script>
+  <script src="./js/i18n.js"></script>
   <script src="./js/app.js"></script>
 </body>
 

src/www/js/api.js

@@ -117,4 +117,11 @@ class API {
     });
   }
 
+  async getLang() {
+    return this.call({
+      method: 'get',
+      path: '/lang',
+    });
+  }
+
 }

src/www/js/app.js

@@ -23,8 +23,15 @@ function bytes(bytes, decimals, kib, maxunit) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
+const i18n = new VueI18n({
+  locale: localStorage.getItem('lang') || 'en',
+  fallbackLocale: 'en',
+  messages,
+});
+
 new Vue({
   el: '#app',
+  i18n,
   data: {
     authenticated: null,
     authenticating: false,
@@ -255,7 +262,7 @@ new Vue({
   filters: {
     bytes,
     timeago: (value) => {
-      return timeago().format(value);
+      return timeago.format(value, i18n.locale);
     },
   },
   mounted() {
@@ -286,6 +293,12 @@ new Vue({
     }, 1000);
 
     Promise.resolve().then(async () => {
+      const lang = await this.api.getLang();
+      if (lang !== localStorage.getItem('lang') && i18n.availableLocales.includes(lang)) {
+        localStorage.setItem('lang', lang);
+        i18n.locale = lang;
+      }
+
       const currentRelease = await this.api.getRelease();
       const latestRelease = await fetch('https://wg-easy.github.io/wg-easy/changelog.json')
         .then((res) => res.json())

src/www/js/i18n.js

@@ -0,0 +1,194 @@
+'use strict';
+
+const messages = { // eslint-disable-line no-unused-vars
+  en: {
+    name: 'Name',
+    password: 'Password',
+    signIn: 'Sign In',
+    logout: 'Logout',
+    updateAvailable: 'There is an update available!',
+    update: 'Update',
+    clients: 'Clients',
+    new: 'New',
+    deleteClient: 'Delete Client',
+    deleteDialog1: 'Are you sure you want to delete',
+    deleteDialog2: 'This action cannot be undone.',
+    cancel: 'Cancel',
+    create: 'Create',
+    createdOn: 'Created on ',
+    lastSeen: 'Last seen on ',
+    totalDownload: 'Total Download: ',
+    totalUpload: 'Total Upload: ',
+    newClient: 'New Client',
+    disableClient: 'Disable Client',
+    enableClient: 'Enable Client',
+    noClients: 'There are no clients yet.',
+    showQR: 'Show QR Code',
+    downloadConfig: 'Download Configuration',
+    madeBy: 'Made by',
+    donate: 'Donate',
+  },
+  ru: {
+    name: 'Имя',
+    password: 'Пароль',
+    signIn: 'Войти',
+    logout: 'Выйти',
+    updateAvailable: 'Доступно обновление!',
+    update: 'Обновить',
+    clients: 'Клиенты',
+    new: 'Создать',
+    deleteClient: 'Удалить клиента',
+    deleteDialog1: 'Вы уверены, что хотите удалить',
+    deleteDialog2: 'Это действие невозможно отменить.',
+    cancel: 'Закрыть',
+    create: 'Создать',
+    createdOn: 'Создано в ',
+    lastSeen: 'Последнее подключение в ',
+    totalDownload: 'Всего скачано: ',
+    totalUpload: 'Всего загружено: ',
+    newClient: 'Создать клиента',
+    disableClient: 'Выключить клиента',
+    enableClient: 'Включить клиента',
+    noClients: 'Пока нет клиентов.',
+    showQR: 'Показать QR-код',
+    downloadConfig: 'Скачать конфигурацию',
+    madeBy: 'Автор',
+    donate: 'Поблагодарить',
+  },
+  tr: { // Müslüm Barış Korkmazer @babico
+    name: 'İsim',
+    password: 'Şifre',
+    signIn: 'Giriş Yap',
+    logout: 'Çıkış Yap',
+    updateAvailable: 'Mevcut bir güncelleme var!',
+    update: 'Güncelle',
+    clients: 'Kullanıcılar',
+    new: 'Yeni',
+    deleteClient: 'Kullanıcı Sil',
+    deleteDialog1: 'Silmek istediğine emin misin',
+    deleteDialog2: 'Bu işlem geri alınamaz.',
+    cancel: 'İptal',
+    create: 'Oluştur',
+    createdAt: 'Şu saatte oluşturuldu: ',
+    lastSeen: 'Son görülme tarihi: ',
+    totalDownload: 'Toplam İndirme: ',
+    totalUpload: 'Toplam Yükleme: ',
+    newClient: 'Yeni Kullanıcı',
+    disableClient: 'İstemciyi Devre Dışı Bırak',
+    enableClient: 'İstemciyi Etkinleştir',
+    noClients: 'Henüz kullanıcı yok.',
+    showQR: 'QR Kodunu Göster',
+    downloadConfig: 'Yapılandırmayı İndir',
+    madeBy: 'Yapan Kişi: ',
+    donate: 'Bağış Yap',
+    changeLang: 'Dil Değiştir',
+  },
+  no: { // github.com/digvalley
+    name: 'Navn',
+    password: 'Passord',
+    signIn: 'Logg Inn',
+    logout: 'Logg Ut',
+    updateAvailable: 'En ny oppdatering er tilgjengelig!',
+    update: 'Oppdater',
+    clients: 'Klienter',
+    new: 'Ny',
+    deleteClient: 'Slett Klient',
+    deleteDialog1: 'Er du sikker på at du vil slette?',
+    deleteDialog2: 'Denne handlingen kan ikke angres',
+    cancel: 'Avbryt',
+    create: 'Opprett',
+    createdOn: 'Opprettet ',
+    lastSeen: 'Sist sett ',
+    totalDownload: 'Total Nedlasting: ',
+    totalUpload: 'Total Opplasting: ',
+    newClient: 'Ny Klient',
+    disableClient: 'Deaktiver Klient',
+    enableClient: 'Aktiver Klient',
+    noClients: 'Ingen klienter opprettet enda.',
+    showQR: 'Vis QR Kode',
+    downloadConfig: 'Last Ned Konfigurasjon',
+    madeBy: 'Laget av',
+    donate: 'Doner',
+  },
+  pl: { // github.com/archont94
+    name: 'Nazwa',
+    password: 'Hasło',
+    signIn: 'Zaloguj się',
+    logout: 'Wyloguj się',
+    updateAvailable: 'Dostępna aktualizacja!',
+    update: 'Aktualizuj',
+    clients: 'Klienci',
+    new: 'Stwórz klienta',
+    deleteClient: 'Usuń klienta',
+    deleteDialog1: 'Jesteś pewny że chcesz usunąć',
+    deleteDialog2: 'Tej akcji nie da się cofnąć.',
+    cancel: 'Anuluj',
+    create: 'Stwórz',
+    createdOn: 'Utworzono ',
+    lastSeen: 'Ostatnio widziany ',
+    totalDownload: 'Całkowite pobieranie: ',
+    totalUpload: 'Całkowite wysyłanie: ',
+    newClient: 'Nowy klient',
+    disableClient: 'Wyłączenie klienta',
+    enableClient: 'Włączenie klienta',
+    noClients: 'Nie ma jeszcze klientów.',
+    showQR: 'Pokaż kod QR',
+    downloadConfig: 'Pobierz konfigurację',
+    madeBy: 'Stworzone przez',
+    donate: 'Wsparcie autora',
+  },
+  fr: { // github.com/clem3109
+    name: 'Nom',
+    password: 'Mot de passe',
+    signIn: 'Se Connecter',
+    logout: 'Se déconnecter',
+    updateAvailable: 'Une mise à jour est disponible !',
+    update: 'Mise à jour',
+    clients: 'Clients',
+    new: 'Nouveau',
+    deleteClient: 'Supprimer ce client',
+    deleteDialog1: 'Êtes-vous que vous voulez supprimer',
+    deleteDialog2: 'Cette action ne peut pas être annulée.',
+    cancel: 'Annuler',
+    create: 'Créer',
+    createdOn: 'Créé le ',
+    lastSeen: 'Dernière connexion le ',
+    totalDownload: 'Téléchargement total : ',
+    totalUpload: 'Téléversement total : ',
+    newClient: 'Nouveau client',
+    disableClient: 'Désactiver ce client',
+    enableClient: 'Activer ce client',
+    noClients: 'Aucun client pour le moment.',
+    showQR: 'Afficher le code à réponse rapide (QR Code)',
+    downloadConfig: 'Télécharger la configuration',
+    madeBy: 'Développé par',
+    donate: 'Soutenir',
+  },
+  de: { // github.com/florian-asche
+    name: 'Name',
+    password: 'Passwort',
+    signIn: 'Anmelden',
+    logout: 'Abmelden',
+    updateAvailable: 'Eine Aktualisierung steht zur Verfügung!',
+    update: 'Aktualisieren',
+    clients: 'Clients',
+    new: 'Neu',
+    deleteClient: 'Client löschen',
+    deleteDialog1: 'Möchtest du wirklich löschen?',
+    deleteDialog2: 'Diese Aktion kann nicht rückgängig gemacht werden.',
+    cancel: 'Abbrechen',
+    create: 'Erstellen',
+    createdOn: 'Erstellt am ',
+    lastSeen: 'Zuletzt Online ',
+    totalDownload: 'Gesamt Download: ',
+    totalUpload: 'Gesamt Upload: ',
+    newClient: 'Neuer Client',
+    disableClient: 'Client deaktivieren',
+    enableClient: 'Client aktivieren',
+    noClients: 'Es wurden noch keine Clients konfiguriert.',
+    showQR: 'Zeige den QR Code',
+    downloadConfig: 'Konfiguration herunterladen',
+    madeBy: 'Erstellt von',
+    donate: 'Spenden',
+  },
+};

src/www/js/vendor/timeago.min.js

@@ -1 +0,0 @@
-!function(t,e){"object"==typeof module&&module.exports?module.exports=e(t):t.timeago=e(t)}("undefined"!=typeof window?window:this,function(){function t(t){return t instanceof Date?t:isNaN(t)?/^\d+$/.test(t)?new Date(e(t,10)):(t=(t||"").trim().replace(/\.\d+/,"").replace(/-/,"/").replace(/-/,"/").replace(/T/," ").replace(/Z/," UTC").replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"),new Date(t)):new Date(e(t))}function e(t){return parseInt(t)}function n(t,n,r){n=d[n]?n:d[r]?r:"en";var i=0;for(agoin=t<0?1:0,t=Math.abs(t);t>=l[i]&&i<p;i++)t/=l[i];return t=e(t),i*=2,t>(0===i?9:1)&&(i+=1),d[n](t,i)[agoin].replace("%s",t)}function r(e,n){return n=n?t(n):new Date,(n-t(e))/1e3}function i(t){for(var e=1,n=0,r=Math.abs(t);t>=l[n]&&n<p;n++)t/=l[n],e*=l[n];return r%=e,r=r?e-r:e,Math.ceil(r)}function o(t){return t.getAttribute?t.getAttribute(h):t.attr?t.attr(h):void 0}function a(t,e){function a(o,c,f,s){var d=r(c,t);o.innerHTML=n(d,f,e),u["k"+s]=setTimeout(function(){a(o,c,f,s)},1e3*i(d))}var u={};return e||(e="en"),this.format=function(i,o){return n(r(i,t),o,e)},this.render=function(t,e){void 0===t.length&&(t=[t]);for(var n=0;n<t.length;n++)a(t[n],o(t[n]),e,++c)},this.cancel=function(){for(var t in u)clearTimeout(u[t]);u={}},this.setLocale=function(t){e=t},this}function u(t,e){return new a(t,e)}var c=0,f="second_minute_hour_day_week_month_year".split("_"),s="秒_分钟_小时_天_周_月_年".split("_"),d={en:function(t,e){if(0===e)return["just now","right now"];var n=f[parseInt(e/2)];return t>1&&(n+="s"),[t+" "+n+" ago","in "+t+" "+n]},zh_CN:function(t,e){if(0===e)return["刚刚","片刻后"];var n=s[parseInt(e/2)];return[t+n+"前",t+n+"后"]}},l=[60,60,24,7,365/7/12,12],p=6,h="datetime";return u.register=function(t,e){d[t]=e},u});