Add:api-login

Frontend-Learner/pages/auth/forgot-password.vue

@@ -27,14 +27,22 @@ const forgotRules = {
   email: { rules: { required: true, email: true }, label: 'อีเมล' }
 }
 
+const { requestPasswordReset } = useAuth()
+
 const sendResetLink = async () => {
   if (!validate(forgotForm, forgotRules)) return
   
   isLoading.value = true
-  // Simulate API call
-  await new Promise(resolve => setTimeout(resolve, 1500))
+  
+  const result = await requestPasswordReset(forgotForm.email)
+  
   isLoading.value = false
-  forgotStep.value = 'success'
+  
+  if (result.success) {
+    forgotStep.value = 'success'
+  } else {
+    alert(result.error || 'ไม่สามารถส่งลิงก์รีเซ็ตได้ กรุณาลองใหม่')
+  }
 }
 </script>
 

Frontend-Learner/pages/auth/login.vue

@@ -16,7 +16,7 @@ useHead({
 })
 
 const router = useRouter()
-const { login } = useAuth()
+const { login, user } = useAuth()
 const { errors, validate, clearFieldError } = useFormValidation()
 
 const isLoading = ref(false)
@@ -41,17 +41,28 @@ const handleLogin = async () => {
   if (!validate(loginForm, loginRules)) return
   
   isLoading.value = true
-  // Simulate API call delay
-  await new Promise(resolve => setTimeout(resolve, 1500))
   
-  // Demo credential check
-  if (loginForm.email === 'student@example.com' && loginForm.password === '123456') {
-    login() // Set token via auth composable
-    isLoading.value = false
-    router.push('/dashboard')
+  const result = await login({
+    email: loginForm.email,
+    password: loginForm.password
+  })
+  
+  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')
+    }
   } else {
-    isLoading.value = false
-    alert('อีเมลหรือรหัสผ่านไม่ถูกต้อง! (Demo: student@example.com / 123456)')
+    // Show error from API or fallback
+    alert(result.error || 'อีเมลหรือรหัสผ่านไม่ถูกต้อง')
   }
 }
 </script>
@@ -109,12 +120,8 @@ const handleLogin = async () => {
         <span v-else>เข้าสู่ระบบ</span>
       </button>
 
-      <!-- Demo Credentials Hint (For Development Only) -->
-      <div style="background: var(--neutral-100); padding: 12px; border-radius: 8px; margin-bottom: 16px; border: 1px dashed var(--primary);">
-        <p class="text-xs font-bold text-primary mb-1">🔑 บัญชีทดสอบ:</p>
-        <p class="text-xs text-muted">อีเมล: student@example.com</p>
-        <p class="text-xs text-muted">รหัสผ่าน: 123456</p>
-      </div>
+      
+      
 
       <!-- Social Login (Google) -->
       <button type="button" class="btn-google w-full mb-6 flex items-center justify-center gap-3">

Frontend-Learner/pages/auth/register.vue

@@ -15,6 +15,7 @@ useHead({
 });
 
 const router = useRouter();
+const { register } = useAuth(); // Import register from useAuth
 const { errors, validate, clearFieldError } = useFormValidation();
 
 const isLoading = ref(false);
@@ -52,10 +53,37 @@ const handleRegister = async () => {
   if (!validate(registerForm, registerRules)) return;
 
   isLoading.value = true;
-  // Simulate API delay
-  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  // Map prefix to { th, en }
+  const prefixMap: Record<string, string> = {
+    'นาย': 'Mr.',
+    'นาง': 'Mrs.',
+    'นางสาว': 'Ms.'
+  };
+
+  const payload = {
+    username: registerForm.username,
+    email: registerForm.email,
+    password: registerForm.password,
+    first_name: registerForm.firstName,
+    last_name: registerForm.lastName,
+    prefix: {
+        th: registerForm.prefix,
+        en: prefixMap[registerForm.prefix] || 'Mr.'
+    },
+    phone: registerForm.phone
+  };
+
+  const result = await register(payload);
+
   isLoading.value = false;
-  router.push("/dashboard");
+
+  if (result.success) {
+      alert('สมัครสมาชิกสำเร็จ! กรุณาเข้าสู่ระบบ');
+      router.push("/auth/login");
+  } else {
+      alert(result.error || 'การลงทะเบียนล้มเหลว');
+  }
 };
 </script>
 

Frontend-Learner/pages/auth/reset-password.vue

@@ -13,7 +13,9 @@ useHead({
   title: 'ตั้งรหัสผ่านใหม่ - e-Learning'
 })
 
+const route = useRoute()
 const router = useRouter()
+const { confirmResetPassword } = useAuth()
 const { errors, validate, clearFieldError } = useFormValidation()
 
 const isLoading = ref(false)
@@ -28,14 +30,41 @@ const resetRules = {
   confirmPassword: { rules: { required: true, match: 'password' }, label: 'ยืนยันรหัสผ่าน' }
 }
 
+onMounted(() => {
+  if (!route.query.token || !route.query.id) {
+    alert('ลิงก์รีเซ็ตรหัสผ่านไม่ถูกต้องหรือหมดอายุ')
+    router.push('/auth/login')
+  }
+})
+
 const resetPassword = async () => {
   if (!validate(resetForm, resetRules)) return
   
+  // Extract token and id from query
+  const token = route.query.token as string
+  const id = Number(route.query.id)
+
+  if (!token || !id) {
+     alert('ข้อมูลสำหรับรีเซ็ตไม่ครบถ้วน')
+     return
+  }
+
   isLoading.value = true
-  await new Promise(resolve => setTimeout(resolve, 1500))
+  
+  const result = await confirmResetPassword({
+    id,
+    token,
+    password: resetForm.password
+  })
+
   isLoading.value = false
-  alert('รีเซ็ตรหัสผ่านสำเร็จ!')
-  router.push('/auth/login')
+
+  if (result.success) {
+    alert('รีเซ็ตรหัสผ่านสำเร็จ! กรุณาเข้าสู่ระบบด้วยรหัสผ่านใหม่')
+    router.push('/auth/login')
+  } else {
+    alert(result.error || 'เกิดข้อผิดพลาดในการรีเซ็ตรหัสผ่าน')
+  }
 }
 </script>