From 0b2ad520b7a5edd95e708684eef77ac739119045 Mon Sep 17 00:00:00 2001
From: zoeller-freinet <86965592+zoeller-freinet@users.noreply.github.com>
Date: Sat, 1 Jan 2022 21:20:01 +0100
Subject: [PATCH] History table: relocate HTML for modal window (#1090)

- Store HTML for modal window inside an invisible <div> element instead
  of inside the <button> element's value attribute
- Mark history.detailed_msg as safe as it is already manually run
  through the template engine beforehand and would be broken if escaped
  a second time
---
 .../templates/admin_history_table.html        | 44 +++++++------------
 powerdnsadmin/templates/dashboard.html        | 29 ++++++------
 2 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/powerdnsadmin/templates/admin_history_table.html b/powerdnsadmin/templates/admin_history_table.html
index cf31e0e..4f3d73d 100644
--- a/powerdnsadmin/templates/admin_history_table.html
+++ b/powerdnsadmin/templates/admin_history_table.html
@@ -24,19 +24,20 @@
                 <td>{{ history.history.created_on }}</td>
                 
                 <td width="6%">
+                    <div id="history-info-div-{{ loop.index0 }}" style="display: none;">
+                        {{ history.detailed_msg | safe }}
+                        {% if history.change_set %}
+                        <div class="content">
+                            <div id="change_index_definition"></div>
+                            {% call applied_change_macro.applied_change_template(history.change_set) %}
+                            {% endcall %}
+                        </div>
+                        {% endif %}
+                    </div>
                     <button type="button" class="btn btn-flat btn-primary history-info-button"
-                        {% if history.detailed_msg == "" and history.change_set == None %}
+                        {% if history.detailed_msg == "" and history.change_set is none %}
                         style="visibility: hidden;"
-                        {% endif%}
-                        value='{{ history.detailed_msg }}
-                            {% if history.change_set != None %}
-                            <div class="content">
-                                <div id="change_index_definition"></div>
-                                {% call applied_change_macro.applied_change_template(history.change_set) %} 
-                                {% endcall %}
-                            </div>
-                            {% endif %}
-                        '>Info&nbsp;<i class="fa fa-info"></i>
+			{% endif %} value="{{ loop.index0 }}">Info&nbsp;<i class="fa fa-info"></i>
                     </button>
                 </td>
             </tr>
@@ -45,17 +46,10 @@
     </table>
 </div>
 
-
-
 <script>
-
-
-
-
 var table;
 $(document).ready(function () {
 
-
         table = $('#tbl_history').DataTable({
             "order": [
                 [2, "desc"]
@@ -74,22 +68,14 @@ $(document).ready(function () {
             fixedHeader: true
         });
 
-
-
-
-
-
-
-
     $(document.body).on('click', '.history-info-button', function () {
         var modal = $("#modal_history_info");
-        var info = $(this).val();
+        var history_id = $(this).val();
+        var info = $("#history-info-div-" + history_id).html();
         $('#modal-info-content').html(info);
         modal.modal('show');
     });
 
-
-    
     $(document.body).on("click", ".button-filter", function (e) {
         e.stopPropagation();
         var nextRow = $("#filter-table")
@@ -101,4 +87,4 @@ $(document).ready(function () {
 
 });
 
-</script>
\ No newline at end of file
+</script>
diff --git a/powerdnsadmin/templates/dashboard.html b/powerdnsadmin/templates/dashboard.html
index e018be3..0e5b3b5 100755
--- a/powerdnsadmin/templates/dashboard.html
+++ b/powerdnsadmin/templates/dashboard.html
@@ -114,20 +114,20 @@
                           <td>{{ history.history.msg }}</td>
                           <td>{{ history.history.created_on }}</td>
                           <td width="6%">
+                            <div id="history-info-div-{{ loop.index0 }}" style="display: none;">
+                                {{ history.detailed_msg | safe }}
+                                {% if history.change_set %}
+                                <div class="content">
+                                    <div id="change_index_definition"></div>
+                                    {% call applied_change_macro.applied_change_template(history.change_set) %}
+                                    {% endcall %}
+                                </div>
+                                {% endif %}
+                            </div>
                             <button type="button" class="btn btn-flat btn-primary history-info-button"
-                            {% if history.detailed_msg == "" and history.change_set == None %}
-                            style="visibility: hidden;"
-                            {% endif%}
-                            value='{{ history.detailed_msg }}
-                              {% if history.change_set != None %}
-                              <div class="content">
-                                  <div id="change_index_definition"></div>
-                                  {% call applied_change_macro.applied_change_template(history.change_set) %} 
-                                  {% endcall %}
-                              </div>
-                              {% endif %}
-                              '>
-                                Info&nbsp;<i class="fa fa-info"></i>
+                                {% if history.detailed_msg == "" and history.change_set is none %}
+                                style="visibility: hidden;"
+                                {% endif %} value="{{ loop.index0 }}">Info&nbsp;<i class="fa fa-info"></i>
                             </button>
                           </td>
                       </tr>
@@ -243,7 +243,8 @@
 
     $(document.body).on('click', '.history-info-button', function () {
         var modal = $("#modal_history_info");
-        var info = $(this).val();
+        var history_id = $(this).val();
+        var info = $("#history-info-div-" + history_id).html();
         $('#modal-info-content').html(info);
         modal.modal('show');
     });