feat(pb-login): Allow additional slot for information to be shown in …

…login dialog
eeditiones · Oct 20, 2020 · 5b49fc4 · 5b49fc4
1 parent 5c8c974
commit 5b49fc4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/demo/pb-login.html b/demo/pb-login.html
@@ -25,7 +25,9 @@
                     <pb-document id="document1" path="doc/documentation.xml" odd="docbook" view="div"></pb-document>
 
                     <main>
-                        <pb-login id="loginElem"></pb-login>
+                        <pb-login id="loginElem">
+                            <p slot="information">Please log in with your eXist-db credentials.</p>
+                        </pb-login>
 
                         <pb-restricted login="loginElem">
                             <p>This paragraph will only be shown if a user is logged in.</p>

diff --git a/src/pb-login.js b/src/pb-login.js
@@ -13,6 +13,7 @@ import { minVersion } from './utils.js';
  * Handles login/logout. Shows a link which opens a login dialog if clicked.
  * If a user is logged in, clicking the link will log him out instead.
  *
+ * @slot information - Additional information to be presented on the login dialog
  * @fires pb-login - Sends results of checking user credentials
  * @cssprop --pb-login-link-color - Color of the link text
  */
@@ -146,6 +147,7 @@ export class PbLogin extends pbMixin(LitElement) {
                         <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">${translate('login.invalid')}