diff --git a/packages/auth/src/auth-button.js b/packages/auth/src/auth-button.js
index 3b2608cb527e0002292dc7f5d9bbababa92dd5ca..1e855ddfcf6c2bdc4d71563331c97a44831a5901 100644
--- a/packages/auth/src/auth-button.js
+++ b/packages/auth/src/auth-button.js
@@ -7,17 +7,57 @@ import {LitElement} from "lit-element";
import {Icon, EventBus} from 'vpu-common';
import {LoginStatus} from './util.js';
+let logoutSVG = `
+<svg
+ viewBox="0 0 100 100"
+ y="0px"
+ x="0px"
+ id="icon"
+ role="img"
+ version="1.1">
+<g
+ id="g6">
+ <path
+ d="m 20.749313,38.894934 -5.885859,6.967885 h 43.408213 c 1.839331,0 3.433418,1.741972 3.433418,4.064599 0,2.322628 -1.471465,4.064599 -3.433418,4.064599 H 14.863454 l 5.885859,6.967883 c 1.348843,1.596808 1.348843,4.064599 0,5.661406 -1.348843,1.596808 -3.433418,1.596808 -4.782261,0 L 1.9881356,49.927418 15.967052,33.378693 c 1.348843,-1.596806 3.433418,-1.596806 4.782261,0 1.348843,1.596807 1.348843,4.064599 0,5.516241 z"
+ id="path2"
+ style="stroke-width:1.33417916"
+ inkscape:connector-curvature="0" />
+ <path
+ style="stroke-width:0.67017764"
+ d="M 61.663665,16.308792 C 48.158763,16.560171 35.913199,25.828579 30.896087,38.197464 34.816744,37.806184 40.033349,39.91491 41.470306,35.017776 50.594944,21.215302 72.517616,20.362655 82.800384,33.07637 93.497261,44.618596 90.228387,65.093356 76.499603,72.791214 64.104901,80.786232 45.895432,75.593227 39.470306,62.310745 35.613955,62.60637 27.974792,60.593775 32.925384,66.267776 41.232037,82.878292 64.023613,89.46919 79.876556,79.765823 96.140149,70.989504 102.10102,48.145494 91.970306,32.629104 85.705979,22.257901 73.793809,15.772382 61.663665,16.308792 Z"
+ id="path4"
+ inkscape:connector-curvature="0" />
+</g>
+</svg>
+`;
+
+let loginSVG = `
+<svg
+ viewBox="0 0 100 100"
+ y="0px"
+ x="0px"
+ id="icon"
+ role="img"
+ version="1.1">
+<g
+ id="g6">
+ <path
+ style="stroke-width:1.33417916"
+ id="path2"
+ d="m 42.943908,38.894934 5.885859,6.967885 H 5.4215537 c -1.8393311,0 -3.4334181,1.741972 -3.4334181,4.064599 0,2.322628 1.4714649,4.064599 3.4334181,4.064599 H 48.829767 L 42.943908,60.9599 c -1.348843,1.596808 -1.348843,4.064599 0,5.661406 1.348843,1.596808 3.433418,1.596808 4.782261,0 L 61.705085,49.927418 47.726169,33.378693 c -1.348843,-1.596806 -3.433418,-1.596806 -4.782261,0 -1.348843,1.596807 -1.348843,4.064599 0,5.516241 z" />
+ <path
+ id="path4"
+ d="m 50,2.3007812 c -18.777325,0 -35.049449,10.9124408 -42.8261719,26.7246098 H 13.390625 C 20.672112,16.348362 34.336876,7.8007812 50,7.8007812 73.3,7.8007812 92.300781,26.7 92.300781,50 92.300781,73.3 73.3,92.300781 50,92.300781 c -15.673389,0 -29.345175,-8.60579 -36.623047,-21.326172 H 7.1640625 C 14.942553,86.8272 31.242598,97.800781 50.099609,97.800781 76.399609,97.800781 97.900391,76.4 97.900391,50 97.800391,23.7 76.3,2.3007812 50,2.3007812 Z" />
+</g>
+</svg>
+`;
+
export class AuthButton extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
- this.showProfile = false;
- this.showImage = false;
this._loginData = {};
-
- this.closeDropdown = this.closeDropdown.bind(this);
- this.onWindowResize = this.onWindowResize.bind(this);
}
static get scopedElements() {
@@ -29,16 +69,10 @@ export class AuthButton extends ScopedElementsMixin(LitElement) {
static get properties() {
return {
lang: { type: String },
- showProfile: { type: Boolean, attribute: 'show-profile' },
- showImage: { type: Boolean, attribute: 'show-image' },
_loginData: { type: Object, attribute: false },
};
}
- onWindowResize() {
- this.updateDropdownWidth();
- }
-
connectedCallback() {
super.connectedCallback();
@@ -46,41 +80,21 @@ export class AuthButton extends ScopedElementsMixin(LitElement) {
this._bus.subscribe('auth-update', (data) => {
this._loginData = data;
});
-
- window.addEventListener('resize', this.onWindowResize);
- document.addEventListener('click', this.closeDropdown);
}
disconnectedCallback() {
- window.removeEventListener('resize', this.onWindowResize);
this._bus.close();
- document.removeEventListener('click', this.closeDropdown);
super.disconnectedCallback();
}
- /**
- * Set the dropdown width to almost the width of the web component
- * We need to set the width manually because a percent width is in relation to the viewport
- */
- updateDropdownWidth() {
- const dropdown = this.shadowRoot.querySelector("div.dropdown-menu");
-
- if (!dropdown) {
- return;
- }
-
- let viewportOffset = this.getBoundingClientRect();
- let spaceToRIght = window.innerWidth - viewportOffset.left;
- dropdown.setAttribute("style", `width: ${spaceToRIght - 20}px`);
- }
-
- onLoginClicked(e) {
+ _onLoginClicked(e) {
this._bus.publish('auth-login');
e.preventDefault();
}
- onLogoutClicked(e) {
+ _onLogoutClicked(e) {
this._bus.publish('auth-logout');
+ e.preventDefault();
}
update(changedProperties) {
@@ -108,77 +122,11 @@ export class AuthButton extends ScopedElementsMixin(LitElement) {
text-decoration: none;
}
- img {
- border-width: var(--vpu-border-width);
- border-color: var(--vpu-dark);
- border-style: solid;
- }
-
- .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
- display: block;
- }
-
- .dropdown-menu {
- display: none;
- min-width: 5em;
- max-width: 25em;
- position: absolute;
- z-index: 20;
- border: solid 1px black;
- border-radius: var(--vpu-border-radius);
- overflow: hidden;
- background-color: white;
- }
-
- .dropdown-content {
- background-color: white;
- padding-bottom: 0.5rem;
- padding-top: 0.5rem;
- }
-
- .dropdown-content img {
- max-width: 120px;
- }
-
- .menu a {
- /*padding: 0.3em;*/
- font-weight: 400;
- color: #000;
- display: block;
- text-decoration: none;
- }
-
- .menu a:hover {
- color: #E4154B;
- }
-
- .menu a.selected { color: white; background-color: black; }
-
- .dropdown-item {
- color: #4a4a4a;
- display: block;
- font-size: 0.875rem;
- line-height: 1.5;
- padding: 0.375rem 1rem;
- position: relative;
- }
-
- .dropdown, img.login {
- cursor: pointer;
- }
-
- a.dropdown-item {
- width: initial !important;
- }
-
- .main-button {
- min-width: 150px;
- }
-
- .menu-icon {
- height: 1em;
- width: 1em;
- vertical-align: -0.1rem;
+ .login-box {
+ display: flex;
+ align-items: center;
+ padding: 0.3em 0.4em;
+ transition: background-color 0.15s, color 0.15s;
}
.login-box svg {
@@ -187,141 +135,42 @@ export class AuthButton extends ScopedElementsMixin(LitElement) {
display: flex;
}
- .login-button {
- padding: 0.3em 0.4em;
- transition: background-color 0.15s, color 0.15s;
+ .login-box:hover svg path {
+ fill: var(--vpu-light);
}
- .login-button:hover {
+ .login-box:hover {
background-color: var(--vpu-dark);
color: var(--vpu-light);
cursor: pointer;
transition: none;
}
- .login-box {
- display: flex;
- align-items: center;
- }
-
- .login-box:hover svg path {
- fill: var(--vpu-light);
- }
-
.login-box .label {
padding-left: 0.2em;
}
-
- .dropdown-trigger {
- display: flex;
- align-items: center;
- }
-
- .dropdown-trigger .name {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- min-width: 0;
- margin-right: 0.5em
- }
`;
}
- setChevron(name) {
- const chevron = this.shadowRoot.querySelector("#menu-chevron-icon");
- if (chevron !== null) {
- chevron.name = name;
- }
- }
-
- onDropdownClick(event) {
- event.stopPropagation();
- event.currentTarget.classList.toggle('is-active');
- this.setChevron(event.currentTarget.classList.contains('is-active') ? 'chevron-up' : 'chevron-down');
- this.updateDropdownWidth();
- }
-
- closeDropdown() {
- var dropdowns = this.shadowRoot.querySelectorAll('.dropdown');
- dropdowns.forEach(function (el) {
- el.classList.remove('is-active');
- });
- this.setChevron('chevron-down');
- }
-
- onProfileClicked(event) {
- event.preventDefault();
- const profileEvent = new CustomEvent("vpu-auth-profile", {
- "detail": "Profile event",
- bubbles: true,
- composed: true,
- });
- this.dispatchEvent(profileEvent);
- }
-
- renderLoggedIn() {
- const person = this._loginData.person;
- const imageURL = (this.showImage && person && person.image) ? person.image : null;
-
- return html`
- <div class="dropdown" @click="${this.onDropdownClick}">
- <a href="#">
- <div class="dropdown-trigger login-button">
- <div class="name">${this._loginData.name}</div>
- <vpu-icon class="menu-icon" name="chevron-down" id="menu-chevron-icon"></vpu-icon>
+ render() {
+ if (this._loginData.status === LoginStatus.LOGGED_IN) {
+ return html`
+ <a href="#" @click="${this._onLogoutClicked}">
+ <div class="login-box login-button">
+ <div class="icon">${unsafeHTML(logoutSVG)}</div>
+ <div class="label">${i18n.t('logout')}</div>
</div>
</a>
- <div class="dropdown-menu" id="dropdown-menu2" role="menu">
- <div class="dropdown-content" @blur="${this.closeDropdown}">
- ${imageURL ? html`<div class="dropdown-item"><img alt="" src="${imageURL}"></div>` : ''}
- <div class="menu">
- ${this.showProfile ? html`<a href="#" @click="${this.onProfileClicked}" class="dropdown-item">${i18n.t('profile')}</a>` :''}
- <a href="#" @click="${this.onLogoutClicked}" class="dropdown-item">${i18n.t('logout')}</a>
- </div>
+ `;
+ } else {
+ return html`
+ <a href="#" @click="${this._onLoginClicked}">
+ <div class="login-box login-button">
+ <div class="icon">${unsafeHTML(loginSVG)}</div>
+ <div class="label">${i18n.t('login')}</div>
</div>
- </div>
- </div>
- `;
- }
-
- renderLoggedOut() {
- let loginSVG = `
- <svg
- viewBox="0 0 100 100"
- y="0px"
- x="0px"
- id="icon"
- role="img"
- version="1.1">
- <g
- id="g6">
- <path
- style="stroke-width:1.33417916"
- id="path2"
- d="m 42.943908,38.894934 5.885859,6.967885 H 5.4215537 c -1.8393311,0 -3.4334181,1.741972 -3.4334181,4.064599 0,2.322628 1.4714649,4.064599 3.4334181,4.064599 H 48.829767 L 42.943908,60.9599 c -1.348843,1.596808 -1.348843,4.064599 0,5.661406 1.348843,1.596808 3.433418,1.596808 4.782261,0 L 61.705085,49.927418 47.726169,33.378693 c -1.348843,-1.596806 -3.433418,-1.596806 -4.782261,0 -1.348843,1.596807 -1.348843,4.064599 0,5.516241 z" />
- <path
- id="path4"
- d="m 50,2.3007812 c -18.777325,0 -35.049449,10.9124408 -42.8261719,26.7246098 H 13.390625 C 20.672112,16.348362 34.336876,7.8007812 50,7.8007812 73.3,7.8007812 92.300781,26.7 92.300781,50 92.300781,73.3 73.3,92.300781 50,92.300781 c -15.673389,0 -29.345175,-8.60579 -36.623047,-21.326172 H 7.1640625 C 14.942553,86.8272 31.242598,97.800781 50.099609,97.800781 76.399609,97.800781 97.900391,76.4 97.900391,50 97.800391,23.7 76.3,2.3007812 50,2.3007812 Z" />
- </g>
- </svg>
- `;
-
- return html`
- <a href="#" @click="${this.onLoginClicked}">
- <div class="login-box login-button">
- <div class="icon">${unsafeHTML(loginSVG)}</div>
- <div class="label">${i18n.t('login')}</div>
- </div>
- </a>
- `;
- }
-
- render() {
- const loggedIn = (this._loginData.status === LoginStatus.LOGGED_IN);
- return html`
- <div class="authbox">
- ${loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}
- </div>
- `;
+ </a>
+ `;
+ }
}
}
\ No newline at end of file