From b938e56463954e4c561d9c6f0932436daf74d0e1 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 02:23:25 -0500
Subject: [PATCH] Modernize login, signup, and dashboard pages with
 contemporary design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 app/views/dashboard/home.html.erb | 118 ++++++++++++++++---------
 app/views/sessions/new.html.erb   |   8 +-
 app/views/users/new.html.erb      | 139 ++++++++++++++++++++++++------
 db/development.sqlite3-shm        | Bin 0 -> 32768 bytes
 db/development.sqlite3-wal        | Bin 0 -> 57712 bytes
 5 files changed, 191 insertions(+), 74 deletions(-)
 create mode 100644 db/development.sqlite3-shm
 create mode 100644 db/development.sqlite3-wal

diff --git a/app/views/dashboard/home.html.erb b/app/views/dashboard/home.html.erb
index c923c49..baa1acb 100644
--- a/app/views/dashboard/home.html.erb
+++ b/app/views/dashboard/home.html.erb
@@ -1,56 +1,90 @@
-<div class="dashboard-wrapper">
-  <div class="main-container">
-    <div class="row-fluid">
-      <div class="span12"> <!--begin span12 -->
-        <div class="widget">
-          <div class="widget-header">
-            <div class="title">
-              <span class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></span> Current Statistics
-            </div>
-            <!-- Begin Title Buttons-->
-            <div class="tools pull-right">
-              <div class="btn-group">
-                <button id="change_to_bar_graph" class="btn btn-small">
-                  <span aria-label="change to bar graph" data-icon="&#xe14b;"></span>
-                </button>
-                <button id="change_to_pie_charts" class="btn btn-small">
-                  <span aria-label="change to pie charts" data-icon="&#xe096;"></span>
-                </button>
-              </div>
-            </div>
-            <!-- End Title Buttons-->
-          </div>
-          <div id="charts_body" class="widget-body">
-            <%#= render partial: "dashboard_stats" %>
-          </div>
-          <div class="clearfix">
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <div class="card shadow-sm">
+        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
+          <h4 class="mb-0">
+            <i class="bi bi-graph-up text-primary"></i> Current Statistics
+          </h4>
+          <!-- Chart Type Toggle -->
+          <div class="btn-group" role="group" aria-label="Chart type selection">
+            <button id="change_to_bar_graph" class="btn btn-outline-primary btn-sm" title="Bar Graph View" aria-label="Switch to bar graph">
+              <i class="bi bi-bar-chart-fill"></i> Bar Graph
+            </button>
+            <button id="change_to_pie_charts" class="btn btn-outline-primary btn-sm" title="Pie Charts View" aria-label="Switch to pie charts">
+              <i class="bi bi-pie-chart-fill"></i> Pie Charts
+            </button>
           </div>
         </div>
-      </div> <!-- end span12 -->
+        <div id="charts_body" class="card-body p-4">
+          <!-- Charts will load here dynamically -->
+          <div class="text-center py-5">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading charts...</span>
+            </div>
+            <p class="text-muted mt-3">Loading statistics...</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
 <script type="text/javascript">
-function makeActive(){
+function makeActive() {
   $('li[id="home"]').addClass('active');
-};
+}
 
 $("#change_to_bar_graph").click(function(event) {
-	event.preventDefault();
-	$("#charts_body").empty()
-	$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "bar_graph").inspect %>);
-	
-})
+  event.preventDefault();
+
+  // Add loading state
+  $("#charts_body").html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="text-muted mt-3">Loading bar graph...</p></div>');
+
+  // Remove active state from other button
+  $("#change_to_pie_charts").removeClass('active');
+  $(this).addClass('active');
+
+  // Load new content
+  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "bar_graph").inspect %>);
+});
 
 $("#change_to_pie_charts").click(function(event) {
-	event.preventDefault();
-	$("#charts_body").empty()
-	$("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
-})
+  event.preventDefault();
 
-$(document).ready(
-  makeActive,
-  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>)
-);
+  // Add loading state
+  $("#charts_body").html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p class="text-muted mt-3">Loading pie charts...</p></div>');
+
+  // Remove active state from other button
+  $("#change_to_bar_graph").removeClass('active');
+  $(this).addClass('active');
+
+  // Load new content
+  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
+});
+
+$(document).ready(function() {
+  makeActive();
+
+  // Mark pie charts as default active view
+  $("#change_to_pie_charts").addClass('active');
+
+  // Load default view
+  $("#charts_body").load(<%= sanitize change_graph_dashboard_index_path(:graph => "pie_charts").inspect %>);
+});
+
+// Handle Turbolinks page loads
+$(document).on('turbolinks:load', function() {
+  makeActive();
+});
 </script>
+
+<style>
+  /* Active button state for chart toggles */
+  #change_to_bar_graph.active,
+  #change_to_pie_charts.active {
+    background-color: var(--rg-primary);
+    color: white;
+    border-color: var(--rg-primary);
+  }
+</style>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index cdef7f9..c966de4 100755
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -64,13 +64,13 @@
       </div>
     <% end %>
 
-    <div class="mt-4 p-3 bg-warning bg-opacity-10 border border-warning rounded">
+    <div class="mt-4 p-3 rounded" style="background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1)); border: 2px solid rgba(255, 193, 7, 0.3); backdrop-filter: blur(10px);">
       <div class="d-flex align-items-start">
-        <i class="bi bi-exclamation-triangle-fill text-warning me-2 mt-1"></i>
+        <i class="bi bi-exclamation-triangle-fill text-warning me-2 mt-1" style="font-size: 1.25rem;"></i>
         <div class="small">
-          <strong>Security Training Environment</strong><br>
+          <strong class="d-block mb-1">Security Training Environment</strong>
           This is an intentionally vulnerable application for educational purposes.
-          <a href="https://github.com/OWASP/railsgoat/wiki" target="_blank" class="text-decoration-none">Learn more</a>
+          <a href="https://github.com/OWASP/railsgoat/wiki" target="_blank" class="text-warning fw-semibold text-decoration-none">Learn more →</a>
         </div>
       </div>
     </div>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 24c6c79..3baf9af 100755
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -1,36 +1,119 @@
-<div class="row-fluid">
-  <div class="span12">
+<div class="rg-login-wrapper">
+  <div class="rg-login-card" style="max-width: 500px;">
+    <div class="rg-login-header">
+      <div class="rg-login-logo">
+        <i class="bi bi-person-plus-fill"></i>
+      </div>
+      <h2 class="mb-1">Create Account</h2>
+      <p class="text-muted mb-0">Join the MetaCorp team</p>
+    </div>
 
-        <div class="row-fluid">
-          <div class="span4 offset4">
-            <div class="signup">
-      <%= form_for @user, :html => {:id => "account_edit", :class=> "signup-wrapper"} do |f| %>
-          <div class="header">
-            <h2>Sign Up</h2>
-            <p>Fill out the form below to login</p>
-           </div>
-          <div class="content">
-            <%= f.text_field :email, {:class => "input input-block-level", :placeholder => "Email"} %>
-            <%= f.text_field :first_name, {:class => "input input-block-level", :placeholder => "First Name"} %>
-            <%= f.text_field :last_name, {:class => "input input-block-level", :placeholder => "Last Name"} %>
-            <div class="control-group">
-              <%= f.password_field :password, {:class => "input input-block-level", :placeholder => "Password (at least six characters)"}%>
-            </div>
-            <div class="control-group">
-                <%= f.password_field :password_confirmation, {:class => "input input-block-level", :placeholder => "Confirm Password"}%>
-            </div>
-          </div>
-          <div class="actions">
-            <%= f.submit "Submit", {:id => 'submit_button', :class => "btn btn-info btn-large pull-right"} %>
-          </div>
-          <div class="clearfix"></div>
-      <% end %>
+    <%= form_for @user, html: { id: "account_edit", class: "needs-validation", novalidate: true } do |f| %>
+      <div class="mb-3">
+        <label for="email" class="form-label">Email Address</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-envelope"></i></span>
+          <%= f.text_field :email, {
+            class: "form-control",
+            id: "email",
+            placeholder: "you@example.com",
+            required: true,
+            autofocus: true
+          } %>
+        </div>
+      </div>
 
-            </div>
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="first_name" class="form-label">First Name</label>
+          <div class="input-group">
+            <span class="input-group-text"><i class="bi bi-person"></i></span>
+            <%= f.text_field :first_name, {
+              class: "form-control",
+              id: "first_name",
+              placeholder: "First Name",
+              required: true
+            } %>
           </div>
         </div>
 
+        <div class="col-md-6 mb-3">
+          <label for="last_name" class="form-label">Last Name</label>
+          <div class="input-group">
+            <span class="input-group-text"><i class="bi bi-person"></i></span>
+            <%= f.text_field :last_name, {
+              class: "form-control",
+              id: "last_name",
+              placeholder: "Last Name",
+              required: true
+            } %>
+          </div>
+        </div>
+      </div>
+
+      <div class="mb-3">
+        <label for="password" class="form-label">Password</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-lock"></i></span>
+          <%= f.password_field :password, {
+            class: "form-control",
+            id: "password",
+            placeholder: "At least 6 characters",
+            required: true,
+            minlength: 6
+          } %>
+        </div>
+        <div class="form-text">Password must be at least 6 characters long</div>
+      </div>
+
+      <div class="mb-3">
+        <label for="password_confirmation" class="form-label">Confirm Password</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+          <%= f.password_field :password_confirmation, {
+            class: "form-control",
+            id: "password_confirmation",
+            placeholder: "Re-enter password",
+            required: true
+          } %>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 mt-4">
+        <%= f.submit "Create Account", {
+          id: "submit_button",
+          class: "btn btn-primary btn-lg"
+        } %>
+      </div>
+
+      <hr class="my-4">
+
+      <div class="text-center">
+        <p class="text-muted mb-2">Already have an account?</p>
+        <%= link_to login_path, class: "btn btn-outline-primary" do %>
+          <i class="bi bi-box-arrow-in-right"></i> Sign in
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="mt-4 p-3 rounded" style="background: linear-gradient(135deg, rgba(6, 214, 160, 0.1), rgba(17, 138, 178, 0.1)); border: 2px solid rgba(6, 214, 160, 0.3);">
+      <div class="d-flex align-items-start">
+        <i class="bi bi-info-circle-fill me-2 mt-1" style="font-size: 1.25rem; color: var(--rg-success);"></i>
+        <div class="small">
+          <strong class="d-block mb-1">Training Environment</strong>
+          This application is intentionally vulnerable for security training purposes.
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 
-<%= javascript_include_tag "validation.js"%>
\ No newline at end of file
+<%= javascript_include_tag "validation.js" %>
+
+<style>
+  /* Override main content styling for signup page */
+  .rg-main.no-sidebar {
+    margin: 0;
+    padding: 0;
+  }
+</style>
diff --git a/db/development.sqlite3-shm b/db/development.sqlite3-shm
new file mode 100644
index 0000000000000000000000000000000000000000..35957577d2c2993ba1e86ee4763ccbf0d9dde937
GIT binary patch
literal 32768
zcmeI*Jq|%Z5CGu8^Zyg2)&aC`;3gW4p2`Ij4k9XvTI&L|E}+z5pNMFc;+teMlg(y!
z@*QBecOFC@)wBu`-A>B=w8qQhVRYGTw$tmdKi{8ji&-|wR_orE=Toa^<bCfS@!Ec;
zQmXQMzs>Ik3IYTO5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+
z009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkL{2LuY~t)X&y_oyDtX#c>x
zMkGLh009C72oNAZfB*pk1PBlyK!5-N0t5*BgFrE|s6;Iq(Te<s2|<7W0RjXF5FkK+
b009C72oNAZfB*pk1PBlyK!5;&{}p%uNmwfS

literal 0
HcmV?d00001

diff --git a/db/development.sqlite3-wal b/db/development.sqlite3-wal
new file mode 100644
index 0000000000000000000000000000000000000000..3c658868dcabe8267e64f1b74c4b950b59da4988
GIT binary patch
literal 57712
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
T`~~1IaP2-na|R0kp%?fUa&CTr

literal 0
HcmV?d00001