Hotel Booking

2025-11-16 14:19:13 +02:00
commit 824eec6190
203 changed files with 37696 additions and 0 deletions
--- a/docs/LOGIN_FORM_GUIDE.md
+++ b/docs/LOGIN_FORM_GUIDE.md
@@ -0,0 +1,432 @@
+# Chức năng 4: Form Đăng Nhập - Hướng Dẫn Sử Dụng
+
+## 📋 Tổng Quan
+
+Form đăng nhập đã được triển khai đầy đủ với:
+- ✅ Validation form bằng React Hook Form + Yup
+- ✅ Hiển thị/ẩn mật khẩu
+- ✅ Checkbox "Nhớ đăng nhập" (7 ngày)
+- ✅ Loading state trong quá trình đăng nhập
+- ✅ Hiển thị lỗi từ server
+- ✅ Redirect sau khi đăng nhập thành công
+- ✅ UI đẹp với Tailwind CSS và Lucide Icons
+- ✅ Responsive design
+
+## 🗂️ Các File Đã Tạo/Cập Nhật
+
+### 1. **LoginPage.tsx** - Component form đăng nhập
+**Đường dẫn:** `client/src/pages/auth/LoginPage.tsx`
+
+```typescript
+// Các tính năng chính:
+- React Hook Form với Yup validation
+- Show/hide password toggle
+- Remember me checkbox
+- Loading state với spinner
+- Error handling
+- Redirect với location state
+```
+
+### 2. **index.ts** - Export module
+**Đường dẫn:** `client/src/pages/auth/index.ts`
+
+```typescript
+export { default as LoginPage } from './LoginPage';
+```
+
+### 3. **App.tsx** - Đã cập nhật routing
+**Đường dẫn:** `client/src/App.tsx`
+
+```typescript
+// Đã thêm:
+import { LoginPage } from './pages/auth';
+
+// Route:
+<Route path="/login" element={<LoginPage />} />
+```
+
+## 🎨 Cấu Trúc UI
+
+### Layout
+```
+┌─────────────────────────────────────┐
+│   🏨 Hotel Icon                     │
+│   Đăng nhập                         │
+│   Chào mừng bạn trở lại...          │
+├─────────────────────────────────────┤
+│  ┌───────────────────────────────┐  │
+│  │ [Error message if any]        │  │
+│  ├───────────────────────────────┤  │
+│  │ Email                         │  │
+│  │ [📧 email@example.com       ] │  │
+│  ├───────────────────────────────┤  │
+│  │ Mật khẩu                      │  │
+│  │ [🔒 ••••••••            👁️] │  │
+│  ├───────────────────────────────┤  │
+│  │ ☑️ Nhớ đăng nhập              │  │
+│  │              Quên mật khẩu? → │  │
+│  ├───────────────────────────────┤  │
+│  │      [🔐 Đăng nhập]           │  │
+│  └───────────────────────────────┘  │
+│  Chưa có tài khoản? Đăng ký ngay    │
+│                                     │
+│  Điều khoản & Chính sách bảo mật    │
+└─────────────────────────────────────┘
+```
+
+## 🔧 Cách Sử Dụng
+
+### 1. Truy Cập Form
+
+```bash
+# URL
+http://localhost:5173/login
+```
+
+### 2. Các Trường Trong Form
+
+| Trường | Type | Bắt buộc | Validation |
+|--------|------|----------|------------|
+| Email | text | ✅ | Email hợp lệ |
+| Password | password | ✅ | Min 8 ký tự |
+| Remember Me | checkbox | ❌ | Boolean |
+
+### 3. Validation Rules
+
+**Email:**
+```typescript
+- Required: "Email là bắt buộc"
+- Valid email format: "Email không hợp lệ"
+- Trim whitespace
+```
+
+**Password:**
+```typescript
+- Required: "Mật khẩu là bắt buộc"
+- Min 8 characters: "Mật khẩu phải có ít nhất 8 ký tự"
+```
+
+### 4. Luồng Đăng Nhập
+
+```
+1. User nhập email + password
+2. Click "Đăng nhập"
+3. Validation form (client-side)
+4. Nếu valid:
+   - Button disabled + hiển thị loading
+   - Gọi useAuthStore.login()
+   - API POST /api/auth/login
+5. Nếu thành công:
+   - Lưu token vào localStorage
+   - Update Zustand state
+   - Redirect đến /dashboard
+6. Nếu lỗi:
+   - Hiển thị error message
+   - Button enabled lại
+```
+
+## 🎯 Tính Năng Chính
+
+### 1. Show/Hide Password
+
+```typescript
+const [showPassword, setShowPassword] = useState(false);
+
+// Toggle button
+<button onClick={() => setShowPassword(!showPassword)}>
+  {showPassword ? <EyeOff /> : <Eye />}
+</button>
+
+// Input type
+<input type={showPassword ? 'text' : 'password'} />
+```
+
+### 2. Remember Me (7 ngày)
+
+```typescript
+// Checkbox
+<input {...register('rememberMe')} type="checkbox" />
+
+// Logic trong authService.login()
+if (rememberMe) {
+  // Token sẽ được lưu trong localStorage
+  // và không bị xóa khi đóng trình duyệt
+}
+```
+
+### 3. Loading State
+
+```typescript
+// Button disabled khi đang loading
+<button disabled={isLoading}>
+  {isLoading ? (
+    <>
+      <Loader2 className="animate-spin" />
+      Đang xử lý...
+    </>
+  ) : (
+    <>
+      <LogIn />
+      Đăng nhập
+    </>
+  )}
+</button>
+```
+
+### 4. Error Handling
+
+```typescript
+// Error từ Zustand store
+const { error } = useAuthStore();
+
+// Hiển thị error message
+{error && (
+  <div className="bg-red-50 border border-red-200">
+    {error}
+  </div>
+)}
+```
+
+### 5. Redirect Logic
+
+```typescript
+// Lấy location state từ ProtectedRoute
+const location = useLocation();
+
+// Redirect về trang trước đó hoặc dashboard
+const from = location.state?.from?.pathname || '/dashboard';
+navigate(from, { replace: true });
+```
+
+## 🔗 Integration với Zustand Store
+
+```typescript
+// Hook usage
+const { 
+  login,      // Function để login
+  isLoading,  // Loading state
+  error,      // Error message
+  clearError  // Clear error
+} = useAuthStore();
+
+// Login call
+await login({
+  email: 'user@example.com',
+  password: 'password123',
+  rememberMe: true
+});
+```
+
+## 🎨 Styling với Tailwind
+
+### Color Scheme
+```
+- Primary: blue-600, blue-700
+- Background: gradient from-blue-50 to-indigo-100
+- Error: red-50, red-200, red-600, red-700
+- Text: gray-600, gray-700, gray-900
+```
+
+### Responsive Design
+```typescript
+// Container
+className="max-w-md w-full"  // Max width 28rem
+
+// Grid (nếu có)
+className="grid grid-cols-1 md:grid-cols-2"
+```
+
+## 🧪 Testing Scenarios
+
+### 1. Validation Testing
+
+**Test Case 1: Empty form**
+```
+- Input: Submit form trống
+- Expected: Hiển thị lỗi "Email là bắt buộc"
+```
+
+**Test Case 2: Invalid email**
+```
+- Input: Email = "notanemail"
+- Expected: "Email không hợp lệ"
+```
+
+**Test Case 3: Short password**
+```
+- Input: Password = "123"
+- Expected: "Mật khẩu phải có ít nhất 8 ký tự"
+```
+
+### 2. Authentication Testing
+
+**Test Case 4: Valid credentials**
+```
+- Input: Valid email + password
+- Expected: Redirect to /dashboard
+```
+
+**Test Case 5: Invalid credentials**
+```
+- Input: Wrong password
+- Expected: Error message từ server
+```
+
+**Test Case 6: Network error**
+```
+- Input: Server offline
+- Expected: Error message "Có lỗi xảy ra"
+```
+
+### 3. UX Testing
+
+**Test Case 7: Show/hide password**
+```
+- Action: Click eye icon
+- Expected: Password text visible/hidden
+```
+
+**Test Case 8: Remember me**
+```
+- Action: Check "Nhớ đăng nhập"
+- Expected: Token persist sau khi reload
+```
+
+**Test Case 9: Loading state**
+```
+- Action: Submit form
+- Expected: Button disabled, spinner hiển thị
+```
+
+## 🔐 Security Features
+
+### 1. Password Visibility
+```typescript
+// Default: password hidden
+type="password"
+
+// Toggle: user control
+onClick={() => setShowPassword(!showPassword)}
+```
+
+### 2. HTTPS Only (Production)
+```typescript
+// Trong .env
+VITE_API_URL=https://api.yourdomain.com
+```
+
+### 3. Token Storage
+```typescript
+// LocalStorage cho remember me
+if (rememberMe) {
+  localStorage.setItem('token', token);
+}
+
+// SessionStorage cho session only
+else {
+  sessionStorage.setItem('token', token);
+}
+```
+
+## 📝 Best Practices
+
+### 1. Form Validation
+```typescript
+✅ Client-side validation (Yup)
+✅ Server-side validation (Express validator)
+✅ Immediate feedback
+✅ Clear error messages
+```
+
+### 2. Error Handling
+```typescript
+✅ Try-catch blocks
+✅ User-friendly messages
+✅ Clear error state
+✅ Console logging for debugging
+```
+
+### 3. UX
+```typescript
+✅ Loading indicators
+✅ Disabled states
+✅ Auto-focus first field
+✅ Enter key submit
+✅ Remember form state
+```
+
+## 🚀 Next Steps (Chức năng 5-7)
+
+1. **Chức năng 5: Form Register**
+   - Copy structure từ LoginPage
+   - Thêm fields: name, phone, confirmPassword
+   - Use registerSchema
+   - Redirect to /login after success
+
+2. **Chức năng 6: Forgot Password**
+   - Simple form với email only
+   - Send reset link
+   - Success message
+
+3. **Chức năng 7: Reset Password**
+   - Form với password + confirmPassword
+   - Token từ URL params
+   - Redirect to /login after success
+
+## 🐛 Troubleshooting
+
+### Issue 1: "Error: Token expired"
+```typescript
+Solution: Check token expiry time
+- Access token: 1 hour
+- Refresh token: 7 days
+```
+
+### Issue 2: Form không submit
+```typescript
+Solution: Check console for validation errors
+- Open DevTools > Console
+- Look for Yup validation errors
+```
+
+### Issue 3: Redirect không hoạt động
+```typescript
+Solution: Check location state
+console.log(location.state?.from);
+```
+
+### Issue 4: Remember me không work
+```typescript
+Solution: Check localStorage
+- Open DevTools > Application > Local Storage
+- Check "token" và "refreshToken" keys
+```
+
+## 📚 Resources
+
+- [React Hook Form Docs](https://react-hook-form.com/)
+- [Yup Validation](https://github.com/jquense/yup)
+- [Zustand Guide](https://github.com/pmndrs/zustand)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Lucide Icons](https://lucide.dev/)
+
+## ✅ Checklist
+
+- [x] ✅ Create validationSchemas.ts
+- [x] ✅ Create LoginPage.tsx
+- [x] ✅ Add route to App.tsx
+- [x] ✅ Email validation
+- [x] ✅ Password validation
+- [x] ✅ Show/hide password
+- [x] ✅ Remember me checkbox
+- [x] ✅ Loading state
+- [x] ✅ Error display
+- [x] ✅ Redirect after login
+- [x] ✅ Responsive design
+- [x] ✅ Icons integration
+- [ ] ⏳ E2E testing
+
+---
+
+**Status:** ✅ Chức năng 4 hoàn thành
+**Next:** Chức năng 5 - Form Register