Create modal for API token

Signed-off-by: Paul Mannarino <paul.mannarino@gmail.com>

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");

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">

style/pi-hole.css

@@ -445,3 +445,9 @@ td.details-control {
 .eyeConWrapper {
   font-size: 17px;
 }
+
+#apiTokenIframe {
+  width: 100%;
+  border: 0;
+  height: 500px;
+}