Upgrade to Ruby 3.3.6 and Rails 8.0.4 #476
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 <[email protected]>
This commit adds comprehensive coverage of OWASP Top 10 2025 categories, implementing both ReDoS (A05:2025) and Software Supply Chain (A03:2025) vulnerabilities for educational purposes. ## New Vulnerabilities Added ### A05:2025 - Injection (ReDoS) - Implemented three ReDoS endpoints in TutorialsController: - POST /tutorials/redos_email - Vulnerable email regex with nested quantifiers - POST /tutorials/redos_username - Classic (a+)+ pattern - POST /tutorials/redos_email_safe - Secure version using URI::MailTo::EMAIL_REGEXP - Added Regexp.timeout = 1.0 configuration (Rails 8 protection) - All endpoints include timing and error handling demonstrations ### A03:2025 - Software Supply Chain Failures - Demonstrated missing SRI on CDN assets in application.html.erb - Added educational endpoints: - GET /tutorials/supply_chain - Comprehensive supply chain vulnerabilities overview - GET /tutorials/check_dependencies - Dependency scanning simulation - Covers: Missing SRI, outdated dependencies, no SBOM, insecure gem sources ## Files Changed ### New Files - config/initializers/regexp_timeout.rb: Enables Rails 8 ReDoS protection - spec/controllers/tutorials_controller_spec.rb: 23 passing tests for all endpoints ### Modified Files - app/controllers/tutorials_controller.rb: Added 5 new educational endpoints - app/views/layouts/application.html.erb: Added CDN assets WITHOUT SRI (intentional vuln) - config/routes.rb: Added routes for ReDoS and supply chain endpoints ## Test Coverage - 23 RSpec tests covering both ReDoS and A03 vulnerabilities - Tests validate vulnerability behavior, error handling, and educational content - All tests passing ## Educational Value - Demonstrates OWASP 2025 categories A03 and A05 - Shows both vulnerable and secure implementations - Includes real-world CVE examples (British Airways, Magecart) - Provides mitigation guidance and tool recommendations This completes 100% coverage of OWASP Top 10 2025 categories in RailsGoat Rails 8. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
🟡 Please give this pull request extra attention during review.This pull request introduces multiple security vulnerabilities including ReDoS-prone regular expressions, hardcoded credentials, unsafe deserialization via Marshal.load of user-controlled data, path traversal and unrestricted file uploads, numerous IDORs and an endpoint that decrypts data with hardcoded keys, and many confirmed or potential XSS issues from unescaped/raw outputs and unsafe client-side DOM writes. Together these findings expose risks of denial-of-service, remote code execution, sensitive data disclosure, unauthorized data access/modification, and cross-site scripting.
🟡 Potential Cross-Site Scripting in
|
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The code calls current_user.first_name.html_safe in a view, which disables Rails' automatic HTML escaping and directly injects user-controlled data into the rendered HTML. If an attacker can control the first_name attribute (or it contains unexpected content), they can inject arbitrary HTML/JavaScript into the page (reflected/stored XSS). No contextual sanitization or safe encoding is applied before rendering. |
railsgoat/app/views/layouts/shared/_header.html.erb
Lines 47 to 50 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/layouts/shared/_messages.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The template renders flash messages with a raw ERB expression (<%= msg %>) inside an HTML context. In Rails ERB, <%= %> normally HTML-escapes output unless the string has been marked html_safe. However, the analysis cannot assume all flash messages are application-only: if any code elsewhere assigns user-controlled input to the flash (e.g., flash[:notice] = params[:something], or copies user content into a flash entry), that user data will be rendered here. Because this view does not explicitly sanitize or escape msg and does not defend against flash values marked html_safe, a path exists for attacker-controlled content to be sent to the rendering sink (HTML body) and executed. Therefore this is a valid reflected/stored XSS risk contingent on flash contents being derived from untrusted input. |
railsgoat/app/views/layouts/shared/_messages.html.erb
Lines 34 to 37 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/benefit_forms/index.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The file input change handler takes the raw filename (from |
railsgoat/app/views/benefit_forms/index.html.erb
Lines 156 to 159 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/admin/dashboard.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The template directly injects params[:admin_id] into a JavaScript string concatenation used to build a URL passed to jQuery's .load(). The line: $("#userDataTable").load("/admin/" + <%= params[:admin_id] %> + "/get_all_users"); interpolates an unescaped server-side value into client-side code. If an attacker can control params[:admin_id], they can break out of the JavaScript context or produce an unexpected URL that returns attacker-controlled HTML/JS which will be inserted and executed by .load(). There is no sanitization or explicit numeric coercion shown, nor escaping to ensure the value is safe, so this is a plausible reflected/stored XSS/vector for script injection. |
railsgoat/app/views/admin/dashboard.html.erb
Lines 58 to 61 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/layouts/application.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The layout template injects the value of cookies[:font] directly into a <style> block using raw (ERB raw interpolation) without any escaping or validation: body { font-size:<%= raw cookies[:font] %> !important;}. This is user-controllable data (cookies) written into an HTML context (inside a <style> tag). An attacker who can set a cookie can close the CSS context and inject HTML/JS (for example by supplying a value like "12px}</style><script>alert(1)</script><style>{"), or craft CSS that triggers script execution in some browsers). Rails automatic escaping for templates does not apply here because raw is used, and there is no sanitization or validation of the cookie value. Therefore this is a confirmed server-side XSS/vector for injection. |
railsgoat/app/views/layouts/application.html.erb
Lines 420 to 423 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/messages/index.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | Multiple unescaped user-controlled values are rendered into HTML and JavaScript contexts and some explicit unsafe APIs are used. In the messages view, message.message and message.creator_name are output using <%= ... %> which in Rails is auto-escaped for HTML body contexts — but elsewhere in the PR there are clear explicit bypasses of escaping and direct DOM insertion of user input (document.write in app/views/sessions/new.html.erb) and uses of html_safe/inspect.html_safe in other templates. The PR also constructs a JS URL using <%= "/users/#{current_user.id}/messages.json".inspect.html_safe %> which uses html_safe/inspect and may allow injection if other parts use similar patterns with user data. The document.write of a decoded location.hash is a direct, high-confidence reflected XSS vector. Given the combination of direct DOM writes and explicit .html_safe usage in the same patchset, user-controlled message content and user names could be abused (especially if any of them are ever rendered with html_safe/raw or injected into JS). |
railsgoat/app/views/messages/index.html.erb
Lines 1 to 309 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/paid_time_off/index.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | There are multiple places where untrusted or developer-controlled values are emitted into HTML or JavaScript without proper escaping or with explicit bypasses of Rails escaping. Notable confirmed unsafe patterns: 1) Use of html_safe/raw on user-visible data: current_user.first_name.html_safe in app/views/layouts/shared/_header.html.erb directly outputs a user-controlled string into HTML without escaping — this is a classic stored/reflected XSS vector. 2) Direct document.write of location.hash content in app/views/sessions/new.html.erb: document.write(" " + paramValue + " "); writes decoded URL hash data directly into the page DOM without encoding, enabling XSS via crafted URL fragments. 3) In multiple views JavaScript embeds server-side values via .inspect.html_safe or raw cookies: examples include get_pto_schedule_schedule_index_path(...).inspect.html_safe used inside JS and body { font-size:<%= raw cookies[:font] %> !important;} in app/views/layouts/application.html.erb — both can lead to script/HTML injection if the embedded value is attacker-controllable. Combined with direct interpolation of model attributes into HTML (e.g. <%= message.message %>, <%= @pto.* %>, many form field values) and several places where helpers are used with .html_safe or raw, there exists a clear data flow from potentially attacker-controlled sources (user attributes, URL hash, cookies, model data) to rendering sinks (HTML body, innerHTML/document.write, inline script) without context-appropriate escaping or sanitization. According to framework escaping rules, plain <%= %> would normally be escaped, but explicit uses of html_safe/raw and direct DOM write bypass escaping; additionally embedding values into JavaScript via .inspect.html_safe is unsafe. Therefore XSS is confirmed. |
railsgoat/app/views/paid_time_off/index.html.erb
Lines 1 to 297 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/pay/index.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The JavaScript function parseDirectDepostInfo injects server-provided values directly into HTML strings concatenated into table cells: '' + val.bank_account_num + '' and similar for routing number and percent. DataTables then inserts these strings into the DOM without any escaping. If any of these fields (bank_account_num, bank_routing_num, percent_of_deposit) can contain attacker-controlled input (from the database or API), an attacker can supply HTML/JS payloads (e.g., <script> or event handlers) which will be rendered/executed in the user's browser — this is a stored/reflected XSS vector. No client-side escaping or sanitization is applied before insertion, and the server-side endpoint is used via AJAX and its JSON is parsed and trusted, so the injection path is present. |
railsgoat/app/views/pay/index.html.erb
Lines 183 to 188 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/pay/index.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The decryptShow function constructs an HTML string by concatenating msg.account_num directly into the markup and appends it to the DOM via $('body').append(alertHtml). msg.account_num comes from a JSON response (server-controlled) and is inserted without any encoding/escaping. This allows an attacker who can control the decrypted value (or influence the server response) to inject arbitrary HTML/JS (for example a <script> tag or on* attributes), resulting in DOM-based XSS when appended to the page. |
railsgoat/app/views/pay/index.html.erb
Lines 260 to 263 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/sessions/new.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | The login view reads attacker-controllable data from location.hash, decodes it, and injects it directly into the page via document.write without any escaping or sanitization. This is a DOM-based XSS sink: document.write will interpret HTML/JS, so a crafted URL like https://example/login#msg=<script>alert(1)</script> (properly encoded) will execute script in the victim's browser. There is no framework auto-escaping involved because the data is handled entirely in client-side JS and written into the DOM raw. |
railsgoat/app/views/sessions/new.html.erb
Lines 89 to 92 in 5601fc1
🟡 Potential Cross-Site Scripting in app/views/performance/index.html.erb
| Vulnerability | Potential Cross-Site Scripting |
|---|---|
| Description | Multiple template expressions output untrusted model fields directly into HTML content and into attribute/context-sensitive spots without any explicit escaping or sanitization. In ERB, <%= ... %> is escaped by default, but there are several risky contexts here: (1) p.comments and p.reviewer_name are rendered inside element content (<%= p.comments %>, <%= p.reviewer_name %>) — if these fields are HTML-safe elsewhere (e.g. marked html_safe in model/controller) or contain untrusted markup they could introduce XSS. (2) Values are interpolated into inline style attributes (style="background-color: <%= score_color %>" and style="width: <%= score_percentage %>%"). Although score_color and score_percentage in this code are derived from p.score and numeric calculations, if an attacker can influence p.score (or if types are not enforced) they may inject a value that breaks out of the style context. (3) aria/role/other attributes concatenating values (aria-valuenow="<%= p.score %>") could also be abused if non-numeric content is present. Given the codebase already contains other explicit unsafe usages (e.g. current_user.first_name.html_safe and document.write of hash param elsewhere), there is a realistic risk that model fields are ever marked safe or set from attacker-controlled input. Taken together, these patterns provide a feasible path for untrusted data to reach rendered HTML without robust contextual encoding or sanitization, so XSS is confirmed. |
railsgoat/app/views/performance/index.html.erb
Lines 126 to 129 in 5601fc1
Regular Expression Denial of Service (ReDoS) in app/controllers/tutorials_controller.rb
| Vulnerability | Regular Expression Denial of Service (ReDoS) |
|---|---|
| Description | The redos_email method uses a complex regular expression (email_pattern) to validate email addresses. This regex contains nested quantifiers (+ applied to [a-zA-Z0-9_\-\.]+ and + applied to ([a-zA-Z0-9\-]+\.)+) and overlapping character classes, which are classic 'evil regex' patterns susceptible to catastrophic backtracking. Although a Regexp.timeout of 1 second is configured, a malicious input can still consume significant CPU resources for the entire duration of the timeout, leading to a denial of service by exhausting server resources. |
railsgoat/app/controllers/tutorials_controller.rb
Lines 23 to 26 in 5601fc1
Regular Expression Denial of Service (ReDoS) in app/controllers/tutorials_controller.rb
| Vulnerability | Regular Expression Denial of Service (ReDoS) |
|---|---|
| Description | The redos_username method in app/controllers/tutorials_controller.rb uses the regular expression /^(a+)+$/ to validate a username. This regex contains nested quantifiers (+ inside +) applied to a repeating character (a), which is a classic pattern for Regular Expression Denial of Service (ReDoS). User input from params[:username] is directly passed to this regex. A specially crafted input string, such as a long sequence of 'a' characters followed by a non-matching character (e.g., 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa!'), will cause the regex engine to engage in catastrophic backtracking, consuming excessive CPU resources and potentially leading to a denial of service. Although Regexp.timeout is set to 1 second in config/initializers/regexp_timeout.rb, this only prevents an infinite hang; it does not prevent the server from expending significant resources for each malicious request, making it vulnerable to resource exhaustion. |
railsgoat/app/controllers/tutorials_controller.rb
Lines 57 to 60 in 5601fc1
Hardcoded Credentials in app/views/tutorials/credentials.html.erb
| Vulnerability | Hardcoded Credentials |
|---|---|
| Description | The file app/views/tutorials/credentials.html.erb explicitly contains a table with hardcoded user emails, passwords, and API keys. This information is directly embedded in the HTML, making it accessible to any user who can view this page within the application. Although this is an intentional vulnerability for a tutorial, it represents a critical information disclosure risk in a real-world application. |
railsgoat/app/views/tutorials/credentials.html.erb
Lines 29 to 32 in 5601fc1
Unsafe Deserialization in app/views/password_resets/reset_password.html.erb
| Vulnerability | Unsafe Deserialization |
|---|---|
| Description | The application uses Marshal.load(Base64.decode64(params[:user])) in the reset_password action of the PasswordResetsController. The params[:user] value is derived directly from a hidden field in the reset_password.html.erb view, which is populated with a Base64-encoded, marshaled Ruby object. This allows an attacker to craft a malicious serialized object, Base64 encode it, and send it as the user parameter. When Marshal.load attempts to deserialize this attacker-controlled data, it can lead to arbitrary code execution on the server. |
railsgoat/app/views/password_resets/reset_password.html.erb
Lines 13 to 16 in 5601fc1
Path Traversal in app/views/benefit_forms/index.html.erb
| Vulnerability | Path Traversal |
|---|---|
| Description | The download action in BenefitFormsController directly uses the name parameter from user input to construct a file path without any sanitization or validation. This allows an attacker to use directory traversal sequences (../) to access and download arbitrary files from the server's filesystem. |
railsgoat/app/views/benefit_forms/index.html.erb
Lines 1 to 137 in 5601fc1
Unrestricted File Upload in app/views/benefit_forms/index.html.erb
| Vulnerability | Unrestricted File Upload |
|---|---|
| Description | The application allows users to upload files without proper server-side validation of the file type, content, or filename. The Benefits.save method directly uses the user-provided file.original_filename and stores the file in the public/data directory, which is typically web-accessible. This allows an attacker to upload a malicious script (e.g., a web shell) with an executable extension, which could then be accessed and executed via a web request, leading to Remote Code Execution (RCE). |
railsgoat/app/views/benefit_forms/index.html.erb
Lines 70 to 73 in 5601fc1
Insecure Direct Object Reference (IDOR) in app/views/messages/index.html.erb
| Vulnerability | Insecure Direct Object Reference (IDOR) |
|---|---|
| Description | The show and destroy actions in the MessagesController fetch Message objects directly using Message.where(id: params[:id]).first. This allows any authenticated user to view or delete any message in the system by manipulating the id parameter, as there is no check to ensure the message belongs to the current_user or that the current_user has appropriate authorization. |
railsgoat/app/views/messages/index.html.erb
Lines 46 to 49 in 5601fc1
User Enumeration / Information Disclosure in app/views/messages/index.html.erb
| Vulnerability | User Enumeration / Information Disclosure |
|---|---|
| Description | The app/views/messages/index.html.erb template uses User.all to populate a recipient dropdown for sending messages. This directly exposes the full names and user IDs of all registered users in the application to any authenticated user, regardless of their role or permissions. This information can be leveraged by attackers for user enumeration, social engineering, or to target specific users in further attacks. |
railsgoat/app/views/messages/index.html.erb
Lines 109 to 112 in 5601fc1
Insecure Direct Object Reference (IDOR) in app/views/pay/index.html.erb
| Vulnerability | Insecure Direct Object Reference (IDOR) |
|---|---|
| Description | The destroy action in the PayController fetches a direct deposit record using Pay.find_by_id(params[:id]). This method directly retrieves the record based on the provided ID from the request parameters without verifying if the record belongs to the currently authenticated user (current_user). This allows an attacker to manipulate the id parameter to delete direct deposit records belonging to other users. |
railsgoat/app/views/pay/index.html.erb
Lines 1 to 159 in 5601fc1
Information Disclosure via Decryption in app/views/pay/index.html.erb
| Vulnerability | Information Disclosure via Decryption |
|---|---|
| Description | The application exposes an endpoint (/pay/decrypted_bank_acct_num) that allows any authenticated user to decrypt arbitrary values. The encryption key and Initialization Vector (IV) used for this decryption are hardcoded within the application's codebase (in config/initializers/key.rb for the key in non-production environments, and config/initializers/constants.rb for the IV). This design flaw makes the decryption functionality highly vulnerable to exploitation. |
railsgoat/app/views/pay/index.html.erb
Lines 115 to 118 in 5601fc1
All finding details can be found in the DryRun Security Dashboard.
Contributor
Author
|
Holy moly, good job DryRun - shockingly accurate. But those vulns are intentional so we'll let it ride 😎. Thanks for showcasing how dope you are 🤗 |
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
Apply modern design system principles to replace dated 2013-era styling: Buttons: - Rounded corners (0.75rem border-radius) - Gradient backgrounds with depth - Smooth hover animations (translateY + shadow) - Soft box shadows (0 1px 3px → 0 4px 12px on hover) Cards & Widgets: - Increased border-radius (1rem) - Softer shadows (0 2px 8px rgba) - Hover effects with elevated shadows - Clean header separation without borders Forms: - Rounded inputs (0.75rem) - Thicker borders (2px) for clarity - Focus rings with brand color - Better padding for touch targets Header: - Backdrop blur effect (frosted glass) - Semi-transparent background (rgba 0.95) - Removed hard borders for cleaner look - Larger, softer shadows Tables & Dropdowns: - Rounded tables with overflow hidden - Subtle row hover effects - Modern dropdown styling with shadows - Smooth transitions on all interactions This addresses the feedback that buttons were "blocky/chunky and still resemble websites from 2013" by implementing 2024 design trends. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
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 <[email protected]>
Removed leftover modal HTML fragments (modal-header, modal-footer, data-dismiss="modal") that were causing accessibility errors and non-functional close button. Replaced with clean, standalone card-based layout with: - Proper close button linking to homepage - Bootstrap card structure with modern styling - Working "Show Credentials" button with jQuery - "Back to Home" link in footer - Removed problematic aria-hidden attributes Fixes: "Blocked aria-hidden on an element because its descendant retained focus" accessibility error 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Transformed key user-facing pages with modern UI patterns: **Login Page (sessions/new.html.erb)**: - Enhanced warning box with gradient background and backdrop blur - Added arrow indicator to "Learn more" link - Improved visual hierarchy with better icon sizing **Signup Page (users/new.html.erb)**: - Complete rewrite from Bootstrap 2 to Bootstrap 5 - Modern card-based layout matching login page aesthetic - Icon-enhanced form inputs with proper labels - Side-by-side first/last name fields - Gradient info box with training environment notice - Proper form validation attributes **Dashboard Home (dashboard/home.html.erb)**: - Replaced old .span12/.row-fluid with modern grid - Clean card-based layout with shadow - Icon-enhanced header and buttons - Loading spinner states during chart transitions - Active button state indicators for chart type toggle - Turbolinks compatibility - Improved accessibility with ARIA labels All pages now feature: - Bootstrap 5 components and utilities - Bootstrap Icons integration - Rounded corners and modern spacing - Gradient accents and visual depth - Smooth transitions and hover states 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
**Password Reset Pages**: Forgot Password (password_resets/forgot_password.html.erb): - Complete rewrite with modern card-based layout - Icon-enhanced form with email validation - Helpful info box with reset instructions - "Back to Login" link for easy navigation - Gradient background matching login page style Reset Password (password_resets/reset_password.html.erb): - Modern shield-lock icon header - Password strength guidance with form text - Confirmation field with proper validation - Security tips info box with gradient styling - Consistent with overall auth page design **Admin Dashboard (admin/dashboard.html.erb)**: - Replaced Bootstrap 2 classes with Bootstrap 5 - Modern alert design with icons and close buttons - Card-based layout with subtle shadow - Loading spinner state for user table - Icon-enhanced header (people icon) - Turbolinks compatibility - Improved accessibility with ARIA labels All pages now feature: - Bootstrap 5 modern components - Bootstrap Icons integration - Rounded corners and gradient accents - Smooth transitions and hover states - Proper loading states and feedback - Consistent design language across the app 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
The bar graph was calling drawChart3() before Google Charts library finished loading, causing "Cannot read properties of undefined (reading 'arrayToDataTable')" error. Applied same fix as performance page: - Check if visualization already loaded before calling google.load - Use callback parameter to ensure charts only draw after load - Add flag to prevent duplicate library loads - Guard against missing DOM elements - Handle AJAX-loaded partial context Fixes dashboard statistics bar graph view errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
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 <[email protected]>
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 <[email protected]>
Complete redesign of the PTO management page:
**Layout Improvements**:
- Migrated from Bootstrap 2 to Bootstrap 5 grid system
- Replaced .span classes with modern .col classes
- Side-by-side calendar and form layout on desktop
- Responsive cards with proper spacing
**Removed Google Charts**:
- Replaced sick days chart with 3 colorful stat cards
- Replaced PTO chart with 3 colorful stat cards
- Shows Earned, Taken, Remaining at a glance
- Color-coded with left borders (blue, red, green)
- No loading delays or JavaScript errors
**Modern Form**:
- Bootstrap 5 form controls with proper labels
- Icon-enhanced input groups
- Rounded inputs with better spacing
- Primary button for submission
- Form clears after successful submission
**Enhanced Calendar**:
- Kept FullCalendar but styled with modern theme
- Rounded corners and better button styling
- Brand-colored buttons and events
- Responsive layout
**Improved Alerts**:
- Bootstrap 5 dismissible alerts
- Icon-enhanced success/error messages
- Better visual hierarchy
**Additional Polish**:
- Formatted dates ("December 07, 2024" format)
- Info icons with contextual help
- Card shadows for depth
- Consistent spacing throughout
- Turbolinks compatibility
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Complete redesign of the benefit forms download and upload page: **Download Section**: - Beautiful hover cards for Health and Dental insurance - Large colorful icons (heart pulse and smile) - Card elevation on hover (lift animation) - Primary colored Health button, success colored Dental button - Centered layout with descriptions - Side-by-side responsive layout **Upload Section**: - Modern drag-drop style upload area - Dashed border with cloud upload icon - Custom file input with "Choose File" button - Real-time file selection feedback - Upload area changes color when file selected (green border) - Animated progress bar during upload - Cancel button to reset form - Clean action buttons with icons **Additional Features**: - Info box with important upload guidelines - File format and size restrictions - Bootstrap Icons throughout - Smooth transitions and animations - Turbolinks compatibility - Form validation (file required) - Simulated upload progress visualization **Removed**: - Old Bootstrap 2 classes (span4, span12) - Outdated icon fonts - Complex file upload plugin dependencies - Cluttered table-heavy layout The page now looks like a modern web application with: - Card-based design - Hover effects - Large touch-friendly buttons - Clear visual hierarchy - Professional polish 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Transforms the retirement benefits page with a modern, engaging design: Design improvements: - Add piggy bank icon header with descriptive subtitle - Create three large contribution stat cards with hover effects: * Employee Contribution (blue with person-check icon) * Employer Contribution (green with building-check icon) * Total Contribution (red gradient with cash-stack icon) - Stat cards lift on hover with shadow deepening and number scaling - Add featured Employee Services card with 4rem icon and gradient highlight - Include three smaller info cards for Investment Options, Employer Matching, Tax Advantages - Apply colored left/top borders, rounded corners, and smooth animations - Ensure Turbolinks compatibility with proper event handling The page now provides a visually appealing, easy-to-scan view of retirement benefits that matches the modern design system. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
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 <[email protected]>
Improves the Schedule PTO form section with modern design elements: Design enhancements: - Add left border accent in primary color to highlight the card - Add gradient background to header with descriptive subtitle - Include icons next to each form label (tag, chat, calendar) - Upgrade all form controls to large size for better touch targets - Add helpful placeholder text with examples (e.g., "Summer Vacation") - Include descriptive helper text below fields for guidance - Make submit button full-width and large for prominence - Add tip box at bottom with success border highlighting post-submission info - Increase padding and spacing (mb-4) for better breathing room The form now feels more guided, professional, and easier to use. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Complete redesign of the performance page with modern Bootstrap 5: Major improvements: - Add header with graph icon and descriptive subtitle - Create four stat cards showing key metrics at a glance: * Average Score (blue with star icon) * Highest Score (red with trophy icon) * Latest Score (green with calendar icon) * Total Reviews (purple with document icon) - Stat cards lift and scale numbers on hover - Modernize chart card with better spacing and min-height - Enhance chart styling with smooth curves and better colors - Transform table with modern header styling and icons - Add reviewer avatars (circular icons) in table rows - Color-code scores with badges (green=5, blue=4, yellow=3, red<3) - Add empty state with inbox icon for no reviews - Replace old Bootstrap 2 classes (row-fluid, span12, widget) - Use Bootstrap 5 grid system and modern card components - Add hover effects on table rows and stat cards The page now provides an engaging, data-rich view of performance history with clear visual hierarchy and modern design patterns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Removes problematic Google Charts dependency and creates a cleaner, more reliable performance trend visualization. Changes: - Remove all Google Charts JavaScript code (100+ lines) - Replace chart with visual timeline showing each review chronologically - Each timeline item displays: * Date at top, reviewer name at bottom * Colored circular badge with score number (green=5, blue=4, yellow=3, red<3) * Horizontal progress bar showing score percentage with comments - Add smooth animations: fade-in on load, scale on dot hover, slide on bar hover - Color-coded by score for instant visual feedback - Fully responsive with mobile layout - No external dependencies - pure CSS solution - Add empty state with graph icon if no performance data The timeline provides better visual hierarchy and eliminates the blank space issue caused by Google Charts loading failures. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Complete redesign of the messaging interface with modern layout: Inbox improvements: - Replace table with modern message cards - Each message shows circular gradient avatar with person icon - Display sender name prominently with formatted date - Show full message text with proper line wrapping - Add Details and Delete action buttons with icons - Hover effect highlights each message - Beautiful empty state with inbox icon when no messages Send Message form: - Relocate to right sidebar with sticky positioning - Add green gradient header with send icon - Style as modern card with left border accent - Large form controls with icons for better UX - Recipient selector with all users - Expandable textarea for message composition - Full-width send button in success green - Helpful tip box below form - Modern Bootstrap 5 alerts with icons for success/error - Auto-reload page after successful send to show new message Layout enhancements: - Two-column responsive layout (8/4 split) - Inbox on left, compose on right - Sticky compose form stays visible while scrolling - Mobile-friendly with stacked layout on small screens - Replace all Bootstrap 2 classes (row-fluid, span12, widget) - Modern Bootstrap 5 grid and components - Turbolinks compatibility The page now provides a clean, modern messaging experience similar to contemporary email/messaging applications. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Complete redesign of the pay/direct deposit management page: Layout improvements: - Two-column responsive layout (forms left, table right) - Forms column (4/12): * Add Direct Deposit form with green theme and gradient header * Decrypt Account form with yellow/warning theme * Both cards have left border accents - Table column (8/12): * DataTable showing existing accounts * "Why Encrypted?" button in header * Three info cards below explaining benefits Form enhancements: - All form controls upgraded to large size with icons - Input groups with trailing icons (bank, routing, lock, percent) - Helper text below each field for guidance - Full-width submit buttons in themed colors - Tip boxes with security/convenience info - Auto-clear forms after successful submission Table improvements: - Modern Bootstrap 5 table with hover effects - Icons in column headers (lock, diagram, percent, gear) - Enhanced data display: * Account numbers in monospace code blocks * Routing numbers in light badges * Deposit percentages in green success badges * Delete buttons styled as outline-danger with trash icon - Custom DataTables pagination styling matching theme - Empty state message for no accounts JavaScript enhancements: - Replace basic alerts with modern Bootstrap-styled overlays - Decrypted account number shows in floating alert with unlock icon - "Why Encrypted?" shows modal-like dialog with close button - Delete confirmation improved - Turbolinks compatibility - Form reset after success Info cards: - Instant Access (blue) - explain direct deposit timing - Secure & Encrypted (green) - highlight security features - Split Deposits (yellow) - describe multi-account feature The page now provides a banking-grade interface for managing direct deposit with clear visual hierarchy and modern UX. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Resolves "Cannot set properties of undefined (setting '_DT_CellIndex')" error by modernizing DataTables API usage and handling Turbolinks properly. Changes: - Update to modern DataTables API (capital D DataTable() vs lowercase) - Add check for existing DataTable before initialization - Properly destroy and recreate DataTable on Turbolinks page loads - Replace deprecated fnClearTable() with table.clear() - Replace deprecated fnAddData() with table.row.add() + table.draw() - Create unified initializePage() function for both ready and turbolinks:load - Add autoWidth, searching, and ordering options to DataTable config The DataTable now initializes cleanly without errors and handles Turbolinks navigation properly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Transforms blocky form controls into sleek, modern inputs: Form control improvements: - Rounded corners (0.75rem) for all inputs and buttons - 2px borders with light gray color (#e9ecef) - Subtle shadows for depth (0 1px 3px rgba) - Smooth transitions on all interactions (0.2s ease) - Larger padding for better touch targets Focus state enhancements: - Add Direct Deposit form: green glow on focus with 4px shadow ring - Decrypt form: yellow/warning glow on focus with themed shadow - Input group icons change gradient on focus - Entire input group highlights together (border color sync) - Remove harsh outline, replace with soft shadow Button refinements: - More rounded corners (0.75rem) - Lift effect on hover (translateY -2px) - Enhanced shadows that grow on hover - Smooth press animation on active state - Bold font weight (600) Input group styling: - Gradient backgrounds on addon icons - Seamless connection between input and icon - Icons highlight with themed gradient on focus - Smooth border radius flow from input to addon The forms now have a polished, modern appearance matching contemporary web applications with smooth, delightful interactions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Resolves icon height mismatch with form inputs. Changes: - Add explicit padding to input-group-text matching form-control - Use flexbox (display: flex, align-items: center) for vertical centering - Match padding for input-group-lg contexts (0.875rem 1.25rem) - Set icon font-size to 1rem and line-height: 1 to prevent overflow - Add min-width: 50px for consistent icon container size Icons now align perfectly with input heights for a polished appearance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Removes visual clutter and simplifies the interface for better usability:
Layout simplification:
- Change column split from 4/8 to 5/7 for better balance
- Remove gradient backgrounds from card headers
- Use simple white headers with clean icons
- Increase spacing between sections (g-4 gap)
- Remove info cards at bottom to reduce page length
Form simplification:
- Remove input group icons and addons
- Use clean standalone inputs without decorations
- Remove helper text under each field (info in placeholder)
- Reduce button sizes from btn-lg to standard
- Remove decorative tip boxes
- Simpler labels without icons
- Reduce vertical spacing (mb-3 instead of mb-4)
Table simplification:
- Remove icons from table headers
- Cleaner header text ("Your Accounts" vs "Direct Deposit Accounts")
- Remove subtitle text from headers
Input styling:
- Smaller, cleaner inputs (0.5rem radius, 1px border)
- Smaller padding (0.625rem vs 0.875rem)
- Smaller font size (0.95rem)
- Subtle focus rings (3px glow)
- Color-coded focus: green for add, yellow for decrypt
- Removed complex gradients and shadows
The page now has a clean, uncluttered appearance with better
visual hierarchy and easier-to-scan content.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Makes form controls more rounded and polished instead of rectangular: Form control updates: - Increase border-radius from 0.5rem to 0.75rem for softer curves - Increase border from 1px to 2px for better definition - Adjust padding to 0.75rem 1rem for comfortable spacing - Set font-size to 1rem for better readability Button updates: - Match border-radius at 0.75rem for consistency - Increase font-weight to 600 for emphasis - Add explicit padding (0.75rem 1.5rem) - Stronger hover lift effect (translateY -2px) - Enhanced shadow on hover (0 4px 12px) Inputs and buttons now have modern, rounded appearance matching the design system used throughout the application. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Updates pay page forms to use the same styling patterns as messages, PTO, and other modernized pages for consistency. Changes: - Remove local form control styles that override global styles - Use global form styles from application.html.erb - Add form-control-lg class to all inputs for larger size - Add icons to all form labels (bank2, diagram-3, percent, key-fill) - Use fw-semibold class on labels for bold appearance - Add helper text below inputs with small.text-muted - Change spacing from mb-3 to mb-4 for consistency - Use btn-lg class for all buttons - Keep only custom focus colors (green for add, yellow for decrypt) Forms now match the polished appearance of other pages with: - Properly rounded inputs (0.75rem from global styles) - 2px borders with nice focus effects - Larger, more comfortable controls - Helpful icons and descriptions - Consistent spacing and typography 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Replace user data in seeds: - Jack Mannino → John Smith ([email protected]) - Jim Manico → James Anderson ([email protected]) Update wiki documentation examples to use new names. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Fix "Illegal invocation" JavaScript error when opening edit modal: - Remove Bootstrap 2 'hide' class from modal markup - Add proper Bootstrap 5 modal structure (modal-dialog/modal-content) - Update JavaScript to use Bootstrap 5 Modal API - Load dynamic content into .modal-content instead of root modal - Remove legacy data-toggle attribute from button The modal now uses the correct Bootstrap 5.3 structure and API, resolving selector-engine.js errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Update modal content to Bootstrap 5 styling and API: - Replace Bootstrap 2 modal-header structure with Bootstrap 5 - Update close button from 'close' class to 'btn-close' - Replace 'data-dismiss' with 'data-bs-dismiss' - Modernize form classes: control-group → mb-3, span12 → form-control - Update form labels to use 'form-label' class - Add 'form-select' class to select dropdown - Update JavaScript to use Bootstrap 5 Modal.getInstance() API - Add preventDefault() to button click handlers The modal now properly loads and displays in Bootstrap 5 with modern form styling and correct modal dismissal behavior. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add 'return false;' to onClick handler to prevent the # href from causing page navigation/redirect to dashboard. This fixes the issue where clicking Edit would redirect to /admin/1/dashboard# instead of opening the modal. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add console logging to openEditModal function to debug AJAX load - Add explicit id and name attributes to admin select field - Only show modal after content successfully loads - Log errors if modal content fails to load This helps diagnose the modal loading issue and fixes the Chrome warning about form fields lacking id/name attributes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Log modal element to verify it exists - Check for existing modal instance before creating new one - Log each step of modal creation and show process This helps identify why modal.show() isn't displaying the modal. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Switch from bootstrap.Modal class to jQuery .modal('show') method.
Bootstrap 5 still supports the jQuery plugin API for backwards
compatibility, and this method handles initialization automatically.
This should fix the issue where modal.show() was called but the
modal wasn't appearing visually.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Bootstrap 5 removed jQuery plugin support, so .modal('show') doesn't work.
Switch back to native Bootstrap 5 Modal API with proper initialization:
- Dispose of any existing modal instance before creating new one
- Create modal with explicit options (backdrop, keyboard, focus)
- Add detailed console logging for each step
This ensures the modal is properly initialized before showing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Remove complex modal implementation and replace with simple page navigation: - Convert get_user view from modal partial to full edit page - Add proper form with Bootstrap 5 styling - Link directly from users list to edit page - Update controller actions to redirect instead of returning JSON - Add flash messages for success/error feedback - Remove all modal JavaScript and markup - Remove modal CSS and backdrop handling Benefits: - Much simpler and more maintainable - No JavaScript errors or complexity - Standard Rails CRUD pattern - Better user experience with proper navigation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several significant updates to modernize the Rails application and add security-focused demonstration endpoints. The most impactful changes are the upgrade to Rails 8 and Ruby 3.3.6, the addition of endpoints demonstrating Regular Expression Denial of Service (ReDoS) vulnerabilities and supply chain security issues, and the implementation of Rails 8's regular expression timeout protection. Additionally, the Gemfile has been updated to reflect modern dependencies, and the application layout now includes an example of a supply chain vulnerability.
Framework and Dependency Upgrades:
3.3.6(.ruby-version) and Rails to~> 8.0.0, with corresponding updates to the Gemfile and modernized dependencies (e.g.,puma,sqlite3, asset pipeline gems). Removed deprecated gems and added support for modern asset management (importmap-rails,stimulus-rails,turbo-rails). [1] [2] [3]Security Demonstration Endpoints (TutorialsController):
redos_email,redos_username), a safe regex validation (redos_email_safe), and supply chain security issues (supply_chain,check_dependencies). These endpoints are documented for security training purposes and reference mitigation strategies. [1] [2]ReDoS Protection (Rails 8 Feature):
Regexp.timeout = 1.0) to mitigate ReDoS attacks, with a new initializer explaining this security feature.Supply Chain Vulnerability Demonstration:
application.html.erbto include CDN assets without Subresource Integrity (SRI) as a live example of a supply chain vulnerability, with documentation and references to the new tutorial endpoint.Miscellaneous:
password_resets.js.coffee) to plain JavaScript (password_resets.js). [1] [2]db/schema.rbto match Rails 8 conventions and schema format. [1] [2]These changes collectively modernize the codebase, improve security posture, and provide hands-on examples for security education.