From feba9b78890b44d54966860095a1964d937a455d Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:50:54 -0500
Subject: [PATCH] Replace modal with dedicated credentials page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed complex modal implementation and replaced with simple
link to dedicated credentials page to eliminate all modal issues.

Changes:
- Add credentials action to TutorialsController
- Remove layout false restriction for credentials
- Replace button with simple link_to for Demo Credentials
- Remove entire modal HTML structure
- Remove all JavaScript for modal initialization
- Remove fetch/AJAX complexity

The credentials view already existed but was modal-only. Now it's
a proper page that users can navigate to directly. Much simpler!

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/controllers/tutorials_controller.rb   |  4 +-
 app/views/layouts/shared/_header.html.erb | 73 +----------------------
 2 files changed, 5 insertions(+), 72 deletions(-)

diff --git a/app/controllers/tutorials_controller.rb b/app/controllers/tutorials_controller.rb
index ddfdbcc..d6eeaab 100755
--- a/app/controllers/tutorials_controller.rb
+++ b/app/controllers/tutorials_controller.rb
@@ -3,7 +3,9 @@ class TutorialsController < ApplicationController
   skip_before_action :has_info
   skip_before_action :authenticated
 
-  layout false, only: [:credentials]
+  def credentials
+    # Render credentials page with layout
+  end
 
   # VULNERABILITY: Regular Expression Denial of Service (ReDoS)
   # This endpoint demonstrates how malicious input can cause catastrophic backtracking
diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index 08ab102..ae557c6 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -81,9 +81,9 @@
 
         <div class="col-auto">
           <div class="d-flex align-items-center gap-2">
-            <button type="button" id="show_creds_btn" class="btn btn-sm btn-warning">
+            <%= link_to credentials_tutorials_path, class: "btn btn-sm btn-warning" do %>
               <i class="bi bi-key"></i> Demo Credentials
-            </button>
+            <% end %>
 
             <%= button_to "https://github.com/OWASP/railsgoat/wiki", {
               method: "get",
@@ -112,73 +112,4 @@
     </div>
   </header>
 
-  <!-- Credentials Modal -->
-  <div class="modal fade" id="credentialsModal" tabindex="-1" aria-labelledby="credentialsModalLabel">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="credentialsModalLabel">
-            <i class="bi bi-key"></i> Demo Credentials
-          </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div id="modal_content" class="modal-body">
-          <!-- Content loaded via AJAX -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    function initCredentialsModal() {
-      const showCredsBtn = document.getElementById('show_creds_btn');
-      const modalElement = document.getElementById('credentialsModal');
-
-      if (showCredsBtn && modalElement) {
-        // Remove any existing listeners by cloning
-        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())
-            .then(html => {
-              document.getElementById('modal_content').innerHTML = html;
-
-              // Dispose of any existing modal instance first
-              const existingModal = bootstrap.Modal.getInstance(modalElement);
-              if (existingModal) {
-                existingModal.dispose();
-              }
-
-              // Create fresh modal instance and show
-              const modal = new bootstrap.Modal(modalElement, {
-                backdrop: true,
-                keyboard: true,
-                focus: true
-              });
-
-              // Force show after a small delay to ensure DOM is ready
-              setTimeout(() => {
-                modal.show();
-              }, 10);
-            })
-            .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();
-            });
-        });
-      }
-    }
-
-    // Handle both initial load and Turbolinks navigation
-    document.addEventListener('DOMContentLoaded', initCredentialsModal);
-    document.addEventListener('turbolinks:load', initCredentialsModal);
-  </script>
-
 <% end %>