added display name to users

client/pages/account.vue

@@ -12,6 +12,16 @@
             <ui-text-input-with-label disabled :value="usertype" :label="$strings.LabelAccountType" />
           </div>
         </div>
+        <form @submit.prevent="submitDisplayName">
+          <div class="flex -mx-2 mt-4">
+            <div class="w-2/3 px-2">
+              <ui-text-input-with-label v-model="displayNameInput" :label="'Display Name'" />
+            </div>
+            <div class="px-2 flex items-end">
+              <ui-btn type="submit" color="bg-success">Update</ui-btn>
+            </div>
+          </div>
+        </form>
         <div class="py-4">
           <p class="px-1 text-sm font-semibold">{{ $strings.LabelLanguage }}</p>
           <ui-dropdown v-model="selectedLanguage" :items="$languageCodeOptions" small class="max-w-48" @input="updateLocalLanguage" />
@@ -88,6 +98,7 @@ export default {
       confirmPassword: null,
       changingPassword: false,
       selectedLanguage: '',
+      displayNameInput: '',
       newEReaderDevice: {
         name: '',
         email: ''
@@ -103,7 +114,9 @@ export default {
       return this.$store.state.streamLibraryItem
     },
     user() {
-      return this.$store.state.user.user || null
+      const user = this.$store.state.user.user || null
+      console.log('[Account Page] Current user object:', user)
+      return user
     },
     username() {
       return this.user.username
@@ -111,6 +124,9 @@ export default {
     usertype() {
       return this.user.type
     },
+    displayName() {
+      return this.user.displayName || ''
+    },
     isRoot() {
       return this.usertype === 'root'
     },
@@ -237,11 +253,26 @@ export default {
     },
     ereaderDevicesUpdated(ereaderDevices) {
       this.ereaderDevices = ereaderDevices
+    },
+    async submitDisplayName() {
+      try {
+        await this.$axios.$patch(`/api/users/${this.user.id}`, {
+          displayName: this.displayNameInput
+        })
+        this.$toast.success('Display name updated successfully')
+        // Update the user in the store
+        const user = { ...this.user, displayName: this.displayNameInput }
+        this.$store.commit('user/setUser', user)
+      } catch (error) {
+        console.error('Failed to update display name:', error)
+        this.$toast.error('Failed to update display name')
+      }
     }
   },
   mounted() {
     this.selectedLanguage = this.$languageCodes.current
     this.ereaderDevices = this.$store.state.libraries.ereaderDevices || []
+    this.displayNameInput = this.displayName
   }
 }
 </script>

client/pages/config/users/_id/index.vue

@@ -107,7 +107,7 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     username() {
-      return this.user.username
+      return this.user.displayName || this.user.username
     },
     userOnline() {
       return this.$store.getters['users/getIsUserOnline'](this.user.id)

client/pages/config/users/_id/sessions.vue

@@ -92,7 +92,7 @@ export default {
   },
   computed: {
     username() {
-      return this.user.username
+      return this.user.displayName || this.user.username
     },
     userOnline() {
       return this.$store.getters['users/getIsUserOnline'](this.user.id)

client/pages/item/_id/index.vue

@@ -189,7 +189,7 @@
                   <div v-for="comment in sortedComments" :key="comment.id" class="bg-bg border rounded-lg p-4" :class="comment.userId === currentUser.id ? 'border-white border-4' : 'border-gray-700'">
                     <div class="flex justify-between items-start mb-2">
                       <div>
-                        <nuxt-link :to="'/user/' + comment.userId" class="font-semibold hover:text-white hover:underline">{{ comment.user.username }}</nuxt-link>
+                        <nuxt-link :to="'/user/' + comment.userId" class="font-semibold hover:text-white hover:underline">{{ comment.user.displayName || comment.user.username }}</nuxt-link>
                         <span class="text-sm text-gray-400 ml-2">
                           {{ formatDate(comment.createdAt) }}
                         </span>
@@ -1012,6 +1012,7 @@ export default {
     this.$root.socket.on('episode_download_started', this.episodeDownloadStarted)
     this.$root.socket.on('episode_download_finished', this.episodeDownloadFinished)
     this.$root.socket.on('episode_download_queue_cleared', this.episodeDownloadQueueCleared)
+    this.$root.socket.on('user_updated', this.loadComments)
   },
   beforeDestroy() {
     this.$eventBus.$off(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
@@ -1024,6 +1025,7 @@ export default {
     this.$root.socket.off('episode_download_started', this.episodeDownloadStarted)
     this.$root.socket.off('episode_download_finished', this.episodeDownloadFinished)
     this.$root.socket.off('episode_download_queue_cleared', this.episodeDownloadQueueCleared)
+    this.$root.socket.off('user_updated', this.loadComments)
   }
 }
 </script>

client/pages/user/_id/index.vue

@@ -2,7 +2,7 @@
   <div class="bg-bg min-h-screen">
     <div class="max-w-6xl mx-auto px-4 py-8">
       <div v-if="user" class="mb-8">
-        <h1 class="text-3xl font-semibold mb-2">{{ user.username }}'s Profile</h1>
+        <h1 class="text-3xl font-semibold mb-2">{{ user.displayName || user.username }}'s Profile</h1>
         <p class="text-gray-400">Member since {{ formatDate(user.createdAt) }}</p>
       </div>