From 70d2dfa4c7ada6bf73eba9bc868b85ea01c39ffa Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Wed, 28 Jan 2026 14:44:41 +0700
Subject: [PATCH] feat: Add user profile management page including personal
 info editing, avatar upload, and password change.

---
 Frontend-Learner/components/user/UserMenu.vue |   9 +-
 Frontend-Learner/composables/useAuth.ts       |  82 ++++++++++--
 Frontend-Learner/i18n/locales/th.json         |   5 +-
 Frontend-Learner/pages/dashboard/profile.vue  | 120 ++++++++++++++++--
 4 files changed, 185 insertions(+), 31 deletions(-)

diff --git a/Frontend-Learner/components/user/UserMenu.vue b/Frontend-Learner/components/user/UserMenu.vue
index 2caa7f88..bce7c83f 100644
--- a/Frontend-Learner/components/user/UserMenu.vue
+++ b/Frontend-Learner/components/user/UserMenu.vue
@@ -44,8 +44,13 @@ const handleLogout = async () => {
 <template>
   <div class="q-pa-md">
     <q-btn round flat class="text-slate-700 dark:text-white">
-      <q-avatar color="primary" text-color="white" size="40px" font-size="14px" class="font-bold shadow-md">
-        {{ userInitials }}
+      <q-avatar color="primary" text-color="white" size="40px" font-size="14px" class="font-bold shadow-md cursor-pointer">
+        <img 
+          v-if="currentUser?.photoURL" 
+          :src="currentUser.photoURL" 
+          class="object-cover w-full h-full"
+        />
+        <span v-else>{{ userInitials }}</span>
       </q-avatar>
       
       <q-menu 
diff --git a/Frontend-Learner/composables/useAuth.ts b/Frontend-Learner/composables/useAuth.ts
index 588a6e63..f72bcb97 100644
--- a/Frontend-Learner/composables/useAuth.ts
+++ b/Frontend-Learner/composables/useAuth.ts
@@ -255,30 +255,84 @@ export const useAuth = () => {
   const uploadAvatar = async (file: File) => {
     if (!token.value) return { success: false, error: 'ไม่พบ Token การใช้งาน' }
 
-    const formData = new FormData()
-    formData.append('file', file)
+    // optional: validate เบื้องต้น
+    const allowed = ['image/jpeg', 'image/png', ]
+    if (!allowed.includes(file.type)) {
+      return { success: false, error: 'รองรับเฉพาะไฟล์ jpg/png/' }
+    }
+    const maxMB = 5
+    if (file.size > maxMB * 1024 * 1024) {
+      return { success: false, error: `ไฟล์ต้องไม่เกิน ${maxMB}MB` }
+    }
 
-    try {
-      const data = await $fetch<{ code: number; message: string; data: { avatar_url: string; id: number } }>(`${API_BASE_URL}/user/upload-avatar`, {
+    const formData = new FormData()
+    formData.append('file', file) // ✅ field = file
+
+    interface AvatarResponse {
+      code: number
+      message: string
+      data: {
+        id: number
+        avatar_url: string
+      }
+    }
+
+    const doUpload = async () => {
+      return await $fetch<AvatarResponse>(`${API_BASE_URL}/user/upload-avatar`, {
         method: 'POST',
         headers: {
-            Authorization: `Bearer ${token.value}`
+          accept: 'application/json',
+          Authorization: `Bearer ${token.value}`
         },
         body: formData
       })
-      
-      // อัปเดตข้อมูล User ใน Local State เมื่ออัปโหลดสำเร็จ
-      if (data.data.avatar_url && user.value && user.value.profile) {
-          user.value.profile.avatar_url = data.data.avatar_url
-      } else {
-        // หากไม่มีข้อมูลใน cache ให้ดึงใหม่
-        await fetchUserProfile(true)
+    }
+
+    try {
+      let response: AvatarResponse
+
+      try {
+        response = await doUpload()
+      } catch (err: any) {
+        // ✅ ถ้า 401 ให้ refresh แล้วลองใหม่ 1 ครั้ง
+        if (err?.statusCode === 401) {
+          const refreshed = await refreshAccessToken()
+          if (!refreshed) {
+            logout()
+            return { success: false, error: 'Token หมดอายุ กรุณาเข้าสู่ระบบใหม่' }
+          }
+          response = await doUpload()
+        } else {
+          throw err
+        }
       }
 
-      return { success: true, data: data.data }
+      const newUrl = response?.data?.avatar_url
+
+      // ✅ สำคัญ: re-assign ทั้งก้อน เพื่อให้ cookie/reactivity อัปเดตชัวร์
+      if (newUrl && user.value) {
+        user.value = {
+          ...user.value,
+          profile: {
+            ...(user.value.profile ?? {
+              prefix: { th: '', en: '' },
+              first_name: '',
+              last_name: '',
+              phone: null,
+              avatar_url: null
+            }),
+            avatar_url: newUrl
+          }
+        }
+      }
+
+      // ✅ ถ้าต้องการ sync ให้ตรง server 100% ค่อย force refresh (optional)
+      await fetchUserProfile(true)
+
+      return { success: true, data: response.data }
     } catch (err: any) {
       console.error('Upload avatar failed:', err)
-      return { success: false, error: err.data?.message || 'อัปโหลดรูปภาพไม่สำเร็จ' }
+      return { success: false, error: err.data?.message || err.message || 'อัปโหลดรูปภาพไม่สำเร็จ' }
     }
   }
 
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index efcc6b6b..e07c214d 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -93,7 +93,10 @@
     "editPersonalDesc": "แก้ไขข้อมูลส่วนตัว",
     "yourAvatar": "รูปโปรไฟล์ของคุณ",
     "avatarHint": "เฉพาะไฟล์ png , jpg",
-    "uploadNew": "อัปโหลดรูปใหม่",
+    "uploadNew": "อัพโหลดรูปโปรไฟล์",
+    "changeAvatar": "เปลี่ยนรูปโปรไฟล์",
+    "removeAvatar": "ลบรูปโปรไฟล์",
+    "uploadLimit": "เฉพาะไฟล์ png, jpg, ขนาดไม่เกิน 5 MB",
     "prefix": "คำนำหน้า",
     "firstName": "ชื่อ",
     "lastName": "นามสกุล",
diff --git a/Frontend-Learner/pages/dashboard/profile.vue b/Frontend-Learner/pages/dashboard/profile.vue
index 53ae914c..bb2918cd 100644
--- a/Frontend-Learner/pages/dashboard/profile.vue
+++ b/Frontend-Learner/pages/dashboard/profile.vue
@@ -8,7 +8,7 @@ useHead({
   title: 'ตั้งค่าบัญชี - e-Learning'
 })
 
-const { currentUser, updateUserProfile, changePassword } = useAuth()
+const { currentUser, updateUserProfile, changePassword, uploadAvatar } = useAuth()
 const { t } = useI18n()
 const { errors, validate, clearFieldError } = useFormValidation()
 
@@ -79,17 +79,69 @@ const triggerUpload = () => {
   fileInput.value?.click()
 }
 
-const handleFileUpload = (event: Event) => {
+const handleFileUpload = async (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files[0]) {
+    const file = target.files[0]
+
+    // แสดงรูป Preview ก่อนอัปโหลด
     const reader = new FileReader()
     reader.onload = (e) => {
       userData.value.photoURL = e.target?.result as string
     }
-    reader.readAsDataURL(target.files[0])
+    reader.readAsDataURL(file)
+
+    // เรียกฟังก์ชัน uploadAvatar จาก useAuth
+    isProfileSaving.value = true
+    const result = await uploadAvatar(file)
+    isProfileSaving.value = false
+
+    if (result.success && result.data?.avatar_url) {
+       userData.value.photoURL = result.data.avatar_url
+    } else {
+       // ถ้า error (เช่น 500) ก็ยังคงรูป preview ไว้ หรือจะ alert ก็ได้
+       console.error('Upload failed:', result.error)
+       alert(result.error || t('profile.updateError'))
+    }
   }
 }
 
+const handleDeleteAvatar = async () => {
+    // 1. Clear local preview
+    userData.value.photoURL = ''
+    
+    // 2. Update Auth State
+    if (currentUser.value?.role) {
+         // Direct manipulation since useAuth is shared state
+         if (currentUser.value.photoURL) {
+             // We can't set currentUser directly as it is computed.
+             // We must access the underlying user state from useAuth?
+             // But we only destructured what we needed.
+         }
+    }
+    
+    // Access the user raw ref from useAuth would be better but we didn't destructure it.
+    // However, we can use a workaround: call updateUserProfile with empty avatar if supported OR just assume local state.
+    // The user requirement is: "If delete is clicked ... display q-avatar__content".
+    // Since we don't have a confirmed DELETE API, we will just update the visual state.
+    // To make it persist somewhat (until refresh), we update the cookie via a helper if possible, 
+    // BUT since we don't have access to `user` ref here (only currentUser computed), 
+    // let's grab `user` from useAuth() again or add it to destructure. 
+    
+    // Actually, I'll allow this component to just visual clear for now, 
+    // until we confirm API. But wait, `uploadAvatar` updates the global user state.
+    // We should probably export `user` from useAuth or Add a `clearAvatar` method to useAuth.
+    // For now, let's keep it simple in the component:
+    
+    // TODO: Call API to delete avatar if endpoint exists.
+    // For now, visual clear.
+    
+    const { user } = useAuth() // Re-access to get the raw user ref
+    if (user.value && user.value.profile) {
+        user.value.profile.avatar_url = null
+    }
+}
+
 const handleUpdateProfile = async () => {
   isProfileSaving.value = true
   
@@ -145,6 +197,18 @@ const handleUpdatePassword = async () => {
   isPasswordSaving.value = false
 }
 
+// Watch for changes in global user state (e.g. after avatar upload)
+watch(() => currentUser.value, (newUser) => {
+  if (newUser) {
+    userData.value.photoURL = newUser.photoURL || ''
+    userData.value.firstName = newUser.firstName
+    userData.value.lastName = newUser.lastName
+    userData.value.prefix = newUser.prefix?.th || ''
+    userData.value.email = newUser.email
+    userData.value.phone = newUser.phone || ''
+  }
+}, { deep: true })
+
 onMounted(() => {
   isHydrated.value = true
 })
@@ -233,7 +297,7 @@ onMounted(() => {
             {{ $t('profile.editPersonalDesc') }}
           </h2>
 
-          <q-form @submit="handleUpdateProfile" class="flex flex-col gap-6">
+          <div class="flex flex-col gap-6">
             
             <div class="flex items-center gap-6">
               <div class="relative group cursor-pointer" @click="triggerUpload">
@@ -244,27 +308,53 @@ onMounted(() => {
                   size="80"
                   class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
                 />
+                
+                <!-- Hover Overlay only if has photo (optional) or always? User didn't specify, keeping simple clickable -->
                 <div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <q-icon name="camera_alt" class="text-white text-xl" />
                 </div>
+                <!-- Hidden Input -->
                 <input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
               </div>
-              <div>
+              
+              <div class="flex flex-col gap-2">
                 <div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
-                <q-btn 
-                  flat 
-                  dense 
-                  no-caps 
-                  color="primary" 
-                  :label="$t('profile.uploadNew')" 
-                  size="sm" 
-                  @click="triggerUpload"
-                />
+                
+                <!-- Buttons Row -->
+                 <div class="flex items-center gap-3">
+                    <template v-if="userData.photoURL">
+                        <q-btn 
+                          unelevated
+                          rounded
+                          color="primary" 
+                          :label="$t('profile.changeAvatar')" 
+                          class="font-bold shadow-lg shadow-blue-500/30"
+                          @click="triggerUpload"
+                        />
+                    </template>
+                    <template v-else>
+                         <q-btn 
+                          unelevated
+                          rounded
+                          color="primary" 
+                          :label="$t('profile.uploadNew')" 
+                          class="font-bold shadow-lg shadow-blue-500/30"
+                          @click="triggerUpload"
+                        />
+                    </template>
+                 </div>
+
+                <!-- Add Limit Text -->
+                <div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                  {{ $t('profile.uploadLimit') }}
+                </div>
               </div>
             </div>
 
             <q-separator class="bg-slate-100 dark:bg-white/5" />
 
+            <q-form @submit="handleUpdateProfile" class="flex flex-col gap-6">
+
             <div class="grid grid-cols-1 gap-4">
                <div class="space-y-1">
                   <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
@@ -340,6 +430,8 @@ onMounted(() => {
               />
             </div>
           </q-form>
+          
+          </div> <!-- Close the wrapper div -->
         </div>