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

Frontend-Learner/i18n/locales/en.json

@@ -36,12 +36,13 @@
     "certificate": "Certificate",
     "available": "Available",
     "continueLearning": "Continue Learning",
+    "startLearning": "Start Learning",
     "studyAgain": "Study Again",
     "downloadCertificate": "Download Certificate",
     "completed": "Completed"
   },
   "sidebar": {
-    "overview": "Overview",
+    "overview": "Home",
     "myCourses": "My Courses",
     "browseCourses": "Browse Courses",
     "announcements": "Announcements",
@@ -117,7 +118,10 @@
     "verifyEmailSuccess": "Verification email sent successfully",
     "verifyEmailError": "Failed to send verification email",
     "emailAlreadyVerified": "Your email is already verified",
-    "emailVerified": "Email Verified"
+    "emailVerified": "Email Verified",
+    "myCertificates": "My Certificates",
+    "viewCertificate": "View Certificate",
+    "issuedAt": "Issued at"
   },
   "userMenu": {
     "home": "Home",
@@ -139,7 +143,8 @@
     "emailVerified": "Email Verified Successfully!",
     "emailVerifiedDesc": "Your account has been successfully verified.",
     "invalidToken": "Invalid verification token",
-    "tokenExpired": "Token expired or invalid"
+    "tokenExpired": "Token expired or invalid",
+    "logout": "Log Out"
   },
   "language": {
     "label": "Language / ภาษา",
@@ -150,6 +155,7 @@
     "newBadge": "New",
     "popularBadge": "Popular",
     "save": "Save",
+    "close": "Close",
     "cancel": "Cancel",
     "required": "This field is required",
     "invalidEmail": "Invalid email address",

Frontend-Learner/i18n/locales/th.json

@@ -118,7 +118,10 @@
     "verifyEmailSuccess": "ส่งอีเมลยืนยันสำเร็จ",
     "verifyEmailError": "ส่งอีเมลไม่สำเร็จ",
     "emailAlreadyVerified": "อีเมลของคุณได้รับการยืนยันแล้ว",
-    "emailVerified": "ยืนยันอีเมลเสร็จสิ้น"
+    "emailVerified": "ยืนยันอีเมลเสร็จสิ้น",
+    "myCertificates": "ประกาศนียบัตรของฉัน",
+    "viewCertificate": "ดูประกาศนียบัตร",
+    "issuedAt": "ออกเมื่อ"
   },
   "userMenu": {
     "home": "หน้าหลัก",

Frontend-Learner/pages/dashboard/profile.vue

@@ -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>