From 5a34735e6abe872f9707980e95cf53f59b4ef874 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:28:50 -0500
Subject: [PATCH] Fix Demo Credentials modal not opening
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed modal not displaying by replacing button_to with regular button
element and adding proper Turbolinks event handling.

Changes:
- Replace button_to with <button> element for proper ID targeting
- Add Turbolinks event listener (turbolinks:load) for navigation
- Clone button to remove duplicate event listeners
- Add error handling for fetch failures
- Remove Bootstrap data attributes (using JS instead)

The button_to helper creates a form which interfered with the
JavaScript event listener and Bootstrap modal initialization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/layouts/shared/_header.html.erb | 29 +++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index cfac427..54dea05 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -81,14 +81,9 @@
 
         <div class="col-auto">
           <div class="d-flex align-items-center gap-2">
-            <%= button_to "#", {
-              id: "show_creds_btn",
-              class: "btn btn-sm btn-warning",
-              method: "get",
-              data: { bs_toggle: "modal", bs_target: "#credentialsModal" }
-            } do %>
+            <button type="button" id="show_creds_btn" class="btn btn-sm btn-warning">
               <i class="bi bi-key"></i> Demo Credentials
-            <% end %>
+            </button>
 
             <%= button_to "https://github.com/OWASP/railsgoat/wiki", {
               method: "get",
@@ -135,10 +130,14 @@
   </div>
 
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
+    function initCredentialsModal() {
       const showCredsBtn = document.getElementById('show_creds_btn');
       if (showCredsBtn) {
-        showCredsBtn.addEventListener('click', function(event) {
+        // Remove any existing listeners
+        const newBtn = showCredsBtn.cloneNode(true);
+        showCredsBtn.parentNode.replaceChild(newBtn, showCredsBtn);
+
+        newBtn.addEventListener('click', function(event) {
           event.preventDefault();
           fetch('<%= credentials_tutorials_path %>')
             .then(response => response.text())
@@ -146,10 +145,20 @@
               document.getElementById('modal_content').innerHTML = html;
               const modal = new bootstrap.Modal(document.getElementById('credentialsModal'));
               modal.show();
+            })
+            .catch(error => {
+              console.error('Error loading credentials:', error);
+              document.getElementById('modal_content').innerHTML = '<p class="text-danger">Error loading credentials. Please try again.</p>';
+              const modal = new bootstrap.Modal(document.getElementById('credentialsModal'));
+              modal.show();
             });
         });
       }
-    });
+    }
+
+    // Handle both initial load and Turbolinks navigation
+    document.addEventListener('DOMContentLoaded', initCredentialsModal);
+    document.addEventListener('turbolinks:load', initCredentialsModal);
   </script>
 
 <% end %>