479 lines
17 KiB
Vue
479 lines
17 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file profile.vue
|
|
* @description User Profile & Settings Page.
|
|
* Allows users to view their profile details and toggle an edit mode to update information.
|
|
* Features a premium design with glassmorphism and gradient effects.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'ตั้งค่าบัญชี - e-Learning'
|
|
})
|
|
|
|
const { currentUser } = useAuth()
|
|
const { errors, validate, clearFieldError } = useFormValidation()
|
|
const isEditing = ref(false)
|
|
|
|
const formatDate = (dateString?: string) => {
|
|
if (!dateString) return '-'
|
|
try {
|
|
const date = new Date(dateString)
|
|
return new Intl.DateTimeFormat('th-TH', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
}).format(date)
|
|
} catch (e) {
|
|
return dateString
|
|
}
|
|
}
|
|
|
|
// User Profile Data Management
|
|
const userData = ref({
|
|
firstName: currentUser.value?.firstName || '',
|
|
lastName: currentUser.value?.lastName || '',
|
|
email: currentUser.value?.email || '',
|
|
phone: currentUser.value?.phone || '',
|
|
createdAt: formatDate(currentUser.value?.createdAt),
|
|
photoURL: currentUser.value?.photoURL || '',
|
|
prefix: currentUser.value?.prefix?.th || ''
|
|
})
|
|
|
|
// Password Form (Separate from userData for security/logic)
|
|
const passwordForm = reactive({
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: ''
|
|
})
|
|
|
|
// Validation Rules
|
|
const validationRules = {
|
|
firstName: { rules: { required: true }, label: 'ชื่อ' },
|
|
lastName: { rules: { required: true }, label: 'นามสกุล' },
|
|
email: { rules: { required: true, email: true }, label: 'อีเมล' },
|
|
phone: { rules: { required: true, pattern: /^0[0-9]{8,9}$/ }, label: 'เบอร์โทรศัพท์' },
|
|
newPassword: { rules: { minLength: 6 }, label: 'รหัสผ่านใหม่' },
|
|
confirmPassword: { rules: { match: 'newPassword' }, label: 'ยืนยันรหัสผ่าน' }
|
|
}
|
|
|
|
const showCurrentPassword = ref(false)
|
|
const showNewPassword = ref(false)
|
|
const showConfirmPassword = ref(false)
|
|
|
|
const fileInput = ref<HTMLInputElement | null>(null)
|
|
|
|
const toggleEdit = (edit: boolean) => {
|
|
isEditing.value = edit
|
|
// Clear errors when toggling modes
|
|
if(edit === false) {
|
|
// Logic to reset form if canceling could go here
|
|
}
|
|
}
|
|
|
|
const triggerUpload = () => {
|
|
fileInput.value?.click()
|
|
}
|
|
|
|
const handleFileUpload = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
if (target.files && target.files[0]) {
|
|
// Mock upload logic
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
userData.value.photoURL = e.target?.result as string
|
|
}
|
|
reader.readAsDataURL(target.files[0])
|
|
}
|
|
}
|
|
|
|
// Save Profile Updates
|
|
const saveProfile = async () => {
|
|
// Combine data for validation
|
|
const formData = {
|
|
...userData.value,
|
|
...passwordForm
|
|
}
|
|
|
|
// TODO: Add password validation if changing password is implemented via this API or handle separately
|
|
// For now focused on profile fields
|
|
|
|
const prefixMap: Record<string, string> = {
|
|
'นาย': 'Mr.',
|
|
'นาง': 'Mrs.',
|
|
'นางสาว': 'Ms.'
|
|
}
|
|
|
|
if (currentUser.value) {
|
|
const { updateUserProfile, changePassword } = useAuth()
|
|
|
|
const payload = {
|
|
first_name: userData.value.firstName,
|
|
last_name: userData.value.lastName,
|
|
// email: userData.value.email, // Email should not be updated via this endpoint as it causes backend 500 error (not in UserProfile schema)
|
|
phone: userData.value.phone,
|
|
prefix: {
|
|
th: userData.value.prefix,
|
|
en: prefixMap[userData.value.prefix] || ''
|
|
}
|
|
}
|
|
|
|
// 1. Update Profile
|
|
const profileResult = await updateUserProfile(payload)
|
|
if (!profileResult?.success) {
|
|
alert(profileResult?.error || 'เกิดข้อผิดพลาดในการบันทึกข้อมูลส่วนตัว')
|
|
return
|
|
}
|
|
|
|
// 2. Change Password (if filled)
|
|
if (passwordForm.currentPassword && passwordForm.newPassword) {
|
|
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
|
alert('รหัสผ่านใหม่ไม่ตรงกัน')
|
|
return
|
|
}
|
|
|
|
const passwordResult = await changePassword({
|
|
oldPassword: passwordForm.currentPassword,
|
|
newPassword: passwordForm.newPassword
|
|
})
|
|
|
|
if (!passwordResult.success) {
|
|
alert(passwordResult.error || 'เปลี่ยนรหัสผ่านไม่สำเร็จ')
|
|
// Don't return here, maybe we still want to show profile success?
|
|
// But usually we stop. Let's alert only.
|
|
} else {
|
|
// Clear password form on success
|
|
passwordForm.currentPassword = ''
|
|
passwordForm.newPassword = ''
|
|
passwordForm.confirmPassword = ''
|
|
}
|
|
}
|
|
|
|
alert('บันทึกข้อมูลเรียบร้อยแล้ว')
|
|
isEditing.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="profile-page max-w-4xl mx-auto px-4 py-8">
|
|
<!-- Header: Title and Edit action -->
|
|
<div class="flex items-center justify-between mb-10">
|
|
<h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('profile.myProfile') }}</h1>
|
|
<div class="flex items-center gap-6">
|
|
<q-btn
|
|
v-if="!isEditing"
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
class="font-bold"
|
|
icon="edit"
|
|
:label="$t('profile.editProfile')"
|
|
@click="toggleEdit(true)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile View Card -->
|
|
<!-- VIEW MODE: Display Profile Information -->
|
|
<div v-if="!isEditing" class="card-premium overflow-hidden">
|
|
<!-- Cover Banner -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 h-32 w-full"/>
|
|
<div class="px-8 pb-10 -mt-16">
|
|
<div class="flex flex-col md:flex-row items-end gap-6 mb-10">
|
|
<div class="relative flex-shrink-0">
|
|
<UserAvatar
|
|
:photo-u-r-l="userData.photoURL"
|
|
:first-name="userData.firstName"
|
|
:last-name="userData.lastName"
|
|
size="128"
|
|
class="border-4 border-white dark:border-[#1e293b] shadow-2xl bg-slate-800"
|
|
/>
|
|
<div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-white dark:border-[#1e293b]"/>
|
|
</div>
|
|
<div class="pb-2">
|
|
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div class="info-group">
|
|
<span class="label">{{ $t('profile.email') }}</span>
|
|
<p class="value">{{ userData.email }}</p>
|
|
</div>
|
|
<div class="info-group">
|
|
<span class="label">{{ $t('profile.phone') }}</span>
|
|
<p class="value">{{ userData.phone }}</p>
|
|
</div>
|
|
<div class="info-group">
|
|
<span class="label">{{ $t('profile.joinedAt') }}</span>
|
|
<p class="value">{{ userData.createdAt }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Profile Card -->
|
|
<!-- EDIT MODE: Edit Profile Form -->
|
|
<div v-else class="card-premium p-8 md:p-12">
|
|
<div class="flex items-center gap-4 mb-10">
|
|
<q-btn flat round icon="arrow_back" color="grey-7" @click="toggleEdit(false)" />
|
|
<h2 class="text-2xl font-black text-slate-900 dark:text-white">{{ $t('profile.editPersonalDesc') }}</h2>
|
|
</div>
|
|
|
|
<!-- Avatar Upload Section -->
|
|
<div class="flex flex-col md:flex-row items-center gap-8 mb-12">
|
|
<div class="relative group cursor-pointer" @click="triggerUpload">
|
|
<UserAvatar
|
|
:photo-u-r-l="userData.photoURL"
|
|
:first-name="userData.firstName"
|
|
:last-name="userData.lastName"
|
|
size="112"
|
|
class="rounded-3xl border-2 border-slate-200 dark:border-white/5 bg-slate-800 group-hover:opacity-50 transition-all"
|
|
/>
|
|
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
|
|
</div>
|
|
<div class="text-center md:text-left">
|
|
<h3 class="font-black text-slate-900 dark:text-white mb-2">{{ $t('profile.yourAvatar') }}</h3>
|
|
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">{{ $t('profile.avatarHint') }}</p>
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
size="sm"
|
|
class="font-bold px-4"
|
|
:label="$t('profile.uploadNew')"
|
|
@click="triggerUpload"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Inputs -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.prefix') }}</div>
|
|
<q-select
|
|
v-model="userData.prefix"
|
|
:options="['นาย', 'นาง', 'นางสาว']"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
popup-content-class="text-slate-900"
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.firstName') }}</div>
|
|
<q-input
|
|
v-model="userData.firstName"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
:error="!!errors.firstName"
|
|
:error-message="errors.firstName"
|
|
@update:model-value="clearFieldError('firstName')"
|
|
/>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.lastName') }}</div>
|
|
<q-input
|
|
v-model="userData.lastName"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
:error="!!errors.lastName"
|
|
:error-message="errors.lastName"
|
|
@update:model-value="clearFieldError('lastName')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.email') }}</div>
|
|
<q-input
|
|
v-model="userData.email"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
:error="!!errors.email"
|
|
:error-message="errors.email"
|
|
@update:model-value="clearFieldError('email')"
|
|
type="email"
|
|
/>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.phone') }}</div>
|
|
<q-input
|
|
v-model="userData.phone"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
:error="!!errors.phone"
|
|
:error-message="errors.phone"
|
|
@update:model-value="clearFieldError('phone')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Section -->
|
|
<div class="border-t border-slate-200 dark:border-white/5 pt-10 mb-10">
|
|
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">{{ $t('profile.security') }}</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.currentPassword') }}</div>
|
|
<q-input
|
|
v-model="passwordForm.currentPassword"
|
|
:type="showCurrentPassword ? 'text' : 'password'"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
placeholder="••••••••"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon
|
|
:name="showCurrentPassword ? 'visibility_off' : 'visibility'"
|
|
class="cursor-pointer"
|
|
@click="showCurrentPassword = !showCurrentPassword"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.newPassword') }}</div>
|
|
<q-input
|
|
v-model="passwordForm.newPassword"
|
|
:type="showNewPassword ? 'text' : 'password'"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
:error="!!errors.newPassword"
|
|
:error-message="errors.newPassword"
|
|
@update:model-value="clearFieldError('newPassword')"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon
|
|
:name="showNewPassword ? 'visibility_off' : 'visibility'"
|
|
class="cursor-pointer"
|
|
@click="showNewPassword = !showNewPassword"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.confirmNewPassword') }}</div>
|
|
<q-input
|
|
v-model="passwordForm.confirmPassword"
|
|
:type="showConfirmPassword ? 'text' : 'password'"
|
|
outlined
|
|
dense
|
|
rounded
|
|
bg-color="white"
|
|
class="premium-q-input"
|
|
:error="!!errors.confirmPassword"
|
|
:error-message="errors.confirmPassword"
|
|
@update:model-value="clearFieldError('confirmPassword')"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon
|
|
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
|
class="cursor-pointer"
|
|
@click="showConfirmPassword = !showConfirmPassword"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-white/5">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
class="flex-1 py-3 text-lg font-bold shadow-lg"
|
|
:label="$t('common.save')"
|
|
@click="saveProfile"
|
|
/>
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="grey-3"
|
|
text-color="grey-9"
|
|
class="md:w-32 py-3 font-bold"
|
|
:label="$t('common.cancel')"
|
|
@click="toggleEdit(false)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-main {
|
|
color: white;
|
|
}
|
|
|
|
.card-premium {
|
|
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
|
|
border-radius: 2.5rem;
|
|
border-width: 1px;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.dark .card-premium {
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.info-group .label {
|
|
@apply text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 block mb-2;
|
|
}
|
|
.info-group .value {
|
|
@apply text-lg font-bold text-slate-900 dark:text-white;
|
|
}
|
|
|
|
.premium-q-input :deep(.q-field__control) {
|
|
border-radius: 12px;
|
|
}
|
|
.dark .premium-q-input :deep(.q-field__control) {
|
|
background: #1e293b;
|
|
}
|
|
.dark .premium-q-input :deep(.q-field__native) {
|
|
color: white;
|
|
}
|
|
.dark .premium-q-input :deep(.q-field__label) {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.card-premium {
|
|
@apply rounded-[2rem];
|
|
}
|
|
}
|
|
</style>
|