feat: support more langs

* add translations for French, Spanish, and Italian
* change the wording for better understanding of this feature:
    - "import" to "restore"
    - "export" to "backup"
* rename functions to reflect these changes

src/lib/Server.js

@@ -270,15 +270,15 @@ module.exports = class Server {
     app.use(router3);
 
     router3
-      .get('/api/wireguard/dl', defineEventHandler(async (event) => {
+      .get('/api/wireguard/backup', defineEventHandler(async (event) => {
-        const config = await WireGuard.downloadConfiguration();
+        const config = await WireGuard.backupConfiguration();
         setHeader(event, 'Content-Disposition', 'attachment; filename="wg0.json"');
         setHeader(event, 'Content-Type', 'text/json');
         return config;
       }))
-      .put('/api/wireguard/upload', defineEventHandler(async (event) => {
+      .put('/api/wireguard/restore', defineEventHandler(async (event) => {
         const { file } = await readBody(event);
-        await WireGuard.uploadConfiguration(file);
+        await WireGuard.restoreConfiguration(file);
         return { success: true };
       }));
 

src/lib/WireGuard.js

@@ -319,15 +319,18 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
     await this.saveConfig();
   }
 
-  async uploadConfiguration(config) {
+  async ___forceRestart() {
-    const _config = JSON.parse(config);
-    await this.__saveConfig(_config);
-    // force restart
     this.__configPromise = null;
     await this.saveConfig();
   }
 
-  async downloadConfiguration() {
+  async restoreConfiguration(config) {
+    const _config = JSON.parse(config);
+    await this.__saveConfig(_config);
+    await this.___forceRestart();
+  }
+
+  async backupConfiguration() {
     const config = await this.getConfig();
     return JSON.stringify(config, null, 2);
   }

src/www/index.html

@@ -96,29 +96,30 @@
               <p class="text-2xl font-medium dark:text-neutral-200">{{$t("clients")}}</p>
             </div>
             <div class="flex-shrink-0">
-              <!-- Import configuration -->
+              <!-- Restore configuration -->
-              <label for="importConfig"
+              <label for="inputRC" :title="$t('titleRestoreConfig')"
                 class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition">
-                <svg inline class="w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22"
+                <svg inline class="w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"
                   stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+                    d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9" />
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill-rule="evenodd"
-                    d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z" />
+                    d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z" />
                 </svg>
-                <span class="text-sm">{{$t("upload")}}</span>
+                <span class="text-sm">{{$t("restore")}}</span>
-                <input id="importConfig" type="file" name="configurationfile" accept="text/*,.json"
+                <input id="inputRC" type="file" name="configurationfile" accept="text/*,.json" @change="restoreConfig"
-                  @change="importConfig" class="opacity-0 hidden -z-[1]" />
+                  class="hidden -z-[1]" />
               </label>
-              <!-- Export configuration -->
+              <!-- Backup configuration -->
-              <a href="./api/wireguard/dl" title="Download your configuration"
+              <a href="./api/wireguard/backup" :title="$t('titleBackupConfig')"
                 class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition">
-                <svg inline class="w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                <svg inline class="w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"
                   stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 2H9v3h2z" />
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                    d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z" />
                 </svg>
-                <span class="text-sm">{{$t("download")}}</span>
+                <span class="text-sm">{{$t("backup")}}</span>
               </a>
               <!-- New client -->
               <button @click="clientCreate = true; clientCreateName = '';"

src/www/js/api.js

@@ -138,19 +138,12 @@ class API {
     });
   }
 
-  async uploadConfiguration(file) {
+  async restoreConfiguration(file) {
     return this.call({
       method: 'put',
-      path: '/wireguard/upload',
+      path: '/wireguard/restore',
       body: { file },
     });
   }
 
-  async downloadConfiguration() {
-    return this.call({
-      method: 'get',
-      path: '/wireguard/dl',
-    });
-  }
-
 }

src/www/js/app.js

@@ -299,18 +299,21 @@ new Vue({
         .catch((err) => alert(err.message || err.toString()))
         .finally(() => this.refresh().catch(console.error));
     },
-    importConfig(e) {
+    restoreConfig(e) {
       e.preventDefault();
       const file = e.currentTarget.files.item(0);
-      file.text()
+      if (file) {
-        .then((content) => {
+        file.text()
-          this.api.uploadConfiguration(content)
+          .then((content) => {
-            .then((_result) => alert('The configuration was updated.'))
+            this.api.restoreConfiguration(content)
-            .catch((err) => alert(err.message || err.toString()))
+              .then((_result) => alert('The configuration was updated.'))
-            .finally(() => this.refresh().catch(console.error));
+              .catch((err) => alert(err.message || err.toString()))
-        })
+              .finally(() => this.refresh().catch(console.error));
-        .catch((err) => alert(err.message || err.toString()))
+          })
-        .finally(() => this.refresh().catch(console.error));
+          .catch((err) => alert(err.message || err.toString()));
+      } else {
+        alert('Failed to load your file!');
+      }
     },
     toggleTheme() {
       const themes = ['light', 'dark', 'auto'];

src/www/js/i18n.js

@@ -11,8 +11,6 @@ const messages = { // eslint-disable-line no-unused-vars
     clients: 'Clients',
     new: 'New',
     deleteClient: 'Delete Client',
-    upload: 'Upload',
-    download: 'Download',
     deleteDialog1: 'Are you sure you want to delete',
     deleteDialog2: 'This action cannot be undone.',
     cancel: 'Cancel',
@@ -32,6 +30,10 @@ const messages = { // eslint-disable-line no-unused-vars
     donate: 'Donate',
     toggleCharts: 'Show/hide Charts',
     theme: { dark: 'Dark theme', light: 'Light theme', auto: 'Auto theme' },
+    restore: 'Restore',
+    backup: 'Backup',
+    titleRestoreConfig: 'Restore your configuration',
+    titleBackupConfig: 'Backup your configuration',
   },
   ua: {
     name: 'Ім`я',
@@ -195,6 +197,10 @@ const messages = { // eslint-disable-line no-unused-vars
     downloadConfig: 'Télécharger la configuration',
     madeBy: 'Développé par',
     donate: 'Soutenir',
+    restore: 'Restaurer',
+    backup: 'Sauvegarder',
+    titleRestoreConfig: 'Restaurer votre configuration',
+    titleBackupConfig: 'Sauvegarder votre configuration',
   },
   de: { // github.com/florian-asche
     name: 'Name',
@@ -279,6 +285,10 @@ const messages = { // eslint-disable-line no-unused-vars
     donate: 'Donar',
     toggleCharts: 'Mostrar/Ocultar gráficos',
     theme: { dark: 'Modo oscuro', light: 'Modo claro', auto: 'Modo automático' },
+    restore: 'Restaurar',
+    backup: 'Realizar copia de seguridad',
+    titleRestoreConfig: 'Restaurar su configuración',
+    titleBackupConfig: 'Realizar copia de seguridad de su configuración',
   },
   ko: {
     name: '이름',
@@ -495,6 +505,10 @@ const messages = { // eslint-disable-line no-unused-vars
     downloadConfig: 'Scarica configurazione',
     madeBy: 'Realizzato da',
     donate: 'Donazione',
+    restore: 'Ripristina',
+    backup: 'Backup',
+    titleRestoreConfig: 'Ripristina la tua configurazione',
+    titleBackupConfig: 'Esegui il backup della tua configurazione',
   },
   th: {
     name: 'ชื่อ',