From 0d24f25f3c10fa86d2a16c18d72342e2e9378879 Mon Sep 17 00:00:00 2001
From: Th3M3 <the_me@outlook.de>
Date: Thu, 21 May 2020 18:52:00 +0200
Subject: [PATCH] Modal Dialog for Teleporter-import

fixes page reload every time the DHCP tab gets active

Signed-off-by: Th3M3 <the_me@outlook.de>
---
 scripts/pi-hole/js/settings.js     | 48 +++++++++++++++++++++++++++---
 scripts/pi-hole/php/teleporter.php | 41 +++++++++++++++++--------
 settings.php                       | 43 ++++++++++++++++++++++++--
 3 files changed, 112 insertions(+), 20 deletions(-)

diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
index e3f6a971..e88df5c0 100644
--- a/scripts/pi-hole/js/settings.js
+++ b/scripts/pi-hole/js/settings.js
@@ -18,6 +18,50 @@ $(function () {
     $('input[name="AddIP"]').val(ip);
     $('input[name="AddMAC"]').val(mac);
   });
+
+  // prepare Teleporter Modal & iframe for operation
+  $("#teleporterModal").on("show.bs.modal", function () {
+    $('iframe[name="teleporter_iframe"]').removeAttr("style").contents().find("body").html("");
+    $(this).find("button").prop("disabled", true);
+    $(this).find(".overlay").show();
+  });
+
+  // set Teleporter iframe's font, enable Modal's button(s), ...
+  $('iframe[name="teleporter_iframe"]').on("load", function () {
+    var font = {
+      "font-family": $("pre").css("font-family"),
+      "font-size": $("pre").css("font-size")
+    };
+    var contents = $(this).contents();
+    contents.find("body").css(font);
+    $("#teleporterModal").find(".overlay").hide();
+    var BtnEls = $(this).parents(".modal-content").find("button").prop("disabled", false);
+
+    // force user to reload the page if necessary
+    var reloadEl = contents.find("span[data-forcereload]");
+    if (reloadEl.length > 0) {
+      var msg = "The page must now be reloaded to display the imported entries";
+      reloadEl.append(msg);
+      BtnEls.toggleClass("hidden")
+        .not(".hidden")
+        .on("click", function () {
+          // window.location.href avoids a browser warning for resending form data
+          window.location = window.location.href;
+        });
+    }
+
+    // expand iframe's height
+    var contentHeight = contents.find("html").height();
+    if (contentHeight > $(this).height()) {
+      $(this).height(contentHeight);
+    }
+  });
+
+  // display selected import file on button's adjacent textfield
+  $("#zip_file").change(function () {
+    var fileName = $(this)[0].files.length === 1 ? $(this)[0].files[0].name : "";
+    $("#zip_filename").val(fileName);
+  });
 });
 $(".confirm-poweroff").confirm({
   text: "Are you sure you want to send a poweroff command to your Pi-hole?",
@@ -258,10 +302,6 @@ $(function () {
 $(".nav-tabs a").on("shown.bs.tab", function (e) {
   var tab = e.target.hash.substring(1);
   window.history.pushState("", "", "?tab=" + tab);
-  if (tab === "piholedhcp") {
-    window.location.reload();
-  }
-
   window.scrollTo(0, 0);
 });
 
diff --git a/scripts/pi-hole/php/teleporter.php b/scripts/pi-hole/php/teleporter.php
index 123c3f0a..9dbc350e 100644
--- a/scripts/pi-hole/php/teleporter.php
+++ b/scripts/pi-hole/php/teleporter.php
@@ -320,6 +320,15 @@ function process_file($contents)
 	return $domains;
 }
 
+function noun($num)
+{
+	if($num === 1)
+	{
+		return " entry";
+	}
+	return " entries";
+}
+
 if(isset($_POST["action"]))
 {
 	if($_FILES["zip_file"]["name"] && $_POST["action"] == "in")
@@ -352,6 +361,7 @@ if(isset($_POST["action"]))
 		$archive = new PharData($fullfilename);
 
 		$importedsomething = false;
+		$reloadsettingspage = false;
 
 		$flushtables = isset($_POST["flushtables"]);
 
@@ -360,21 +370,21 @@ if(isset($_POST["action"]))
 			if(isset($_POST["blacklist"]) && $file->getFilename() === "blacklist.txt")
 			{
 				$num = archive_insert_into_table($file, "blacklist", $flushtables);
-				echo "Processed blacklist (exact) (".$num." entries)<br>\n";
+				echo "Processed blacklist (exact) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["whitelist"]) && $file->getFilename() === "whitelist.txt")
 			{
 				$num = archive_insert_into_table($file, "whitelist", $flushtables);
-				echo "Processed whitelist (exact) (".$num." entries)<br>\n";
+				echo "Processed whitelist (exact) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["regexlist"]) && $file->getFilename() === "regex.list")
 			{
 				$num = archive_insert_into_table($file, "regex_blacklist", $flushtables);
-				echo "Processed blacklist (regex) (".$num." entries)<br>\n";
+				echo "Processed blacklist (regex) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
@@ -382,63 +392,63 @@ if(isset($_POST["action"]))
 			if(isset($_POST["regexlist"]) && $file->getFilename() === "wildcardblocking.txt")
 			{
 				$num = archive_insert_into_table($file, "regex_blacklist", $flushtables, true);
-				echo "Processed blacklist (regex, wildcard style) (".$num." entries)<br>\n";
+				echo "Processed blacklist (regex, wildcard style) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["auditlog"]) && $file->getFilename() === "auditlog.list")
 			{
 				$num = archive_insert_into_table($file, "domain_audit", $flushtables);
-				echo "Processed audit log (".$num." entries)<br>\n";
+				echo "Processed audit log (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["adlist"]) && $file->getFilename() === "adlists.list")
 			{
 				$num = archive_insert_into_table($file, "adlist", $flushtables);
-				echo "Processed adlists (".$num." entries)<br>\n";
+				echo "Processed adlists (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["blacklist"]) && $file->getFilename() === "blacklist.exact.json")
 			{
 				$num = archive_restore_table($file, "blacklist", $flushtables);
-				echo "Processed blacklist (exact) (".$num." entries)<br>\n";
+				echo "Processed blacklist (exact) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["regexlist"]) && $file->getFilename() === "blacklist.regex.json")
 			{
 				$num = archive_restore_table($file, "regex_blacklist", $flushtables);
-				echo "Processed blacklist (regex) (".$num." entries)<br>\n";
+				echo "Processed blacklist (regex) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["whitelist"]) && $file->getFilename() === "whitelist.exact.json")
 			{
 				$num = archive_restore_table($file, "whitelist", $flushtables);
-				echo "Processed whitelist (exact) (".$num." entries)<br>\n";
+				echo "Processed whitelist (exact) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["regex_whitelist"]) && $file->getFilename() === "whitelist.regex.json")
 			{
 				$num = archive_restore_table($file, "regex_whitelist", $flushtables);
-				echo "Processed whitelist (regex) (".$num." entries)<br>\n";
+				echo "Processed whitelist (regex) (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["adlist"]) && $file->getFilename() === "adlist.json")
 			{
 				$num = archive_restore_table($file, "adlist", $flushtables);
-				echo "Processed adlist (".$num." entries)<br>\n";
+				echo "Processed adlist (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
 			if(isset($_POST["auditlog"]) && $file->getFilename() === "domain_audit.json")
 			{
 				$num = archive_restore_table($file, "domain_audit", $flushtables);
-				echo "Processed domain_audit (".$num." entries)<br>\n";
+				echo "Processed domain_audit (".$num.noun($num).")<br>\n";
 				$importedsomething = true;
 			}
 
@@ -498,9 +508,10 @@ if(isset($_POST["action"]))
 				}
 
 				readStaticLeasesFile();
-				echo "Processed static DHCP leases (".$num." entries)<br>\n";
+				echo "Processed static DHCP leases (".$num.noun($num).")<br>\n";
 				if($num > 0) {
 					$importedsomething = true;
+					$reloadsettingspage = true;
 				}
 			}
 
@@ -560,6 +571,10 @@ if(isset($_POST["action"]))
 
 		unlink($fullfilename);
 		echo "OK";
+		if($reloadsettingspage)
+		{
+			echo "<br>\n<span data-forcereload></span>";
+		}
 	}
 	else
 	{
diff --git a/settings.php b/settings.php
index 4402e073..17ce96c3 100644
--- a/settings.php
+++ b/settings.php
@@ -1250,7 +1250,7 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "dns", "piho
                         <?php if (extension_loaded('Phar')) { ?>
                         <form role="form" method="post" id="takeoutform"
                               action="scripts/pi-hole/php/teleporter.php"
-                              target="_blank" enctype="multipart/form-data">
+                              target="teleporter_iframe" enctype="multipart/form-data">
                             <input type="hidden" name="token" value="<?php echo $token ?>">
                             <div class="col-lg-6 col-md-12">
                                 <div class="box box-warning">
@@ -1331,7 +1331,15 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "dns", "piho
                                         <div class="row">
                                             <div class="col-lg-12">
                                                 <label for="zip_file">File input</label>
-                                                <input type="file" name="zip_file" id="zip_file">
+                                                <div class="input-group">
+                                                    <span class="input-group-btn">
+                                                        <span class="btn btn-default btn-file" tabindex="0">Browse...
+                                                            <input type="file" name="zip_file" id="zip_file" accept="application/gzip" tabindex="-1">
+                                                        </span>
+                                                    </span>
+                                                    <input type="text" id="zip_filename" class="form-control"
+                                                           placeholder="no file selected" readonly="readonly" tabindex="-1">
+                                                </div>
                                                 <p class="help-block">Upload only Pi-hole backup files.</p>
                                             </div>
                                         </div>
@@ -1345,11 +1353,40 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "dns", "piho
                                         </div>
                                     </div>
                                     <div class="box-footer clearfix">
-                                        <button type="submit" class="btn btn-default" name="action" value="in">Restore</button>
+                                        <button type="submit" class="btn btn-default" name="action"
+                                                value="in" data-toggle="modal" data-target="#teleporterModal">Restore
+                                        </button>
                                     </div>
                                 </div>
                             </div>
                         </form>
+                        <div class="modal fade" id="teleporterModal" role="dialog" data-keyboard="false"
+                             tabindex="-1" data-backdrop="static" aria-labelledby="teleporterModalLabel">
+                            <div class="modal-dialog" role="document">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h4 class="modal-title" id="exampleModalLabel">Teleporter Import</h4>
+                                    </div>
+                                    <div class="modal-body">
+                                        <label class="control-label">Output:</label>
+                                        <div class="box no-margin no-border no-shadow">
+                                            <pre class="no-margin no-padding"><iframe class="col-xs-12 no-border no-padding"
+                                                                                      name="teleporter_iframe" height="100"
+                                                                                      tabindex="-1"></iframe></pre>
+                                            <div class="overlay">
+                                                <i class="fa fa-spinner fa-pulse"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
+                                        <button type="button" data-dismiss="modal" class="btn btn-default hidden">
+                                            <i class="fas fa-sync"></i> Reload page
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <?php } else { ?>
                         <div class="col-lg-12">
                             <div class="box box-warning">