chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement user profile management, course browsing, and dashboard structure with new components and layouts.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 17:37:28 +07:00
parent c118e5c3dc
commit 0f92f0d00c
10 changed files with 446 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

166
Frontend-Learner/pages/dashboard/profile.vue
View file

@ -15,6 +15,7 @@ const { locale, t } = useI18n()
const isEditing = ref(false)
const activeTab = ref<'general' | 'security'>('general')
const isProfileSaving = ref(false)
const isPasswordSaving = ref(false)
const isSendingVerify = ref(false)
@ -204,20 +205,24 @@ onMounted(async () => {
<template>
<div class="page-container">
<div class="flex items-center justify-between mb-8 md:mb-10">
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-4">
<q-btn
v-if="isHydrated && isEditing"
flat
round
icon="arrow_back"
color="slate-700"
class="dark:text-white"
@click="toggleEdit(false)"
/>
<h1 class="text-3xl font-black text-slate-900 dark:text-white">
{{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
</h1>
<div class="flex items-start gap-4">
<span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
<div>
<h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
{{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
</h1>
</div>
</div>
</div>
<div class="min-h-9 flex items-center">
@ -242,60 +247,127 @@ onMounted(async () => {
<q-spinner size="3rem" color="primary" />
</div>
<div v-else>
<div v-if="!isEditing" class="card-premium overflow-hidden fade-in">
<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">
<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">
<!-- Part 1: 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 -->
<div class="absolute inset-0 opacity-10">
<div class="absolute -top-10 -right-10 w-64 h-64 rounded-full bg-white blur-3xl"></div>
<div class="absolute -bottom-10 -left-10 w-48 h-48 rounded-full bg-indigo-300 blur-3xl"></div>
</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="relative group 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"
size="140"
class="border-[6px] border-white dark:border-slate-800 shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-900"
/>
</div>
<div class="pb-2">
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
<p class="text-slate-500 dark:text-slate-400 font-medium">{{ userData.email }}</p>
</div>
</div>
<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.phone') }}</span>
<p class="value">{{ userData.phone || '-' }}</p>
</div>
<div class="info-group">
<span class="label">{{ $t('profile.joinedAt') }}</span>
<p class="value">{{ formatDate(userData.createdAt) }}</p>
<div class="text-center md:text-left pt-4 md:pt-0 flex-grow min-w-0">
<h2 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-2 leading-tight tracking-tight break-words">
{{ 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">
<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">
<q-icon name="verified_user" size="xs" :class="userData.emailVerifiedAt ? 'text-green-500' : 'text-amber-500'" />
<span class="text-sm">{{ userData.emailVerifiedAt ? 'ยืนยันแล้ว' : 'รอการยืนยัน' }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Part 2: Interactive Controls & 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">
<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'"
>
<q-icon name="person_outline" size="18px" /> ข้อมูลทั่วไป
</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'"
>
<q-icon name="lock_open" size="18px" /> ความปลอดภัย
</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>
<div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
<ProfileEditForm
v-model="userData"
:loading="isProfileSaving"
:verifying="isSendingVerify"
@submit="handleUpdateProfile"
@upload="handleFileUpload"
@verify="handleSendVerifyEmail"
/>
<PasswordChangeForm
v-model="passwordForm"
:loading="isPasswordSaving"
@submit="handleUpdatePassword"
/>
<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>
</div>
</div>
</div>
</div>