From f4b481e0bb8396d24f6f2d43b428fc57a44e8f0e Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 4 Sep 2019 13:33:58 +0200
Subject: [PATCH] Show the user profile image in the dropdown menu
---
packages/auth/src/vpu-auth.js | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js
index a34609ee..3c284509 100644
--- a/packages/auth/src/vpu-auth.js
+++ b/packages/auth/src/vpu-auth.js
@@ -31,6 +31,7 @@ class VPUAuth extends LitElement {
this.personId = "";
this.loggedIn = false;
this.rememberLogin = false
+ this.person = null;
// Create the events
this.initEvent = new CustomEvent("vpu-auth-init", { "detail": "KeyCloak init event", bubbles: true, composed: true });
@@ -56,6 +57,7 @@ class VPUAuth extends LitElement {
subject: { type: String, attribute: false },
personId: { type: String, attribute: false },
keycloak: { type: Object, attribute: false },
+ person: { type: Object, attribute: false },
};
}
@@ -125,6 +127,7 @@ class VPUAuth extends LitElement {
})
.then(response => response.json())
.then((person) => {
+ that.person = person;
window.VPUPerson = person;
that.dispatchPersonInitEvent();
});
@@ -250,6 +253,8 @@ class VPUAuth extends LitElement {
}
renderLoggedIn() {
+ const imageURL = (this.person && this.person.image) ? this.person.image : null;
+
return html`
<div class="dropdown" @click="${this.onDropdownClick}">
<div class="dropdown-trigger">
@@ -260,10 +265,10 @@ class VPUAuth extends LitElement {
</div>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
<div class="dropdown-content">
+ ${imageURL ? html`<img src="${imageURL}" width="40%" height="40%" class="dropdown-item">` : ''}
<a href="#" @click="${this.logout}" class="dropdown-item">
${i18n.t('logout')}
</a>
- </a>
</div>
</div>
</div>
--
GitLab