feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

Frontend-Learner/pages/auth/login.vue

@@ -23,7 +23,7 @@ const isLoading = ref(false)
 const rememberMe = ref(false)
 const showPassword = ref(false)
 
-// Form data model
+// ข้อมูลฟอร์มสำหรับเก็บค่าอีเมลและรหัสผ่าน
 const loginForm = reactive({
   email: '',
   password: ''
@@ -31,7 +31,7 @@ const loginForm = reactive({
 
 type LoginField = keyof typeof loginForm
 
-// Validation rules definition
+// การตั้งค่ากฎการตรวจสอบ (Validation Rules)
 // กำหนดกฎการตรวจสอบข้อมูล (Validation Rules)
 const loginRules = {
   email: {
@@ -108,12 +108,12 @@ const handleLogin = async () => {
   }
 
 
-  // Show error on specific fields
-  // Show generic error for security (or specific if role mismatch)
+  // แสดงข้อผิดพลาดตามช่องหรือแสดงข้อผิดพลาดรวม (เพื่อความปลอดภัย)
+  // กรณีเข้าสู่ระบบไม่สำเร็จ
   if (result.error === 'Email ไม่ถูกต้อง') {
-     errors.value.email = result.error // Role mismatch case
+     errors.value.email = result.error // กรณี Role ไม่ตรงกัน
   } else {
-     // Generic login failure (401, 404, etc.)
+     // ข้อผิดพลาดแบบเหมาสำหรับปัญหาการเข้าสู่ระบบทั่วไป (เช่น รหัสผิด, ไม่พบผู้ใช้)
      const msg = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
      errors.value.email = msg
      errors.value.password = msg
@@ -147,7 +147,7 @@ onMounted(() => {
      ========================================== -->
     <div class="w-full max-w-[460px] relative z-10 slide-up">
       
-       <!-- Header / Logo -->
+       <!-- ส่วนหัวโปรไฟล์ / โลโก้ (Header / Logo) -->
        <div class="text-center mb-8">
           <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20 mb-6">
              <span class="font-black text-2xl">E</span>
@@ -158,10 +158,10 @@ onMounted(() => {
 
       <div class="bg-white rounded-[2rem] p-8 md:p-10 shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
         
-        <!-- Form -->
+        <!-- ฟอร์มเข้าสู่ระบบ (Login Form) -->
         <form @submit.prevent="handleLogin" class="flex flex-col gap-5">
           
-          <!-- Email Input -->
+          <!-- ช่องกรอกอีเมล (Email Input) -->
           <div>
             <label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">อีเมล</label>
             <div class="relative group">
@@ -180,7 +180,7 @@ onMounted(() => {
             <span v-if="errors.email" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.email }}</span>
           </div>
 
-          <!-- Password Input -->
+          <!-- ช่องกรอกรหัสผ่าน (Password Input) -->
           <div>
             <label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">รหัสผ่าน</label>
             <div class="relative group">
@@ -206,7 +206,7 @@ onMounted(() => {
             <span v-if="errors.password" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.password }}</span>
           </div>
 
-          <!-- Options -->
+          <!-- ตัวเลือกเพิ่มเติม (จดจำฉัน, ลืมรหัสผ่าน) (Options) -->
           <div class="flex items-center justify-between mt-1">
              <label class="flex items-center gap-2.5 cursor-pointer group select-none">
                <div class="relative flex items-center">
@@ -227,7 +227,7 @@ onMounted(() => {
              </NuxtLink>
           </div>
 
-          <!-- Submit Button -->
+          <!-- ปุ่มยืนยันเข้าสู่ระบบ (Submit Button) -->
           <button 
             type="submit" 
             :disabled="isLoading"
@@ -237,7 +237,7 @@ onMounted(() => {
             <div v-else class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
           </button>
 
-          <!-- Test Credentials Box -->
+          <!-- กล่องแนะนำบัญชีสำหรับทดสอบ (Test Credentials Box) -->
           <div class="mt-4 p-5 bg-blue-50/50 border border-blue-100 rounded-2xl flex flex-col items-center gap-2 animate-fade-in">
              <div class="text-[11px] font-black uppercase tracking-[0.2em] text-blue-600 mb-1">บัญชีสำหรับทดสอบ (Test Account)</div>
              <div class="flex flex-col items-center gap-1">
@@ -253,7 +253,7 @@ onMounted(() => {
 
         </form>
 
-        <!-- Register Link -->
+        <!-- ลิงก์สำหรับสมัครสมาชิกใหม่ (Register Link) -->
         <div class="text-center mt-8">
             <p class="text-slate-600 text-sm">
                ยังไม่มีบัญชีสมาชิก? 
@@ -265,7 +265,7 @@ onMounted(() => {
 
       </div>
 
-      <!-- Back Link -->
+      <!-- ลิงก์ย้อนกลับ (Back Link) -->
        <div class="mt-8 text-center text-slate-500">
            <NuxtLink to="/" class="inline-flex items-center gap-2 text-sm font-medium hover:text-slate-800 transition-colors group px-4 py-2 rounded-lg hover:bg-white/50">
              <span class="group-hover:-translate-x-1 transition-transform">←</span> กลับไปหน้าแรก
@@ -276,7 +276,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-/* Animations */
+/* เอฟเฟกต์การเคลื่อนไหว (Animations) */
 @keyframes pulse-slow {
   0%, 100% { opacity: 0.3; transform: scale(1); }
   50% { opacity: 0.5; transform: scale(1.15); }