vaadin-elements-login

import { Component, ViewChild } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';

import { Credentials } from './credentials';
import { LoginService } from './login.service'; 

// The following article was instrumental in helping
// to implement material login window:
// http://stackoverflow.com/questions/37161958/iron-flex-layout-center-in-page
@Component({
    selector: 'login',
    template: `
        <div class="horizontal layout center-justified card-container">
            <div class="vertical layout center-justified">
                <h2>Welcome to OpenCBS</h2>
                <paper-material>
                    <paper-input label="Username" [(value)]="credentials.userName"></paper-input>
                    <paper-input label="Password" type="password" [(value)]="credentials.password"></paper-input>
                    <paper-button (click)="login()">Login</paper-button>
                </paper-material>
            </div>

            <paper-toast text="Hello world"></paper-toast>
        </div>
    `,
    styles: [
        `
        .card-container {
            height: 100%;
        }

        paper-material {
            background-color: white;
            padding: 24px;
            min-width: 300px;
        }

        paper-button {
            background-color: var(--primary-color);
            color: white;
            margin: 24px 0 0;
        }

        h2 {
            text-align: center;
        }
        `
    ],
    directives: [
        PolymerElement('paper-material'),
        PolymerElement('paper-input'),
        PolymerElement('paper-button'),
        PolymerElement('paper-toast')
    ]
})
export class LoginComponent {
    credentials = new Credentials();

    constructor(private _loginService: LoginService) { }

    private handleError(error: any) {
        console.log('ERROR', error);
    }

    login() {

        // how do I open the toast
        this._loginService
            .login(this.credentials)
            .then(r => console.log('Login response', r))
            .catch(this.handleError);
    }
}