Added comprehensive Turbolinks event handling and duplicate load
prevention for Google Charts on performance page.
Changes:
- Add turbolinks:load event listener for page navigations
- Prevent multiple google.load() calls with flag
- Check if visualization already loaded before loading again
- Add chart element existence check before drawing
- Call initializeChart() immediately for initial load
- Better error messages for debugging
This ensures charts render on both initial page load and Turbolinks
navigation, while preventing duplicate library loads.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed $(document).ready() wrapper inside google.load callback which
was preventing charts from rendering when page loaded via Turbolinks.
Changes:
- Remove document.ready wrapper (DOM already ready with Turbolinks)
- Add check for element existence before drawing chart
- Add guard to verify google.load exists before calling
- Create separate initializeChart function for cleaner callback
This ensures charts render properly on Turbolinks page loads where
the DOM is already ready when the script executes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "Cannot read properties of undefined (reading 'arrayToDataTable')"
error caused by calling Google Charts API before it finished loading.
Changes:
- Move google.load() call below function definitions
- Use callback parameter to ensure charts load after library is ready
- Add guard check in drawChart2() to verify google.visualization exists
- Wrap chart drawing in $(document).ready() within the callback
This ensures the visualization library is fully loaded before attempting
to create charts, preventing race condition errors.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "Cannot read properties of undefined (reading 'update')" errors
caused by chart setTimeout callbacks persisting across Turbolinks page
navigations.
Changes:
- Add existence checks before initializing charts
- Guard all .update() calls with element and instance checks
- Track all setTimeout IDs in chartTimeouts array
- Clear timeouts on Turbolinks navigation events
- Clear timeouts at start of pieChartHome() to prevent duplicates
This ensures chart update callbacks only run when chart elements exist
on the page, preventing errors when navigating to pages without charts.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed critical issues causing JavaScript errors on dashboard pages:
## Problems Fixed
1. **jQuery not defined ($)**
- jQuery was loading AFTER application.js
- Scripts in dashboard/home tried to use $ before it was available
- Error: "Uncaught ReferenceError: $ is not defined"
2. **Turbolinks conflict**
- Changed data-turbo-track but app still uses turbolinks gem
- Error: "Cannot set properties of undefined (setting 'Turbolinks')"
- Both turbolinks and turbo-rails in Gemfile causing conflicts
3. **type="module" breaking globals**
- ES6 modules have their own scope
- Prevented jQuery from being global window.$
- Broke all existing jQuery-dependent code
## Solutions Applied
1. **Script Load Order**
```html
<!-- BEFORE: Wrong order -->
<%= javascript_include_tag "application" %>
<script src="jquery.min.js"></script>
<!-- AFTER: Correct order -->
<script src="jquery.min.js"></script>
<%= javascript_include_tag "application" %>
<script src="bootstrap.bundle.min.js"></script>
```
2. **Reverted to Turbolinks**
```erb
<!-- Changed back from: -->
"data-turbo-track": "reload"
<!-- To original: -->
"data-turbolinks-track" => "reload"
```
3. **Removed type="module"**
```html
<!-- Before: -->
<%= javascript_include_tag "application", type: "module" %>
<!-- After: -->
<%= javascript_include_tag "application" %>
```
## Technical Details
**Script execution order:**
1. jQuery (CDN) - Makes $ available globally
2. Bootstrap CSS (CDN) - Styles load early
3. application.css (Rails) - Custom styles
4. application.js (Rails) - Can now use jQuery
5. Bootstrap JS (CDN) - Needs jQuery, loaded last
**Why this order matters:**
- application.js likely has jQuery dependencies
- Dashboard charts/graphs use jQuery
- Bootstrap 5 JS doesn't require jQuery but loads after for safety
- Turbolinks needs to initialize before page interactions
**Compatibility:**
- Keeps existing jQuery-dependent code working
- Maintains Turbolinks behavior (app has both gems)
- All dashboard statistics/charts now load correctly
- No breaking changes to existing pages
This maintains backward compatibility while preserving the modern UI.
🤖 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'
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
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.
Ken Johnson