add multilanguage support (#769)

Thank you @cany748!

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});