Simplify credentials page by removing modal markup
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>
This commit is contained in:
Ken Johnson
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user