Modernize login, signup, and dashboard pages with contemporary design
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>
This commit is contained in:
Ken Johnson
@@ -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=""></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=""></span>
|
||||
</button>
|
||||
<button id="change_to_pie_charts" class="btn btn-small">
|
||||
<span aria-label="change to pie charts" data-icon=""></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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+111
-28
@@ -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"%>
|
||||
<%= javascript_include_tag "validation.js" %>
|
||||
|
||||
<style>
|
||||
/* Override main content styling for signup page */
|
||||
.rg-main.no-sidebar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user