Fix: account dropdown improvements (#3636)

This commit is contained in:
Tiago Vasconcelos 2025-12-07 12:35:04 +00:00 committed by GitHub
parent 245569d0b9
commit a762529fef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 40 additions and 13 deletions

File diff suppressed because one or more lines are too long

View file

@ -39,16 +39,32 @@ window.app.component('lnbits-header', {
return this.USE_CUSTOM_LOGO || null
},
userPictureUrl() {
return this.g.user.config.picture
return this.g.user.extra.picture
},
hasUserPicture() {
return this.g.user && this.g.user.config && this.g.user.config.picture
return this.g.user && this.g.user.extra && this.g.user.extra.picture != ''
},
showAdmin() {
return this.g.user && (this.g.user.super_user || this.g.user.admin)
},
showVoidwallet() {
return this.g.user && this.VOIDWALLET == true
},
displayName() {
return (
this.g.user?.extra?.display_name ||
this.g.user?.extra?.first_name ||
'Anon'
)
},
displayRole() {
if (this.g.user?.super_user) {
return 'Super User'
} else if (this.g.user?.admin) {
return 'Admin'
} else {
return 'User'
}
}
}
})

View file

@ -81,16 +81,27 @@
class="q-pl-sm"
>
<template v-slot:label>
<div>
<q-img
v-if="hasUserPicture"
:src="userPictureUrl"
style="max-width: 32px"
></q-img>
<q-icon v-else name="account_circle" />
</div>
<q-avatar v-if="hasUserPicture" size="18px">
<q-img :src="userPictureUrl"></q-img>
</q-avatar>
<q-avatar v-else icon="account_circle"></q-avatar>
</template>
<q-list>
<q-list style="max-width: 200px">
<q-item>
<q-item-section avatar v-if="hasUserPicture">
<q-avatar size="md">
<img :src="userPictureUrl" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label
class="ellipsis"
v-text="displayName"
></q-item-label>
<q-item-label caption v-text="displayRole"></q-item-label>
</q-item-section>
</q-item>
<q-separator></q-separator>
<q-item to="/account" clickable v-close-popup>
<q-item-section>
<q-item-label>

View file

@ -360,7 +360,7 @@
:label="$t('change_password')"
filled
color="primary"
class="float-right"
class="float-right q-mb-md"
></q-btn>
</q-card-section>
</div>