260 lines
8.7 KiB
Vue
260 lines
8.7 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file login.vue
|
|
* @description หน้าเข้าสู่ระบบ (Login Page)
|
|
* รองรับการเข้าสู่ระบบด้วย Email/Password
|
|
* NOTE: ไม่เปลี่ยนสี และไม่เปลี่ยนการเรียก API login
|
|
*/
|
|
|
|
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)
|
|
const rememberMe = ref(false)
|
|
const showPassword = ref(false)
|
|
|
|
// Form data model
|
|
const loginForm = reactive({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
type LoginField = keyof typeof loginForm
|
|
|
|
// 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 ตัวอักษร)'
|
|
}
|
|
}
|
|
} as const
|
|
|
|
/**
|
|
* จัดการเมื่อมีการพิมพ์ข้อมูล (Input Handler)
|
|
* - ลบ error เมื่อเริ่มพิมพ์ใหม่
|
|
* - ตรวจสอบภาษาไทยแบบ real-time
|
|
*/
|
|
const handleInput = (field: LoginField, value: string) => {
|
|
loginForm[field] = value
|
|
|
|
if (/[\u0E00-\u0E7F]/.test(value)) {
|
|
errors.value[field] = 'ห้ามใส่ภาษาไทย'
|
|
return
|
|
}
|
|
|
|
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
|
|
clearFieldError(field)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
|
|
*/
|
|
const handleLogin = async () => {
|
|
if (!validate(loginForm, loginRules)) return
|
|
|
|
isLoading.value = true
|
|
|
|
// ✅ ไม่เปลี่ยน API: ยังคงเรียก login({ email, password }) ตามเดิม
|
|
const result = await login({
|
|
email: loginForm.email,
|
|
password: loginForm.password
|
|
})
|
|
|
|
isLoading.value = false
|
|
|
|
if (result.success) {
|
|
// REMEMBER ME LOGIC
|
|
if (rememberMe.value) {
|
|
localStorage.setItem('remembered_email', loginForm.email)
|
|
} else {
|
|
localStorage.removeItem('remembered_email')
|
|
}
|
|
|
|
router.push('/dashboard')
|
|
return
|
|
}
|
|
|
|
|
|
// Show error on specific fields
|
|
// Show generic error for security (or specific if role mismatch)
|
|
if (result.error === 'Email ไม่ถูกต้อง') {
|
|
errors.value.email = result.error // Role mismatch case
|
|
} else {
|
|
// Generic login failure (401, 404, etc.)
|
|
const msg = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
|
errors.value.email = msg
|
|
errors.value.password = msg
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
const savedEmail = localStorage.getItem('remembered_email')
|
|
if (savedEmail) {
|
|
loginForm.email = savedEmail
|
|
rememberMe.value = true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<!-- Background Decoration (Optional Subtle Glows to match cool dark feel) -->
|
|
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
|
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
|
|
|
<q-card
|
|
class="w-full max-w-[480px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl"
|
|
>
|
|
|
|
<!-- Header / Logo Section -->
|
|
<div class="flex flex-col items-center mb-10">
|
|
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
|
E
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
|
<p class="text-slate-400 text-base">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form @submit.prevent="handleLogin" class="flex flex-col gap-5">
|
|
|
|
<!-- Email Input -->
|
|
<div>
|
|
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
|
<q-input
|
|
:model-value="loginForm.email"
|
|
outlined
|
|
dense
|
|
dark
|
|
placeholder="student@example.com"
|
|
class="rounded-lg custom-dark-input"
|
|
color="primary"
|
|
:error="!!errors.email"
|
|
:error-message="errors.email"
|
|
@update:model-value="(val: string | number | null) => handleInput('email', val as string)"
|
|
hide-bottom-space
|
|
>
|
|
</q-input>
|
|
</div>
|
|
|
|
<!-- Password Input -->
|
|
<div>
|
|
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></div>
|
|
<q-input
|
|
:model-value="loginForm.password"
|
|
outlined
|
|
dense
|
|
dark
|
|
:type="showPassword ? 'text' : 'password'"
|
|
placeholder="••••••••"
|
|
class="rounded-lg custom-dark-input"
|
|
color="primary"
|
|
:error="!!errors.password"
|
|
:error-message="errors.password"
|
|
@update:model-value="(val: string | number | null) => handleInput('password', val as string)"
|
|
hide-bottom-space
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon
|
|
:name="showPassword ? 'visibility_off' : 'visibility'"
|
|
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
|
@click="showPassword = !showPassword"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
|
|
<!-- Helpers: Remember Me & Forgot Password -->
|
|
<div class="flex justify-between items-center text-sm">
|
|
<q-checkbox
|
|
v-model="rememberMe"
|
|
label="จดจำฉัน"
|
|
size="sm"
|
|
dense
|
|
dark
|
|
color="white"
|
|
class="text-slate-300"
|
|
/>
|
|
<NuxtLink to="/auth/forgot-password" class="font-medium text-blue-400 hover:text-blue-300 transition-colors">
|
|
ลืมรหัสผ่าน?
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<q-btn
|
|
type="submit"
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500"
|
|
:loading="isLoading"
|
|
>
|
|
เข้าสู่ระบบ
|
|
<template v-slot:loading>
|
|
<q-spinner-dots color="white" />
|
|
</template>
|
|
</q-btn>
|
|
|
|
<!-- Back to Landing Page -->
|
|
<div class="text-center pt-6 border-t border-slate-700 mt-2">
|
|
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-slate-400 text-base font-bold hover:text-white hover:bg-slate-700 transition-all duration-300 group">
|
|
<q-icon name="arrow_back" class="text-lg transform group-hover:-translate-x-1 transition-transform" />
|
|
กลับไปหน้าแรก
|
|
</NuxtLink>
|
|
</div>
|
|
</form>
|
|
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.font-inter {
|
|
font-family: 'Inter', 'Prompt', sans-serif;
|
|
}
|
|
|
|
/* Custom dark input styling to match screenshot: Dark background, light border */
|
|
.custom-dark-input :deep(.q-field__control) {
|
|
background: #334155 !important; /* Slate 700ish */
|
|
border-radius: 8px;
|
|
}
|
|
.custom-dark-input :deep(.q-field__control:before) {
|
|
border-color: #475569; /* Slate 600 */
|
|
}
|
|
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
|
border-color: #3b82f6; /* Blue 500 */
|
|
}
|
|
</style>
|