Changed the logo from a non-interactive <span> to a clickable <a> link
pointing to the login page for unauthenticated users. This provides a
consistent navigation pattern across authenticated and unauthenticated
states.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Fixed modal showing backdrop but not the modal itself by explicitly
disposing old instances and adding a timing delay.
Changes:
- Dispose of existing modal instance before creating new one
- Create fresh modal with explicit options (backdrop, keyboard, focus)
- Add 10ms setTimeout before show() to ensure DOM readiness
- Remove getOrCreateInstance which was causing conflicts
The modal was creating a backdrop but staying display:none because
getOrCreateInstance was returning a stale modal instance that couldn't
properly transition. Disposing and recreating fixes this.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed debugging code and aria-hidden event listeners that were
preventing the modal from displaying. Using Bootstrap's
getOrCreateInstance() to avoid modal instance conflicts.
Changes:
- Remove aria-hidden event listeners that blocked modal display
- Remove debugging console.log statements
- Use Modal.getOrCreateInstance() instead of new Modal()
- Simplify event handler to essential functionality only
The aria-hidden event listeners were preventing the modal from
showing properly. getOrCreateInstance() prevents duplicate modal
instances that can cause display issues.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Added event listeners to manage aria-hidden attribute timing during
modal open/close transitions to prevent accessibility warnings.
Changes:
- Listen to hide.bs.modal to remove aria-hidden before closing
- Listen to hidden.bs.modal to restore aria-hidden after fully closed
- Listen to show.bs.modal to remove aria-hidden when opening
- Use setTimeout to ensure focus has moved before setting aria-hidden
This prevents the "Blocked aria-hidden on element with focus" warning
by ensuring aria-hidden is only set after focus has left the modal.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed static aria-hidden attribute from modal element to fix
"Blocked aria-hidden on an element because its descendant retained
focus" accessibility warning.
Changes:
- Remove aria-hidden="true" from modal root element
- Add role="document" to modal-dialog for better accessibility
- Let Bootstrap 5 manage aria-hidden dynamically on open/close
The static aria-hidden="true" was conflicting with focus management
when the modal opened. Bootstrap 5 handles this attribute dynamically,
so it should not be set in the HTML.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed modal not displaying by replacing button_to with regular button
element and adding proper Turbolinks event handling.
Changes:
- Replace button_to with <button> element for proper ID targeting
- Add Turbolinks event listener (turbolinks:load) for navigation
- Clone button to remove duplicate event listeners
- Add error handling for fetch failures
- Remove Bootstrap data attributes (using JS instead)
The button_to helper creates a form which interfered with the
JavaScript event listener and Bootstrap modal initialization.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "stringify_keys for String" errors on Sign Up and Login buttons
by removing text arguments from button_to when using block form.
Changes:
- Fix Sign Up button: button_to signup_path (not "Sign Up", signup_path)
- Fix Login button: button_to login_path (not "Login", login_path)
- Block content now provides button text in Rails 8
All button_to calls now use correct Rails 8 syntax.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "undefined method stringify_keys for String" error caused by
incorrect button_to syntax when using block form.
Changes:
- Remove text argument from button_to when using block
- Block content becomes button text in Rails 8 syntax
- Correct syntax: button_to url, options do ... end
- Incorrect syntax: button_to "text", url, options do ... end
This fixes the NoMethodError on the login page.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete UI overhaul bringing RailsGoat into 2024 with a professional,
modern interface while maintaining all security vulnerabilities for
educational purposes.
## Design System
- Modern color palette with CSS variables
- Primary: #e63946 (red), Secondary: #457b9d (blue)
- Professional sans-serif typography
- Consistent spacing and shadows
- Bootstrap Icons for modern iconography
- Responsive design with mobile-first approach
## Layout Changes
- Fixed header with clean navigation (60px height)
- Dark sidebar with modern icons and section headers (250px width)
- Proper spacing and padding throughout
- Responsive breakpoints for mobile/tablet/desktop
- Modern card-based content areas
## Header Modernization
- Clean white header with subtle shadow
- RailsGoat branding with shield icon
- Modern dropdown user menu with avatar
- Improved font size controls
- Better button styling and spacing
- Modal-based credentials display (Bootstrap 5)
## Sidebar Improvements
- Dark navy background (#1d3557)
- Bootstrap Icons instead of custom fonts
- Section headers (Admin, Employee)
- Active state highlighting
- Smooth hover transitions
- Version info in footer
## Login Page Redesign
- Beautiful gradient background
- Centered card with shadow
- Modern form inputs with icons
- Clear call-to-action buttons
- Security training notice banner
- Responsive design
## Components Updated
- Modern alerts with icons and proper dismiss buttons
- Footer with OWASP links and copyright
- Scroll-to-top button (vanilla JS, no jQuery)
- Form controls with proper Bootstrap 5 classes
## Technical Improvements
- Bootstrap 5.3 properly implemented (not just CDN reference)
- Bootstrap Icons 1.11.1 for modern iconography
- Removed jQuery dependencies where possible
- Modern JavaScript (vanilla, no jQuery for new features)
- Proper Bootstrap 5 data attributes (data-bs-*)
- Semantic HTML5 structure
## Security Vulnerabilities Preserved
- XSS via html_safe in user welcome (header)
- XSS via cookie font-size (application layout)
- XSS via URL hash parameter (login page)
- Missing SRI on CDN assets (A03:2025)
- All educational vulnerabilities intact
## Files Modified
- app/views/layouts/application.html.erb - Complete redesign with CSS variables
- app/views/layouts/shared/_header.html.erb - Modern navigation
- app/views/layouts/shared/_sidebar.html.erb - Dark sidebar with icons
- app/views/layouts/shared/_footer.html.erb - Modern footer with links
- app/views/layouts/shared/_messages.html.erb - Bootstrap 5 alerts
- app/views/sessions/new.html.erb - Beautiful login page
This modernization makes RailsGoat visually appealing and professional
while maintaining its core educational purpose. The application now
looks like a modern web app security professionals want to use.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* add 'aria-label' into some elements without the label
* add 'aris-label' into some visual elements
* replace some 'a' elements have a button action to 'button'
Ken Johnson