From 876955fff11a987d9bd373fa03579d70b4a3f85c Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Sun, 7 Dec 2025 00:36:21 -0500 Subject: [PATCH] Modernize UI/UX with Bootstrap 5.3 and contemporary design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/views/layouts/application.html.erb | 211 +++++++++++++++--- app/views/layouts/shared/_footer.html.erb | 74 +++++-- app/views/layouts/shared/_header.html.erb | 227 +++++++++++++------- app/views/layouts/shared/_messages.html.erb | 51 +++-- app/views/layouts/shared/_sidebar.html.erb | 218 +++++++------------ app/views/sessions/new.html.erb | 143 +++++++----- 6 files changed, 599 insertions(+), 325 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index dddc2fc..8b18338 100755 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,9 +1,12 @@ - + - RailsGoat - <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> - <%= javascript_include_tag "application", "data-turbolinks-track" => true %> + + + RailsGoat - OWASP Security Training + + <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %> + <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> <%#= csrf_meta_tags %> - + + - + + + body { font-size:<%= raw cookies[:font] %> !important;} <% end %> + <%= render "layouts/shared/header" %> <%= render "layouts/shared/sidebar" %> -
- <% if current_user %> -
- <%= render "layouts/shared/messages" %> - <%= yield %> -
- <% else %> - - <% end %> -
+ <%= yield %> + + <%= render "layouts/shared/footer" %> - - - diff --git a/app/views/layouts/shared/_footer.html.erb b/app/views/layouts/shared/_footer.html.erb index f2a9c18..a197612 100755 --- a/app/views/layouts/shared/_footer.html.erb +++ b/app/views/layouts/shared/_footer.html.erb @@ -1,22 +1,56 @@ -
-

- © The Open Worldwide Application Security Project - OWASP, 2015 -

-
+<% if current_user %> + +<% end %> - \ No newline at end of file + diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb index 24b39ca..09637f4 100755 --- a/app/views/layouts/shared/_header.html.erb +++ b/app/views/layouts/shared/_header.html.erb @@ -1,88 +1,155 @@ <% if current_user %> -
- - - Font Size: - A - A - - -
-