Restore Teleporter functionality. Concerning compatibility, https://c…

…aniuse.com/url tells us it can be used iny any sufficiently recent browser except IE and Opera Mini

Signed-off-by: DL6ER <[email protected]>

scripts/pi-hole/js/settings-teleporter.js

@@ -33,6 +33,7 @@ function importZIP() {
   fetch("/api/teleporter", {
     method: "POST",
     body: formData,
+    headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
   })
     .then(response => response.json())
     .then(data => {
@@ -70,3 +71,27 @@ function importZIP() {
       console.error(error); // eslint-disable-line no-console
     });
 }
+
+// Inspired by https://stackoverflow.com/a/59576416/2087442
+$("#GETTeleporter").on("click", function () {
+  $.ajax({
+    url: "/api/teleporter",
+    headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
+    method: "GET",
+    xhrFields: {
+      responseType: "blob",
+    },
+    success: function (data) {
+      var a = document.createElement("a");
+      // eslint-disable-next-line compat/compat
+      var url = window.URL.createObjectURL(data);
+      a.href = url;
+      a.download = "teleporter.zip";
+      document.body.append(a);
+      a.click();
+      a.remove();
+      // eslint-disable-next-line compat/compat
+      window.URL.revokeObjectURL(url);
+    },
+  });
+});

settings-teleporter.lp

@@ -23,7 +23,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                 <p>Warning: This archive contains sensitive information about your Pi-hole installation, e.g. the API token and the 2FA-TOTP secret (if enabled). Please be careful with this file and do not share it with anyone even if they claim to help you.</p>
                 <? if not is_secure then ?><p class='text-danger'>Warning: You are currently not using an end-to-end encryption. This means that your API token and 2FA-TOTP secret will be transmitted in plain text. We recommend to use HTTPS when exporting your configuration.</p><? end ?>
                 <div class="pull-right">
-                    <a class="btn btn-app btn-success" href="/api/teleporter" target="_blank">
+                    <a class="btn btn-app btn-success" id="GETTeleporter" target="_blank">
                         <i class="fa fa-save"></i><br>Export
                     </a>
                 </div>