@teipublisher/pb-components 2.25.3 → 2.26.1-next.1

package/src/pb-login.js

@@ -2,13 +2,11 @@ import { LitElement, html, css } from 'lit-element';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { registry } from "./urls.js";
+import { PbDialog } from './pb-dialog.js';
 import '@polymer/iron-ajax';
-import '@polymer/paper-dialog';
-import '@polymer/paper-dialog-scrollable';
-import '@polymer/paper-input/paper-input.js';
-import '@polymer/paper-button';
 import '@polymer/iron-icons';
 import { minVersion } from './utils.js';
+import { pbLightDom } from './pb-light-dom.js';
 
 /**
  * Handles login/logout. Shows a link which opens a login dialog if clicked.
@@ -20,7 +18,8 @@ import { minVersion } from './utils.js';
  * @csspart message-invalid - Block displayed if login is invalid
  * @csspart group-invalid - Text displayed if login is invalid concerning group
  */
-export class PbLogin extends pbMixin(LitElement) {
+export class PbLogin extends pbLightDom(pbMixin(LitElement)) {
+
     static get properties() {
         return {
             ...super.properties,
@@ -106,8 +105,13 @@ export class PbLogin extends pbMixin(LitElement) {
 
     firstUpdated() {
         super.firstUpdated();
-        this._checkLogin = this.shadowRoot.getElementById('checkLogin');
-        this._loginDialog = this.shadowRoot.getElementById('loginDialog');
+        this._checkLogin = this.renderRoot.querySelector('.checkLogin');
+        this._loginDialog = this.renderRoot.querySelector('pb-dialog');
+
+        this.renderRoot.querySelector('form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this._confirmLogin();
+        });
 
         window.addEventListener('blur', () => {
             this._hasFocus = false;
@@ -140,75 +144,46 @@ export class PbLogin extends pbMixin(LitElement) {
     }
 
     render() {
+        const logoutIcon = this.fillSlot('icon-login', html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
+  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
+</svg>`);
+        const loginIcon = this.fillSlot('icon-logout', html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
+  <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
+  <path d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/>
+</svg>`);
         return html`
-            <a href="#" @click="${this._show}" role="button" title="${this.user ? this.user : this.loginLabel}">
+            <a href="#" @click="${this._show}" role="button" title="${this.user ? translate(this.logoutLabel, { user: this.user }) : translate(this.loginLabel)}">
                 ${
-            this.loggedIn ?
-                html`<iron-icon icon="${this.logoutIcon}"></iron-icon> <span class="label">${translate(this.logoutLabel, { user: this.user })}</span>` :
-                html`<iron-icon icon="${this.loginIcon}"></iron-icon> <span class="label">${translate(this.loginLabel)}</span>`
-            }
+                this.loggedIn ?
+                    loginIcon :
+                    logoutIcon
+                }
             </a>
 
-            <paper-dialog id="loginDialog" ?modal="${this.auto}">
-                <h2>${translate('login.login')}</h2>
-                <paper-dialog-scrollable>
-                    <form action="login">
-                        <paper-input id="user" name="user" label="${translate('login.user')}" value="${this.user}" autofocus></paper-input>
-                        <paper-input id="password" name="password" label="${translate('login.password')}" type="password"></paper-input>
-                        <input id="logout" type="hidden" name="logout"></input>
-                    </form>
-                    <slot name="information"></slot>
-                    ${this._invalid ?
-                html`
-                            <p id="message" part="message-invalid">${translate('login.invalid')}<span part="group-invalid">${this.group ? html` (${translate('login.requiredGroup', { group: this.group })})` : null}</span>.
-                            </p>
-                        `: null
-            }
-                </paper-dialog-scrollable>
-                <div class="buttons">
-                    <paper-button autofocus @click="${this._confirmLogin}">${translate(this.loginLabel)}</paper-button>
-                </div>
-            </paper-dialog>
+            <form action="login">
+                <pb-dialog ?modal="${this.auto}">
+                    <h2 slot="title"><pb-i18n key="login.login"></pb-i18n></h2>
+                    <label>
+                        <pb-i18n key="login.user"></pb-i18n>
+                        <input name="user" value="${this.user}" autofocus></input>
+                    </label>
+                    <label>
+                        <pb-i18n key="login.password"></pb-i18n>
+                        <input name="password" type="password"></input>
+                    </label>
+                    ${ this.fillSlot('information') }
+                    <p part="message-invalid" style="display: none;"><pb-i18n key="login.invalid"></pb-i18n><span part="group-invalid">${this.group ? html` (<pb-i18n key="login.requiredGroup" options='{ "group": "${this.group}" }'></pb-i18n>)` : null}</span>.</p>
+                    <button autofocus slot="footer"><pb-i18n key="login.login"></pb-i18n></button>
+                </pb-dialog>
+            </form>
 
-            <iron-ajax id="checkLogin" with-credentials
+            <iron-ajax class="checkLogin" with-credentials
                 handle-as="json" @response="${this._handleResponse}" @error="${this._handleError}"
                 method="post"
                 content-type="application/x-www-form-urlencoded"></iron-ajax>
         `;
     }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            paper-dialog {
-                min-width: 320px;
-                max-width: 640px;
-                min-height: 128px;
-            }
-
-            paper-dialog h2 {
-                background-color: #607D8B;
-                padding: 16px 8px;
-                margin-top: 0;
-                color: #F0F0F0;
-            }
-
-            a {
-                color: var(--pb-login-link-color, --pb-link-color);
-                text-decoration: none;
-                display: flex;
-                gap:0.5rem;
-            }
-
-            #message {
-                color: var(--paper-red-800);
-            }
-        `;
-    }
-
     _show(ev) {
         ev.preventDefault();
         if (this.loggedIn) {
@@ -217,13 +192,13 @@ export class PbLogin extends pbMixin(LitElement) {
             };
             this._checkLogin.generateRequest();
         } else {
-            this._loginDialog.open();
+            this._loginDialog.openDialog();
         }
     }
 
     _confirmLogin() {
-        this.user = this.shadowRoot.getElementById('user').value;
-        this.password = this.shadowRoot.getElementById('password').value;
+        this.user = this.renderRoot.querySelector('input[name="user"]').value;
+        this.password = this.renderRoot.querySelector('input[name="password"]').value;
         this._checkLogin.body = {
             user: this.user,
             password: this.password
@@ -238,16 +213,16 @@ export class PbLogin extends pbMixin(LitElement) {
             this.loggedIn = true;
             this.user = resp.user;
             this.groups = resp.groups;
-            this._invalid = false;
-            this._loginDialog.close();
+            this.renderRoot.querySelector('p[part="message-invalid"]').style.display = '';
+            this._loginDialog.closeDialog();
         } else {
             resp.userChanged = this.loggedIn;
             this.loggedIn = false;
             this.password = null;
-            if (this._loginDialog.opened) {
-                this._invalid = true;
+            if (this._loginDialog.open) {
+                this.renderRoot.querySelector('p[part="message-invalid"]').style.display = '';
             } else if (this.auto) {
-                this._loginDialog.open();
+                this._loginDialog.openDialog();
             }
         }
         this.emitTo('pb-login', resp);
@@ -270,10 +245,11 @@ export class PbLogin extends pbMixin(LitElement) {
             userChanged: this.loggedIn,
             user: null
         };
-        if (this._loginDialog.opened) {
-            this._invalid = true;
+        if (this._loginDialog.open) {
+            this.renderRoot.querySelector('p[part="message-invalid"]').style.display = '';
+            this.requestUpdate();
         } else if (this.auto) {
-            this._loginDialog.open();
+            this._loginDialog.openDialog();
         }
 
         registry.currentUser = null;

package/src/pb-navigation.js

@@ -37,6 +37,9 @@ export class PbNavigation extends pbHotkeys(pbMixin(LitElement)) {
              */
             rendition : {
                 type: String
+            },
+            _url: {
+                type: String
             }
         };
     }
@@ -64,6 +67,7 @@ export class PbNavigation extends pbHotkeys(pbMixin(LitElement)) {
     }
 
     _update(ev) {
+        this._url = this._computeURL(ev.detail.data);
         if (this.direction === 'forward') {
             if (ev.detail.data.next) {
                 this.disabled = false;
@@ -77,13 +81,22 @@ export class PbNavigation extends pbHotkeys(pbMixin(LitElement)) {
         }
     }
 
-    _handleClick() {
+    _computeURL(data) {
+        if (this.direction === 'backward') {
+            return data.previousId ? `?id=${data.previousId}` : `?root=${data.previous}`;
+        } else if (this.direction === 'forward') {
+            return data.nextId ? `?id=${data.nextId}` : `?root=${data.next}`;
+        }
+    }
+
+    _handleClick(ev) {
+        ev.preventDefault();
         this.emitTo('pb-navigate', { direction: this.direction });
     }
 
     render() {
         return html`
-            <a id="button" @click="${this._handleClick}"><slot></slot></a>
+            <a id="button" @click="${this._handleClick}" href="${this._url}"><slot></slot></a>
         `;
     }