elearning/frontend_management/pages/reset-password.vue

<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 ตัวอักษร'
            ]"
            hide-bottom-space
            lazy-rules="ondemand"
          >
            <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 || 'รหัสผ่านไม่ตรงกัน'
            ]"
            hide-bottom-space
            lazy-rules="ondemand"
          >
            <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>