From d71f7ec1b98520627c6793e4b3a7978afdc83b3d Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 02:19:00 -0500
Subject: [PATCH] Simplify credentials page by removing modal markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed leftover modal HTML fragments (modal-header, modal-footer,
data-dismiss="modal") that were causing accessibility errors and
non-functional close button.

Replaced with clean, standalone card-based layout with:
- Proper close button linking to homepage
- Bootstrap card structure with modern styling
- Working "Show Credentials" button with jQuery
- "Back to Home" link in footer
- Removed problematic aria-hidden attributes

Fixes: "Blocked aria-hidden on an element because its descendant
retained focus" accessibility error

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/tutorials/credentials.html.erb | 158 +++++++++--------------
 1 file changed, 61 insertions(+), 97 deletions(-)

diff --git a/app/views/tutorials/credentials.html.erb b/app/views/tutorials/credentials.html.erb
index f332e05..8e33745 100644
--- a/app/views/tutorials/credentials.html.erb
+++ b/app/views/tutorials/credentials.html.erb
@@ -1,115 +1,79 @@
-<!-- Begin Modal -->
-
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
-        ×
-      </button>
-      <h4 id="myModalLabel1">
-        Application Credentials (Spoiler)
+<div class="container mt-4">
+  <div class="card">
+    <div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
+      <h4 class="mb-0">
+        <i class="bi bi-key"></i> Application Credentials (Spoiler)
       </h4>
+      <%= link_to root_path, class: "btn btn-sm btn-outline-dark" do %>
+        <i class="bi bi-x-lg"></i> Close
+      <% end %>
     </div>
-    <div class="modal-body">
-      <div class="row">
-        <div class="span8">
-        <p>Warning, this is a spoiler</p>
-        <p>Are you sure you want to see the credentials?</p>
-         <div id="creds_hidden" style="display:none">
-      <table class="table table-striped table-hover table-bordered pull-left" id="data-table">
+
+    <div class="card-body">
+      <div class="alert alert-warning" role="alert">
+        <i class="bi bi-exclamation-triangle"></i>
+        <strong>Warning:</strong> This is a spoiler. Are you sure you want to see the credentials?
+      </div>
+
+      <div id="creds_hidden" style="display:none">
+        <table class="table table-striped table-hover table-bordered">
           <thead>
             <tr>
-              <th>
-                Email
-              </th>
-              <th>
-                Password
-              </th>
-          <th>
-          API Key
-          </th>
+              <th>Email</th>
+              <th>Password</th>
+              <th>API Key</th>
             </tr>
           </thead>
           <tbody>
-          <tr>
-                <td style="word-wrap:break-word;">
-                  admin@metacorp.com
-                </td>
-                <td>
-                  admin1234
-                </td>
-            <td>
-            1-01de24d75cffaa66db205278d1cf900bf087a737
-            </td>
-              </tr>
-          <tr>
-                <td style="word-wrap:break-word;">
-                  jmmastey@metacorp.com
-                </td>
-                <td>
-                  railsgoat!
-                </td>
-            <td>
-              2-050ddd40584978fe9e82840b8b95abb98e4786dc
-            </td>
-              </tr>
-          <tr>
-                <td style="word-wrap:break-word;">
-                  jim@metacorp.com
-                </td>
-                <td>
-                  alohaowasp
-                </td>
-                <td>
-                  3-eaa9b4d748d6a8c6a38e24ac1cc2204ebc3541c1
-                </td>
-              </tr>
-          <tr>
-                <td style="word-wrap:break-word;">
-                  mike@metacorp.com
-                </td>
-                <td>
-                  motocross1445
-                </td>
-            <td>
-              4-4c809b3d11d272cff8cab1da9e4cdf61137f29d2
-            </td>
-              </tr>
-          <tr>
-                <td style="word-wrap:break-word;">
-                  ken@metacorp.com
-                </td>
-                <td>
-                  citrusblend
-                </td>
-            <td>
-            5-4af604a848ca212cfa3935352aabe9522cf89fdc
-            </td>
-              </tr>
-
+            <tr>
+              <td style="word-wrap:break-word;">admin@metacorp.com</td>
+              <td>admin1234</td>
+              <td>1-01de24d75cffaa66db205278d1cf900bf087a737</td>
+            </tr>
+            <tr>
+              <td style="word-wrap:break-word;">jmmastey@metacorp.com</td>
+              <td>railsgoat!</td>
+              <td>2-050ddd40584978fe9e82840b8b95abb98e4786dc</td>
+            </tr>
+            <tr>
+              <td style="word-wrap:break-word;">jim@metacorp.com</td>
+              <td>alohaowasp</td>
+              <td>3-eaa9b4d748d6a8c6a38e24ac1cc2204ebc3541c1</td>
+            </tr>
+            <tr>
+              <td style="word-wrap:break-word;">mike@metacorp.com</td>
+              <td>motocross1445</td>
+              <td>4-c809b3d11d272cff8cab1da9e4cdf61137f29d2</td>
+            </tr>
+            <tr>
+              <td style="word-wrap:break-word;">ken@metacorp.com</td>
+              <td>citrusblend</td>
+              <td>5-4af604a848ca212cfa3935352aabe9522cf89fdc</td>
+            </tr>
           </tbody>
         </table>
-       </div>
-        </div>
       </div>
-      <div class="row-fluid">
+
+      <div class="text-center mt-3">
+        <button id="understood" class="btn btn-primary">
+          <i class="bi bi-eye"></i> I understand - Show Credentials
+        </button>
       </div>
     </div>
-    <div class="modal-footer">
-      <button class="btn" data-dismiss="modal" aria-hidden="true">
-        Close
-      </button>
-    <button id="understood" class="btn btn-primary" aria-hidden="true">
-        I understand
-      </button>
 
+    <div class="card-footer text-center">
+      <%= link_to root_path, class: "btn btn-secondary" do %>
+        <i class="bi bi-arrow-left"></i> Back to Home
+      <% end %>
     </div>
-
-<!-- End Modal -->
+  </div>
+</div>
 
 <script type="text/javascript">
-
-$('#understood').click(function() {
-  $("#creds_hidden").show();
+$(document).ready(function() {
+  $('#understood').click(function() {
+    $("#creds_hidden").show();
+    $(this).hide();
+  });
 });
-
-
 </script>