@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha7 to 1.0.0-alpha8

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha7",
+  "version": "1.0.0-alpha8",
   "main": "vaadin-login.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-login-mixin.js

@@ -39,2 +39,4 @@ /**
        * If set, disable the "Log in" button and prevent user from submitting login form.
+       * It is re-enabled automatically, when error is set to true, allowing form resubmission
+       * after user makes changes.
        */
@@ -48,2 +50,3 @@ disabled: {
        * If set, the error message is shown. The message is hidden by default.
+       * When set, it changes the disabled state of the submit button.
        */
@@ -50,0 +53,0 @@ error: {

src/vaadin-login-overlay.js

@@ -49,11 +49,11 @@ /**
         <form id="loginForm" method="POST" action\$="[[action]]" slot="form">
-          <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown">
+          <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown" autocapitalize="none" autocorrect="off" spellcheck="false">
             <input type="text" slot="input">
           </vaadin-text-field>
 
-          <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown">
+          <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown" spellcheck="false">
             <input type="password" slot="input">
           </vaadin-password-field>
 
-          <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
+          <vaadin-button id="submit" theme="primary contained vaadin-login-submit" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
         </form>
@@ -60,0 +60,0 @@ </vaadin-login>

src/vaadin-login.js

@@ -99,15 +99,15 @@ /**
           <form id="loginForm" method="POST" action\$="[[action]]">
-            <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown">
+            <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown" autocapitalize="none" autocorrect="off" spellcheck="false">
               <input type="text" slot="input">
             </vaadin-text-field>
 
-            <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown">
+            <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown" spellcheck="false">
               <input type="password" slot="input">
             </vaadin-password-field>
 
-            <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
+            <vaadin-button id="submit" theme="primary contained vaadin-login-submit" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
           </form>
         </slot>
 
-        <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden\$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
+        <vaadin-button id="forgotPasswordButton" theme="tertiary small forgot-password" on-click="_forgotPassword" hidden\$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
 
@@ -125,3 +125,3 @@ <div part="footer">
   static get version() {
-    return '1.0.0-alpha7';
+    return '1.0.0-alpha8';
   }
@@ -132,2 +132,14 @@
   }
+
+  static get observers() {
+    return [
+      '_errorChanged(error)'
+    ];
+  }
+
+  _errorChanged() {
+    if (this.error) {
+      this.disabled = false;
+    }
+  }
 }
@@ -134,0 +146,0 @@

theme/lumo/vaadin-login-overlay-styles.js

@@ -61,3 +61,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       [part="content"] {
-        min-height: 100%;
+        height: 100%;
         display: flex;
@@ -72,2 +72,3 @@ align-items: center;
         margin: var(--lumo-space-s);
+        height: auto;
       }
@@ -74,0 +75,0 @@

theme/lumo/vaadin-login-overlay.js

 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js';
 import '@vaadin/vaadin-button/theme/lumo/vaadin-button.js';
+import './vaadin-login.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

theme/material/vaadin-login-styles.js

@@ -1,2 +0,1 @@
-import '../../src/vaadin-login.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -6,32 +5,96 @@
   <template>
-    <style>
-      [part="card"] {
-        width: 23rem;
-        border-radius: 0;
-        margin: 2rem;
+    <style include="material-color-light material-typography">
+      :host {
+        max-width: calc(2.25rem * 10);
+        background: var(--material-background-color) linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+        min-height: 250px;
       }
 
-      [part="brand"] {
-        padding: 24px 12px 12px;
-        background-color: var(--material-primary-color);
-        min-height: calc(var(--lumo-size-m) * 5);
-        color: var(--material-primary-contrast-color);
+      [part="form"] {
+        padding: 1.5rem;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        justify-content: center;
       }
 
-      [part="form"] {
+      [part="form-title"] {
+        margin-top: calc(var(--material-h3-font-size) - var(--material-h4-font-size));
+        font-size: var(--material-h5-font-size);
+      }
+
+      #submit {
+        margin-top: 3rem;
+        margin-bottom: 0.5rem;
+      }
+
+      #forgotPasswordButton {
+        margin: 0.5rem auto;
+        padding-bottom: 12px;
+        padding-top: 12px;
+      }
+
+      [part="error-message"] {
+        background-color: hsla(3, 100%, 60%, 0.1);
         padding: 1rem;
+        padding-left: 2.25rem;
+        border-radius: 0.25em;
+        margin-top: 1rem;
+        margin-bottom: 0.5rem;
+        color: var(--material-error-text-color);
       }
 
+      [part="error-message"]::before {
+        content: "!";
+        font-size: 1.3em;
+        font-weight: 500;
+        position: absolute;
+        width: 2.25rem;
+        height: 1em;
+        line-height: 1;
+        text-align: center;
+        /* Visual centering */
+        margin-left: calc(2.25rem * -0.95);
+      }
+
+      [part="error-message"] h5 {
+        margin: 0 0 0.25em;
+        color: inherit;
+      }
+
+      [part="error-message"] p {
+        font-size: var(--material-small-font-size);
+        line-height: 1.375;
+        margin: 0;
+        opacity: 0.9;
+      }
+
+      [part="footer"] {
+        font-size: var(--material-small-font-size);
+        line-height: 1.375;
+        color: var(--material-secondary-text-color);
+      }
+    </style>
+  </template>
+</dom-module><dom-module id="vaadin-login-forgot-password-button" theme-for="vaadin-button">
+  <template>
+    <style>
+      :host([theme~="forgot-password"]) {
+        text-transform: none;
+      }
+
+      :host([theme~="vaadin-login-submit"]) {
+        margin-top: 3em;
+        margin-bottom: 2em;
+        flex-grow: 0;
+      }
+
       /* Small screen */
       @media only screen
-      and (max-width: 500px) {
-        :host {
-          min-height: 100%;
-          align-items: flex-start;
+        and (max-width: 1023px) {
+          :host([theme~="vaadin-login-submit"]) {
+          margin-top: 2.5em;
+          margin-bottom: 1em;
         }
-
-        [part="card"] {
-          width: 100%;
-          margin: 0;
-        }
       }
@@ -38,0 +101,0 @@ </style>

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

55810

increased by22.06%

Number of package files

17

increased by6.25%

Lines of code

1217

increased by42.01%

No dependency changes