groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-09 19:01:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

added display name to users

Browse source
This commit is contained in:
zipben 2025-06-04 16:04:28 +00:00
parent cbb8950b46
commit c0294f4c39
16 changed files with 112 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/components/app/Appbar.vue
View file

@ -116,7 +116,7 @@ export default {
return this.$store.getters['user/getIsAdminOrUp']
},
username() {
return this.user ? this.user.username : 'err'
return this.user ? this.user.displayName || this.user.username : 'err'
},
numMediaItemsSelected() {
return this.selectedMediaItems.length

6
client/components/modals/AccountModal.vue
View file

@ -18,9 +18,14 @@
</div>
</div>
<div v-show="!isEditingRoot" class="flex py-2">
<div class="w-1/2 px-2">
<ui-text-input-with-label v-model.trim="newUser.displayName" :label="'Display Name'" />
</div>
<div class="w-1/2 px-2">
<ui-text-input-with-label v-model.trim="newUser.email" :label="$strings.LabelEmail" />
</div>
</div>
<div v-show="!isEditingRoot" class="flex py-2">
<div class="px-2 w-52">
<ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" small @input="userTypeUpdated" />
</div>
@ -387,6 +392,7 @@ export default {
username: null,
email: null,
password: null,
displayName: null,
type: 'user',
isActive: true,
permissions: {

4
client/components/tables/UsersTable.vue
View file

@ -4,6 +4,7 @@
<table id="accounts">
<tr>
<th>{{ $strings.LabelUsername }}</th>
<th>{{ $strings.LabelDisplayName }}</th>
<th class="w-20">{{ $strings.LabelAccountType }}</th>
<th class="hidden lg:table-cell">{{ $strings.LabelActivity }}</th>
<th class="w-32 hidden sm:table-cell">{{ $strings.LabelLastSeen }}</th>
@ -17,6 +18,9 @@
<p class="pl-2 truncate">{{ user.username }}</p>
</div>
</td>
<td>
<p class="truncate">{{ user.displayName || '-' }}</p>
</td>
<td class="text-sm">{{ user.type }}</td>
<td class="hidden lg:table-cell">
<div v-if="usersOnline[user.id]?.session?.displayTitle">

33
client/pages/account.vue
View file

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

2
client/pages/config/users/_id/index.vue
View file

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

2
client/pages/config/users/_id/sessions.vue
View file

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

4
client/pages/item/_id/index.vue
View file

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

2
client/pages/user/_id/index.vue
View file

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