# 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
```css
: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
```tsx
// 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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<div className="flex justify-end">
  <div className="text-[#2D3748] font-persian">
    <div className="text-lg font-bold leading-tight">
      پردازشی
      <br />
      اینوژن
    </div>
  </div>
</div>
```

#### Footer Text and Logo
```tsx
<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
```tsx
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [error, setError] = useState("");
const { login, isLoading } = useAuth();
```

### Form Submission
```tsx
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
```css
/* 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

- [x] Split-screen layout implemented
- [x] Exact color scheme applied
- [x] Persian typography configured
- [x] Form validation implemented
- [x] Loading states handled
- [x] Error messaging system
- [x] Remember me functionality
- [x] Responsive design
- [x] RTL support
- [x] Accessibility features
- [x] shadcn/ui components integrated
- [x] 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.