diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js index a34609ee61e16b99351b3b9227eeff399b9c9742..3c284509d632da428f950df9fe9590dd53989a91 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>