feat: Implement user authentication, admin user management, and role-based access control.

frontend_management/pages/reset-password.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="p-6 items-center justify-center">
+    <q-card-section>
+      <div class="text-center mb-8">
+        <h1 class="text-3xl font-bold text-gray-900">E-Learning</h1>
+        <p class="text-gray-600 mt-2">ตั้งรหัสผ่านใหม่</p>
+      </div>
+
+      <!-- Success Message -->
+      <div v-if="success" class="text-center">
+        <q-icon name="check_circle" size="80px" color="positive" class="mb-4" />
+        <h2 class="text-xl font-semibold text-gray-900 mb-2">รีเซ็ตรหัสผ่านสำเร็จ!</h2>
+        <p class="text-gray-600 mb-6">คุณสามารถเข้าสู่ระบบด้วยรหัสผ่านใหม่ได้แล้ว</p>
+        <q-btn
+          color="primary"
+          label="ไปหน้าเข้าสู่ระบบ"
+          @click="router.push('/login')"
+        />
+      </div>
+
+      <!-- Reset Form -->
+      <div v-else>
+        <q-form @submit="handleResetPassword" class="space-y-4">
+          <q-input
+            v-model="password"
+            label="รหัสผ่านใหม่"
+            :type="showPassword ? 'text' : 'password'"
+            outlined
+            :rules="[
+              val => !!val || 'กรุณากรอกรหัสผ่าน',
+              val => val.length >= 8 || 'รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร'
+            ]"
+          >
+            <template v-slot:prepend>
+              <q-icon name="lock" />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                :name="showPassword ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="showPassword = !showPassword"
+              />
+            </template>
+          </q-input>
+
+          <q-input
+            v-model="confirmPassword"
+            label="ยืนยันรหัสผ่านใหม่"
+            :type="showConfirmPassword ? 'text' : 'password'"
+            outlined
+            :rules="[
+              val => !!val || 'กรุณายืนยันรหัสผ่าน',
+              val => val === password || 'รหัสผ่านไม่ตรงกัน'
+            ]"
+          >
+            <template v-slot:prepend>
+              <q-icon name="lock" />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="showConfirmPassword = !showConfirmPassword"
+              />
+            </template>
+          </q-input>
+
+          <q-btn
+            type="submit"
+            color="primary"
+            label="ตั้งรหัสผ่านใหม่"
+            class="w-full"
+            size="lg"
+            :loading="loading"
+          />
+        </q-form>
+
+        <div class="mt-6 text-center">
+          <NuxtLink to="/login" class="text-sm text-primary-600 hover:text-primary-700">
+            กลับหน้าเข้าสู่ระบบ
+          </NuxtLink>
+        </div>
+      </div>
+    </q-card-section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { authService } from '~/services/auth.service';
+
+definePageMeta({
+  layout: 'auth'
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+
+// Form
+const password = ref('');
+const confirmPassword = ref('');
+const showPassword = ref(false);
+const showConfirmPassword = ref(false);
+const loading = ref(false);
+const success = ref(false);
+
+// Get token from URL
+const token = computed(() => route.query.token as string);
+
+// Check if token exists
+onMounted(() => {
+  if (!token.value) {
+    $q.notify({
+      type: 'negative',
+      message: 'ลิงก์รีเซ็ตรหัสผ่านไม่ถูกต้อง',
+      position: 'top'
+    });
+    router.push('/login');
+  }
+});
+
+const handleResetPassword = async () => {
+  loading.value = true;
+  try {
+    await authService.resetPassword(token.value, password.value);
+    success.value = true;
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
+      position: 'top'
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+</script>