feat: Add initial pages and components for user dashboard, profile, course discovery, and classroom learning with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 47s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 47s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
This commit is contained in:
supalerk-ar66
parent
f26a94076c
commit
e3873f616e
11 changed files with 1046 additions and 685 deletions
|
|
@ -203,7 +203,7 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-container bg-[#F8F9FA] dark:bg-[#020617] min-h-screen transition-colors duration-300">
|
||||
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-4">
|
||||
|
|
@ -212,7 +212,7 @@ onMounted(async () => {
|
|||
flat
|
||||
round
|
||||
icon="arrow_back"
|
||||
class="dark:text-white"
|
||||
class="text-slate-600 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
@click="toggleEdit(false)"
|
||||
/>
|
||||
<div class="flex items-start gap-4">
|
||||
|
|
@ -231,7 +231,7 @@ onMounted(async () => {
|
|||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="font-bold"
|
||||
class="font-bold shadow-lg shadow-blue-500/20"
|
||||
icon="edit"
|
||||
:label="$t('profile.editProfile')"
|
||||
@click="toggleEdit(true)"
|
||||
|
|
@ -247,11 +247,12 @@ onMounted(async () => {
|
|||
<q-spinner size="3rem" color="primary" />
|
||||
</div>
|
||||
|
||||
<div v-else class="max-w-4xl mx-auto">
|
||||
<!-- Unified Premium Container -->
|
||||
<div class="card-premium overflow-hidden fade-in min-h-[600px] flex flex-col">
|
||||
<div v-else class="max-w-4xl mx-auto pb-20">
|
||||
|
||||
<!-- VIEW MODE: Premium Card with Banner -->
|
||||
<div v-if="!isEditing" class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none overflow-hidden fade-in min-h-[500px] flex flex-col transition-colors duration-300">
|
||||
|
||||
<!-- Part 1: Identity Header (Banner & Avatar) -->
|
||||
<!-- Identity Header (Banner & Avatar) -->
|
||||
<div class="relative">
|
||||
<div class="h-40 bg-gradient-to-r from-blue-700 via-blue-600 to-indigo-700 relative overflow-hidden">
|
||||
<!-- Abstract Patterns -->
|
||||
|
|
@ -261,14 +262,14 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-8 md:px-12 flex flex-col md:flex-row items-center md:items-end gap-8 md:gap-12 -mt-12 pb-8 border-b border-slate-100 dark:border-white/5 relative z-10">
|
||||
<div class="px-8 md:px-12 flex flex-col md:flex-row items-center md:items-end gap-8 md:gap-12 -mt-12 pb-8 relative z-10">
|
||||
<div class="relative group flex-shrink-0">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="140"
|
||||
class="border-[6px] border-white dark:border-slate-800 shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-900"
|
||||
class="border-[6px] border-white dark:border-[#1e293b] shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -277,98 +278,93 @@ onMounted(async () => {
|
|||
{{ userData.firstName }} {{ userData.lastName }}
|
||||
</h2>
|
||||
<div class="flex flex-wrap items-center justify-center md:justify-start gap-4">
|
||||
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-white/5 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
|
||||
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-slate-700">
|
||||
<q-icon name="alternate_email" size="xs" class="text-blue-500" />
|
||||
<span class="text-sm">{{ userData.email }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-white/5 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
|
||||
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-slate-700">
|
||||
<q-icon name="verified_user" size="xs" :class="userData.emailVerifiedAt ? 'text-green-500' : 'text-amber-500'" />
|
||||
<span class="text-sm">{{ userData.emailVerifiedAt ? 'ยืนยันแล้ว' : 'รอการยืนยัน' }}</span>
|
||||
<span class="text-sm">{{ userData.emailVerifiedAt ? $t('profile.emailVerified') : $t('profile.verifyEmail') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Part 2: Interactive Controls & Content -->
|
||||
<!-- View Details Content -->
|
||||
<div class="p-8 md:p-12 flex-grow">
|
||||
|
||||
<!-- Tab Selector (Segmented Pill) -->
|
||||
<div v-if="isEditing" class="flex justify-center mb-12">
|
||||
<div class="bg-slate-100 dark:bg-slate-800/50 p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-white/5 shadow-inner">
|
||||
<div class="max-w-3xl mx-auto h-full fade-in">
|
||||
<h3 class="text-sm font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-8">
|
||||
<span class="w-2 h-2 bg-blue-600 rounded-full"></span> {{ $t('profile.accountDetails') }}
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:scale-110 transition-transform">
|
||||
<q-icon name="smartphone" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-0.5">{{ $t('profile.phone') }}</div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 group-hover:scale-110 transition-transform">
|
||||
<q-icon name="calendar_today" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-0.5">{{ $t('profile.joinedAt') }}</div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MODE: Tabs and Forms (Clean Layout) -->
|
||||
<div v-else class="fade-in">
|
||||
<!-- Tab Selector -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="bg-white dark:bg-[#1e293b] p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-slate-700 shadow-sm">
|
||||
<button
|
||||
@click="activeTab = 'general'"
|
||||
class="px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
|
||||
:class="activeTab === 'general' ? 'bg-white dark:bg-slate-700 text-blue-600 shadow-md scale-100' : 'text-slate-500 hover:text-slate-700 dark:hover:text-white scale-95 opacity-70'"
|
||||
class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
|
||||
:class="activeTab === 'general' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
|
||||
>
|
||||
<q-icon name="person_outline" size="18px" /> ข้อมูลทั่วไป
|
||||
<q-icon name="person_outline" size="18px" /> {{ $t('profile.generalInfo') }}
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'security'"
|
||||
class="px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
|
||||
:class="activeTab === 'security' ? 'bg-white dark:bg-slate-700 text-amber-600 shadow-md scale-100' : 'text-slate-500 hover:text-slate-700 dark:hover:text-white scale-95 opacity-70'"
|
||||
class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
|
||||
:class="activeTab === 'security' ? 'bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
|
||||
>
|
||||
<q-icon name="lock_open" size="18px" /> ความปลอดภัย
|
||||
<q-icon name="lock_open" size="18px" /> {{ $t('profile.security') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Switching -->
|
||||
<div class="max-w-3xl mx-auto h-full">
|
||||
<template v-if="!isEditing">
|
||||
<div class="fade-in">
|
||||
<h3 class="text-sm font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 mb-8">
|
||||
<span class="w-2 h-2 bg-blue-600 rounded-full"></span> รายละเอียดบัญชี
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 group-hover:scale-110 transition-transform">
|
||||
<q-icon name="smartphone" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-400 uppercase tracking-wider mb-0.5">เบอร์โทรศัพท์</div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-600 group-hover:scale-110 transition-transform">
|
||||
<q-icon name="calendar_today" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-400 uppercase tracking-wider mb-0.5">วันที่เริ่มเป็นสมาชิก</div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="fade-in">
|
||||
<div v-if="activeTab === 'general'">
|
||||
<ProfileEditForm
|
||||
v-model="userData"
|
||||
:loading="isProfileSaving"
|
||||
:verifying="isSendingVerify"
|
||||
@submit="handleUpdateProfile"
|
||||
@upload="handleFileUpload"
|
||||
@verify="handleSendVerifyEmail"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<PasswordChangeForm
|
||||
v-model="passwordForm"
|
||||
:loading="isPasswordSaving"
|
||||
@submit="handleUpdatePassword"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Edit Content -->
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div v-if="activeTab === 'general'" class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
|
||||
<ProfileEditForm
|
||||
v-model="userData"
|
||||
:loading="isProfileSaving"
|
||||
:verifying="isSendingVerify"
|
||||
@submit="handleUpdateProfile"
|
||||
@upload="handleFileUpload"
|
||||
@verify="handleSendVerifyEmail"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
|
||||
<PasswordChangeForm
|
||||
v-model="passwordForm"
|
||||
:loading="isPasswordSaving"
|
||||
@submit="handleUpdatePassword"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -379,57 +375,7 @@ onMounted(async () => {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background-color: white;
|
||||
border-color: #e2e8f0;
|
||||
border-radius: 1.5rem;
|
||||
border-width: 1px;
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .card-premium {
|
||||
background-color: #1e293b;
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.info-group .label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #64748b;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dark .info-group .label {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.info-group .value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.dark .info-group .value {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.premium-q-input :deep(.q-field__control) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__control) {
|
||||
background: #0f172a;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
.dark .premium-q-input :deep(.q-field__label) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
/* Removed card-premium and dark mode overrides as we used utility classes */
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue