383 lines
9.3 KiB
Markdown
383 lines
9.3 KiB
Markdown
# 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. |