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="container mt-4">
|
||||||
|
<div class="card">
|
||||||
<div class="modal-header">
|
<div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
<h4 class="mb-0">
|
||||||
×
|
<i class="bi bi-key"></i> Application Credentials (Spoiler)
|
||||||
</button>
|
|
||||||
<h4 id="myModalLabel1">
|
|
||||||
Application Credentials (Spoiler)
|
|
||||||
</h4>
|
</h4>
|
||||||
|
<%= link_to root_path, class: "btn btn-sm btn-outline-dark" do %>
|
||||||
|
<i class="bi bi-x-lg"></i> Close
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
|
||||||
<div class="row">
|
<div class="card-body">
|
||||||
<div class="span8">
|
<div class="alert alert-warning" role="alert">
|
||||||
<p>Warning, this is a spoiler</p>
|
<i class="bi bi-exclamation-triangle"></i>
|
||||||
<p>Are you sure you want to see the credentials?</p>
|
<strong>Warning:</strong> This is a spoiler. Are you sure you want to see the credentials?
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="creds_hidden" style="display:none">
|
<div id="creds_hidden" style="display:none">
|
||||||
<table class="table table-striped table-hover table-bordered pull-left" id="data-table">
|
<table class="table table-striped table-hover table-bordered">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>Email</th>
|
||||||
Email
|
<th>Password</th>
|
||||||
</th>
|
<th>API Key</th>
|
||||||
<th>
|
|
||||||
Password
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
API Key
|
|
||||||
</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="word-wrap:break-word;">
|
<td style="word-wrap:break-word;">admin@metacorp.com</td>
|
||||||
admin@metacorp.com
|
<td>admin1234</td>
|
||||||
</td>
|
<td>1-01de24d75cffaa66db205278d1cf900bf087a737</td>
|
||||||
<td>
|
|
||||||
admin1234
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
1-01de24d75cffaa66db205278d1cf900bf087a737
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="word-wrap:break-word;">
|
<td style="word-wrap:break-word;">jmmastey@metacorp.com</td>
|
||||||
jmmastey@metacorp.com
|
<td>railsgoat!</td>
|
||||||
</td>
|
<td>2-050ddd40584978fe9e82840b8b95abb98e4786dc</td>
|
||||||
<td>
|
|
||||||
railsgoat!
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
2-050ddd40584978fe9e82840b8b95abb98e4786dc
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="word-wrap:break-word;">
|
<td style="word-wrap:break-word;">jim@metacorp.com</td>
|
||||||
jim@metacorp.com
|
<td>alohaowasp</td>
|
||||||
</td>
|
<td>3-eaa9b4d748d6a8c6a38e24ac1cc2204ebc3541c1</td>
|
||||||
<td>
|
|
||||||
alohaowasp
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
3-eaa9b4d748d6a8c6a38e24ac1cc2204ebc3541c1
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="word-wrap:break-word;">
|
<td style="word-wrap:break-word;">mike@metacorp.com</td>
|
||||||
mike@metacorp.com
|
<td>motocross1445</td>
|
||||||
</td>
|
<td>4-c809b3d11d272cff8cab1da9e4cdf61137f29d2</td>
|
||||||
<td>
|
|
||||||
motocross1445
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
4-4c809b3d11d272cff8cab1da9e4cdf61137f29d2
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="word-wrap:break-word;">
|
<td style="word-wrap:break-word;">ken@metacorp.com</td>
|
||||||
ken@metacorp.com
|
<td>citrusblend</td>
|
||||||
</td>
|
<td>5-4af604a848ca212cfa3935352aabe9522cf89fdc</td>
|
||||||
<td>
|
|
||||||
citrusblend
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
5-4af604a848ca212cfa3935352aabe9522cf89fdc
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid">
|
|
||||||
</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="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>
|
||||||
|
|
||||||
<!-- End Modal -->
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
$('#understood').click(function() {
|
$('#understood').click(function() {
|
||||||
$("#creds_hidden").show();
|
$("#creds_hidden").show();
|
||||||
|
$(this).hide();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user