Fixed two UI issues in the navigation header:
1. **Navbar Alignment**: Added CSS to remove margin/padding from forms in the
header to ensure the Tutorials button (created with button_to) aligns
properly with other navbar items like font size controls and user dropdown.
2. **Font Size Toggle**: Added data-turbolinks="false" to font size control
links to force full page reload. Previously, clicking the small font button
wouldn't apply changes until manual refresh due to Turbolinks caching. Now
both font size buttons work immediately.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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