feat: refresh users avatar in header when the user changes their icon in their profile

Author: akinsey

src/components/images/ImageUploader.vue

@@ -122,7 +122,7 @@ export default {
     }
 
     // update loading status
-    function updateImagesUploading(index, percent, url) {
+    const updateImagesUploading = (index, percent, url) => {
       // on successful update
       if (percent) {
         // update images' progress sum

src/components/layout/Header.vue

@@ -349,6 +349,7 @@ export default {
       breadcrumbs: [{label:'Home', state: '#', opts: {}}]
     })
 
+    watch(() => $auth.user, u => v.currentUser = u, { deep: true })
     watch(() => $route.path, p => v.hideAnnnouncement = v.motdData?.main_view_only && p !== '' && p !== '/')
     watch(() => NotificationsStore.messages, c => v.notificationMessages = c)
     watch(() => NotificationsStore.mentions, c => v.notificationMentions = c)

src/components/modals/profile/UpdateAvatar.vue

@@ -36,6 +36,7 @@ import Modal from '@/components/layout/Modal.vue'
 import { reactive, toRefs, inject } from 'vue'
 import { usersApi } from '@/api'
 import { cloneDeep } from 'lodash'
+import { AuthStore } from '@/composables/stores/auth'
 
 export default {
   name: 'update-avatar-modal',
@@ -55,6 +56,7 @@ export default {
         v.userCopy.avatar = data.avatar
         $alertStore.success(`Successfully updated avatar for user ${params.username}`)
         Object.assign(v.userReactive, v.userCopy)
+        $auth.reauthenticate()
       })
       .catch(() => v.errorMessage = 'There was an error updating avatar.')
       .finally(() => v.errorMessage ? null : close())
@@ -69,6 +71,7 @@ export default {
     const uploadError = err => v.errorMessage = err
     /* Internal Data */
     const $alertStore = inject('$alertStore')
+    const $auth = inject(AuthStore)
 
     /* Template Data */
     const v = reactive({