@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha2 to 1.0.0-alpha3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha2",
+  "version": "1.0.0-alpha3",
   "main": "vaadin-login.js",
@@ -41,3 +41,4 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-button": "^2.1.0",
-    "@polymer/iron-form": "^3.0.0-pre.18"
+    "@polymer/iron-form": "^3.0.0-pre.18",
+    "@vaadin/vaadin-overlay": "^3.2.1"
   },
@@ -44,0 +45,0 @@ "devDependencies": {

src/vaadin-login.js

@@ -12,2 +12,3 @@ /**
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
+import { LoginMixin } from './vaadin-login-mixin.js';
 import '@polymer/iron-form/iron-form.js';
@@ -29,5 +30,6 @@ import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
  * @mixes Vaadin.ThemableMixin
+ * @mixes Vaadin.LoginMixin
  * @demo demo/index.html
  */
-class VaadinLogin extends ElementMixin(ThemableMixin(PolymerElement)) {
+class VaadinLogin extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
@@ -37,9 +39,4 @@ return html`
       :host {
-        top: 0;
-        left: 0;
-        width: 100%;
-        min-height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        overflow: hidden;
+        display: inline-block;
       }
@@ -92,3 +89,2 @@
       [part="error-message"] {
-        display: none;
         position: relative;
@@ -105,3 +101,3 @@ }
           <h2>[[i18n.form.title]]</h2>
-          <div part="error-message">
+          <div part="error-message" hidden\$="[[!error]]">
             <h5>[[i18n.errorMessage.title]]</h5>
@@ -133,86 +129,5 @@ <p>[[i18n.errorMessage.message]]</p>
   static get version() {
-    return '1.0.0-alpha2';
+    return '1.0.0-alpha3';
   }
 
-  static get properties() {
-    return {
-      /**
-       * Defines how the login callback will be handled on a submit action:
-       * - If set, a synchronous POST call will be fired to the path defined.
-       * - If left blank, a `login` event will be dispatched containing `username` and `password`
-      */
-      action: {
-        type: String,
-        value: null
-      },
-      /**
-       * If set, disable the "Log in" button and prevent user from submitting login form
-       */
-      disabled: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true
-      },
-      /**
-       * Whether to hide the forgot password button. The button is visible by default.
-       */
-      hideForgotPasswordButton: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * The object used to localize this component.
-       * For changing the default localization, change the entire
-       * _i18n_ object or just the property you want to modify.
-       *
-       * The object has the following JSON structure and default values:
-
-        {
-          header: {
-            title: 'App name',
-            description: 'Inspiring application description'
-          },
-          form: {
-            title: 'Log in',
-            username: 'Username',
-            password: 'Password',
-            submit: 'Log in',
-            forgotPassword: 'Forgot password'
-          },
-          errorMessage: {
-            title: 'Incorrect username or password',
-            message: 'Check that you have entered the correct username and password and try again.'
-          },
-          additionalInformation: 'In case you need to provide some additional info for the user.'
-        }
-       *
-       * @default {English/US}
-       */
-      i18n: {
-        type: Object,
-        value: function() {
-          return {
-            header: {
-              title: 'App name',
-              description: 'Inspiring application description'
-            },
-            form: {
-              title: 'Log in',
-              username: 'Username',
-              password: 'Password',
-              submit: 'Log in',
-              forgotPassword: 'Forgot password'
-            },
-            errorMessage: {
-              title: 'Incorrect username or password',
-              message: 'Check that you have entered the correct username and password and try again.'
-            },
-            additionalInformation: 'In case you need to provide some additional info for the user.'
-          };
-        }
-      }
-    };
-  }
-
   submit() {
@@ -223,2 +138,3 @@ if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
 
+    this.error = false;
     if (this.action == null) {
@@ -225,0 +141,0 @@ const eventDetails = {

theme/lumo/vaadin-login-styles.js

@@ -9,12 +9,5 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     <style include="lumo-color lumo-typography">
-      :host {
-        background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
-      }
-
       [part="card"] {
         width: calc(var(--lumo-size-m) * 10);
         background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-        border-radius: var(--lumo-border-radius);
-        box-shadow: var(--lumo-box-shadow-s);
-        margin: var(--lumo-space-l);
       }
@@ -92,91 +85,2 @@
       }
-
-      /* Small screen */
-      @media only screen
-      and (max-width: 500px) {
-        :host {
-          min-height: 100%;
-          background: var(--lumo-base-color);
-          align-items: flex-start;
-        }
-
-        [part="card"] {
-          width: 100%;
-          border-radius: 0;
-          box-shadow: none;
-          margin: 0;
-        }
-      }
-
-      /* Landscape small screen */
-      @media only screen
-      and (max-height: 600px)
-      and (min-width: 600px)
-      and (orientation: landscape) {
-        [part="card"] {
-          flex-direction: row;
-          align-items: stretch;
-          max-width: calc(var(--lumo-size-m) * 16);
-          width: auto;
-        }
-
-        [part="brand"],
-        [part="form"] {
-          flex: auto;
-          flex-basis: 0;
-          box-sizing: border-box;
-        }
-
-        [part="brand"] {
-          justify-content: flex-start;
-        }
-      }
-
-      /* Landscape really small screen */
-      @media only screen
-      and (max-height: 500px)
-      and (min-width: 600px)
-      and (orientation: landscape),
-      only screen
-      and (max-width: 600px)
-      and (min-width: 600px)
-      and (orientation: landscape) {
-        :host {
-          height: 100%;
-        }
-
-        [part="card"] {
-          margin: 0;
-          width: 100%;
-          max-width: none;
-          height: 100%;
-          flex: auto;
-          border-radius: 0;
-          box-shadow: none;
-        }
-
-        [part="form"] {
-          height: 100%;
-          overflow: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-      }
-
-      /* Handle iPhone X notch */
-      @media only screen
-      and (device-width: 375px)
-      and (device-height: 812px)
-      and (-webkit-device-pixel-ratio: 3) {
-        [part="card"] {
-          padding: 0 constant(safe-area-inset-bottom);
-          padding: 0 env(safe-area-inset-bottom);
-        }
-
-        [part="brand"] {
-          margin-left: calc(constant(safe-area-inset-bottom) * -1);
-          margin-left: calc(env(safe-area-inset-bottom) * -1);
-          padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-bottom));
-          padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-bottom));
-        }
-      }
     </style>
@@ -183,0 +87,0 @@ </template>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42252

increased by18.89%

Number of package files

15

increased by66.67%

Lines of code

638

increased by39.91%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Added@vaadin/vaadin-overlay@^3.2.1

• + Added@vaadin/vaadin-overlay@3.5.1(transitive)