Modernize password reset and admin dashboard pages
**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>
This commit is contained in:
Ken Johnson
@@ -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=""></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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user