Fix overview modals

core/static/modal.js

@@ -1,17 +1,37 @@
 var modal = document.querySelector('.modal');  // assuming you have only 1
 var html = document.querySelector('html');
-modal.querySelector('.modal-background').addEventListener('click', function(e) {
-  e.preventDefault();
-  modal.classList.remove('is-active');
-  html.classList.remove('is-clipped');
-});
-modal.querySelector('.modal-close').addEventListener('click', function(e) {
-  e.preventDefault();
-  modal.classList.remove('is-active');
-  html.classList.remove('is-clipped');
-});
-modal.querySelector('.modal-close-button').addEventListener('click', function(e) {
-  e.preventDefault();
-  modal.classList.remove('is-active');
-  html.classList.remove('is-clipped');
-});
+
+var elements = document.querySelectorAll('.modal-background');
+for(var i = 0; i < elements.length; i++) {
+    elements[i].addEventListener('click', function(e) {
+      // elements[i].preventDefault();
+      modal.classList.remove('is-active');
+      html.classList.remove('is-clipped');
+    });
+}
+
+var elements = document.querySelectorAll('.modal-close');
+for(var i = 0; i < elements.length; i++) {
+    elements[i].addEventListener('click', function(e) {
+      // elements[i].preventDefault();
+      modal.classList.remove('is-active');
+      html.classList.remove('is-clipped');
+    });
+}
+
+function activateButtons() {
+  var elements = document.querySelectorAll('.modal-close-button');
+  for(var i = 0; i < elements.length; i++) {
+      elements[i].addEventListener('click', function(e) {
+        // elements[i].preventDefault();
+        modal.classList.remove('is-active');
+        html.classList.remove('is-clipped');
+      });
+  }
+}
+activateButtons();
+// modal.querySelector('.modal-close-button').addEventListener('click', function(e) {
+//   e.preventDefault();
+//   modal.classList.remove('is-active');
+//   html.classList.remove('is-clipped');
+// });

core/templates/manage/threshold/irc/network/edit-network.html

@@ -64,12 +64,14 @@
       </tbody>
     </table>
     <button
+      type="button"
       class="button is-light"
       hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
       hx-get="{% url 'threshold_irc_network_info' net %}">
       Cancel
     </button>
-    <button class="button is-info">Submit</button>
+    <button type="submit" class="button is-info">Submit</button>
+    <script>activateButtons();</script>
 
   </div>
 </form>

core/templates/manage/threshold/irc/overview/actions.html

@@ -5,7 +5,7 @@
       hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
       hx-get="{% url 'threshold_irc_actions_add-network' %}"
       hx-trigger="click"
-      hx-target="#modals-here-actions"
+      hx-target="#modals-here"
       class="button is-info">
       <span class="icon-text">
         <span class="icon">

core/templates/manage/threshold/irc/overview/aliases.html

@@ -42,6 +42,4 @@
       </button>
     </div>
   {% endif %}
-  <div id="modals-here">
-  </div>
 </div>

core/templates/manage/threshold/irc/overview/modals/add-network.html

@@ -63,11 +63,12 @@
           </div> 
         </div>
         <button
+          type="button"
           class="button is-light modal-close-button">
           Cancel
         </button>
-        <button class="button is-info modal-close-button">Submit</button>
-
+        <button type="submit" class="button is-info modal-close-button">Submit</button>
+        <script>activateButtons();</script>
       </form>
   
     </div>

core/templates/manage/threshold/irc/overview/modals/edit-aliases.html

@@ -52,11 +52,12 @@
           </div>
         </div>
         <button
+          type="button"
           class="button is-light modal-close-button">
           Cancel
         </button>
-        <button class="button is-info modal-close-button">Submit</button>
-
+        <button type="submit" class="button is-info modal-close-button">Submit</button>
+        <script>activateButtons();</script>
       </form>
   
     </div>

core/templates/manage/threshold/irc/overview/overview.html

@@ -85,5 +85,6 @@
       </div>
     </div>
   </div>
- 
+  <div id="modals-here">
+  </div>
 {% endblock %}