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

update the user profile so it works for non admins

Browse source
This commit is contained in:
zipben 2025-06-04 22:33:14 +00:00
parent 2fd6809624
commit 0d39fc429c
4 changed files with 142 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -42,14 +42,31 @@
</ui-tooltip>
</nuxt-link>
<nuxt-link :to="'/user/' + user.id" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded-sm shadow-xs ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left sm:text-sm cursor-pointer hover:bg-bg/40" aria-haspopup="listbox" aria-expanded="true">
<span class="items-center hidden md:flex">
<span class="block truncate">{{ username }}</span>
</span>
<span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
<span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
</span>
</nuxt-link>
<div class="relative">
<button @click="showProfileDropdown = !showProfileDropdown" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded-sm shadow-xs ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left sm:text-sm cursor-pointer hover:bg-bg/40" aria-haspopup="true" :aria-expanded="showProfileDropdown">
<span class="items-center hidden md:flex">
<span class="block truncate">{{ username }}</span>
</span>
<span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
<span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
</span>
</button>
<div v-if="showProfileDropdown" class="absolute right-0 mt-1 w-48 bg-bg border border-gray-500 rounded-sm shadow-lg z-50 overflow-hidden">
<nuxt-link :to="'/user/' + user.id" class="block px-4 py-2.5 text-sm text-white hover:bg-primary/40 transition-colors duration-150">
<div class="flex items-center">
<span class="material-symbols text-lg mr-2">&#xe7fd;</span>
Profile
</div>
</nuxt-link>
<button @click="logout" class="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-primary/40 transition-colors duration-150">
<div class="flex items-center">
<span class="material-symbols text-lg mr-2">&#xe9ba;</span>
Logout
</div>
</button>
</div>
</div>
</div>
<div v-show="numMediaItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
<h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numMediaItemsSelected]) }}</h1>
@ -87,7 +104,8 @@
export default {
data() {
return {
totalEntities: 0
totalEntities: 0,
showProfileDropdown: false
}
},
computed: {
@ -375,13 +393,54 @@ export default {
},
batchAutoMatchClick() {
this.$store.commit('globals/setShowBatchQuickMatchModal', true)
},
logout() {
this.showProfileDropdown = false
// Disconnect from socket if it exists and is connected
if (this.$root.socket && this.$root.socket.connected) {
try {
console.log('Disconnecting from socket', this.$root.socket.id)
this.$root.socket.removeAllListeners()
this.$root.socket.disconnect()
} catch (error) {
console.error('Error disconnecting socket:', error)
}
}
// Clear user data
localStorage.removeItem('token')
this.$store.commit('libraries/setUserPlaylists', [])
this.$store.commit('libraries/setCollections', [])
this.$store.commit('user/setUser', null)
// Logout request
this.$axios
.$post('/logout')
.catch((error) => {
console.error('Logout error:', error)
})
.finally(() => {
this.$router.push('/login')
})
}
},
mounted() {
this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
// Close dropdown when clicking outside
this.handleClickOutside = (e) => {
if (!this.$el.contains(e.target)) {
this.showProfileDropdown = false
}
}
document.addEventListener('click', this.handleClickOutside)
},
beforeDestroy() {
this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
// Remove event listener with proper reference
if (this.handleClickOutside) {
document.removeEventListener('click', this.handleClickOutside)
}
}
}
</script>

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

@ -10,7 +10,7 @@
<div v-else>
<!-- Tab Navigation -->
<div v-if="user" class="flex border-b border-white/10 mb-6">
<button class="px-4 py-2 mr-4 font-semibold rounded-t-lg" :class="activeTab === 'account' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
<button v-if="isCurrentUser" class="px-4 py-2 mr-4 font-semibold rounded-t-lg" :class="activeTab === 'account' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
<button class="px-4 py-2 font-semibold rounded-t-lg" :class="activeTab === 'reviews' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'reviews'">Reviews</button>
</div>
@ -143,7 +143,7 @@ export default {
return {
user: null,
reviews: [],
activeTab: 'account',
activeTab: 'reviews',
loading: true,
// Account tab data
password: null,
@ -196,9 +196,13 @@ export default {
try {
this.user = await this.$axios.$get('/api/users/' + this.$route.params.id)
if (this.isCurrentUser) {
this.activeTab = 'account'
this.displayNameInput = this.user.displayName || ''
this.selectedLanguage = this.$languageCodes.current
await this.loadEreaderDevices()
} else {
// Set default tab to reviews for other users
this.activeTab = 'reviews'
}
} catch (error) {
console.error('Error loading user:', error)
@ -367,4 +371,4 @@ export default {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
}
</style>
</style>