mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-07-09 19:01:41 +00:00
moved the account info to a profile tab
This commit is contained in:
zipben
parent
ed6e59a9f1
commit
c45246c750
2 changed files with 300 additions and 30 deletions
|
|
@ -42,7 +42,7 @@
|
|||
</ui-tooltip>
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link to="/account" 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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,149 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<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.displayName || user.username }}'s Profile</h1>
|
||||
<p class="text-gray-400">Member since {{ formatDate(user.createdAt) }}</p>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<widgets-loading-spinner />
|
||||
</div>
|
||||
|
||||
<div v-if="reviews.length" class="space-y-6 pb-24">
|
||||
<h2 class="text-2xl font-semibold mb-4">Reviews</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<div v-for="review in reviews" :key="review.id" class="bg-primary rounded-lg overflow-hidden shadow-lg flex flex-col">
|
||||
<nuxt-link :to="'/item/' + review.libraryItemId" class="block flex-shrink-0" style="height: 280px">
|
||||
<div class="relative h-full w-full flex items-center justify-center">
|
||||
<covers-book-cover v-if="review.libraryItem" :library-item="review.libraryItem" :width="180" :book-cover-aspect-ratio="bookCoverAspectRatio" class="hover:scale-105 transition-transform duration-200" />
|
||||
<div v-else class="absolute inset-0 bg-gray-700 flex items-center justify-center">
|
||||
<span class="material-symbols text-4xl text-gray-400">book</span>
|
||||
<!-- Content when loaded -->
|
||||
<template v-else>
|
||||
<div v-if="user" class="mb-8">
|
||||
<h1 class="text-3xl font-semibold mb-2">{{ user.displayName || user.username }}</h1>
|
||||
<p class="text-gray-400">Member since {{ formatDate(user.createdAt) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 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" :class="activeTab === 'account' ? 'text-white border-b-2 border-white' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
|
||||
<button class="px-4 py-2 font-semibold" :class="activeTab === 'reviews' ? 'text-white border-b-2 border-white' : 'text-gray-400 hover:text-white'" @click="activeTab = 'reviews'">Reviews</button>
|
||||
</div>
|
||||
|
||||
<!-- Reviews Tab -->
|
||||
<div v-if="activeTab === 'reviews'" class="space-y-6 pb-24">
|
||||
<div v-if="reviews.length" class="space-y-6">
|
||||
<h2 class="text-2xl font-semibold mb-4">Reviews</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<div v-for="review in reviews" :key="review.id" class="bg-primary rounded-lg overflow-hidden shadow-lg flex flex-col">
|
||||
<nuxt-link :to="'/item/' + review.libraryItemId" class="block flex-shrink-0" style="height: 280px">
|
||||
<div class="relative h-full w-full flex items-center justify-center">
|
||||
<covers-book-cover v-if="review.libraryItem" :library-item="review.libraryItem" :width="180" :book-cover-aspect-ratio="bookCoverAspectRatio" class="hover:scale-105 transition-transform duration-200" />
|
||||
<div v-else class="absolute inset-0 bg-gray-700 flex items-center justify-center">
|
||||
<span class="material-symbols text-4xl text-gray-400">book</span>
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
|
||||
<div class="p-4 flex-grow">
|
||||
<nuxt-link :to="'/item/' + review.libraryItemId" class="block">
|
||||
<h3 class="text-lg font-semibold mb-2 hover:text-white transition-colors line-clamp-1">{{ review.libraryItem?.title || 'Unknown Book' }}</h3>
|
||||
</nuxt-link>
|
||||
|
||||
<div class="flex mb-3">
|
||||
<span v-for="star in 5" :key="star" class="abs-icons icon-star" :class="star <= review.rating ? 'text-yellow-500' : 'text-gray-500'"></span>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-300 text-sm mb-2 line-clamp-3">{{ review.text }}</p>
|
||||
<p class="text-gray-400 text-xs">{{ formatDate(review.createdAt) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-gray-400">{{ user.username }} hasn't written any reviews yet.</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 flex-grow">
|
||||
<nuxt-link :to="'/item/' + review.libraryItemId" class="block">
|
||||
<h3 class="text-lg font-semibold mb-2 hover:text-white transition-colors line-clamp-1">{{ review.libraryItem?.title || 'Unknown Book' }}</h3>
|
||||
</nuxt-link>
|
||||
|
||||
<div class="flex mb-3">
|
||||
<span v-for="star in 5" :key="star" class="abs-icons icon-star" :class="star <= review.rating ? 'text-yellow-500' : 'text-gray-500'"></span>
|
||||
<!-- Account Tab -->
|
||||
<div v-if="activeTab === 'account' && isCurrentUser" class="max-w-xl">
|
||||
<div class="my-4">
|
||||
<div class="flex -mx-2">
|
||||
<div class="w-2/3 px-2">
|
||||
<ui-text-input-with-label disabled :value="user.username" label="Username" />
|
||||
</div>
|
||||
<div class="w-1/3 px-2">
|
||||
<ui-text-input-with-label disabled :value="user.type" label="Account Type" />
|
||||
</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>
|
||||
|
||||
<p class="text-gray-300 text-sm mb-2 line-clamp-3">{{ review.text }}</p>
|
||||
<p class="text-gray-400 text-xs">{{ formatDate(review.createdAt) }}</p>
|
||||
<div class="py-4">
|
||||
<p class="px-1 text-sm font-semibold">Language</p>
|
||||
<ui-dropdown v-model="selectedLanguage" :items="$languageCodeOptions" small class="max-w-48" @input="updateLocalLanguage" />
|
||||
</div>
|
||||
|
||||
<div class="w-full h-px bg-white/10 my-4" />
|
||||
|
||||
<div v-if="showChangePasswordForm">
|
||||
<p class="mb-4 text-lg">Change Password</p>
|
||||
<form @submit.prevent="submitChangePassword">
|
||||
<ui-text-input-with-label v-model="password" :disabled="changingPassword" type="password" label="Current Password" class="my-2" />
|
||||
<ui-text-input-with-label v-model="newPassword" :disabled="changingPassword" type="password" label="New Password" class="my-2" />
|
||||
<ui-text-input-with-label v-model="confirmPassword" :disabled="changingPassword" type="password" label="Confirm Password" class="my-2" />
|
||||
<div class="flex items-center py-2">
|
||||
<p v-if="isRoot" class="text-error py-2 text-xs">* Root user password changes affect the server configuration</p>
|
||||
<div class="grow" />
|
||||
<ui-btn v-show="(password && newPassword && confirmPassword) || isRoot" type="submit" :loading="changingPassword" color="bg-success">Submit</ui-btn>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="showEreaderTable">
|
||||
<div class="w-full h-px bg-white/10 my-4" />
|
||||
<app-settings-content header-text="E-Reader Devices">
|
||||
<template #header-items>
|
||||
<div class="grow" />
|
||||
<ui-btn color="bg-primary" small @click="addNewDeviceClick">Add Device</ui-btn>
|
||||
</template>
|
||||
|
||||
<table v-if="ereaderDevices.length" class="tracksTable mt-4">
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Email</th>
|
||||
<th class="w-40"></th>
|
||||
</tr>
|
||||
<tr v-for="device in ereaderDevices" :key="device.name">
|
||||
<td>
|
||||
<p class="text-sm md:text-base text-gray-100">{{ device.name }}</p>
|
||||
</td>
|
||||
<td class="text-left">
|
||||
<p class="text-sm md:text-base text-gray-100">{{ device.email }}</p>
|
||||
</td>
|
||||
<td class="w-40">
|
||||
<div class="flex justify-end items-center h-10">
|
||||
<ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" :disabled="deletingDeviceName === device.name || device.users?.length !== 1" class="mx-1" @click="editDeviceClick(device)" />
|
||||
<ui-icon-btn icon="delete" borderless :size="8" icon-font-size="1.1rem" :disabled="deletingDeviceName === device.name || device.users?.length !== 1" @click="deleteDeviceClick(device)" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div v-else-if="!loading" class="text-center py-4">
|
||||
<p class="text-lg text-gray-100">No devices added yet</p>
|
||||
</div>
|
||||
</app-settings-content>
|
||||
</div>
|
||||
|
||||
<div class="py-4 mt-8 flex">
|
||||
<ui-btn color="bg-primary flex items-center text-lg" @click="logout"> <span class="material-symbols mr-4 icon-text">logout</span>Logout </ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="user" class="text-gray-400">{{ user.username }} hasn't written any reviews yet.</div>
|
||||
<div v-else class="text-gray-400">Loading...</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-if="!user && !loading" class="text-center py-12">
|
||||
<p class="text-error text-lg">Error loading user profile</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<modals-emails-user-e-reader-device-modal v-if="isCurrentUser" v-model="showEReaderDeviceModal" :existing-devices="revisedEreaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,7 +152,20 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
user: null,
|
||||
reviews: []
|
||||
reviews: [],
|
||||
activeTab: 'account',
|
||||
loading: true,
|
||||
// Account tab data
|
||||
password: null,
|
||||
newPassword: null,
|
||||
confirmPassword: null,
|
||||
changingPassword: false,
|
||||
selectedLanguage: '',
|
||||
displayNameInput: '',
|
||||
ereaderDevices: [],
|
||||
deletingDeviceName: null,
|
||||
selectedEReaderDevice: null,
|
||||
showEReaderDeviceModal: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -54,6 +174,28 @@ export default {
|
|||
},
|
||||
bookCoverAspectRatio() {
|
||||
return this.$store.getters['libraries/getBookCoverAspectRatio']
|
||||
},
|
||||
isCurrentUser() {
|
||||
return this.user?.id === this.$store.state.user.user?.id
|
||||
},
|
||||
isRoot() {
|
||||
return this.user?.type === 'root'
|
||||
},
|
||||
isGuest() {
|
||||
return this.user?.type === 'guest'
|
||||
},
|
||||
isPasswordAuthEnabled() {
|
||||
const activeAuthMethods = this.$store.getters['getServerSetting']('authActiveAuthMethods') || []
|
||||
return activeAuthMethods.includes('local')
|
||||
},
|
||||
showChangePasswordForm() {
|
||||
return !this.isGuest && this.isPasswordAuthEnabled
|
||||
},
|
||||
showEreaderTable() {
|
||||
return this.user?.type !== 'root' && this.user?.type !== 'admin' && this.user?.permissions?.createEreader
|
||||
},
|
||||
revisedEreaderDevices() {
|
||||
return this.ereaderDevices.filter((device) => device.users?.length === 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -63,6 +205,11 @@ export default {
|
|||
async loadUser() {
|
||||
try {
|
||||
this.user = await this.$axios.$get('/api/users/' + this.$route.params.id)
|
||||
if (this.isCurrentUser) {
|
||||
this.displayNameInput = this.user.displayName || ''
|
||||
this.selectedLanguage = this.$languageCodes.current
|
||||
await this.loadEreaderDevices()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading user:', error)
|
||||
this.$toast.error('Error loading user profile')
|
||||
|
|
@ -71,17 +218,122 @@ export default {
|
|||
async loadReviews() {
|
||||
try {
|
||||
const reviews = await this.$axios.$get('/api/users/' + this.$route.params.id + '/reviews')
|
||||
console.log('Raw reviews data:', JSON.stringify(reviews, null, 2))
|
||||
this.reviews = reviews
|
||||
} catch (error) {
|
||||
console.error('Error loading reviews:', error)
|
||||
this.$toast.error('Error loading reviews')
|
||||
}
|
||||
},
|
||||
async loadEreaderDevices() {
|
||||
try {
|
||||
const response = await this.$axios.$get('/api/users/' + this.user.id + '/ereader-devices')
|
||||
this.ereaderDevices = response.devices || []
|
||||
} catch (error) {
|
||||
console.error('Error loading e-reader devices:', error)
|
||||
}
|
||||
},
|
||||
updateLocalLanguage(lang) {
|
||||
this.$setLanguageCode(lang)
|
||||
},
|
||||
async submitDisplayName() {
|
||||
try {
|
||||
await this.$axios.$patch('/api/users/' + this.user.id, {
|
||||
displayName: this.displayNameInput
|
||||
})
|
||||
this.$toast.success('Display name updated')
|
||||
await this.loadUser()
|
||||
} catch (error) {
|
||||
console.error('Error updating display name:', error)
|
||||
this.$toast.error('Error updating display name')
|
||||
}
|
||||
},
|
||||
async submitChangePassword() {
|
||||
if (this.newPassword !== this.confirmPassword) {
|
||||
return this.$toast.error('Passwords do not match')
|
||||
}
|
||||
if (this.password === this.newPassword) {
|
||||
return this.$toast.error('New password must be different')
|
||||
}
|
||||
this.changingPassword = true
|
||||
try {
|
||||
await this.$axios.$patch('/api/me/password', {
|
||||
password: this.password,
|
||||
newPassword: this.newPassword
|
||||
})
|
||||
this.$toast.success('Password updated successfully')
|
||||
this.password = null
|
||||
this.newPassword = null
|
||||
this.confirmPassword = null
|
||||
} catch (error) {
|
||||
console.error('Error updating password:', error)
|
||||
this.$toast.error('Error updating password')
|
||||
} finally {
|
||||
this.changingPassword = false
|
||||
}
|
||||
},
|
||||
addNewDeviceClick() {
|
||||
this.selectedEReaderDevice = null
|
||||
this.showEReaderDeviceModal = true
|
||||
},
|
||||
editDeviceClick(device) {
|
||||
this.selectedEReaderDevice = device
|
||||
this.showEReaderDeviceModal = true
|
||||
},
|
||||
async deleteDeviceClick(device) {
|
||||
try {
|
||||
this.deletingDeviceName = device.name
|
||||
await this.$axios.$delete(`/api/users/${this.user.id}/ereader-devices/${device.name}`)
|
||||
this.$toast.success('Device removed')
|
||||
await this.loadEreaderDevices()
|
||||
} catch (error) {
|
||||
console.error('Error deleting device:', error)
|
||||
this.$toast.error('Error removing device')
|
||||
} finally {
|
||||
this.deletingDeviceName = null
|
||||
}
|
||||
},
|
||||
async ereaderDevicesUpdated() {
|
||||
await this.loadEreaderDevices()
|
||||
},
|
||||
logout() {
|
||||
if (this.$root.socket) {
|
||||
console.log('Disconnecting from socket', this.$root.socket.id)
|
||||
this.$root.socket.removeAllListeners()
|
||||
this.$root.socket.disconnect()
|
||||
}
|
||||
|
||||
if (localStorage.getItem('token')) {
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
this.$store.commit('libraries/setUserPlaylists', [])
|
||||
this.$store.commit('libraries/setCollections', [])
|
||||
|
||||
this.$axios
|
||||
.$post('/logout')
|
||||
.then((logoutPayload) => {
|
||||
const redirect_url = logoutPayload.redirect_url
|
||||
if (redirect_url) {
|
||||
window.location.href = redirect_url
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
async init() {
|
||||
this.loading = true
|
||||
try {
|
||||
await this.loadUser()
|
||||
await this.loadReviews()
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadUser()
|
||||
await this.loadReviews()
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -107,4 +359,22 @@ export default {
|
|||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tracksTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.tracksTable th,
|
||||
.tracksTable td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tracksTable th {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue