From b6fa2db72ee09563793ae1562a5ebc2c1ab19035 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:36:45 -0500
Subject: [PATCH] Add debugging for modal initialization issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added console logging to diagnose why Demo Credentials modal
is not opening despite no visible errors.

Changes:
- Log button click event
- Log Bootstrap availability check
- Log modal element existence
- Log fetch response status
- Log content length after loading
- Log modal instance creation
- Check Bootstrap.Modal availability before use

This will help identify whether the issue is with event binding,
Bootstrap loading, fetch requests, or 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 | 27 ++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index 9e2fee3..468dd5f 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -159,18 +159,35 @@
 
         newBtn.addEventListener('click', function(event) {
           event.preventDefault();
+          console.log('Demo Credentials button clicked');
+          console.log('Bootstrap available:', typeof bootstrap !== 'undefined');
+          console.log('Modal element:', modalElement);
+
           fetch('<%= credentials_tutorials_path %>')
-            .then(response => response.text())
+            .then(response => {
+              console.log('Fetch response status:', response.status);
+              return response.text();
+            })
             .then(html => {
+              console.log('Content loaded, length:', html.length);
               document.getElementById('modal_content').innerHTML = html;
-              const modal = new bootstrap.Modal(modalElement);
-              modal.show();
+
+              if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
+                const modal = new bootstrap.Modal(modalElement);
+                console.log('Modal instance created:', modal);
+                modal.show();
+              } else {
+                console.error('Bootstrap Modal not available');
+              }
             })
             .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(modalElement);
-              modal.show();
+
+              if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
+                const modal = new bootstrap.Modal(modalElement);
+                modal.show();
+              }
             });
         });
       }