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

**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 <noreply@anthropic.com>
---
 app/views/admin/dashboard.html.erb            |  98 ++++++++++--------
 .../password_resets/forgot_password.html.erb  |  77 +++++++++-----
 .../password_resets/reset_password.html.erb   |  98 ++++++++++++------
 db/development.sqlite3-shm                    | Bin 32768 -> 32768 bytes
 db/development.sqlite3-wal                    | Bin 57712 -> 41232 bytes
 5 files changed, 177 insertions(+), 96 deletions(-)

diff --git a/app/views/admin/dashboard.html.erb b/app/views/admin/dashboard.html.erb
index ddad53c..4ffa26a 100755
--- a/app/views/admin/dashboard.html.erb
+++ b/app/views/admin/dashboard.html.erb
@@ -1,54 +1,70 @@
-<div class="dashboard-wrapper">
-  <div class="main-container">
-    <div class="row-fluid">
-      <div class="span12">
-        <div id="success" style="display: none;" class="alert alert-block alert-success fade in">
-          <h4 class="alert-heading">Success!</h4>
-          <p>User information successfully updated.</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="row-fluid">
-      <div class="span12">
-        <div id="failure" style="display: none;" class="alert alert-block alert-error fade in">
-          <h4 class="alert-heading">Error!</h4>
-          <p>Something went wrong.</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="row-fluid">
-      <div class="span12">
-        <div class="widget">
-          <div class="widget-header">
-            <div class="title">
-              <span class="fs1" aria-hidden="true" data-icon="&#xe071;"></span>Manage Users
-            </div>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <!-- Success Alert -->
+      <div id="success" style="display: none;" class="alert alert-success alert-dismissible fade show" role="alert">
+        <div class="d-flex align-items-center">
+          <i class="bi bi-check-circle-fill me-2" style="font-size: 1.5rem;"></i>
+          <div>
+            <h5 class="alert-heading mb-1">Success!</h5>
+            <p class="mb-0">User information successfully updated.</p>
           </div>
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
 
-          <div id="userDataTable" class="widget-body">
-          </div> <!-- End widget-body-->
-        </div> <!-- End widget header-->
+      <!-- Error Alert -->
+      <div id="failure" style="display: none;" class="alert alert-danger alert-dismissible fade show" role="alert">
+        <div class="d-flex align-items-center">
+          <i class="bi bi-exclamation-triangle-fill me-2" style="font-size: 1.5rem;"></i>
+          <div>
+            <h5 class="alert-heading mb-1">Error!</h5>
+            <p class="mb-0">Something went wrong. Please try again.</p>
+          </div>
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+
+      <!-- User Management Card -->
+      <div class="card shadow-sm">
+        <div class="card-header bg-white py-3">
+          <h4 class="mb-0">
+            <i class="bi bi-people-fill text-primary"></i> Manage Users
+          </h4>
+        </div>
+
+        <div id="userDataTable" class="card-body p-0">
+          <!-- Loading state -->
+          <div class="text-center py-5">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading users...</span>
+            </div>
+            <p class="text-muted mt-3">Loading user data...</p>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 
-<%= javascript_include_tag "jquery.dataTables.min.js"%>
+<%= javascript_include_tag "jquery.dataTables.min.js" %>
 
 <script type="text/javascript">
-
-function makeActive(){
+function makeActive() {
   $('li[id="admin"]').addClass('active');
-};
+}
 
-function loadTable(){
-  $("#userDataTable").load("/admin/"+ <%= params[:admin_id] %> + "/get_all_users")
-};
+function loadTable() {
+  $("#userDataTable").load("/admin/" + <%= params[:admin_id] %> + "/get_all_users");
+}
 
-$(document).ready(
-  makeActive,
-  loadTable()
-);
+$(document).ready(function() {
+  makeActive();
+  loadTable();
+});
+
+// Handle Turbolinks page loads
+$(document).on('turbolinks:load', function() {
+  makeActive();
+});
 </script>
diff --git a/app/views/password_resets/forgot_password.html.erb b/app/views/password_resets/forgot_password.html.erb
index 3ded1ce..e534f95 100644
--- a/app/views/password_resets/forgot_password.html.erb
+++ b/app/views/password_resets/forgot_password.html.erb
@@ -1,31 +1,60 @@
-<div class="row-fluid">
-  <div class="span12">
-    <div class="row-fluid">
-      <div class="span4 offset4">
-        <h2 align="center">MetaCorp</h2>
-        <h3 align="center">A GoatGroup Company</h3>
+<div class="rg-login-wrapper">
+  <div class="rg-login-card">
+    <div class="rg-login-header">
+      <div class="rg-login-logo">
+        <i class="bi bi-key-fill"></i>
+      </div>
+      <h2 class="mb-1">Reset Password</h2>
+      <p class="text-muted mb-0">We'll send you a reset link</p>
+    </div>
 
-        <div class="signup">
-          <%= form_tag "forgot_password", :class=> "signup-wrapper" do %>
-
-          <div class="header">
-            <h2>Forgot Password</h2>
-            <p>Fill out the form below to reset your password.</p>
-          </div>
-
-          <div class="content">
-            <%= text_field_tag :email, params[:email], {:class => "input input-block-level", :placeholder => "Email"} %>
-          </div>
-
-          <div class="actions">
-            <%= submit_tag "Reset Password", {:class => "btn btn-info btn-large"} %>
-          </div>
-
-          <div class="clearfix"></div>
-          <% end %>
+    <%= form_tag "forgot_password", html: { class: "needs-validation", novalidate: true } do %>
+      <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>
+          <%= text_field_tag :email, params[:email], {
+            class: "form-control",
+            id: "email",
+            placeholder: "you@example.com",
+            required: true,
+            autofocus: true,
+            type: "email"
+          } %>
         </div>
+        <div class="form-text">Enter the email address associated with your account</div>
+      </div>
 
+      <div class="d-grid gap-2">
+        <%= submit_tag "Send Reset Link", class: "btn btn-primary btn-lg" %>
+      </div>
+
+      <hr class="my-4">
+
+      <div class="text-center">
+        <p class="text-muted mb-2">Remember your password?</p>
+        <%= link_to login_path, class: "btn btn-outline-primary" do %>
+          <i class="bi bi-arrow-left"></i> Back to Login
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="mt-4 p-3 rounded" style="background: linear-gradient(135deg, rgba(69, 123, 157, 0.1), rgba(29, 53, 87, 0.1)); border: 2px solid rgba(69, 123, 157, 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-secondary);"></i>
+        <div class="small">
+          <strong class="d-block mb-1">Password Reset Help</strong>
+          If you don't receive an email within a few minutes, check your spam folder or contact support.
+        </div>
       </div>
     </div>
   </div>
 </div>
+
+<style>
+  /* Override main content styling for password reset page */
+  .rg-main.no-sidebar {
+    margin: 0;
+    padding: 0;
+  }
+</style>
diff --git a/app/views/password_resets/reset_password.html.erb b/app/views/password_resets/reset_password.html.erb
index 61b4706..965ea41 100644
--- a/app/views/password_resets/reset_password.html.erb
+++ b/app/views/password_resets/reset_password.html.erb
@@ -1,39 +1,75 @@
-<div class="row-fluid">
- <div class="span12">
-    <div class="row-fluid">
-      <div class="span4 offset4">
-        <h2 align="center">MetaCorp</h2>
-        <h3 align="center">A GoatGroup Company</h3>
+<div class="rg-login-wrapper">
+  <div class="rg-login-card">
+    <div class="rg-login-header">
+      <div class="rg-login-logo">
+        <i class="bi bi-shield-lock-fill"></i>
+      </div>
+      <h2 class="mb-1">Create New Password</h2>
+      <p class="text-muted mb-0">Choose a strong, unique password</p>
+    </div>
 
-        <!-- TODO -->
-        <!-- Create a form that allows a user to reset their password -->
-        <!-- This form is just a placeholder with no working functionality -->
+    <!-- TODO: This form is just a placeholder with no working functionality -->
+    <%= form_tag "password_resets", html: { class: "needs-validation", novalidate: true } do %>
+      <%= hidden_field_tag 'user', Base64.encode64(Marshal.dump(@user)) %>
 
-        <div class="signup">
-          <%= form_tag "password_resets", :class=> "signup-wrapper" do %>
-
-          <div class="header">
-            <h2>Create Password</h2>
-            <p>Fill out the form below to create a new password.</p>
-          </div>
-
-          <div class="content">
-            <%= hidden_field_tag 'user', Base64.encode64(Marshal.dump(@user)) %>
-            <%= label_tag "Enter Password" %>
-            <%= password_field_tag :password, params[:password], {:class => "input input-block-level"} %>
-            <%= label_tag "Confirm Password" %>
-            <%= password_field_tag :confirm_password, params[:confirm_password], {:class => "input input-block-level"} %>
-          </div>
-
-          <div class="actions">
-            <%= submit_tag "Create Password", {:class => "btn btn-danger btn-large"} %>
-          </div>
-
-          <div class="clearfix"></div>
-          <% end %>
+      <div class="mb-3">
+        <label for="password" class="form-label">New Password</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-lock"></i></span>
+          <%= password_field_tag :password, params[:password], {
+            class: "form-control",
+            id: "password",
+            placeholder: "Enter new password",
+            required: true,
+            autofocus: true,
+            minlength: 6
+          } %>
         </div>
+        <div class="form-text">Password must be at least 6 characters long</div>
+      </div>
 
+      <div class="mb-3">
+        <label for="confirm_password" class="form-label">Confirm New Password</label>
+        <div class="input-group">
+          <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+          <%= password_field_tag :confirm_password, params[:confirm_password], {
+            class: "form-control",
+            id: "confirm_password",
+            placeholder: "Re-enter new password",
+            required: true
+          } %>
+        </div>
+      </div>
+
+      <div class="d-grid gap-2 mt-4">
+        <%= submit_tag "Create New Password", class: "btn btn-primary btn-lg" %>
+      </div>
+
+      <hr class="my-4">
+
+      <div class="text-center">
+        <%= link_to login_path, class: "btn btn-outline-secondary" do %>
+          <i class="bi bi-arrow-left"></i> Back to Login
+        <% 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-shield-check me-2 mt-1" style="font-size: 1.25rem; color: var(--rg-success);"></i>
+        <div class="small">
+          <strong class="d-block mb-1">Password Security Tips</strong>
+          Use a mix of letters, numbers, and symbols. Avoid common words or personal information.
+        </div>
       </div>
     </div>
   </div>
 </div>
+
+<style>
+  /* Override main content styling for password reset page */
+  .rg-main.no-sidebar {
+    margin: 0;
+    padding: 0;
+  }
+</style>
diff --git a/db/development.sqlite3-shm b/db/development.sqlite3-shm
index 35957577d2c2993ba1e86ee4763ccbf0d9dde937..8c0bd56033bf6c59fd1166ff9520937fe694e8a6 100644
GIT binary patch
delta 194
zcmZo@U}|V!s+V}A%K!qbK+MR%AixErm4R4x150a9C@*8@0Y4`eG5@CIy4uS#)fVZK
ysvc+*7=X<Ej|8B?6YF^uLDn$?F;05pK}(N`7epri^5EKdXq)`xeMvytMjQaTH81r5

delta 215
zcmZo@U}|V!s+V}A%K!rGK+MR%AixKt6@fUV_r_`0_dC{a&HHYqSas;;zlKVdOqPjj
zNmUOt3JgHz{zn2(;feLUh9K*hftYA|<3?ML$-g|fn7J8vH*VZ6IeAwG7c&n7-^Pum
FvH(@NI066w

diff --git a/db/development.sqlite3-wal b/db/development.sqlite3-wal
index 3c658868dcabe8267e64f1b74c4b950b59da4988..9610b80010c8072fcbafb3da22245a90e71c81b7 100644
GIT binary patch
literal 41232
zcmeI*?`s=%90%~+u0Imf^oD}#7-c6#Xk@*gxm<ES%G$22Z7tFjbra%w{bo6G$%WjF
z(t(UboDBC!!6%AOeBc8a=pQhU4IeoW1>Mulzd+{$*)zXcy`#ywBBJKfzAqG-`?PT1
z*Ih16KkxgVes!#qnEQDukvN{{F4w<)`RvHE8=Vu{oljnIzFMTK*!}B2y>PNJ^_xDG
z;XX<vxq5=DbMJHaxx3sg?k4v!_jdPZu|NO<5P$##AOHafKmY;|fB*y_@DBtg8TRxs
zvtc^BzHNET;zW|2X6nTA%uB=@NgZQPFqb{j^2WJe6Qil)<LvWHle8*st8O+d;!RGD
zvClC(ZmU+d8x_|}XGYo6jAvEJ_GO27>8D57EYmdY?XqvzN!hJbyfnwMGfa#4c8k<W
z!}rp3vpFW*hO6}HO!q7Jf5GYpS1Qfashb(Pay0!#f}5V)$T$<%>9<%Q009U<00Izz
z00bZafx!#3FLV}@iDzDK@03c0Ay<9BX^5iZTBcKVJ>O6zNfIA_t`KE0__VR^Ua=j=
z6g5HOXV*>3ZuqWOeUV>j_{8Dq3Vvgge~p)=vaFT$EMICi9r7x9Yt{BeP1OZ8&(E$d
zpI=`)!#j43@Jqz1xmkX`+H&helyiz8bszkuSutDopTD9=iZ&-JbCS+Wx}oF@O%n=o
zp`gf5uC&XY1v)zGZ;h_!!%s|xs0doIn9moYLkuc(i1WidM7pyTEhiO~$PmLy`=!oV
zI>h3Edodn6EGG*}uBhdr$7EQcJFGO!J4`JKnqJH)#mEi|EA+J1lNb2#<b#ZOd*&hX
z0)s!{V+$Yv0SG_<0uX=z1Rwwb2teSF3H0R!&c!e<@YBO@#vlDc*1CCtv8R66mlvQ<
zus{F;5P$##AOHafKwxMD+FPA-w8^(|V9PRSt2fQvcyuo{UC{HoDyxy!URXh1AWTCb
zFEEJIN0<tT9HU_cd4atEe>_eqVJaZ9!@>$Zt@q>wuHCry`)7@N_mCGDnm0UbC<Gt?
z0SG_<0uX=z1Rwwb2n>rrUtVA-hIxVe-<NKE`@);=bn^n^sYg9|0s0gR1Rwwb2tWV=
z5P-m86QFJNrJ-!A)2q}A1ufD6qiyxQ3i1LT<`)>i6bivC0?{Kgs9=79y*V)A(M%6#
z5s2)tuyO?F7kKdA?T-K5f`h!kVSB^Jcpv})2tWV=5P$##AOHafKw#hkeR+Z980H0X
zvut*JXXbHUAerL(@&a@P76?E90uX=z1R!uk1!(tqc?jF;1wk#yc~y_}!nB}*yg;|D
zj`;;}KZ1YhmJ2~DAo`LED#!~UFYv$K1|*zCAaYEG75cW`Grz!(pTBYE)Ye1;d4VJP
z2M>k~0SG_<0uX=z1Rwwb2tWV=|D8ZzUSK7Ld4YFFzMN(<TQ|D%3#5{zNM3-h!U6#Z
zKmY;|fB*#kTA+QgvqBr{7Z05N-Q2F*4ceYH8>X}C+m;uHOH4IGlIS(*d0FkhT76#y
zd4agK)iJ-oPN`%Va@F^nhA29&Wja;Y^Y?nO!HpK`#PiHcBo;5UoS|t#fzAq{MDG<J
zR%kPQfu2XK1J5JD=x{#*+>hY=`q~-Zv1^21B38}K^7GY}TPLDSZ;l{!AN;0SF<Z8%
Vsk)%%BQ5iA7J(;Mj==l^e*gsXwB7&!

literal 57712
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
T`~~1IaP2-na|R0kp%?fUa&CTr