Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a45ddda0f3
inogen/FIGMA_LOGIN_IMPLEMENTATION.md

9.3 KiB
Raw Blame History

Figma Login Page Implementation

Overview

This document describes the exact implementation of the login page based on the provided Figma design. The login page features a split-screen layout with a dark navy form section and a bright green branding section.

Design Specifications

Color Palette

Primary Colors

  • Dark Background: #2D3748 (slate-800 equivalent)
  • Green Accent: #4FD1C7 (bright teal-green)
  • Green Hover: #38B2AC (darker teal for hover states)
  • White: #FFFFFF (input backgrounds and text)
  • Gray Text: #D1D5DB (subtitle text)

Usage

:root {
  --primary-dark: #2D3748;
  --primary-green: #4FD1C7;
  --green-hover: #38B2AC;
  --text-light: #FFFFFF;
  --text-gray: #D1D5DB;
}

Layout Structure

Split Screen Design

  • Left Side: 3/5 width - Login form with dark background
  • Right Side: 2/5 width - Branding section with green background
  • Responsive: Right side hidden on mobile (lg:hidden)

Typography

Font Family

  • Primary: Vazirmatn (Persian font)
  • Fallback: ui-sans-serif, system-ui, sans-serif

Text Hierarchy

// Main Title
"text-2xl font-bold font-persian leading-relaxed"

// Section Header
"text-lg font-medium font-persian"

// Body Text
"text-sm font-persian leading-relaxed"

// Labels
"text-sm font-persian"

Form Components

Input Fields

<Input
  className="w-full h-12 px-4 bg-white border-gray-300 rounded-md text-gray-900 font-persian text-right placeholder:text-gray-400"
/>

Button

<Button
  className="w-full h-12 bg-[#4FD1C7] hover:bg-[#38B2AC] text-[#2D3748] font-bold rounded-md transition-colors duration-200 font-persian"
>
  ورود
</Button>

Checkbox

<input
  type="checkbox"
  className="w-4 h-4 text-[#4FD1C7] bg-white border-gray-300 rounded focus:ring-[#4FD1C7] focus:ring-2 accent-[#4FD1C7]"
/>

Component Structure

Main Layout

<div className="min-h-screen flex" dir="rtl">
  {/* Left Side - Login Form */}
  <div className="flex-1 bg-[#2D3748] flex items-center justify-center p-8">
    {/* Form Content */}
  </div>
  
  {/* Right Side - Branding */}
  <div className="hidden lg:flex lg:w-2/5 bg-[#4FD1C7] relative overflow-hidden">
    {/* Branding Content */}
  </div>
</div>

Form Section Content

Header Text

<div className="text-center space-y-4">
  <h1 className="text-white text-lg font-medium font-persian">
    ورود
  </h1>
  <h2 className="text-white text-2xl font-bold font-persian leading-relaxed">
    داشبورد مدیریت فناوری و نوآوری
  </h2>
  <p className="text-gray-300 text-sm font-persian leading-relaxed">
    لطفاً نام کاربری و کلمه عبور خود را وارد فهرست خواسته شده وارد
    <br />
    فرمایید.
  </p>
</div>

Form Fields

<form onSubmit={handleSubmit} className="space-y-6">
  {/* Username Field */}
  <div className="space-y-2">
    <Label htmlFor="username" className="text-white text-sm font-persian">
      نام کاربری
    </Label>
    <Input
      id="username"
      type="text"
      value={username}
      onChange={(e) => setUsername(e.target.value)}
      className="w-full h-12 px-4 bg-white border-gray-300 rounded-md text-gray-900 font-persian text-right"
      disabled={isLoading}
      autoComplete="username"
    />
  </div>

  {/* Password Field */}
  <div className="space-y-2">
    <Label htmlFor="password" className="text-white text-sm font-persian">
      کلمه عبور
    </Label>
    <Input
      id="password"
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      className="w-full h-12 px-4 bg-white border-gray-300 rounded-md text-gray-900 font-persian text-right"
      disabled={isLoading}
      autoComplete="current-password"
    />
  </div>

  {/* Remember Me Checkbox */}
  <div className="flex items-center space-x-2 space-x-reverse">
    <input
      id="remember"
      type="checkbox"
      checked={rememberMe}
      onChange={(e) => setRememberMe(e.target.checked)}
      className="w-4 h-4 text-[#4FD1C7] bg-white border-gray-300 rounded focus:ring-[#4FD1C7] focus:ring-2 accent-[#4FD1C7]"
    />
    // <Label htmlFor="remember" className="text-white text-sm font-persian cursor-pointer">
    //   همیشه متصل بمانم
    // </Label>
  </div>

  {/* Submit Button */}
  <Button
    type="submit"
    disabled={isLoading}
    className="w-full h-12 bg-[#4FD1C7] hover:bg-[#38B2AC] text-[#2D3748] font-bold rounded-md transition-colors duration-200 font-persian disabled:opacity-50 disabled:cursor-not-allowed"
  >
    {isLoading ? (
      <div className="flex items-center justify-center gap-2">
        <div className="w-4 h-4 border-2 border-[#2D3748] border-t-transparent rounded-full animate-spin"></div>
        <span>در حال ورود...</span>
      </div>
    ) : (
      "ورود"
    )}
  </Button>
</form>

Branding Section Content

Logo and Company Name

<div className="flex justify-end">
  <div className="text-[#2D3748] font-persian">
    <div className="text-lg font-bold leading-tight">
      پردازشی
      <br />
      اینوژن
    </div>
  </div>
</div>

<div className="flex items-end justify-between">
  <div className="text-[#2D3748] text-sm font-persian leading-relaxed">
    توسعه‌یافته توسط شرکت رهبران دانش و فناوری فرا
  </div>

  {/* Geometric Logo */}
  <div className="flex items-center">
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      className="text-[#2D3748]"
    >
      <path d="M20 4L36 20L20 36L4 20L20 4Z" fill="currentColor" />
      <path d="M20 12L28 20L20 28L12 20L20 12Z" fill="#4FD1C7" />
    </svg>
  </div>
</div>

State Management

Form State

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [error, setError] = useState("");
const { login, isLoading } = useAuth();

Form Submission

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setError("");

  if (!username || !password) {
    const errorMessage = "لطفاً تمام فیلدها را پر کنید";
    setError(errorMessage);
    toast.error(errorMessage);
    return;
  }

  try {
    const success = await login(username, password);
    if (success) {
      toast.success("ورود موفقیت‌آمیز بود!");
      onSuccess?.();
    } else {
      const errorMessage = "نام کاربری یا رمز عبور اشتباه است";
      setError(errorMessage);
      toast.error(errorMessage);
    }
  } catch (err) {
    const errorMessage = "خطا در برقراری ارتباط با سرور";
    setError(errorMessage);
    toast.error(errorMessage);
  }
};

Accessibility Features

RTL Support

  • dir="rtl" on main container
  • space-x-reverse for proper spacing in RTL
  • text-right for input text alignment

Keyboard Navigation

  • Proper htmlFor and id associations
  • Tab order maintained
  • Focus rings on interactive elements

Screen Reader Support

  • Semantic HTML structure
  • Proper form labels
  • Error messages announced

Responsive Design

Breakpoints

/* Mobile: Full width login form */
@media (max-width: 1023px) {
  .branding-section {
    display: none;
  }
}

/* Desktop: Split screen layout */
@media (min-width: 1024px) {
  .login-form {
    flex: 1;
  }
  .branding-section {
    width: 40%; /* 2/5 of screen */
  }
}

Mobile Optimizations

  • Hidden branding section on mobile
  • Full-width form container
  • Touch-friendly button height (48px)
  • Adequate spacing for touch targets

Performance Considerations

CSS Optimization

  • Custom properties for consistent colors
  • Hardware-accelerated animations
  • Efficient transitions

Bundle Size

  • Tree-shaken shadcn/ui components
  • Minimal external dependencies
  • Optimized font loading

Testing Considerations

Unit Tests

  • Form validation logic
  • State management
  • Error handling

Integration Tests

  • Login flow
  • Authentication integration
  • Error scenarios

Accessibility Tests

  • Screen reader compatibility
  • Keyboard navigation
  • Color contrast ratios

Browser Support

Modern Browsers

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

CSS Features Used

  • CSS Grid and Flexbox
  • Custom properties
  • CSS animations
  • CSS accent-color

Implementation Checklist

  • Split-screen layout implemented
  • Exact color scheme applied
  • Persian typography configured
  • Form validation implemented
  • Loading states handled
  • Error messaging system
  • Remember me functionality
  • Responsive design
  • RTL support
  • Accessibility features
  • shadcn/ui components integrated
  • Authentication flow connected

Files Modified

Component Files

  • inogen/app/components/auth/login-form.tsx
  • inogen/app/components/ui/button.tsx
  • inogen/app/components/ui/input.tsx
  • inogen/app/components/ui/label.tsx

Style Files

  • inogen/app/app.css

Configuration Files

  • inogen/package.json (added @radix-ui/react-checkbox)

This implementation provides a pixel-perfect recreation of the Figma design while maintaining modern React best practices, accessibility standards, and responsive design principles.