loginpage

<!--
A comment describing this element

Example:

    <my-elem></my-elem>

Example:

    <my-elem>
      <h2>Hello my-elem</h2>
    </my-elem>

@demo demo/index.html
-->

<dom-module id="login-page">
	<template>
		<style>
			:host {
				display: block;
			}
			.container{
				background-color: var(--default-primary-color);
				@apply(--layout-vertical); @apply(--layout-fit);@apply(--layout-center-justified);@apply(--layout-center);
			}
			paper-card{
				background-color: white;    min-width: 300px;margin-bottom:15px;
			}
			paper-card div{
				padding: 15px 30px;
				@apply(--layout-vertical);
				@apply(--layout-center);
			}
			#loginBtn{
				background-color: lightgreen;
				width: 100%;
				margin-top: 30px;
				margin-bottom: 15px;
				--paper-button-ink-color:white;
			}
			paper-input{
				width: 100%;
			}
			.error-container{
				padding: 5px;
				color:red;
				text-align: center;
			}
		</style>
		<div class="container">
			<paper-card>
				<div>
					<h1>SE2 TP CMS</h1>
					<paper-input
					error-message="Este campo es requerido"
					required id="username"
					label="Nombre de usuario">
					</paper-input>

					<paper-input
					error-message="Este campo es requerido"
					required type="password"
					id="password" label="Contraseña"></paper-input>

					<paper-button id="loginBtn">Ingresar</paper-button>
				</div>
			</paper-card>
			<paper-card hidden$="[[!hasErrors]]" class="error-container"><span>{{errorMsg}}</span></paper-card>

			<iron-ajax
				id="ironAjax"
				handle-as="json"
			 	on-response="handleResponseFn"
			 	on-error="handleError"></iron-ajax>
		</div>
	</template>
	<script>
		Polymer({
			is: 'login-page',
			ready: function () {
				this.listen(this.$.loginBtn, 'click', 'onClickIngresar');
				this.hasErrors = false;
				this.errorMsg = '';
				this.thisAjax = this.$.ironAjax;
			},
			validateInputs: function () {

				if(this.$.username.validate() === true && this.$.password.validate() === true){
					return true;
				}else{
					return false;
				}

			},
			onPageVisible: function () {
				console.log('pagina login');
				this.hasErrors = false;this.errorMsg = '';
				this.$.username.value= '';
				this.$.password.value= '';
			},
			onClickIngresar: function () {
				var that = this;

				if(this.validateInputs() === false) return;

				var body = {};
				body.username = this.$.username.value;
				body.password = this.$.password.value;

				this.thisAjax.url = app.apiBaseUrl + 'users/login';
				this.thisAjax.method = 'POST';
				this.thisAjax.contentType = 'application/json';
				this.thisAjax.withCredentials = true;
				this.thisAjax.body = JSON.parse(JSON.stringify(body));
				this.handleResponseFn = this.ajaxLogin;
				this.thisAjax.generateRequest();

			},
			ajaxLogin: function (e) {
				var that = this;
				if(e.detail.response && e.detail.status === 200){ //si hay respuesta y es 200 OK
					var sid = e.detail.response.id;
					that.getMeData(function (errStatus, meData) {
						if(errStatus){
							that.hasErrors = true;
						}else{
							app.$.userLs.setData({
								name: meData.name,
								id: meData.id,
								profilePicUrl : meData.profilePicUrl,
								sid : sid
							});
							app.profile = app.$.userLs.data;
							page('/');
						}
					});

				}
			},
			handleError: function (e) {
				if(e.detail.request.status === 401){
					this.hasErrors = true;
					this.errorMsg = 'El usuario y/o contraseña no son correctos';
				}
			},
			getMeData: function (callback) {
				var that = this;
				var request = new XMLHttpRequest();

				request.open('GET', app.apiBaseUrl + 'users/me', true);
				request.withCredentials = true;
				request.setRequestHeader("Content-type", "application/json");

				request.onload = function() {
					console.log('request.responseText', request.responseText);
					if (request.status >= 200 && request.status < 400) {

    					// Success!
						callback(null, JSON.parse(request.responseText));
					} else {
				    	// We reached our target server, but it returned an error
				    	callback(request.status, JSON.parse(request.responseText));
					}
				};

				request.onerror = function() {
					console.log("error al traer datos de usuario");
					callback(request.status, JSON.parse(request.responseText));
				  // There was a connection error of some sort
				};

				request.send();
			},
			logOut: function () {
				this.thisAjax.url = app.apiBaseUrl + 'users/logout';
				this.thisAjax.method = 'GET';
				this.thisAjax.contentType = 'application/json';
				this.thisAjax.withCredentials = true;
				this.handleResponseFn = function () {
					app.$.userLs.resetData();
					app.$.profile = app.$.userLs.data;
					page('/login');
				};
				this.thisAjax.generateRequest();
			}
		});
	</script>
</dom-module>