Add: Auth protection & error notifications

Frontend-Learner/pages/auth/login.vue

@@ -29,8 +29,22 @@ const loginForm = reactive({
 
 // Validation rules definition
 const loginRules = {
-  email: { rules: { required: true, email: true }, label: 'อีเมล' },
-  password: { rules: { required: true, minLength: 6 }, label: 'รหัสผ่าน' }
+  email: { 
+    rules: { required: true, email: true }, 
+    label: 'อีเมล',
+    messages: {
+      required: 'กรุณากรอกอีเมลของคุณ',
+      email: 'กรุณากรอกอีเมลให้ถูกต้อง (you@example.com)'
+    }
+  },
+  password: { 
+    rules: { required: true, minLength: 8 }, 
+    label: 'รหัสผ่าน',
+    messages: {
+      required: 'กรุณากรอกรหัสผ่าน',
+      minLength: 'กรุณากรอกรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)'
+    }
+  }
 }
 
 /**
@@ -50,19 +64,17 @@ const handleLogin = async () => {
   isLoading.value = false
 
   if (result.success) {
-    // Redirect based on user role
-    const role = user.value?.role?.code
-    
-    if (role === 'ADMIN') {
-      router.push('/admin')
-    } else if (role === 'INSTRUCTOR') {
-      router.push('/instructor')
-    } else {
-      router.push('/dashboard')
-    }
+    router.push('/dashboard')
   } else {
-    // Show error from API or fallback
-    alert(result.error || 'อีเมลหรือรหัสผ่านไม่ถูกต้อง')
+    // Show error on specific fields
+    if (result.error === 'ไม่พบอีเมลในระบบ') {
+      errors.value.email = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
+      errors.value.password = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
+    } else if (result.error === 'Email ไม่ถูกต้อง') {
+      errors.value.email = result.error
+    } else {
+      errors.value.password = 'กรอกรหัสผ่านไม่ถูกต้อง'
+    }
   }
 }
 </script>
@@ -84,7 +96,7 @@ const handleLogin = async () => {
     </div>
 
     <!-- Login Form -->
-    <form @submit.prevent="handleLogin">
+    <form @submit.prevent="handleLogin" novalidate>
       <!-- Email Input -->
       <FormInput
         v-model="loginForm.email"

Frontend-Learner/pages/auth/register.vue

@@ -104,6 +104,16 @@ const handleRegister = async () => {
 
     <!-- REGISTER FORM -->
     <form @submit.prevent="handleRegister">
+        <!-- Username -->
+      <FormInput
+        v-model="registerForm.username"
+        label="ชื่อผู้ใช้"
+        placeholder="username"
+        :error="errors.username"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('username')"
+      />
        <!-- Email -->
        <FormInput
         v-model="registerForm.email"
@@ -116,17 +126,6 @@ const handleRegister = async () => {
         @update:model-value="clearFieldError('email')"
       />
 
-      <!-- Username -->
-      <FormInput
-        v-model="registerForm.username"
-        label="ชื่อผู้ใช้"
-        placeholder="username"
-        :error="errors.username"
-        required
-        class="dark-form-input"
-        @update:model-value="clearFieldError('username')"
-      />
-
       <!-- Password Fields -->
       <FormInput
         v-model="registerForm.password"