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

@vaadin/vaadin-login

Package Overview
Dependencies
Maintainers
16
Versions
249
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0-alpha1

src/interfaces.d.ts

84

package.json
{
"name": "@vaadin/vaadin-login",
"version": "2.0.0-alpha1",
"description": "vaadin-login",
"main": "vaadin-login-overlay.js",
"module": "vaadin-login-overlay.js",
"repository": "vaadin/vaadin-login",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-login",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-login",
"version": "1.2.0",
"main": "vaadin-login-overlay.js",
"author": "Vaadin Ltd",

@@ -21,38 +21,76 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"@types",
"src",
"theme"
],
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"check-version": "magi check-version",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-themable-mixin": "^1.6.2",
"@vaadin/vaadin-element-mixin": "^2.4.1",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-text-field": "^2.7.0",
"@vaadin/vaadin-text-field": "^3.0.0-alpha1",
"@vaadin/vaadin-button": "^2.4.0",
"@vaadin/vaadin-overlay": "^3.5.0"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-demo-helpers": "^3.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@polymer/iron-test-helpers": "^3.0.0",
"@vaadin/vaadin-demo-helpers": "^3.1.0",
"@vaadin/vaadin-icons": "^4.2.1",
"@vaadin/vaadin-dialog": "^2.5.0"
"@web/dev-server": "^0.1.0",
"@web/test-runner": "^0.11.0",
"@web/test-runner-saucelabs": "^0.3.0",
"eslint": "^7.15.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.9",
"typescript": "^4.1.3"
}
}

75

README.md

@@ -1,12 +0,1 @@

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-login)](https://github.com/vaadin/vaadin-login/releases)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-login)
[![Build Status](https://travis-ci.org/vaadin/vaadin-login.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-login)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-login/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-login?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-login-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
# <vaadin-login>

@@ -22,2 +11,9 @@

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
[![Build Status](https://travis-ci.org/vaadin/vaadin-login.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-login)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-login)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-login-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -37,28 +33,5 @@ <vaadin-login-overlay opened></vaadin-login-overlay>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports compatible version
Install `vaadin-login`:
```sh
bower i vaadin/vaadin-login --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-login/vaadin-login-overlay.html">
```
### Polymer 3 and ES Modules compatible version
Install `vaadin-login`:
```sh
npm i @vaadin/vaadin-login --save

@@ -83,32 +56,31 @@ ```

`theme/lumo/vaadin-login-overlay.html`
`theme/lumo/vaadin-login-form.html`
`theme/lumo/vaadin-login-overlay.js`
`theme/lumo/vaadin-login-form.js`
- The component with the Material theme:
`theme/material/vaadin-login-overlay.html`
`theme/material/vaadin-login-form.html`
`theme/material/vaadin-login-overlay.js`
`theme/material/vaadin-login-form.js`
- Aliases for lumo themed components:
`vaadin-login-overlay.html`
`vaadin-login-form.html`
`vaadin-login-overlay.js`
`vaadin-login-form.js`
## Running demos and tests in browser
## Running API docs and tests in a browser
1. Fork the `vaadin-login` repository and clone it locally.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-login` directory, run `npm install` and then `bower install` to install dependencies.
1. When in the `vaadin-login` directory, run `npm install` to install dependencies.
1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:8080/components/vaadin-login/demo
- http://127.0.0.1:8080/components/vaadin-login/test
- http://127.0.0.1:3000/test/visual/default.html

@@ -118,8 +90,13 @@

1. When in the `vaadin-login` directory, run `polymer test`
1. When in the `vaadin-login` directory, run `npm test`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.

@@ -126,0 +103,0 @@

79

src/vaadin-login-form-wrapper.js
/**
@license
Vaadin Login
Copyright (C) 2018 Vaadin Ltd
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.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 { 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 '@vaadin/vaadin-button/src/vaadin-button.js';
import { LoginMixin } from './vaadin-login-mixin.js';
import '@vaadin/vaadin-button/src/vaadin-button.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';

@@ -44,8 +42,6 @@ /**

*
* See examples of setting the content into slots in the live demos.
* @extends PolymerElement
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @mixes Login.LoginMixin
* @demo demo/index.html
* @mixes LoginMixin
*/

@@ -55,30 +51,30 @@ class LoginFormWrapperElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {

return html`
<style>
:host {
overflow: hidden;
display: inline-block;
}
<style>
:host {
overflow: hidden;
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
[part="form"] {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
[part='form'] {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
[part="form-title"] {
margin: 0;
}
[part='form-title'] {
margin: 0;
}
[part="error-message"] {
position: relative;
}
</style>
[part='error-message'] {
position: relative;
}
</style>
<section part="form">
<h2 part="form-title">[[i18n.form.title]]</h2>
<div part="error-message" hidden\$="[[!error]]">
<div part="error-message" hidden$="[[!error]]">
<h5 part="error-message-title">[[i18n.errorMessage.title]]</h5>

@@ -88,6 +84,11 @@ <p part="error-message-description">[[i18n.errorMessage.message]]</p>

<slot name="form">
</slot>
<slot name="form"></slot>
<vaadin-button id="forgotPasswordButton" theme="tertiary small forgot-password" 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
>

@@ -98,3 +99,3 @@ <div part="footer">

</section>
`;
`;
}

@@ -101,0 +102,0 @@

53

src/vaadin-login-form.d.ts

@@ -1,24 +0,9 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-login-form.js
*/
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { LoginMixin } from './vaadin-login-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import { LoginEventMap } from './interfaces';
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 {PolymerElement} from '@polymer/polymer/polymer-element.js';
/**

@@ -40,23 +25,27 @@ * `<vaadin-login-form>` is a Web Component providing an easy way to require users

*
* See examples of setting the content into slots in the live demos.
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
* @fires {CustomEvent} login - Fired when a user submits the login.
*/
declare class LoginFormElement extends
ElementMixin(
ThemableMixin(
LoginMixin(
PolymerElement))) {
connectedCallback(): void;
_attachDom(dom: StampedTemplate|null): null;
declare class LoginFormElement extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
submit(): void;
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;
'vaadin-login-form': LoginFormElement;
}
}
export {LoginFormElement};
import {StampedTemplate} from '@polymer/polymer/interfaces';
export { LoginFormElement };

98

src/vaadin-login-form.js

@@ -1,9 +0,15 @@

import './vaadin-login-form-wrapper.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
import '@vaadin/vaadin-text-field/src/vaadin-password-field.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.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 { 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 { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
import '@vaadin/vaadin-text-field/src/vaadin-password-field.js';
import './vaadin-login-form-wrapper.js';
/**

@@ -25,8 +31,9 @@ * `<vaadin-login-form>` is a Web Component providing an easy way to require users

*
* See examples of setting the content into slots in the live demos.
* @extends PolymerElement
* @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
* @demo demo/index.html
*/

@@ -36,22 +43,49 @@ class LoginFormElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {

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">
<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">
<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>
<form part="vaadin-login-native-form" method="POST" action\$="[[action]]" slot="form">
<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>
<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-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>
`;
<vaadin-button part="vaadin-login-submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]"
>[[i18n.form.submit]]</vaadin-button
>
</form>
</vaadin-login-form-wrapper>
`;
}

@@ -64,3 +98,3 @@

static get version() {
return '1.2.0';
return '2.0.0-alpha1';
}

@@ -84,5 +118,3 @@

static get observers() {
return [
'_errorChanged(error)'
];
return ['_errorChanged(error)'];
}

@@ -133,5 +165,5 @@

if (this._isEnterKey(e)) {
const {currentTarget: inputActive} = e;
const nextInput = inputActive.id === 'vaadinLoginUsername'
? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
const { currentTarget: inputActive } = e;
const nextInput =
inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
if (this.__isValid(inputActive)) {

@@ -138,0 +170,0 @@ if (this.__isValid(nextInput)) {

26

src/vaadin-login-mixin.d.ts

@@ -1,27 +0,10 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-login-mixin.js
*/
import { LoginI18n } from './interfaces';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
// tslint:disable:no-any describes the API as best we are able today
export {LoginMixin};
declare function LoginMixin<T extends new (...args: any[]) => {}>(base: T): T & LoginMixinConstructor;
interface LoginMixinConstructor {
new(...args: any[]): LoginMixin;
new (...args: any[]): LoginMixin;
}
export {LoginMixinConstructor};
interface LoginMixin {
/**

@@ -31,3 +14,3 @@ * If set, a synchronous POST call will be fired to the path defined.

*/
action: string|null;
action: string | null;

@@ -81,5 +64,6 @@ /**

i18n: LoginI18n;
_retargetEvent(e: Event): void;
}
import {LoginI18n} from '../@types/interfaces';
export { LoginMixin, LoginMixinConstructor };

213

src/vaadin-login-mixin.js
/**
@license
Vaadin Login
Copyright (C) 2018 Vaadin Ltd
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
* @license
* Vaadin Login
* Copyright (C) 2020 Vaadin Ltd
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
/**
* @polymerMixin
*/
export const LoginMixin = superClass => class LoginMixin extends superClass {
export const LoginMixin = (superClass) =>
class LoginMixin extends superClass {
/**
* Fired when user clicks on the "Forgot password" button.
*
* @event forgot-password
*/
/**
* Fired when user clicks on the "Forgot password" button.
*
* @event forgot-password
*/
/**
* Fired when an user submits the login.
* The event contains `username` and `password` values in the `detail` property.
*
* @event login
*/
/**
* Fired when an user submits the login.
* The event contains `username` and `password` values in the `detail` property.
*
* @event login
*
*/
static get properties() {
return {
/**
* If set, a synchronous POST call will be fired to the path defined.
* The `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.
* @type {string | null}
*/
action: {
type: String,
value: null,
notify: true
},
static get properties() {
return {
/**
* If set, a synchronous POST call will be fired to the path defined.
* The `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.
* @type {string | null}
*/
action: {
type: String,
value: null,
notify: true
},
/**
* 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.
* @type {boolean}
*/
disabled: {
type: Boolean,
value: false,
notify: true
},
/**
* 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.
* @type {boolean}
*/
disabled: {
type: Boolean,
value: false,
notify: true
},
/**
* If set, the error message is shown. The message is hidden by default.
* When set, it changes the disabled state of the submit button.
* @type {boolean}
*/
error: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
},
/**
* If set, the error message is shown. The message is hidden by default.
* When set, it changes the disabled state of the submit button.
* @type {boolean}
*/
error: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
},
/**
* Whether to hide the forgot password button. The button is visible by default.
* @type {boolean}
*/
noForgotPassword: {
type: Boolean,
value: false,
notify: true
},
/**
* Whether to hide the forgot password button. The button is visible by default.
* @type {boolean}
*/
noForgotPassword: {
type: Boolean,
value: false,
notify: true
},
/**
/**
* The object used to localize this component.

@@ -103,52 +103,47 @@ * For changing the default localization, change the entire

*/
i18n: {
type: Object,
value: function() {
return {
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.'
}
};
i18n: {
type: Object,
value: function () {
return {
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.'
}
};
},
notify: true
},
notify: true
},
/**
* If set, prevents auto enabling the component when error property is set to true.
* @private
*/
_preventAutoEnable: {
type: Boolean,
value: false
}
};
}
/**
* If set, prevents auto enabling the component when error property is set to true.
* @private
*/
_preventAutoEnable: {
type: Boolean,
value: false
}
};
}
/**
* @param {!Event} e
* @protected
*/
_retargetEvent(e) {
e.stopPropagation();
const {
detail,
composed,
cancelable,
bubbles
} = e;
/**
* @param {!Event} e
* @protected
*/
_retargetEvent(e) {
e.stopPropagation();
const { detail, composed, cancelable, bubbles } = e;
const firedEvent = this.dispatchEvent(new CustomEvent(e.type, {bubbles, cancelable, composed, detail}));
// Check if `eventTarget.preventDefault()` was called to prevent default in the original event
if (!firedEvent) {
e.preventDefault();
const firedEvent = this.dispatchEvent(new CustomEvent(e.type, { bubbles, cancelable, composed, detail }));
// Check if `eventTarget.preventDefault()` was called to prevent default in the original event
if (!firedEvent) {
e.preventDefault();
}
}
}
};
};

22

src/vaadin-login-overlay-wrapper.js
/**
@license
Vaadin Login
Copyright (C) 2018 Vaadin Ltd
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import '@polymer/polymer/polymer-element.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 { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
import { DomModule } from '@polymer/polymer/lib/elements/dom-module.js';
const $_documentContainer = document.createElement('template');

@@ -55,7 +54,6 @@

</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
let memoizedTemplate;

@@ -89,5 +87,6 @@

* See the usage example in `<vaadin-login-overlay>`.
* @extends PolymerElement
*
* @extends HTMLElement
* @private
*/
*/
class LoginOverlayWrapperElement extends OverlayElement {

@@ -106,2 +105,3 @@ static get is() {

},
/**

@@ -108,0 +108,0 @@ * Application description. Displayed under the title.

53

src/vaadin-login-overlay.d.ts

@@ -1,24 +0,9 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-login-overlay.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { LoginMixin } from './vaadin-login-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import { LoginEventMap } from './interfaces'
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 {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -38,9 +23,7 @@ * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and

* and `<vaadin-overlay>` elements
*
* @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
* @fires {CustomEvent} login - Fired when a user submits the login.
*/
declare class LoginOverlayElement extends
ElementMixin(
ThemableMixin(
LoginMixin(
PolymerElement))) {
declare class LoginOverlayElement extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
/**

@@ -60,14 +43,22 @@ * Defines the application description

title: string;
ready(): void;
connectedCallback(): void;
disconnectedCallback(): void;
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;
'vaadin-login-overlay': LoginOverlayElement;
}
}
export {LoginOverlayElement};
export { LoginOverlayElement };

60

src/vaadin-login-overlay.js
/**
@license
Vaadin Login
Copyright (C) 2018 Vaadin Ltd
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.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 { 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 { LoginMixin } from './vaadin-login-mixin.js';
import './vaadin-login-overlay-wrapper.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -30,7 +29,9 @@ * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and

*
* @extends PolymerElement
* @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
* @demo demo/index.html
*/

@@ -40,10 +41,24 @@ class LoginOverlayElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {

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-forgot-password="{{noForgotPassword}}" i18n="{{i18n}}" on-login="_retargetEvent" on-forgot-password="_retargetEvent">
</vaadin-login-form>
</vaadin-login-overlay-wrapper>
`;
<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-forgot-password="{{noForgotPassword}}"
i18n="{{i18n}}"
on-login="_retargetEvent"
on-forgot-password="_retargetEvent"
></vaadin-login-form>
</vaadin-login-overlay-wrapper>
`;
}

@@ -89,5 +104,3 @@

static get observers() {
return [
'__i18nChanged(i18n.header.*)'
];
return ['__i18nChanged(i18n.header.*)'];
}

@@ -137,3 +150,2 @@

if (!this.opened) {
this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';

@@ -158,3 +170,3 @@ this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';

_teleport(elements) {
const teleported = Array.from(elements).map(e => {
const teleported = Array.from(elements).map((e) => {
return this.$.vaadinLoginOverlayWrapper.appendChild(e);

@@ -161,0 +173,0 @@ });

25

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

@@ -1,14 +0,13 @@

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
const $_documentContainer = html`<dom-module id="lumo-login-form" theme-for="vaadin-login-form">
<template>
<style>
vaadin-button[part="vaadin-login-submit"] {
margin-top: var(--lumo-space-l);
margin-bottom: var(--lumo-space-s);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
registerStyles(
'vaadin-login-form',
css`
vaadin-button[part='vaadin-login-submit'] {
margin-top: var(--lumo-space-l);
margin-bottom: var(--lumo-space-s);
}
`,
{ moduleId: 'lumo-login-form' }
);

136

theme/lumo/vaadin-login-form-wrapper-styles.js

@@ -0,85 +1,83 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-login-form-wrapper" theme-for="vaadin-login-form-wrapper">
<template>
<style include="lumo-color lumo-typography">
:host {
max-width: calc(var(--lumo-size-m) * 10);
background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
}
registerStyles(
'vaadin-login-form-wrapper',
css`
:host {
max-width: calc(var(--lumo-size-m) * 10);
background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
}
[part="form"] {
padding: var(--lumo-space-l);
}
[part='form'] {
padding: var(--lumo-space-l);
}
[part="form-title"] {
margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
}
[part='form-title'] {
margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
}
#forgotPasswordButton {
margin: var(--lumo-space-s) auto;
}
#forgotPasswordButton {
margin: var(--lumo-space-s) auto;
}
[part="error-message"] {
background-color: var(--lumo-error-color-10pct);
padding: var(--lumo-space-m);
border-radius: var(--lumo-border-radius);
margin-top: var(--lumo-space-m);
margin-bottom: var(--lumo-space-s);
color: var(--lumo-error-text-color);
}
[part='error-message'] {
background-color: var(--lumo-error-color-10pct);
padding: var(--lumo-space-m);
border-radius: var(--lumo-border-radius);
margin-top: var(--lumo-space-m);
margin-bottom: var(--lumo-space-s);
color: var(--lumo-error-text-color);
}
:host(:not([dir="rtl"])) [part="error-message"] {
padding-left: var(--lumo-size-m);
}
:host(:not([dir='rtl'])) [part='error-message'] {
padding-left: var(--lumo-size-m);
}
:host([dir="rtl"]) [part="error-message"] {
padding-right: var(--lumo-size-m);
}
:host([dir='rtl']) [part='error-message'] {
padding-right: var(--lumo-size-m);
}
[part="error-message"]::before {
content: var(--lumo-icons-error);
font-family: lumo-icons;
font-size: var(--lumo-icon-size-m);
position: absolute;
width: var(--lumo-size-m);
height: 1em;
line-height: 1;
text-align: center;
}
[part='error-message']::before {
content: var(--lumo-icons-error);
font-family: lumo-icons;
font-size: var(--lumo-icon-size-m);
position: absolute;
width: var(--lumo-size-m);
height: 1em;
line-height: 1;
text-align: center;
}
:host(:not([dir="rtl"])) [part="error-message"]::before {
/* Visual centering */
margin-left: calc(var(--lumo-size-m) * -0.95);
}
:host(:not([dir='rtl'])) [part='error-message']::before {
/* Visual centering */
margin-left: calc(var(--lumo-size-m) * -0.95);
}
:host([dir="rtl"]) [part="error-message"]::before {
/* Visual centering */
margin-right: calc(var(--lumo-size-m) * -0.95);
}
:host([dir='rtl']) [part='error-message']::before {
/* Visual centering */
margin-right: calc(var(--lumo-size-m) * -0.95);
}
[part="error-message-title"] {
margin: 0 0 0.25em;
color: inherit;
}
[part='error-message-title'] {
margin: 0 0 0.25em;
color: inherit;
}
[part="error-message-description"] {
font-size: var(--lumo-font-size-s);
line-height: var(--lumo-line-height-s);
margin: 0;
opacity: 0.9;
}
[part='error-message-description'] {
font-size: var(--lumo-font-size-s);
line-height: var(--lumo-line-height-s);
margin: 0;
opacity: 0.9;
}
[part="footer"] {
font-size: var(--lumo-font-size-xs);
line-height: var(--lumo-line-height-s);
color: var(--lumo-secondary-text-color);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
[part='footer'] {
font-size: var(--lumo-font-size-xs);
line-height: var(--lumo-line-height-s);
color: var(--lumo-secondary-text-color);
}
`,
{ include: ['lumo-color', 'lumo-typography'], moduleId: 'lumo-login-form-wrapper' }
);

341

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

@@ -0,217 +1,200 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-overlay/vaadin-overlay.js';
import './vaadin-login-form-wrapper-styles.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="vaadin-login-overlay-wrapper-lumo-styles" theme-for="vaadin-login-overlay-wrapper">
<template>
<style include="lumo-color lumo-typography">
:host {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
registerStyles(
'vaadin-login-overlay-wrapper',
css`
:host {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
[part="backdrop"] {
background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
[part='backdrop'] {
background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
}
[part='content'] {
padding: 0;
}
[part='overlay'] {
background: none;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 100%;
}
[part='card'] {
width: calc(var(--lumo-size-m) * 10);
background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
}
[part='brand'] {
padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
background-color: var(--lumo-primary-color);
color: var(--lumo-primary-contrast-color);
min-height: calc(var(--lumo-size-m) * 5);
}
[part='description'] {
line-height: var(--lumo-line-height-s);
color: var(--lumo-tint-70pct);
margin-bottom: 0;
}
[part='content'] {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
[part='card'] {
border-radius: var(--lumo-border-radius);
box-shadow: var(--lumo-box-shadow-s);
margin: var(--lumo-space-s);
height: auto;
}
/* Small screen */
@media only screen and (max-width: 500px) {
[part='overlay'],
[part='content'] {
height: 100%;
}
[part="content"] {
padding: 0;
[part='content'] {
min-height: 100%;
background: var(--lumo-base-color);
align-items: flex-start;
}
[part="overlay"] {
background: none;
[part='card'],
[part='overlay'] {
width: 100%;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 100%;
margin: 0;
}
[part="card"] {
width: calc(var(--lumo-size-m) * 10);
background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
/* RTL styles */
:host([dir='rtl']) [part='brand'] {
padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
}
}
[part="brand"] {
padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
background-color: var(--lumo-primary-color);
color: var(--lumo-primary-contrast-color);
min-height: calc(var(--lumo-size-m) * 5);
/* 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: 100%;
}
[part="description"] {
line-height: var(--lumo-line-height-s);
color: var(--lumo-tint-70pct);
margin-bottom: 0;
[part='brand'],
[part='form'] {
flex: auto;
flex-basis: 0;
box-sizing: border-box;
}
[part="content"] {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
[part='brand'] {
justify-content: flex-start;
}
[part="card"] {
border-radius: var(--lumo-border-radius);
box-shadow: var(--lumo-box-shadow-s);
margin: var(--lumo-space-s);
height: auto;
[part='form'] {
padding: var(--lumo-space-l);
overflow: auto;
}
}
/* Small screen */
@media only screen
and (max-width: 500px) {
[part="overlay"],
[part="content"] {
height: 100%;
}
/* 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) {
[part='content'] {
height: 100vh;
}
[part="content"] {
min-height: 100%;
background: var(--lumo-base-color);
align-items: flex-start;
}
[part='card'] {
margin: 0;
width: 100%;
max-width: none;
height: 100%;
flex: auto;
border-radius: 0;
box-shadow: none;
}
[part="card"],
[part="overlay"] {
width: 100%;
border-radius: 0;
box-shadow: none;
margin: 0;
}
/* RTL styles */
:host([dir="rtl"]) [part="brand"] {
padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
}
[part='form'] {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
/* 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: 100%;
}
/* Handle iPhone X notch */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
[part='card'] {
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
[part="brand"],
[part="form"] {
flex: auto;
flex-basis: 0;
box-sizing: border-box;
}
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
[part="brand"] {
justify-content: flex-start;
}
[part='brand'] {
margin-left: calc(constant(safe-area-inset-left) * -1);
margin-left: calc(env(safe-area-inset-left) * -1);
[part="form"] {
padding: var(--lumo-space-l);
overflow: auto;
}
padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
}
/* 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) {
[part="content"] {
height: 100vh;
}
/* RTL styles */
:host([dir='rtl']) [part='card'] {
padding-left: constant(safe-area-inset-right);
padding-left: env(safe-area-inset-right);
padding-right: constant(safe-area-inset-left);
padding-right: env(safe-area-inset-left);
}
[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;
}
:host([dir='rtl']) [part='brand'] {
margin-right: calc(constant(safe-area-inset-left) * -1);
margin-right: calc(env(safe-area-inset-left) * -1);
padding-right: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
}
}
`,
{ include: ['lumo-color', 'lumo-typography'], moduleId: 'vaadin-login-overlay-wrapper-lumo-styles' }
);
/* Handle iPhone X notch */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
[part="card"] {
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
registerStyles(
'vaadin-login-form-wrapper',
css`
:host([theme~='with-overlay']) {
min-height: 100%;
display: flex;
justify-content: center;
max-width: 100%;
}
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
[part="brand"] {
margin-left: calc(constant(safe-area-inset-left) * -1);
margin-left: calc(env(safe-area-inset-left) * -1);
padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
}
/* RTL styles */
:host([dir="rtl"]) [part="card"] {
padding-left: constant(safe-area-inset-right);
padding-left: env(safe-area-inset-right);
padding-right: constant(safe-area-inset-left);
padding-right: env(safe-area-inset-left);
}
:host([dir="rtl"]) [part="brand"] {
margin-right: calc(constant(safe-area-inset-left) * -1);
margin-right: calc(env(safe-area-inset-left) * -1);
padding-right: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
}
/* Landscape small screen */
@media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
:host([theme~='with-overlay']) [part='form'] {
height: 100%;
-webkit-overflow-scrolling: touch;
flex: 1;
padding: 2px;
}
</style>
</template>
</dom-module><dom-module id="lumo-login-overlay" theme-for="vaadin-login-form-wrapper">
<template>
<style include="lumo-color lumo-typography">
:host([theme~="with-overlay"]) {
min-height: 100%;
display: flex;
justify-content: center;
max-width: 100%;
}
/* Landscape small screen */
@media only screen
and (max-height: 600px)
and (min-width: 600px)
and (orientation: landscape) {
:host([theme~="with-overlay"]) [part="form"] {
height: 100%;
-webkit-overflow-scrolling: touch;
flex: 1;
padding: 2px;
}
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
}
`,
{ include: ['lumo-color', 'lumo-typography'], moduleId: 'lumo-login-overlay' }
);

1

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/vaadin-overlay/theme/lumo/vaadin-overlay.js';
import './vaadin-login-form.js';
import './vaadin-login-overlay-styles.js';
import '../../src/vaadin-login-overlay.js';

39

theme/material/vaadin-login-form-styles.js

@@ -1,24 +0,21 @@

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
const $_documentContainer = html`<dom-module id="material-login-form" theme-for="vaadin-login-form">
<template>
<style>
vaadin-button[part="vaadin-login-submit"] {
margin-top: 3em;
margin-bottom: 2em;
flex-grow: 0;
}
registerStyles(
'vaadin-login-form',
css`
vaadin-button[part='vaadin-login-submit'] {
margin-top: 3em;
margin-bottom: 2em;
flex-grow: 0;
}
/* Small screen */
@media only screen
and (max-width: 1023px) {
vaadin-button[part="vaadin-login-submit"] {
margin-top: 2.5em;
margin-bottom: 1em;
}
/* Small screen */
@media only screen and (max-width: 1023px) {
vaadin-button[part='vaadin-login-submit'] {
margin-top: 2.5em;
margin-bottom: 1em;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
}
`,
{ moduleId: 'material-login-form' }
);

155

theme/material/vaadin-login-form-wrapper-styles.js

@@ -1,91 +0,90 @@

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
const $_documentContainer = html`<dom-module id="material-login-form-wrapper" theme-for="vaadin-login-form-wrapper">
<template>
<style include="material-typography">
:host {
background: var(--material-background-color) linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
min-height: 250px;
}
registerStyles(
'vaadin-login-form-wrapper',
css`
:host {
background: var(--material-background-color) linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
min-height: 250px;
}
[part="form"] {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
}
[part='form'] {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
}
[part="form-title"] {
margin-top: calc(var(--material-h3-font-size) - var(--material-h4-font-size));
font-size: var(--material-h5-font-size);
}
[part='form-title'] {
margin-top: calc(var(--material-h3-font-size) - var(--material-h4-font-size));
font-size: var(--material-h5-font-size);
}
#forgotPasswordButton {
margin: 0.5rem auto;
padding-bottom: 12px;
padding-top: 12px;
text-transform: none;
}
#forgotPasswordButton {
margin: 0.5rem auto;
padding-bottom: 12px;
padding-top: 12px;
text-transform: none;
}
[part="error-message"] {
background-color: hsla(3, 100%, 60%, 0.1);
padding: 1rem;
border-radius: 0.25em;
margin-top: 1rem;
margin-bottom: 0.5rem;
color: var(--material-error-text-color);
}
[part='error-message'] {
background-color: hsla(3, 100%, 60%, 0.1);
padding: 1rem;
border-radius: 0.25em;
margin-top: 1rem;
margin-bottom: 0.5rem;
color: var(--material-error-text-color);
}
:host(:not([dir="rtl"])) [part="error-message"] {
padding-left: 2.25rem;
}
:host(:not([dir='rtl'])) [part='error-message'] {
padding-left: 2.25rem;
}
:host([dir="rtl"]) [part="error-message"] {
padding-right: 2.25rem;
}
:host([dir='rtl']) [part='error-message'] {
padding-right: 2.25rem;
}
[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;
}
[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;
}
:host(:not([dir="rtl"])) [part="error-message"]::before {
/* Visual centering */
margin-left: calc(2.25rem * -0.95);
}
/* Visual centering */
:host(:not([dir='rtl'])) [part='error-message']::before {
margin-left: calc(2.25rem * -0.95);
}
:host([dir="rtl"]) [part="error-message"]::before {
/* Visual centering */
margin-right: calc(2.25rem * -0.95);
}
:host([dir='rtl']) [part='error-message']::before {
margin-right: calc(2.25rem * -0.95);
}
[part="error-message"] h5 {
margin: 0 0 0.25em;
color: inherit;
}
[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='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>`;
document.head.appendChild($_documentContainer.content);
[part='footer'] {
font-size: var(--material-small-font-size);
line-height: 1.375;
color: var(--material-secondary-text-color);
}
`,
{ include: ['material-typography'], moduleId: 'material-login-form-wrapper' }
);

597

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

@@ -0,370 +1,357 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/typography.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
import './vaadin-login-form-styles.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="vaadin-login-overlay-wrapper-material-styles" theme-for="vaadin-login-overlay-wrapper">
<template>
<style include="material-overlay material-typography">
:host {
top: 0;
right: 0;
bottom: 0;
left: 0;
registerStyles(
'vaadin-login-overlay-wrapper',
css`
:host {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
[part='backdrop'] {
background: var(--material-background-color);
}
[part='overlay'] {
background: var(--material-secondary-background-color);
border-radius: 0;
box-shadow: none;
width: 100%;
height: 100%;
}
[part='content'] {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
min-height: 100%;
}
[part='card'] {
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
background: var(--material-secondary-background-color);
max-width: 100%;
min-width: 400px;
height: 100%;
border-radius: 4px;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.04), 0 9px 12px rgba(0, 0, 0, 0.05);
margin: 0.5em;
}
[part='brand'] {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-grow: 1;
flex-shrink: 0;
box-sizing: border-box;
overflow: hidden;
padding: 2.8rem 2.5rem 1.5rem 3.5rem;
background-color: var(--material-primary-color);
color: var(--material-primary-contrast-color);
min-height: 225px;
}
[part='brand'] h1 {
color: inherit;
margin: 0;
font-weight: 500;
font-size: 2rem;
}
[part='form'] {
width: 90%;
margin: auto;
margin-bottom: -65px;
background-color: var(--material-secondary-background-color);
}
[part='description'] {
line-height: 1.375;
color: var(--material-secondary-background-color);
margin-bottom: 0;
}
/* RTL styles */
:host([dir='rtl']) [part='brand'] {
padding: 2.8rem 3.5rem 1.5rem 2.5rem;
}
/* Small screen */
@media only screen and (max-width: 1023px) {
[part='brand'] {
justify-content: center;
min-height: 330px;
padding: 0 2.5rem 5.5rem 2rem;
}
[part="backdrop"] {
background: var(--material-background-color);
[part='brand'] h1 {
font-weight: 500;
font-size: 1.8rem;
text-indent: 1rem;
}
[part="overlay"] {
background: var(--material-secondary-background-color);
border-radius: 0;
box-shadow: none;
width: 100%;
[part='form'] {
margin-top: -80px;
margin-bottom: 20px;
}
/* RTL styles */
:host([dir='rtl']) [part='brand'] {
padding: 0 2rem 5.5rem 2.5rem;
}
}
/* Very small screen */
@media only screen and (max-width: 413px) {
[part='overlay'],
[part='content'],
[part='card'] {
height: 100%;
}
[part="content"] {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
[part='content'] {
min-height: 100%;
background: var(--material-background-color);
align-items: flex-start;
}
[part="card"] {
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
background: var(--material-secondary-background-color);
max-width: 100%;
min-width: 400px;
height: 100%;
border-radius: 4px;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.04), 0 9px 12px rgba(0, 0, 0, 0.05);
margin: 0.5em;
[part='card'] {
min-width: unset;
max-height: none;
overflow: auto;
}
[part="brand"] {
display: flex;
flex-direction: column;
[part='card'],
[part='overlay'] {
width: 100%;
border-radius: 0;
box-shadow: none;
margin: 0;
}
[part='brand'] {
flex-grow: unset;
justify-content: flex-start;
flex-grow: 1;
flex-shrink: 0;
box-sizing: border-box;
overflow: hidden;
padding: 2.8rem 2.5rem 1.5rem 3.5rem;
background-color: var(--material-primary-color);
color: var(--material-primary-contrast-color);
padding: 2.5rem 2.5rem 1.5rem;
min-height: 225px;
}
}
[part="brand"] h1 {
color: inherit;
/* Landscape small screen */
@media only screen and (min-width: 600px) and (max-height: 600px) and (orientation: landscape) {
[part='content'] {
height: 100vh;
}
[part='card'] {
flex-direction: row;
border-radius: 0;
margin: 0;
font-weight: 500;
font-size: 2rem;
width: 100%;
height: 100%;
}
[part="form"] {
width: 90%;
margin: auto;
margin-bottom: -65px;
background-color: var(--material-secondary-background-color);
[part='brand'] {
flex: auto;
flex-basis: 0;
box-sizing: border-box;
}
[part="description"] {
line-height: 1.375;
color: var(--material-secondary-background-color);
margin-bottom: 0;
[part='form'] {
flex: auto;
flex-basis: 0;
overflow: auto;
margin: 0;
height: 100%;
}
/* RTL styles */
:host([dir="rtl"]) [part="brand"] {
padding: 2.8rem 3.5rem 1.5rem 2.5rem;
[part='form'] ::slotted(*) {
display: flex;
bottom: 0;
min-height: 100%;
max-height: none;
margin: unset;
}
}
/* Small screen */
@media only screen
and (max-width: 1023px) {
[part="brand"] {
justify-content: center;
min-height: 330px;
padding: 0 2.5rem 5.5rem 2rem;
}
/* Landscape big screen */
@media only screen and (min-width: 1024px) {
[part='card'] {
flex-direction: row;
align-items: stretch;
width: 100%;
min-height: 0;
height: auto;
max-width: 760px;
}
[part="brand"] h1 {
font-weight: 500;
font-size: 1.8rem;
text-indent: 1rem;
}
[part='content'] {
max-width: 950px;
margin: auto;
height: 100%;
}
[part="form"] {
margin-top: -80px;
margin-bottom: 20px;
}
[part='brand'] {
justify-content: center;
padding: 1.5rem 2.5rem 1.5rem 1.5rem;
}
/* RTL styles */
:host([dir="rtl"]) [part="brand"] {
padding: 0 2rem 5.5rem 2.5rem;
}
[part='brand'],
[part='form'] {
flex: auto;
flex-basis: 0;
box-sizing: border-box;
}
/* Very small screen */
@media only screen
and (max-width: 413px) {
[part="overlay"],
[part="content"],
[part="card"] {
height: 100%;
}
[part='brand'] h1 {
font-size: 2.5em;
}
[part="content"] {
min-height: 100%;
background: var(--material-background-color);
align-items: flex-start;
}
[part='form'] {
margin: 80px 30px 40px -20px;
overflow-x: visible;
}
[part="card"] {
min-width: unset;
max-height: none;
overflow: auto;
}
[part='form'] ::slotted(*) {
height: 100%;
}
[part="card"],
[part="overlay"] {
width: 100%;
border-radius: 0;
box-shadow: none;
margin: 0;
}
/* RTL styles */
:host([dir='rtl']) [part='brand'] {
padding: 1.5rem 1.5rem 1.5rem 2.5rem;
}
[part="brand"] {
flex-grow: unset;
justify-content: flex-start;
padding: 2.5rem 2.5rem 1.5rem;
min-height: 225px;
}
:host([dir='rtl']) [part='form'] {
margin: 80px -20px 40px 30px;
}
}
/* Landscape small screen */
@media only screen
and (min-width: 600px)
and (max-height: 600px)
and (orientation: landscape) {
[part="content"] {
height: 100vh;
}
/* Landscape really big screen */
@media only screen and (min-width: 1440px) {
[part='content'] {
max-width: none;
margin: auto;
}
[part="card"] {
flex-direction: row;
border-radius: 0;
margin: 0;
width: 100%;
height: 100%;
}
[part='card'] {
max-width: 960px;
}
[part="brand"] {
flex: auto;
flex-basis: 0;
box-sizing: border-box;
}
[part='brand'] {
padding-left: 4rem;
padding-right: 1rem;
}
[part="form"] {
flex: auto;
flex-basis: 0;
overflow: auto;
margin: 0;
height: 100%;
}
[part='form'] {
height: 100%;
-webkit-overflow-scrolling: touch;
}
[part="form"] ::slotted(*) {
display: flex;
bottom: 0;
min-height: 100%;
max-height: none;
margin: unset;
}
:host(:not([dir='rtl'])) [part='form'] {
margin-right: 22px;
}
/* Landscape big screen */
@media only screen
and (min-width: 1024px) {
[part="card"] {
flex-direction: row;
align-items: stretch;
width: 100%;
min-height: 0;
height: auto;
max-width: 760px;
}
:host(:not([dir='rtl'])) [part='form'] ::slotted(*) {
right: 80px;
}
[part="content"] {
max-width: 950px;
margin: auto;
height: 100%;
}
/* RTL styles */
:host([dir='rtl']) [part='brand'] {
padding-right: 4rem;
padding-left: 1rem;
}
[part="brand"] {
justify-content: center;
padding: 1.5rem 2.5rem 1.5rem 1.5rem;
}
:host([dir='rtl']) [part='form'] {
margin-left: 22px;
}
[part="brand"],
[part="form"] {
flex: auto;
flex-basis: 0;
box-sizing: border-box;
}
:host([dir='rtl']) [part='form']::slotted(*) {
left: 80px;
}
}
[part="brand"] h1 {
font-size: 2.5em;
}
/* 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="form"] {
margin: 80px 30px 40px -20px;
overflow-x: visible;
}
[part="form"] ::slotted(*) {
height: 100%;
}
/* RTL styles */
:host([dir="rtl"]) [part="brand"] {
padding: 1.5rem 1.5rem 1.5rem 2.5rem;
}
:host([dir="rtl"]) [part="form"] {
margin: 80px -20px 40px 30px;
}
:host(:not([dir='rtl'])) [part='brand'] {
margin-left: calc(constant(safe-area-inset-bottom) * -1);
margin-left: calc(env(safe-area-inset-bottom) * -1);
padding-left: calc(1.5rem + constant(safe-area-inset-bottom));
}
/* Landscape really big screen */
@media only screen
and (min-width: 1440px) {
[part="content"] {
max-width: none;
margin: auto;
}
[part="card"] {
max-width: 960px;
}
[part="brand"] {
padding-left: 4rem;
padding-right: 1rem;
}
[part="form"] {
height: 100%;
-webkit-overflow-scrolling: touch;
}
:host(:not([dir="rtl"])) [part="form"] {
margin-right: 22px;
}
:host(:not([dir="rtl"])) [part="form"] ::slotted(*) {
right: 80px;
}
/* RTL styles */
:host([dir="rtl"]) [part="brand"] {
padding-right: 4rem;
padding-left: 1rem;
}
:host([dir="rtl"]) [part="form"] {
margin-left: 22px;
}
:host([dir="rtl"]) [part="form"]::slotted(*) {
left: 80px;
}
/* RTL styles */
:host([dir='rtl']) [part='brand'] {
margin-right: calc(constant(safe-area-inset-bottom) * -1);
margin-right: calc(env(safe-area-inset-bottom) * -1);
padding-right: calc(1.5rem + constant(safe-area-inset-bottom));
}
}
`,
{ include: ['material-overlay', 'material-typography'], moduleId: 'vaadin-login-overlay-wrapper-material-styles' }
);
/* 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);
}
registerStyles(
'vaadin-login-form-wrapper',
css`
:host([theme~='with-overlay']) {
display: flex;
justify-content: center;
width: 100%;
}
:host(:not([dir="rtl"])) [part="brand"] {
margin-left: calc(constant(safe-area-inset-bottom) * -1);
margin-left: calc(env(safe-area-inset-bottom) * -1);
padding-left: calc(1.5rem + constant(safe-area-inset-bottom));
}
:host([theme~='with-overlay']) [part='form'] {
padding: 2rem 2.5rem 2rem 1.8rem;
}
/* RTL styles */
:host([dir="rtl"]) [part="brand"] {
margin-right: calc(constant(safe-area-inset-bottom) * -1);
margin-right: calc(env(safe-area-inset-bottom) * -1);
padding-right: calc(1.5rem + constant(safe-area-inset-bottom));
}
}
</style>
</template>
</dom-module><dom-module id="material-login-overlay" theme-for="vaadin-login-form-wrapper">
<template>
<style include="material-typography">
:host([theme~="with-overlay"]) {
display: flex;
justify-content: center;
width: 100%;
}
:host([theme~='with-overlay']) [part='form'] h2 {
text-align: center;
font-size: 1.8em;
font-weight: 500;
}
:host([theme~="with-overlay"]) [part="form"] {
padding: 2rem 2.5rem 2rem 1.8rem;
}
:host([theme~='with-overlay']) [part='form'] ::slotted(form) {
display: flex;
flex-direction: column;
}
:host([theme~="with-overlay"]) [part="form"] h2 {
text-align: center;
font-size: 1.8em;
font-weight: 500;
/* Small screen */
@media only screen and (max-width: 413px) {
:host([theme~='with-overlay']) [part='form'] {
padding-top: 0.75rem;
}
}
:host([theme~="with-overlay"]) [part="form"] ::slotted(form) {
display: flex;
flex-direction: column;
/* Landscape big screen */
@media only screen and (min-width: 1024px) {
:host([theme~='with-overlay']) [part='form'] {
padding: 2em;
}
/* Small screen */
@media only screen
and (max-width: 413px) {
:host([theme~="with-overlay"]) [part="form"] {
padding-top: 0.75rem;
}
:host([theme~='with-overlay']) [part='form'] ::slotted(form) {
justify-content: space-around;
margin-top: 20px;
min-height: 250px;
}
}
/* Landscape big screen */
@media only screen
and (min-width: 1024px) {
:host([theme~="with-overlay"]) [part="form"] {
padding: 2em;
}
:host([theme~="with-overlay"]) [part="form"] ::slotted(form) {
justify-content: space-around;
margin-top: 20px;
min-height: 250px;
}
}
/* RTL styles */
:host([dir="rtl"][theme~="with-overlay"]) [part="form"] {
padding: 2rem 1.8rem 2rem 2.5rem;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
/* RTL styles */
:host([dir='rtl'][theme~='with-overlay']) [part='form'] {
padding: 2rem 1.8rem 2rem 2.5rem;
}
`,
{ include: ['material-typography'], moduleId: 'material-login-overlay' }
);

1

theme/material/vaadin-login-overlay.js
import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
import '@vaadin/vaadin-text-field/theme/material/vaadin-password-field.js';
import '@vaadin/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';

13

vaadin-login-form.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-login-form.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-login-form.js';

15

vaadin-login-overlay.d.ts

@@ -1,15 +0,2 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-login-overlay.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-login-overlay.js';
export * from './@types/interfaces';
export * from './src/interfaces';
./@types/interfaces.d.ts
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc