สร้างหน้า Login สำหรับระบบเช็คชื่อนักเรียนออนไลน์

[jgarise]

🔐 สร้างหน้า Login สำหรับระบบเช็คชื่อนักเรียนออนไลน์

📋 Requirements

สร้างหน้า Login ที่ใช้งานได้จริงสำหรับระบบเช็คชื่อนักเรียนออนไลน์ตามแบบที่ออกแบบไว้

🎯 Specifications

UI Design

• Layout: กึ่งกลางหน้าจอ, Bubble/Glass card design
• Font: Kanit, Prompt (Thai), Inter (English) - ขนาดใหญ่ Bold
• Colors: สีสดใส มีชีวิตชีวา
• Animation: Smooth transitions, Hover effects
• Responsive: มือถือ/แท็บเล็ต/PC

Login Form Fields

interface LoginForm {
  schoolCode: string;    // รหัสโรงเรียน
  username: string;      // ชื่อผู้ใช้/อีเมล
  password: string;      // รหัสผ่าน
  rememberMe: boolean;   // จำการเข้าสู่ระบบ
}

Features Required

• School code validation
• Username/Email input
• Password with show/hide toggle
• Remember me checkbox
• Login button with loading state
• Forgot password link
• Error message display
• Auto-focus first field
• Enter key to submit
• Mobile-friendly design

Tech Stack

• Frontend: Next.js 14/15, React 18+, TypeScript
• UI: Tailwind CSS 4, Shadcn UI components
• Animation: Framer Motion (optional)
• Form: React Hook Form + Zod validation
• Auth: JWT tokens, localStorage/sessionStorage

🔄 Login Flow

1. User enters school code → validate school exists
2. User enters username → validate format
3. User enters password → validate strength
4. Click login → authenticate user
5. Success → redirect to dashboard based on role
6. Error → show appropriate error message

🎨 UI Layout Structure

┌─────────────────────────────┐
│  🏫 [School Logo/Name]      │
│                             │
│  📚 ระบบเช็คชื่อนักเรียน      │
│                             │
│  ┌─────────────────────┐    │
│  │ รหัสโรงเรียน         │    │
│  └─────────────────────┘    │
│                             │
│  ┌─────────────────────┐    │
│  │ ชื่อผู้ใช้/อีเมล      │    │
│  └─────────────────────┘    │
│                             │
│  ┌─────────────────────┐    │
│  │ รหัสผ่าน      👁️    │    │
│  └─────────────────────┘    │
│                             │
│  ☐ จำการเข้าสู่ระบบ         │
│                             │
│  [    เข้าสู่ระบบ    ]      │
│                             │
│  ลืมรหัสผ่าน? | สมัครใหม่    │
└─────────────────────────────┘

📱 Mobile UX Requirements

• Touch-friendly button sizes (min 44px)
• Proper keyboard types for inputs
• Smooth animations on focus/blur
• Error messages below each field
• Loading spinner on submit

🛡️ Security Features

• Password hashing (bcrypt)
• JWT token storage
• Input validation & sanitization
• CSRF protection
• Rate limiting for login attempts

🔧 Implementation Files Needed

• app/login/page.tsx - Main login page
• components/auth/LoginForm.tsx - Login form component
• hooks/useAuth.ts - Authentication hook
• lib/auth.ts - Authentication utilities
• types/auth.ts - TypeScript interfaces

✅ Acceptance Criteria

• Form validates all inputs properly
• Login authentication works with mock data
• Error messages display correctly
• Loading states work properly
• Responsive design works on all devices
• Remember me functionality works
• Password show/hide toggle works
• Auto-focus and Enter key submission work
• Smooth animations and transitions
• Clean, modern UI matching design specs