Website Structure
This commit is contained in:
supalerk-ar66
parent
62812f2090
commit
71f0676a62
22365 changed files with 4265753 additions and 791 deletions
145
Frontend-Learner/pages/auth/login.vue
Normal file
145
Frontend-Learner/pages/auth/login.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file login.vue
|
||||
* @description Login Page.
|
||||
* Handles user authentication with email/password and social login (mock).
|
||||
* Uses the 'auth' layout.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
layout: 'auth',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'เข้าสู่ระบบ - e-Learning'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const { login } = useAuth()
|
||||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
// Form data model
|
||||
const loginForm = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
// Validation rules definition
|
||||
const loginRules = {
|
||||
email: { rules: { required: true, email: true }, label: 'อีเมล' },
|
||||
password: { rules: { required: true, minLength: 6 }, label: 'รหัสผ่าน' }
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates form and attempts login.
|
||||
* Currently simulates an API call for demonstration.
|
||||
*/
|
||||
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')
|
||||
} else {
|
||||
isLoading.value = false
|
||||
alert('อีเมลหรือรหัสผ่านไม่ถูกต้อง! (Demo: student@example.com / 123456)')
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<!-- Email Input -->
|
||||
<FormInput
|
||||
v-model="loginForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="clearFieldError('email')"
|
||||
/>
|
||||
<!-- Password Input -->
|
||||
<FormInput
|
||||
v-model="loginForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:error="errors.password"
|
||||
required
|
||||
@update:model-value="clearFieldError('password')"
|
||||
/>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue