187 lines
7 KiB
Vue
187 lines
7 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file login.vue
|
|
* @description หน้าเข้าสู่ระบบ (Login Page)
|
|
* รองรับการเข้าสู่ระบบด้วย Email/Password
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: 'auth',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'เข้าสู่ระบบ - e-Learning'
|
|
})
|
|
|
|
const router = useRouter()
|
|
const { login, user } = useAuth()
|
|
const { errors, validate, clearFieldError } = useFormValidation()
|
|
|
|
const isLoading = ref(false)
|
|
|
|
// Form data model
|
|
const loginForm = reactive({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
// Validation rules definition
|
|
// กำหนดกฎการตรวจสอบข้อมูล (Validation Rules)
|
|
const loginRules = {
|
|
email: {
|
|
rules: {
|
|
required: true,
|
|
email: true,
|
|
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
|
},
|
|
label: 'อีเมล',
|
|
messages: {
|
|
required: 'กรุณากรอกอีเมลของคุณ',
|
|
email: 'กรุณากรอกอีเมลให้ถูกต้อง (you@example.com)'
|
|
}
|
|
},
|
|
password: {
|
|
rules: {
|
|
required: true,
|
|
minLength: 8,
|
|
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
|
},
|
|
label: 'รหัสผ่าน',
|
|
messages: {
|
|
required: 'กรุณากรอกรหัสผ่าน',
|
|
minLength: 'กรุณากรอกรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)'
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
|
|
*/
|
|
/**
|
|
* จัดการเมื่อมีการพิมพ์ข้อมูล (Input Handler)
|
|
* - ลบ error เมื่อเริ่มพิมพ์ใหม่
|
|
* - ตรวจสอบภาษาไทยแบบ real-time
|
|
*/
|
|
const handleInput = (field: keyof typeof loginForm, value: string) => {
|
|
loginForm[field] = value
|
|
if (/[\u0E00-\u0E7F]/.test(value)) {
|
|
errors.value[field] = 'ห้ามใส่ภาษาไทย'
|
|
} else {
|
|
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
|
|
clearFieldError(field)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleLogin = async () => {
|
|
if (!validate(loginForm, loginRules)) return
|
|
|
|
isLoading.value = true
|
|
|
|
const result = await login({
|
|
email: loginForm.email,
|
|
password: loginForm.password
|
|
})
|
|
|
|
isLoading.value = false
|
|
|
|
if (result.success) {
|
|
router.push('/dashboard')
|
|
} else {
|
|
// 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>
|
|
|
|
<template>
|
|
<div class="card" style="width: 100%; max-width: 440px;">
|
|
<!-- Loading Screen Overlay -->
|
|
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
|
|
|
<!-- Header / Logo Section -->
|
|
<div class="flex flex-col items-center mb-6">
|
|
<div
|
|
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
|
>
|
|
E
|
|
</div>
|
|
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
|
<p class="text-muted text-sm">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form @submit.prevent="handleLogin" novalidate>
|
|
<!-- Email Input -->
|
|
<FormInput
|
|
:model-value="loginForm.email"
|
|
label="อีเมล"
|
|
type="email"
|
|
placeholder="student@example.com"
|
|
:error="errors.email"
|
|
required
|
|
@update:model-value="val => handleInput('email', val)"
|
|
/>
|
|
<!-- Password Input -->
|
|
<FormInput
|
|
:model-value="loginForm.password"
|
|
label="รหัสผ่าน"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
:error="errors.password"
|
|
required
|
|
@update:model-value="val => handleInput('password', val)"
|
|
/>
|
|
|
|
<!-- Helpers: Remember Me & Forgot Password -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<label class="flex items-center gap-2 text-sm text-muted">
|
|
<input type="checkbox"> จดจำฉัน
|
|
</label>
|
|
<NuxtLink to="/auth/forgot-password" class="text-sm" style="color: var(--primary); font-weight: 500;">ลืมรหัสผ่าน?</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
|
<LoadingSpinner v-if="isLoading" size="sm" />
|
|
<span v-else>เข้าสู่ระบบ</span>
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- Social Login (Google) -->
|
|
<button type="button" class="btn-google w-full mb-6 flex items-center justify-center gap-3">
|
|
<svg width="18" height="18" viewBox="0 0 18 18">
|
|
<path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
|
|
<path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.834.859-3.048.859-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
|
|
<path d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706 0-.589.102-1.166.282-1.706V4.962H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
|
|
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962l3.007 2.332c.708-2.127 2.692-3.711 5.036-3.711z" fill="#EA4335"/>
|
|
</svg>
|
|
<span>เข้าสู่ระบบด้วย Google</span>
|
|
</button>
|
|
|
|
<!-- Back to Landing Page -->
|
|
<div class="text-center pt-6 border-t border-gray-100">
|
|
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl border border-gray-200 text-sm font-bold text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-blue-600 transition-all duration-300 group">
|
|
<span class="transform group-hover:-translate-x-1 transition-transform">←</span>
|
|
กลับไปหน้าแรก
|
|
</NuxtLink>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
</style>
|