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

feat: Add user profile page for managing personal information, passwords, email verification, and viewing certificates, with internationalization support.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 16:22:37 +07:00
parent a7aee70263
commit 15794fab16
3 changed files with 21 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,7 @@ useHead({
const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail, fetchUserProfile } = useAuth()
const { fetchAllCertificates, getLocalizedText } = useCourse()
const { t } = useI18n()
const { locale, t } = useI18n()
@ -28,7 +28,7 @@ const formatDate = (dateString?: string) => {
if (!dateString) return '-'
try {
const date = new Date(dateString)
return new Intl.DateTimeFormat('th-TH', {
return new Intl.DateTimeFormat(locale.value === 'th' ? 'th-TH' : 'en-US', {
day: 'numeric',
month: 'short',
year: 'numeric'
@ -43,7 +43,7 @@ const userData = ref({
lastName: currentUser.value?.lastName || '',
email: currentUser.value?.email || '',
phone: currentUser.value?.phone || '',
createdAt: formatDate(currentUser.value?.createdAt),
createdAt: currentUser.value?.createdAt || '',
photoURL: currentUser.value?.photoURL || '',
prefix: currentUser.value?.prefix?.th || '',
emailVerifiedAt: currentUser.value?.emailVerifiedAt
@ -190,6 +190,7 @@ watch(() => currentUser.value, (newUser) => {
userData.value.prefix = newUser.prefix?.th || ''
userData.value.email = newUser.email
userData.value.phone = newUser.phone || ''
userData.value.createdAt = newUser.createdAt || ''
userData.value.emailVerifiedAt = newUser.emailVerifiedAt
}
}, { deep: true })
@ -285,7 +286,7 @@ onMounted(async () => {
</div>
<div class="info-group">
<span class="label">{{ $t('profile.joinedAt') }}</span>
<p class="value">{{ userData.createdAt }}</p>
<p class="value">{{ formatDate(userData.createdAt) }}</p>
</div>
</div>
</div>
@ -295,7 +296,7 @@ onMounted(async () => {
<div v-if="!isEditing && certificates.length > 0" class="mt-12 fade-in" style="animation-delay: 0.1s;">
<h2 class="text-2xl font-black mb-6 text-slate-900 dark:text-white flex items-center gap-3">
<q-icon name="workspace_premium" color="warning" size="32px" />
ประกาศนียบัตรของฉัน
{{ $t('profile.myCertificates') }}
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="cert in certificates" :key="cert.certificate_id" class="card-premium p-6 hover:border-warning/50 transition-all group">
@ -306,14 +307,14 @@ onMounted(async () => {
<q-btn flat round color="primary" icon="download" @click="viewCertificate(cert.download_url)" class="opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
<h3 class="font-bold text-slate-900 dark:text-white mb-1 line-clamp-1">{{ getLocalizedText(cert.course_title) }}</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 italic">ออกเมื่อ: {{ formatDate(cert.issued_at) }}</p>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 italic">{{ $t('profile.issuedAt') }}: {{ formatDate(cert.issued_at) }}</p>
<q-btn
unelevated
rounded
color="warning"
text-color="dark"
class="w-full font-bold"
label="ดูประกาศนียบัตร"
:label="$t('profile.viewCertificate')"
@click="viewCertificate(cert.download_url)"
/>
</div>