Fix: account dropdown improvements (#3636)

lnbits/static/js/components/lnbits-header.js

@@ -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'
+      }
     }
   }
 })

lnbits/templates/components/lnbits-header.vue

@@ -81,16 +81,27 @@
         class="q-pl-sm"
       >
         <template v-slot:label>
-          <div>
+          <q-avatar v-if="hasUserPicture" size="18px">
-            <q-img
+            <q-img :src="userPictureUrl"></q-img>
-              v-if="hasUserPicture"
+          </q-avatar>
-              :src="userPictureUrl"
+          <q-avatar v-else icon="account_circle"></q-avatar>
-              style="max-width: 32px"
-            ></q-img>
-            <q-icon v-else name="account_circle" />
-          </div>
         </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>

lnbits/templates/pages/account.vue

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