From 2a776f9dcaa637f2a0c2fde9b39b3f5466a9adeb Mon Sep 17 00:00:00 2001
From: Paul Mannarino <paul.mannarino@gmail.com>
Date: Thu, 9 Dec 2021 12:10:57 -0500
Subject: [PATCH] Create modal for API token

Signed-off-by: Paul Mannarino <paul.mannarino@gmail.com>
---
 scripts/pi-hole/js/settings.js | 13 ++++++++++++-
 settings.php                   | 16 ++++++++++++++++
 style/pi-hole.css              |  6 ++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/settings.js b/scripts/pi-hole/js/settings.js
index c7ebb70a..518ce216 100644
--- a/scripts/pi-hole/js/settings.js
+++ b/scripts/pi-hole/js/settings.js
@@ -169,7 +169,7 @@ $(".api-token").confirm({
   text: "Make sure that nobody else can scan this code around you. They will have full access to the API without having to know the password. Note that the generation of the QR code will take some time.",
   title: "Confirmation required",
   confirm: function () {
-    window.open("scripts/pi-hole/php/api_token.php", "_blank");
+    $("#apiTokenModal").modal("show");
   },
   cancel: function () {
     // nothing to do
@@ -182,6 +182,17 @@ $(".api-token").confirm({
   dialogClass: "modal-dialog",
 });
 
+$("#apiTokenModal").on("show.bs.modal", function () {
+  var font = {
+    "font-family": $("body").css("font-family"),
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("body").css(font);
+  var table = {
+    margin: "auto",
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("table").css(table);
+});
+
 $("#DHCPchk").click(function () {
   $("input.DHCPgroup").prop("disabled", !this.checked);
   $("#dhcpnotice").prop("hidden", !this.checked).addClass("lookatme");
diff --git a/settings.php b/settings.php
index 54d8843a..c3320e66 100644
--- a/settings.php
+++ b/settings.php
@@ -1047,6 +1047,22 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "dns", "piho
                                     </div>
                                 </div>
                             </form>
+                            <div class="modal fade" id="apiTokenModal" role="dialog" data-keyboard="false"
+                                tabindex="-1" data-backdrop="static" aria-labelledby="apiTokenModal">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h4 class="modal-title" id="apiTokenModalHeaderLabel">API Token</h4>
+                                        </div>
+                                        <div class="modal-body">
+                                        <pre><iframe id="apiTokenIframe" name="apiToken_iframe" src="scripts/pi-hole/php/api_token.php"></iframe></pre>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div class="col-md-6">
                             <form role="form" method="post">
diff --git a/style/pi-hole.css b/style/pi-hole.css
index bbfeb709..489e241f 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -445,3 +445,9 @@ td.details-control {
 .eyeConWrapper {
   font-size: 17px;
 }
+
+#apiTokenIframe {
+  width: 100%;
+  border: 0;
+  height: 500px;
+}