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>
Resolves "Uncaught TypeError: $(...).fullCalendar is not a function"
by loading FullCalendar and Moment.js libraries from CDN.
Changes:
- Add Moment.js 2.29.4 from CDN to application layout
- Add FullCalendar 3.10.5 CSS and JS from CDN
- Remove local javascript_include_tag calls from PTO page
- Ensure libraries load before page attempts to initialize calendar
The PTO calendar now loads reliably across page navigations.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The deprecated Google JSAPI (google.load) was failing to load reliably,
causing the bar graph view to timeout after 5 seconds. Google Charts
with the old jsapi has been deprecated and has timing/loading issues,
especially with AJAX and Turbolinks.
Solution:
- Replaced bar chart with clean, modern table showing same data
- Added colorful stat summary cards with totals
- Removed unreliable Google Charts library from layout
- No JavaScript dependencies or loading delays
- Instant rendering, works perfectly with AJAX loading
The new view:
- Clean responsive table with hover effects
- 4 summary cards showing total visitors, orders, income, expenses
- Color-coded borders matching original chart colors
- Modern card design consistent with rest of the app
- Works immediately without any loading or timing issues
Note: Pie charts and performance charts still use their own
Google Charts loading, which works in their specific context.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The issue was that google.load() doesn't work reliably when called
from AJAX-loaded content. The callback wasn't firing.
Solution:
- Load Google Charts library once in main application.html.erb layout
- Bar graph partial now just polls for google.visualization to be ready
- Uses retry logic (50 attempts @ 100ms = 5 second timeout)
- Returns success/failure boolean for proper flow control
- Removed duplicate script loading from partial
This ensures Google Charts is available globally for all chart views
(bar graphs, pie charts, performance charts) without timing issues.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed shield icon being cut off by adding container padding and
ensuring proper spacing from viewport edge.
Changes:
- Add overflow: visible to .rg-header to prevent clipping
- Increase container-fluid padding to 2rem for edge spacing
- Remove left padding from first col-auto to align with container
- Add min-width to icon for consistent sizing
- Remove negative row margins that could cause cutoff
The icon now has proper space from the viewport edge and displays
fully without being clipped down the middle.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed Bootstrap Icon being cut off in navbar by adding proper flexbox
alignment and line-height controls to the brand link.
Changes:
- Add display: inline-flex to .rg-brand for proper icon alignment
- Add align-items: center to vertically center icon with text
- Add gap: 0.5rem for spacing between icon and text
- Set line-height: 1 to prevent extra vertical space
- Make icon slightly larger (1.75rem) for better visual hierarchy
This ensures the shield icon displays fully without being clipped.
🤖 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>
Ken Johnson