Vaadin login layout example

vaadin-login-view.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-form/iron-form.html">

<link rel="import" href="../../bower_components/vaadin-text-field/src/vaadin-text-field.html">
<link rel="import" href="../../bower_components/vaadin-text-field/src/vaadin-password-field.html">
<link rel="import" href="../../bower_components/vaadin-button/src/vaadin-button.html">

<dom-module id="login-view">
    <template>
        <style>
            :host {
                display: flex;
                justify-content: center;
            }
            #loginForm {
                width: 800px;
            }
        </style>
        <iron-form id="loginForm" allow-redirect>
            <form is="iron-form" method="post" action="login" content-type="application/json">
                <vaadin-text-field id="username" name="username" label="Email" autofocus required></vaadin-text-field>
                <vaadin-password-field id="password" name="password" label="Password" required on-keydown="_onPasswordKeydown"></vaadin-password-field>
                <vaadin-button class="login__button" on-click="login" theme="primary">
                    Sign In
                </vaadin-button>
            </form>
        </iron-form>
    </template>

    <script>

        class LoginView extends Polymer.Element {
            static get is() {
                return 'login-view';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }

            login() {
                if (!this.$.username.invalid && !this.$.password.invalid) {
                    this.$.loginForm.submit();
                }
            }

            _onPasswordKeydown(event) {
                if (event.key === 'Enter' || event.keyCode == 13) {
                    this.login();
                }
            }
        }

        customElements.define(LoginView.is, LoginView);
    </script>
</dom-module>