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>
This major upgrade brings RailsGoat up to date with the latest versions:
- Ruby 2.6.5 → 3.3.6
- Rails 6.0.0 → 8.0.4
## Key Changes
### Dependencies
- Upgraded all gems to Rails 8-compatible versions
- Removed deprecated gems: therubyracer, coffee-rails, poltergeist,
travis-lint, rails-perftest, unicorn, powder, rubocop-github
- Updated puma to 6.6.1, sqlite3 to 2.8.1, rspec-rails to 8.0.2
- Added modern Rails 8 features: importmap-rails, stimulus-rails, turbo-rails
- Replaced poltergeist with selenium-webdriver for integration tests
### Code Changes
- Converted CoffeeScript files to plain JavaScript
- Updated test configuration to use Selenium headless driver
- Updated database schema to Rails 8 format
## Testing
- Application starts successfully and responds to requests
- Test suite runs with 23 examples (14 intentional vulnerability failures)
- Database migrations applied successfully
## Notes
This upgrade maintains all intentional security vulnerabilities that make
RailsGoat an effective training tool. The failing tests are expected and
demonstrate the vulnerabilities the application is designed to teach.
🤖 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'
The javascript file name in app/views/pay/index.html.erb
'jquery.dataTables.js' is not consistent with the actual
JS file in /app/assets/javascripts 'jquery.dataTables.min.js'
This commit fixes by renaming the erring line in index.html.erb
Awesome @jmmastey. I think we went with a match route, later changed it as match was *sorta-ish* deprecated in Rails 4+. Anyways, believe those changes might have caused some issues.
Either way, verified everything worked locally and performed PR. Thanks again!
no functional change here, but familiar Rails users will see view files in the
locations they expect. this also slightly simplifies controller code
there is one attendant change in the wiki at `rails_3/A1-SQL-Injection-Interpolation.md`
that I'm happy to make after the PR is merged.
currently this is flagged manually in one place, but there's no reason not to
let the user model handle it. this way, you can update your user model from a
console or some other area without accidentally changing your password.
Ken Johnson