Ken Johnson
b938e56463
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>
120 lines
4.0 KiB
Plaintext
Executable File
120 lines
4.0 KiB
Plaintext
Executable File
<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>
|
|
|
|
<%= 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 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" %>
|
|
|
|
<style>
|
|
/* Override main content styling for signup page */
|
|
.rg-main.no-sidebar {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|