Files

Ho Ngoc Hai d0790723f3 feat: Cải thiện trải nghiệm người dùng trên các trang xác thực bằng cách thêm hiệu ứng kínhmorphism và chức năng hiển thị mật khẩu, đồng thời cập nhật giao diện cho phù hợp với phong cách tối giản.

2026-01-05 00:10:40 +07:00

13 KiB

Raw Blame History

Authentication Pages - Implementation Guide

Developer Handoff Documentation

Hướng dẫn chi tiết để implement 3 trang xác thực theo X.ai minimal design

🎯 Design Intent

Vision: Tạo trải nghiệm xác thực minimal, sophisticated, và user-friendly theo phong cách X.ai 2026

Key Principles:

Neo-minimalism: "Less is enough" - loại bỏ yếu tố thừa
High contrast: White text on warm dark background
Accessibility-first: WCAG 2.1 AA compliance
Responsive: Mobile-first approach
Performance: Fast load, smooth animations

📋 Pages Overview

1. Login Page (`/login`)

Email + Password form
Remember me checkbox
Forgot password link
Sign up link

2. Register Page (`/register`)

Email + Password + Confirm Password
Password strength indicator
Terms & conditions checkbox
Sign in link

3. Forgot Password Page (`/forgot-password`)

Email input
Success state with confirmation
Back to login link

🎨 Design Changes (X.ai Minimal Redesign)

Background

Before: Pure black (#000000) with 2 floating blur orbs After: Warm dark gray (#15202b), clean solid background

Rationale:

#15202b reduces eye strain
Softer, more inviting feel
Aligns with X.ai's 2026 neo-minimalism
Better for OLED displays

Accent Color

Before: White (#FFFFFF) After: X.ai blue (#1D9BF0)

Usage:

Primary buttons
Links
Focus states
Interactive elements

Rationale:

Creates strong brand identity
Better visual hierarchy
Meets WCAG contrast requirements on #15202b

Cosmic Background Removal

Removed:

// DELETE THIS:
<div className="absolute inset-0 z-0 pointer-events-none">
  <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
  <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
</div>

Rationale:

Reduce visual noise
Focus user attention on form
Faster rendering (no blur filters)
Aligns with minimal aesthetic

🛠️ Technical Implementation

Step 1: Update Theme Variables

File: src/styles/theme.css

Changes:

/* Dark Theme Colors */
:root {
  /* Backgrounds */
  --bg-primary: #15202b;          /* Changed from #000000 */
  --bg-secondary: #1a2734;        /* Changed from #0A0A0A */
  --bg-tertiary: #1f2f3d;         /* Changed from #141414 */
  --bg-elevated: #243442;         /* Changed from #1A1A1A */

  /* Accent Colors */
  --accent-primary: #1D9BF0;      /* Changed from #FFFFFF */
  --accent-primary-hover: #1a8cd8;

  /* Brand Colors */
  --brand-primary: #1D9BF0;       /* Changed from #FFFFFF */
  --brand-primary-light: #8ecdf7;
  --brand-primary-dark: #1a8cd8;

  /* Borders */
  --border-focus: #1D9BF0;        /* Changed from #FFFFFF */

  /* Glass Effects */
  --glass-border-focus: rgba(29, 155, 240, 0.5);
}

/* Light Theme */
[data-theme="light"], .light {
  --bg-primary: #FFFFFF;
  --accent-primary: #1D9BF0;
  --border-focus: #1D9BF0;
}

Impact: All components using CSS variables automatically update

Step 2: Update Glass Effects

File: src/styles/glass.css

Changes:

.glass-card {
  background: var(--glass-bg-default);
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-default);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);  /* Softer shadow */
  border-radius: var(--radius-lg);
}

.glass-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);  /* Softer hover */
}

.glass-input:focus {
  border-color: var(--accent-primary);  /* X.ai blue */
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);  /* X.ai blue glow */
}

Step 3: Update Auth Pages

File: src/app/(auth)/login/page.tsx

Line 116 - Update background:

// BEFORE:
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"

// AFTER:
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"

Lines 118-126 - Remove cosmic background:

// DELETE ENTIRE BLOCK

Lines 133-147 - Update icon container:

// BEFORE:
<div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">

// AFTER:
<div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">

Note: Remove animate-float class for static icon

Register Page

File: src/app/(auth)/register/page.tsx

Same changes as Login:

Line 230: bg-black → bg-bg-primary
Lines 232-240: Delete cosmic background
Lines 247-261: Update icon container

Forgot Password Page

File: src/app/(auth)/forgot-password/page.tsx

Same changes as Login:

Line 115: bg-black → bg-bg-primary
Lines 118-125: Delete cosmic background
Lines 132-146: Update icon container

Optional - Line 278, update "Back to login" link:

// BEFORE:
className="text-sm font-medium text-text-secondary hover:text-white transition-colors inline-flex items-center gap-2 group"

// AFTER:
className="text-sm font-medium text-accent-primary hover:text-accent-primary-hover transition-colors inline-flex items-center gap-2 group"

Step 4: Update Input Component

File: src/features/shared/components/ui/input/input.tsx

Lines 203-206 - Update focus states:

// BEFORE:
'focus:outline-none focus:ring-2 focus:ring-offset-2',
'focus:ring-glass-focus focus:ring-offset-bg-primary',
'focus:bg-glass focus:border-glass-hover',

// AFTER:
'focus:outline-none focus:ring-2 focus:ring-offset-2',
'focus:ring-accent-primary/30 focus:ring-offset-bg-primary',
'focus:bg-glass focus:border-accent-primary',

Visual Result: X.ai blue focus ring around inputs

Step 5: Update Button Component

File: src/features/shared/components/ui/button/button.tsx

Lines 83-88 - Update brand variant:

// BEFORE:
brand: [
  'bg-brand-gradient text-white',
  'shadow-brand hover:shadow-brand-lg',
  'hover:scale-[1.02]',
  'focus-visible:ring-brand-primary focus-visible:shadow-colored',
],

// AFTER:
brand: [
  'bg-accent-primary text-white',
  'shadow-md hover:shadow-lg',
  'hover:bg-accent-primary-hover',
  'focus-visible:ring-2 focus-visible:ring-accent-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary',
],

Changes:

Gradient → Solid X.ai blue
Simplified hover (no scale transform)
X.ai blue focus ring

🧪 Testing Requirements

Visual Testing

Dark Theme (Default):

# Start dev server
npm run dev

# Navigate to:
http://localhost:3000/login
http://localhost:3000/register
http://localhost:3000/forgot-password

Checklist:

Background is #15202b (warm dark gray)
No cosmic blur orbs visible
Icon container has X.ai blue tint
Primary button is X.ai blue
Links are X.ai blue
Input focus ring is X.ai blue
Glass effects subtle but visible
Text readable (high contrast)

Light Theme:

# Click theme toggle in top-right
# Or manually:
localStorage.setItem('theme', 'light')

Checklist:

Background is white
X.ai blue still prominent
Text is dark
All interactive elements visible

Accessibility Testing

Tools:

Chrome DevTools Lighthouse
axe DevTools extension
WebAIM Contrast Checker

Requirements:

Lighthouse Accessibility score ≥ 95
Contrast ratio ≥ 4.5:1 for all text
Focus indicators visible (X.ai blue ring)
Keyboard navigation works (Tab, Shift+Tab, Enter)
Screen reader announces form fields correctly
Error messages have role="alert"
Form labels properly associated

Contrast Check:

X.ai blue (#1D9BF0) on dark bg (#15202b):
✅ Contrast ratio: 5.2:1 (Passes WCAG AA)

White (#FFFFFF) on dark bg (#15202b):
✅ Contrast ratio: 12.8:1 (Passes WCAG AAA)

Responsive Testing

Breakpoints:

# Mobile
Resize browser to 375px width (iPhone)

# Tablet
Resize to 768px width (iPad)

# Desktop
Resize to 1440px width

Checklist:

Form centered on all screen sizes
Text readable without zoom on mobile
Buttons touch-friendly (min 44x44px)
No horizontal scroll
AuthControls (theme/lang) accessible on mobile
Virtual keyboard doesn't hide submit button

Functional Testing

Login Page:

Can submit with valid email + password
Email validation shows error for invalid format
Password validation shows error if < 8 chars
"Remember me" checkbox works
"Forgot password" link navigates correctly
"Sign up" link navigates correctly
Loading state shows spinner
API error displays message

Register Page:

Password strength indicator updates in real-time
Confirm password validates match
Terms checkbox required to submit
All validation messages display correctly

Forgot Password:

Email validation works
Success state shows confirmation
"Back to login" link works
"Send to another email" option works

Cross-Browser Testing

Required Browsers:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Known Issues:

Safari: backdrop-filter may have slight differences
Solution: Fallback to solid background if needed

🎨 Design Specifications

Layout Measurements

Form Container:

Max-width: 448px (max-w-md)
Padding: 32px (p-8)
Border-radius: 12px (rounded-xl)

Spacing:

Form fields: 16px gap (space-y-4)
Sections: 24px gap (space-y-6)
Button to form: 24px (mt-6)

Typography:

Heading: 36px / 2.25rem (text-4xl)
Body: 16px / 1rem (text-base)
Small: 14px / 0.875rem (text-sm)

Color Specifications

Backgrounds:

Dark Primary: #15202b
Dark Secondary: #1a2734
Light Primary: #FFFFFF

Accent:

X.ai Blue: #1D9BF0
X.ai Blue Hover: #1a8cd8
X.ai Blue Light: #8ecdf7

Text:

Primary: #FFFFFF (dark theme), #1D1D1F (light theme)
Secondary: #8899A6
Tertiary: #657786

Status:

Success: #10B981
Error: #EF4444
Warning: #F59E0B

Animation Specifications

Transitions:

Fast: 150ms cubic-bezier(0.4, 0.0, 0.2, 1)
Normal: 300ms cubic-bezier(0.4, 0.0, 0.2, 1)

Hover Effects:

Button: hover:bg-accent-primary-hover
Link: hover:text-accent-primary-hover
Card: hover:border-glass-hover

Focus Effects:

Ring: 2px solid, 30% opacity X.ai blue
Offset: 2px from element

🐛 Common Issues & Solutions

Issue 1: Glass effect not visible

Cause: Backdrop-filter not supported or disabled Solution:

/* Add fallback */
.glass-card {
  background: rgba(255, 255, 255, 0.05);  /* Fallback */
  backdrop-filter: blur(8px);
}

@supports not (backdrop-filter: blur(8px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.1);  /* More opaque */
  }
}

Issue 2: Focus ring not showing

Cause: Browser default outline removed Solution: Always replace with custom focus styles:

className="focus:outline-none focus:ring-2 focus:ring-accent-primary/30"

Issue 3: Color contrast failure

Cause: Insufficient contrast ratio Solution: Use CSS variables that are pre-validated:

// ✅ Good
text-text-primary

// ❌ Bad
text-gray-400  // May not meet contrast requirements

📦 Assets Needed

Icons

Logo/Brand mark (SVG) - Already in codebase
Social login icons (future)

Images

None required for auth pages (minimal design)

Fonts

Inter (already loaded via Tailwind)

🔄 Migration Checklist

For developers implementing this redesign:

Phase 1: Preparation

Read this document fully
Review Figma designs (if available)
Backup current code (git branch)
Run existing tests to ensure baseline

Phase 2: Implementation

Update src/styles/theme.css
Update src/styles/glass.css
Update src/features/shared/components/ui/input/input.tsx
Update src/features/shared/components/ui/button/button.tsx
Update src/app/(auth)/login/page.tsx
Update src/app/(auth)/register/page.tsx
Update src/app/(auth)/forgot-password/page.tsx

Phase 3: Testing

Visual testing (dark + light theme)
Accessibility testing (Lighthouse)
Responsive testing (mobile, tablet, desktop)
Functional testing (all forms)
Cross-browser testing

Phase 4: Review

Code review with team
Design review with designer
QA testing
Performance benchmarks

Phase 5: Deployment

Merge to main branch
Deploy to staging
Final QA on staging
Deploy to production
Monitor for issues

📞 Support

Questions about design: Contact Design Team Questions about implementation: Contact Dev Lead Bug reports: Create issue in GitHub

Design System - Full design system docs
WCAG Compliance - Accessibility guidelines
Login User Flow - Detailed UX flow

Author: Design Team + Dev Team Last Updated: 2026-01-04 Version: 2.0 (X.ai Minimal Redesign)

13 KiB Raw Blame History

Authentication Pages - Implementation Guide

🎯 Design Intent

📋 Pages Overview

1. Login Page (/login)

2. Register Page (/register)

3. Forgot Password Page (/forgot-password)

🎨 Design Changes (X.ai Minimal Redesign)

Background

Accent Color

Cosmic Background Removal

🛠️ Technical Implementation

Step 1: Update Theme Variables

Step 2: Update Glass Effects

Step 3: Update Auth Pages

Login Page

Register Page

Forgot Password Page

Step 4: Update Input Component

Step 5: Update Button Component

🧪 Testing Requirements

Visual Testing

Accessibility Testing

Responsive Testing

Functional Testing

Cross-Browser Testing

🎨 Design Specifications

Layout Measurements

Color Specifications

Animation Specifications

🐛 Common Issues & Solutions

Issue 1: Glass effect not visible

Issue 2: Focus ring not showing

Issue 3: Color contrast failure

📦 Assets Needed

Icons

Images

Fonts

🔄 Migration Checklist

Phase 1: Preparation

Phase 2: Implementation

Phase 3: Testing

Phase 4: Review

Phase 5: Deployment

📞 Support

📚 Related Documentation

13 KiB

Raw Blame History

1. Login Page (`/login`)

2. Register Page (`/register`)

3. Forgot Password Page (`/forgot-password`)