Add whitelisting on blocking page feature

advanced/blockingpage.css

@@ -101,7 +101,7 @@ li::before { content: "\00BB\00a0"; }
 li a { position: relative; top: 1px; } /* Center bullet-point arrows */
 
 /* Button Style */
-.buttons a, input, .transparent th a { /* Swapped rgba is shared with input[type='url'] */
+.buttons a, button, input, .transparent th a { /* Swapped rgba is shared with input[type='url'] */
 	display: inline-block;
 	color: rgba(32,32,32,0.9);
 	font-weight: bold;
@@ -120,12 +120,15 @@ li a { position: relative; top: 1px; } /* Center bullet-point arrows */
 }
 
 .buttons { white-space: nowrap; width: 100%; display: table; }
+.buttons33 { white-space: nowrap; width: 33.333%; display: table; text-align: center; margin-left: 33.333% }
 .mini a { width: 50%; }
 a.safe { background-color: rgba(0,220,0,0.5); }
+button.safe { background-color: rgba(0,220,0,0.5); }
 a.warn { background-color: rgba(220,0,0,0.5); }
 
 .blocked a, .mini a { display: table-cell; }
-.blocked a.safe { width: 100%; }
+.blocked a.safe50 { width: 50%; background-color: rgba(0,220,0,0.5); }
+.blocked a.safe33 { width: 33.333%; background-color: rgba(0,220,0,0.5); }
 
 /* Types of text */
 .msg { white-space: pre; overflow: auto; -webkit-overflow-scrolling: touch; display: block; line-height: 1.2em; font-weight: bold; font-size: 1.15em; margin: 4px 8px 8px 8px; white-space: pre-line; }

advanced/index.php

@@ -69,7 +69,22 @@ if($uri == "/")
 	<button id="btnSearch" class="buttons blocked" type="button" style="visibility: hidden;"></button>
 	This page is blocked because it is explicitly contained within the following block list(s):
 	<pre id="output" style="width: 100%; height: 100%;" hidden="true"></pre><br/>
-	<div class='buttons blocked'><a class='safe' href='javascript:history.back()'>Go back</a>
+	<div class='buttons blocked'>
+		<a class='safe33' href='javascript:history.back()'>Go back</a>
+		<a class='safe33' id="whitelisting">Whitelist this page</a>
+		<a class='safe33' href='javascript:window.close()'>Close window</a>
+	</div>
+		<div style="width: 98%; text-align: center; padding: 10px;" hidden="true" id="whitelistingform">Password required!<br/>
+		<form action="admin/php/add.php" method="post">
+			<input name="list" type="hidden" value="white"><br/>
+			Domain:<br/>
+			<input name="domain" value="<?php echo $serverName ?>" disabled><br/><br/>
+			Password:<br/>
+			<input type="password" id="pw" name="pw"><br/><br/>
+			<button class="buttons33 safe" id="btnAdd" type="button">Whitelist</button>
+		</form><br/>
+		<pre id="whitelistingoutput" style="width: 100%; height: 100%; padding: 5px;" hidden="true"></pre><br/>
+		</div>
 </main>
 <footer>Generated <?php echo date('D g:i A, M d'); ?> by Pi-hole <?php echo $piHoleVersion; ?></footer>
 <script src="http://<?php echo $_SERVER['SERVER_ADDR']; ?>/admin/js/other/jquery.min.js"></script>
@@ -97,7 +112,51 @@ if($uri == "/")
 		// Query adlists
 		$( "#btnSearch" ).click();
 	}
-// }
+
+	$( "#whitelisting" ).on( "click", function(){ $( "#whitelistingform" ).removeAttr( "hidden" ); });
+
+	function add() {
+	var domain = $("#domain");
+	var pw = $("#pw");
+	if(domain.val().length === 0){
+		return;
+	}
+
+	$.ajax({
+		url: "admin/php/add.php",
+		method: "post",
+		data: {"domain":domain.val(), "list":"white", "pw":pw.val()},
+		success: function(response) {
+			$( "#whitelistingoutput" ).removeAttr( "hidden" );
+			if(response.indexOf("Pi-hole blocking") !== -1)
+			{
+				// Reload page after 5 seconds
+				setTimeout(function(){window.location.reload(1);}, 5000);
+				$( "#whitelistingoutput" ).html("---> Success <---");
+			}
+			else
+			{
+				$( "#whitelistingoutput" ).html("---> "+response+" <---");
+			}
+
+		},
+		error: function(jqXHR, exception) {
+			$( "#whitelistingoutput" ).removeAttr( "hidden" );
+			$( "#whitelistingoutput" ).html("---> "+response+" <---");
+		}
+	});
+}
+// Handle enter button for adding domains
+$(document).keypress(function(e) {
+    if(e.which === 13 && $("#password").is(":focus")) {
+        add();
+    }
+});
+
+// Handle buttons
+$("#btnAdd").on("click", function() {
+    add();
+});
 </script>
 </body>
 </html>