Polymer login-element webcomponent

login-element.html

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

<dom-module id="login-element">
	<template>
		<style>
			:host {
				display: block;
			}
		</style>

        <iron-ajax
             id="postLoginForm"
             method="POST"
             verbose
             url="../../login"
             content-type="application/json"
             handle-as="json"
             loading="{{loading}}"
             headers="{{csrfHeaders}}"
             last-error="{{lastError}}"
             last-response="{{lastResponse}}"
             on-response="_handleLoginResponse"></iron-ajax>

        <h2>Ajax Login</h2>
        <h1>Error: {{lastError.error}}</h1>
        <h1>Response: {{lastResponse.email}}</h1>

        <div class="panel-body">

            <form class="form-horizontal" role="form" on-submit="submitLoginForm">
               
                <div class="form-group">
                    <label class="col-md-4 control-label">E-Mail Address</label>

                    <div class="col-md-6">
                        <input id="email" type="email" class="form-control" name="email">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Password</label>

                    <div class="col-md-6">
                        <input id="password" type="password" class="form-control" name="password">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-6 col-md-offset-4">
                        <div class="checkbox">
                            <label>
                                <input id="remember" type="checkbox" name="remember"> Remember Me
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-6 col-md-offset-4">
                        <template is="dom-if" if="{{!loading}}">
                            <button type="submit" class="btn btn-lg btn-default">
                                <i class="fa fa-btn fa-sign-in"></i>Login
                            </button>
                        </template>
                        <template is="dom-if" if="{{loading}}">
                            <button type="submit" class="btn btn-lg btn-default">
                                <paper-spinner active></paper-spinner>
                            </button>
                        </template>

                        <a class="btn btn-link" href="../../password/reset">Forgot Your Password?</a>
                    </div>
                </div>
            </form>
        </div>

	</template>
	<script>
		Polymer({
			is: 'login-element',

			properties: {
                loading: {
                    type: Boolean,
                    value: false
                },
                csrfToken: {
                    type: String,
                    value: document.getElementById('token').getAttribute('value')
                },
                csrfHeaders: {
                    type: Object,
                    computed: '_computeTokenHeaders(csrfToken)'
                },
                lastError: {
                    type: Object
                }
			},

        	submitLoginForm: function (event) {
        		event.preventDefault();

        		// get the values
                var object = this._getFormValues();

                this.querySelector('#postLoginForm').body = object;
                this.querySelector('#postLoginForm').generateRequest();
            },

            _computeTokenHeaders: function (csrfToken) {
                return {'X-CSRF-Token': csrfToken};
            },

            _handleLoginResponse: function (event) {
                this.errorMessage = event.detail.response;
                // console.log(this.lastError);

                // console.log(this.querySelector('#postLoginForm').requestUrl);
                // console.log(this.querySelector('#postLoginForm').url);

                console.log(this.errorMessage);
            },

            _getFormValues: function () {
                var email = this.querySelector('#email').value;
                var password = this.querySelector('#password').value;
                var remember = this.querySelector('#remember').value;

                return { 
                    'email': email, 
                    'password': password, 
                    'remember': remember 
                };
            },

		});
	</script>
</dom-module>