import & export configuration (#1161,#1166)

* fix: auto formatter * Revert "i18n.js: german translation" This reverts commit e4a7ff08c6. * fix conficts * feat: load configuration from file * import json config file & update the config (restore) * export the config and save it to json file (backup) * fix: reload configuration * run linter * screenshot update * 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 * i18n.js: german translation * npm: package updates * fix: icons & buttons view * update the viewBox of svg elements * add cursor pointer when hover the restore button * rebuild the css --------- Co-authored-by: tetuaoro <[email protected]> Co-authored-by: tetuaoro <[email protected]>
9 months ago · 7f05448a5d
8 changed files with 101 additions and 0 deletions
--- a/assets/screenshot.png
+++ b/assets/screenshot.png
--- a/src/lib/Server.js
+++ b/src/lib/Server.js
@ -265,6 +265,23 @@ module.exports = class Server {
      });
    };

+    // backup_restore
+    const router3 = createRouter();
+    app.use(router3);
+
+    router3
+      .get('/api/wireguard/backup', defineEventHandler(async (event) => {
+        const config = await WireGuard.backupConfiguration();
+        setHeader(event, 'Content-Disposition', 'attachment; filename="wg0.json"');
+        setHeader(event, 'Content-Type', 'text/json');
+        return config;
+      }))
+      .put('/api/wireguard/restore', defineEventHandler(async (event) => {
+        const { file } = await readBody(event);
+        await WireGuard.restoreConfiguration(file);
+        return { success: true };
+      }));
+
    // Static assets
    const publicDir = '/app/www';
    app.use(
--- a/src/lib/WireGuard.js
+++ b/src/lib/WireGuard.js
@ -319,6 +319,22 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
    await this.saveConfig();
  }

+  async ___forceRestart() {
+    this.__configPromise = null;
+    await this.saveConfig();
+  }
+
+  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);
+  }
+
  // Shutdown wireguard
  async Shutdown() {
    await Util.exec('wg-quick down wg0').catch(() => { });
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@ -1458,6 +1458,10 @@ video {
  border-bottom-width: 0px;
 }

+.hover\:cursor-pointer:hover {
+  cursor: pointer;
+}
+
 .hover\:border-red-800:hover {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
--- a/src/www/index.html
+++ b/src/www/index.html
@ -91,6 +91,26 @@
              <p class="text-2xl font-medium dark:text-neutral-200">{{$t("clients")}}</p>
            </div>
            <div class="flex-shrink-0">
+              <!-- Restore configuration -->
+              <label for="inputRC" :title="$t('titleRestoreConfig')"
+                class="hover:cursor-pointer 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="-2 -2 18 18" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" 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("restore")}}</span>
+                <input id="inputRC" type="file" name="configurationfile" accept="text/*,.json" @change="restoreConfig" class="hidden"/>
+              </label>
+              <!-- Backup 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="-2 -2 18 18" 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="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("backup")}}</span>
+              </a>
+              <!-- New client -->
              <button @click="clientCreate = true; clientCreateName = '';"
                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 class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
--- a/src/www/js/api.js
+++ b/src/www/js/api.js
@ -138,4 +138,12 @@ class API {
    });
  }

+  async restoreConfiguration(file) {
+    return this.call({
+      method: 'put',
+      path: '/wireguard/restore',
+      body: { file },
+    });
+  }
+
 }
--- a/src/www/js/app.js
+++ b/src/www/js/app.js
@ -299,6 +299,22 @@ new Vue({
        .catch((err) => alert(err.message || err.toString()))
        .finally(() => this.refresh().catch(console.error));
    },
+    restoreConfig(e) {
+      e.preventDefault();
+      const file = e.currentTarget.files.item(0);
+      if (file) {
+        file.text()
+          .then((content) => {
+            this.api.restoreConfiguration(content)
+              .then((_result) => alert('The configuration was updated.'))
+              .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'];
      const currentIndex = themes.indexOf(this.uiTheme);
--- a/src/www/js/i18n.js
+++ b/src/www/js/i18n.js
@ -30,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: 'Ім`я',
@ -193,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',
@ -221,6 +229,10 @@ const messages = { // eslint-disable-line no-unused-vars
    downloadConfig: 'Konfiguration herunterladen',
    madeBy: 'Erstellt von',
    donate: 'Spenden',
+    restore: 'Wiederherstellen',
+    backup: 'Sichern',
+    titleRestoreConfig: 'Stelle deine Konfiguration wieder her',
+    titleBackupConfig: 'Sichere deine Konfiguraion',
  },
  ca: { // github.com/guillembonet
    name: 'Nom',
@ -277,6 +289,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: '이름',
@ -493,6 +509,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: 'ชื่อ',