Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vaadin/vaadin-login

Package Overview
Dependencies
Maintainers
19
Versions
249
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-login - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

55

package.json
{
"name": "@vaadin/vaadin-login",
"version": "22.0.0-alpha6",
"version": "22.0.0-alpha7",
"publishConfig": {
"access": "public"
},
"description": "vaadin-login",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/vaadin/web-components.git",
"directory": "packages/vaadin-login"
},
"author": "Vaadin Ltd",
"homepage": "https://vaadin.com/components",
"bugs": {
"url": "https://github.com/vaadin/vaadin-login/issues"
},
"main": "vaadin-login-overlay.js",
"module": "vaadin-login-overlay.js",
"repository": "vaadin/vaadin-login",
"files": [
"src",
"theme",
"vaadin-*.d.ts",
"vaadin-*.js"
],
"keywords": [

@@ -15,34 +34,6 @@ "Vaadin",

],
"author": "Vaadin Ltd",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/vaadin/vaadin-login/issues"
},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/button": "^22.0.0-alpha6",
"@vaadin/password-field": "^22.0.0-alpha6",
"@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
"@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
"@vaadin/vaadin-overlay": "^22.0.0-alpha6",
"@vaadin/vaadin-text-field": "^22.0.0-alpha6",
"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
"@vaadin/login": "22.0.0-alpha7"
},
"devDependencies": {
"@esm-bundle/chai": "^4.3.4",
"@vaadin/testing-helpers": "^0.3.0",
"sinon": "^9.2.1"
},
"publishConfig": {
"access": "public"
},
"gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
"gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
}

@@ -1,31 +0,7 @@

export interface LoginI18n {
form: {
title: string;
username: string;
password: string;
submit: string;
forgotPassword: string;
};
errorMessage: {
title: string;
message: string;
};
header?: {
title?: string;
description?: string;
};
additionalInformation?: string;
}
/**
* Fired when a user submits the login.
* @license
* Vaadin Login
* Copyright (C) 2020 Vaadin Ltd
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
export type LoginEvent = CustomEvent<{ username: string; password: string }>;
export interface LoginElementEventMap {
'forgot-password': Event;
login: LoginEvent;
}
export interface LoginEventMap extends HTMLElementEventMap, LoginElementEventMap {}
export * from '@vaadin/login/src/interfaces';

@@ -1,64 +0,19 @@

import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
/**
* @license
* Vaadin Login
* Copyright (C) 2020 Vaadin Ltd
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { LoginForm } from '@vaadin/login/src/vaadin-login-form.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
/**
* @deprecated Import `LoginForm` from `@vaadin/login/vaadin-login-form` instead.
*/
export type LoginFormElement = LoginForm;
import { LoginMixin } from './vaadin-login-mixin.js';
import { LoginEventMap } from './interfaces';
/**
* `<vaadin-login-form>` is a Web Component providing an easy way to require users
* to log in into an application. Note that component has no shadowRoot.
*
* ```
* <vaadin-login-form></vaadin-login-form>
* ```
*
* Component has to be accessible from the `document` layer in order to allow password managers to work properly with form values.
* Using `<vaadin-login-overlay>` allows to always attach the component to the document body.
*
* ### Styling
*
* The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
*
* Use `<vaadin-login-form-wrapper>` themable component to apply styles.
* The following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:
*
* Part name | Description
* ---------------|---------------------------------------------------------|
* `form` | Container for the entire component's content
* `form-title` | Title of the login form
* `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
* `error-message-title` | Container for error message title
* `error-message-description` | Container for error message description
* `error-message-description` | Container for error message description
* `footer` | Container additional information text from `i18n` object
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
* @fires {CustomEvent} login - Fired when a user submits the login.
* @deprecated Import `LoginForm` from `@vaadin/login/vaadin-login-form` instead.
*/
declare class LoginFormElement extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
submit(): void;
export const LoginFormElement: typeof LoginForm;
addEventListener<K extends keyof LoginEventMap>(
type: K,
listener: (this: LoginFormElement, ev: LoginEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof LoginEventMap>(
type: K,
listener: (this: LoginFormElement, ev: LoginEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-login-form': LoginFormElement;
}
}
export { LoginFormElement };
export * from '@vaadin/login/src/vaadin-login-form.js';

@@ -7,203 +7,9 @@ /**

*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { LoginMixin } from './vaadin-login-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
import '@vaadin/password-field/src/vaadin-password-field.js';
import './vaadin-login-form-wrapper.js';
import { LoginForm } from '@vaadin/login/src/vaadin-login-form.js';
/**
* `<vaadin-login-form>` is a Web Component providing an easy way to require users
* to log in into an application. Note that component has no shadowRoot.
*
* ```
* <vaadin-login-form></vaadin-login-form>
* ```
*
* Component has to be accessible from the `document` layer in order to allow password managers to work properly with form values.
* Using `<vaadin-login-overlay>` allows to always attach the component to the document body.
*
* ### Styling
*
* The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
* Use `<vaadin-login-form-wrapper>` themable component to apply styles.
*
* The following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:
*
* Part name | Description
* ---------------|---------------------------------------------------------|
* `form` | Container for the entire component's content
* `form-title` | Title of the login form
* `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
* `error-message-title` | Container for error message title
* `error-message-description` | Container for error message description
* `error-message-description` | Container for error message description
* `footer` | Container additional information text from `i18n` object
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
* @fires {CustomEvent} login - Fired when a user submits the login.
*
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @mixes LoginMixin
* @deprecated Import `LoginForm` from `@vaadin/login/vaadin-login-form` instead.
*/
class LoginFormElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
static get template() {
return html`
<style>
[part='vaadin-login-native-form'] * {
width: 100%;
}
</style>
<vaadin-login-form-wrapper
theme$="[[theme]]"
part="vaadin-login-native-form-wrapper"
action="{{action}}"
disabled="{{disabled}}"
error="{{error}}"
no-forgot-password="{{noForgotPassword}}"
i18n="{{i18n}}"
on-login="_retargetEvent"
on-forgot-password="_retargetEvent"
>
<form part="vaadin-login-native-form" method="POST" action$="[[action]]" slot="form">
<input id="csrf" type="hidden" />
<vaadin-text-field
name="username"
label="[[i18n.form.username]]"
id="vaadinLoginUsername"
required
on-keydown="_handleInputKeydown"
autocapitalize="none"
autocorrect="off"
spellcheck="false"
>
<input type="text" slot="input" on-keyup="_handleInputKeyup" />
</vaadin-text-field>
export const LoginFormElement = LoginForm;
<vaadin-password-field
name="password"
label="[[i18n.form.password]]"
id="vaadinLoginPassword"
required
on-keydown="_handleInputKeydown"
spellcheck="false"
>
<input type="password" slot="input" on-keyup="_handleInputKeyup" />
</vaadin-password-field>
<vaadin-button part="vaadin-login-submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]"
>[[i18n.form.submit]]</vaadin-button
>
</form>
</vaadin-login-form-wrapper>
`;
}
static get is() {
return 'vaadin-login-form';
}
/** @protected */
connectedCallback() {
super.connectedCallback();
this._handleInputKeydown = this._handleInputKeydown.bind(this);
if (!this.noAutofocus) {
this.$.vaadinLoginUsername.focus();
}
}
/**
* @param {StampedTemplate} dom
* @return {null}
* @protected
*/
_attachDom(dom) {
this.appendChild(dom);
}
static get observers() {
return ['_errorChanged(error)'];
}
/** @private */
_errorChanged() {
if (this.error && !this._preventAutoEnable) {
this.disabled = false;
}
}
submit() {
if (this.disabled || !(this.__isValid(this.$.vaadinLoginUsername) && this.__isValid(this.$.vaadinLoginPassword))) {
return;
}
this.error = false;
this.disabled = true;
const loginEventDetails = {
bubbles: true,
cancelable: true,
detail: {
username: this.$.vaadinLoginUsername.value,
password: this.$.vaadinLoginPassword.value
}
};
const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
if (this.action && firedEvent) {
const csrfMetaName = document.querySelector('meta[name=_csrf_parameter]');
const csrfMetaValue = document.querySelector('meta[name=_csrf]');
if (csrfMetaName && csrfMetaValue) {
this.$.csrf.name = csrfMetaName.content;
this.$.csrf.value = csrfMetaValue.content;
}
this.querySelector('[part="vaadin-login-native-form"]').submit();
}
}
/** @private */
__isValid(input) {
return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
}
/** @private */
_isEnterKey(e) {
return e.key === 'Enter' || e.keyCode === 13;
}
/** @private */
_handleInputKeydown(e) {
if (this._isEnterKey(e)) {
const { currentTarget: inputActive } = e;
const nextInput =
inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
if (this.__isValid(inputActive)) {
if (this.__isValid(nextInput)) {
this.submit();
} else {
nextInput.focus();
}
}
}
}
/** @private */
_handleInputKeyup(e) {
const isTab = e.key === 'Tab' || e.keyCode === 9;
const input = e.currentTarget;
if (isTab && input && input.select) {
input.select();
// iOS 9 workaround: https://stackoverflow.com/a/7436574
setTimeout(() => input.setSelectionRange(0, 9999));
}
}
}
customElements.define(LoginFormElement.is, LoginFormElement);
export { LoginFormElement };
export * from '@vaadin/login/src/vaadin-login-form.js';

@@ -1,74 +0,19 @@

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
/**
* @license
* Vaadin Login
* Copyright (C) 2020 Vaadin Ltd
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { LoginOverlay } from '@vaadin/login/src/vaadin-login-overlay.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
/**
* @deprecated Import `LoginOverlay` from `@vaadin/login` instead.
*/
export type LoginOverlayElement = LoginOverlay;
import { LoginMixin } from './vaadin-login-mixin.js';
import { LoginEventMap } from './interfaces';
/**
* `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
* having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
* password managers to work with login form.
*
* ```
* <vaadin-login-overlay opened></vaadin-login-overlay>
* ```
*
* ### Styling
*
* The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
* Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
*
* The following Shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
*
* Part name | Description
* ----------------|---------------------------------------------------------|
* `card` | Container for the entire component's content
* `brand` | Container for application title and description
* `form` | Container for the `<vaadin-login-form>` component
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
* documentation for `<vaadin-login-form-wrapper>` stylable parts.
*
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
* @fires {CustomEvent} login - Fired when a user submits the login.
* @deprecated Import `LoginOverlay` from `@vaadin/login` instead.
*/
declare class LoginOverlayElement extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
/**
* Defines the application description
*/
description: string;
export const LoginOverlayElement: typeof LoginOverlay;
/**
* True if the overlay is currently displayed.
*/
opened: boolean;
/**
* Defines the application title
*/
title: string;
addEventListener<K extends keyof LoginEventMap>(
type: K,
listener: (this: LoginOverlayElement, ev: LoginEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof LoginEventMap>(
type: K,
listener: (this: LoginOverlayElement, ev: LoginEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-login-overlay': LoginOverlayElement;
}
}
export { LoginOverlayElement };
export * from '@vaadin/login/src/vaadin-login-overlay.js';

@@ -7,193 +7,9 @@ /**

*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { LoginMixin } from './vaadin-login-mixin.js';
import './vaadin-login-form.js';
import './vaadin-login-overlay-wrapper.js';
import { LoginOverlay } from '@vaadin/login/src/vaadin-login-overlay.js';
/**
* `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
* having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
* password managers to work with login form.
*
* ```
* <vaadin-login-overlay opened></vaadin-login-overlay>
* ```
*
* ### Styling
*
* The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
* Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
*
* The following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
*
* Part name | Description
* ----------------|---------------------------------------------------------|
* `card` | Container for the entire component's content
* `brand` | Container for application title and description
* `form` | Container for the `<vaadin-login-form>` component
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
* documentation for `<vaadin-login-form-wrapper>` stylable parts.
*
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
* @fires {CustomEvent} login - Fired when a user submits the login.
*
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @mixes LoginMixin
* @deprecated Import `LoginOverlay` from `@vaadin/login` instead.
*/
class LoginOverlayElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
static get template() {
return html`
<vaadin-login-overlay-wrapper
id="vaadinLoginOverlayWrapper"
opened="{{opened}}"
focus-trap
with-backdrop
title="[[title]]"
description="[[description]]"
theme$="[[theme]]"
>
<vaadin-login-form
theme="with-overlay"
id="vaadinLoginForm"
action="{{action}}"
disabled="{{disabled}}"
error="{{error}}"
no-autofocus="[[noAutofocus]]"
no-forgot-password="{{noForgotPassword}}"
i18n="{{i18n}}"
on-login="_retargetEvent"
on-forgot-password="_retargetEvent"
></vaadin-login-form>
</vaadin-login-overlay-wrapper>
`;
}
export const LoginOverlayElement = LoginOverlay;
static get is() {
return 'vaadin-login-overlay';
}
static get properties() {
return {
/**
* Defines the application description
* @type {string}
*/
description: {
type: String,
value: 'Application description',
notify: true
},
/**
* True if the overlay is currently displayed.
* @type {boolean}
*/
opened: {
type: Boolean,
value: false,
observer: '_onOpenedChange'
},
/**
* Defines the application title
* @type {string}
*/
title: {
type: String,
value: 'App name'
}
};
}
static get observers() {
return ['__i18nChanged(i18n.header.*)'];
}
/** @protected */
ready() {
super.ready();
this._preventClosingLogin = this._preventClosingLogin.bind(this);
}
/** @protected */
connectedCallback() {
super.connectedCallback();
this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
}
/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
this.$.vaadinLoginOverlayWrapper.opened = false;
}
/** @private */
__i18nChanged(i18n) {
const header = i18n.base;
if (!header) {
return;
}
this.title = header.title;
this.description = header.description;
}
/** @private */
_preventClosingLogin(e) {
e.preventDefault();
}
/** @private */
_onOpenedChange() {
if (!this.opened) {
this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
this.disabled = false;
if (this._undoTeleport) {
this._undoTeleport();
}
} else {
this._undoTeleport = this._teleport(this._getElementsToTeleport());
// Overlay sets pointerEvents on body to `none`, which breaks LastPass popup
// Reverting it back to the previous state
// https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
document.body.style.pointerEvents = this.$.vaadinLoginOverlayWrapper._previousDocumentPointerEvents;
}
}
/** @private */
_teleport(elements) {
const teleported = Array.from(elements).map((e) => {
return this.$.vaadinLoginOverlayWrapper.appendChild(e);
});
// Function to undo the teleport
return () => {
while (teleported.length > 0) {
this.appendChild(teleported.shift());
}
};
}
/** @private */
_getElementsToTeleport() {
return this.querySelectorAll('[slot=title]');
}
}
customElements.define(LoginOverlayElement.is, LoginOverlayElement);
export { LoginOverlayElement };
export * from '@vaadin/login/src/vaadin-login-overlay.js';

@@ -1,5 +0,1 @@

import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
import './vaadin-login-form-wrapper.js';
import './vaadin-login-form-styles.js';
import '../../src/vaadin-login-form.js';
import '@vaadin/login/theme/lumo/vaadin-login-form.js';

@@ -1,7 +0,1 @@

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

@@ -1,5 +0,1 @@

import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
import '@vaadin/password-field/theme/material/vaadin-password-field.js';
import './vaadin-login-form-wrapper.js';
import './vaadin-login-form-styles.js';
import '../../src/vaadin-login-form.js';
import '@vaadin/login/theme/material/vaadin-login-form.js';

@@ -1,7 +0,1 @@

import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
import '@vaadin/vaadin-text-field/theme/material/vaadin-password-field.js';
import '@vaadin/button/theme/material/vaadin-button.js';
import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
import './vaadin-login-form.js';
import './vaadin-login-overlay-styles.js';
import '../../src/vaadin-login-overlay.js';
import '@vaadin/login/theme/material/vaadin-login-overlay.js';
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc