Merge bd9f76e into 7e2cc02

vaadin · Dec 13, 2018 · a961537 · a961537
2 parents 7e2cc02 + bd9f76e
commit a961537
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 212 deletions.
diff --git a/demo/element-basic-demos.html b/demo/element-basic-demos.html
@@ -63,11 +63,11 @@ <h3>Login opened in full screen</h3>
         </vaadin-dialog>
         <script>
           window.addDemoReadyListener('#login-overlay', function(document) {
-            const button = document.querySelector('vaadin-button');
-            const vaadinLoginOvelay = document.querySelector('vaadin-login-overlay');
-            const feedbackDialog = document.querySelector('#feedbackDialog');
+            var button = document.querySelector('vaadin-button');
+            var vaadinLoginOvelay = document.querySelector('vaadin-login-overlay');
+            var feedbackDialog = document.querySelector('#feedbackDialog');
 
-            const i18n = Object.assign(
+            var i18n = Object.assign(
               {},
               vaadinLoginOvelay.i18n,
               {additionalInformation: 'For this demo, use admin/admin to a successful login.'}
@@ -79,9 +79,11 @@ <h3>Login opened in full screen</h3>
               vaadinLoginOvelay.opened = true;
             });
 
-            vaadinLoginOvelay.addEventListener('login', (e) => {
+            vaadinLoginOvelay.addEventListener('login', function(e) {
               feedbackDialog.opened = true;
-              const {username, password} = e.detail;
+              var detail = e.detail,
+                username = detail.username,
+                password = detail.password;
 
               setTimeout(function() {
                 feedbackDialog.opened = false;

diff --git a/demo/i18n-demos.html b/demo/i18n-demos.html
@@ -11,7 +11,20 @@ <h3>Internationalization</h3>
     <p>Set the <code>i18n</code> object to localize the component</p>
     <vaadin-demo-snippet id="login-demo-internationalisation">
       <template preserve-content>
-        <vaadin-login></vaadin-login>
+        <style include="lumo-typography lumo-color">
+          </style>
+        </custom-style>
+        <style>
+          main {
+            display: flex;
+            justify-content: center;
+            background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+            padding: var(--lumo-space-m);
+          }
+        </style>
+        <main>
+          <vaadin-login></vaadin-login>
+        </main>
         <script>
           window.addDemoReadyListener('#login-demo-internationalisation', function(document) {
             const login = document.querySelector('vaadin-login');

diff --git a/src/vaadin-login-mixin.html b/src/vaadin-login-mixin.html
@@ -116,22 +116,6 @@
             };
           },
           notify: true
-        },
-        /**
-         * Defines the application title
-         */
-        title: {
-          type: String,
-          value: 'App name',
-          notify: true
-        },
-        /**
-         * Defines the application description
-         */
-        description: {
-          type: String,
-          value: 'Application description',
-          notify: true
         }
       };
     }

diff --git a/src/vaadin-login-overlay-element.html b/src/vaadin-login-overlay-element.html
@@ -0,0 +1,100 @@
+<!--
+@license
+Copyright (c) 2018 Vaadin Ltd.
+This program is available under Commercial Vaadin Add-On License 3.0 (CVALv3).
+See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
+-->
+
+<link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../vaadin-overlay/src/vaadin-overlay.html">
+
+<dom-module id="vaadin-login-overlay-element-template">
+    <template>
+    <style>
+        [part="overlay"] {
+          outline: none;
+        }
+
+        [part="card"] {
+          max-width: 100%;
+          box-sizing: border-box;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+
+        [part="brand"] {
+          box-sizing: border-box;
+          overflow: hidden;
+          flex-grow: 1;
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+
+        [part="brand"] h1 {
+          color: inherit;
+          margin: 0;
+        }
+      </style>
+      <section part="card">
+        <div part="brand">
+          <h1>[[title]]</h1>
+          <p>[[description]]</p>
+        </div>
+        <div part="form">
+          <slot></slot>
+        </div>
+      </section>
+    </template>
+    <script>
+      (function() {
+        let memoizedTemplate;
+
+        /**
+         * The ovelay element
+         *
+         * @memberof Vaadin
+         * @private
+        */
+        class LoginOverlayElement extends Vaadin.OverlayElement {
+          static get is() {
+            return 'vaadin-login-overlay-element';
+          }
+
+          static get properties() {
+            return {
+              title: {
+                type: String
+              },
+              description: {
+                type: String
+              }
+            };
+          }
+
+          static get template() {
+            if (!memoizedTemplate) {
+              // Clone the superclass template
+              memoizedTemplate = super.template.cloneNode(true);
+
+              // Retrieve the elements from component's template
+              const thisTemplate = Polymer.DomModule.import(this.is + '-template', 'template');
+              const card = thisTemplate.content.querySelector('[part=card]');
+              const styles = thisTemplate.content.querySelector('style');
+
+              // Append elements to cloned template
+              const content = memoizedTemplate.content.querySelector('#content');
+              content.replaceChild(card, content.children[0]);
+              content.appendChild(styles);
+            }
+
+            return memoizedTemplate;
+          }
+        }
+
+        customElements.define(LoginOverlayElement.is, LoginOverlayElement);
+      })();
+    </script>
+  </dom-module>
diff --git a/src/vaadin-login-overlay.html b/src/vaadin-login-overlay.html
@@ -8,57 +8,30 @@
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 <link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
-<link rel="import" href="../../vaadin-overlay/src/vaadin-overlay.html">
 
 <link rel="import" href="vaadin-login.html">
 <link rel="import" href="vaadin-login-mixin.html">
+<link rel="import" href="vaadin-login-overlay-element.html">
 
-<dom-module id="vaadin-login-overlay-styles" theme-for="vaadin-login-overlay-element">
-  <template>
-    <style>
-      [part="overlay"] {
-        outline: none;
-      }
-    </style>
-  </template>
-</dom-module>
 
 <dom-module id="vaadin-login-overlay">
   <template>
-    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap with-backdrop>
-      <vaadin-login
+    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap with-backdrop title="[[title]]" description="[[description]]">
+    <vaadin-login
         theme="with-overlay"
         id="login"
         action="{{action}}"
         disabled="{{disabled}}"
         error="{{error}}"
         no-forgot-password="{{noForgotPassword}}"
         i18n="{{i18n}}"
-        title="{{title}}"
-        description="{{description}}"
         on-login="_handleEvent"
         on-forgot-password="_handleEvent">
       </vaadin-login>
     </vaadin-login-overlay-element>
   </template>
   <script>
     (function() {
-
-      /**
-       * The ovelay element
-       *
-       * @memberof Vaadin
-       * @private
-      */
-      class LoginOverlayElement extends Vaadin.OverlayElement {
-        static get is() {
-          return 'vaadin-login-overlay-element';
-        }
-      }
-
-      customElements.define(LoginOverlayElement.is, LoginOverlayElement);
-
-
       /**
        * `<vaadin-login-overlay>` is a Web Component.
         *
@@ -79,15 +52,37 @@
 
         static get properties() {
           return {
+            /**
+             * Defines the application description
+             */
+            description: {
+              type: String,
+              value: 'Application description',
+              notify: true
+            },
             opened: {
               type: Boolean,
               value: false,
               observer: '_onOpenedChange',
               notify: true
+            },
+            /**
+             * Defines the application title
+             */
+            title: {
+              type: String,
+              value: 'App name',
+              notify: true
             }
           };
         }
 
+        static get observers() {
+          return [
+            '__i18nChanged(i18n.header.*)'
+          ];
+        }
+
         ready() {
           super.ready();
 
@@ -109,6 +104,16 @@
           this.$.overlay.opened = false;
         }
 
+
+        __i18nChanged(i18n) {
+          const header = i18n.base;
+          if (!header) {
+            return;
+          }
+          this.title = header.title;
+          this.description = header.description;
+        }
+
         _preventClosingLogin(e) {
           e.preventDefault();
         }

diff --git a/src/vaadin-login.html b/src/vaadin-login.html
@@ -29,31 +29,8 @@
         display: none !important;
       }
 
-      [part="card"] {
-        max-width: 100%;
-        box-sizing: border-box;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      [part="brand"] {
-        box-sizing: border-box;
-        overflow: hidden;
-        flex-grow: 1;
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-      }
-
-      [part="brand"] h1 {
-        color: inherit;
-        margin: 0;
-      }
-
       [part="form"] {
-        flex: none;
+        flex: 1;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
@@ -73,32 +50,25 @@
         position: relative;
       }
     </style>
-      <section part="card">
-        <div part="brand">
-          <h1>[[title]]</h1>
-          <p>[[description]]</p>
+      <section part="form">
+        <h2>[[i18n.form.title]]</h2>
+        <div part="error-message" hidden$="[[!error]]">
+          <h5>[[i18n.errorMessage.title]]</h5>
+          <p>[[i18n.errorMessage.message]]</p>
         </div>
+        <iron-form id="loginForm" allow-redirect>
+          <form method="POST" action$="[[action]]">
+            <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" required on-keydown="_handleInputKeydown"></vaadin-text-field>
+            <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required on-keydown="_handleInputKeydown"></vaadin-password-field>
 
-        <div part="form">
-          <h2>[[i18n.form.title]]</h2>
-          <div part="error-message" hidden$="[[!error]]">
-            <h5>[[i18n.errorMessage.title]]</h5>
-            <p>[[i18n.errorMessage.message]]</p>
-          </div>
-          <iron-form id="loginForm" allow-redirect>
-            <form method="POST" action$="[[action]]">
-              <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" required on-keydown="_handleInputKeydown"></vaadin-text-field>
-              <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required on-keydown="_handleInputKeydown"></vaadin-password-field>
-
-              <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
-            </form>
-          </iron-form>
-
-          <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
-
-          <div part="footer">
-            <p>[[i18n.additionalInformation]]</p>
-          </div>
+            <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
+          </form>
+        </iron-form>
+
+        <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
+
+        <div part="footer">
+          <p>[[i18n.additionalInformation]]</p>
         </div>
       </section>
   </template>
@@ -127,21 +97,6 @@ <h5>[[i18n.errorMessage.title]]</h5>
           return '1.0.0-alpha3';
         }
 
-        static get observers() {
-          return [
-            '__i18nChanged(i18n.header.*)'
-          ];
-        }
-
-        __i18nChanged(i18n) {
-          const header = i18n.base;
-          if (!header) {
-            return;
-          }
-          this.title = header.title;
-          this.description = header.description;
-        }
-
         submit() {
           if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
             return;