leaf-framework/src/layout/login/login.component.js

Light Everis Angular Frontend Framework

import { Component, Inject } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
var LoginComponent = /** @class */ (function () {
    function LoginComponent(formBuilder, route, router, authService) {
        this.formBuilder = formBuilder;
        this.route = route;
        this.router = router;
        this.authService = authService;
        this.loading = false;
    }
    LoginComponent.prototype.ngOnInit = function () {
        // reset login status
        this.authService.logout();
        this.f = this.formBuilder.group({
            'username': ['', Validators.required],
            'password': ['', Validators.required]
        });
    };
    LoginComponent.prototype.isInvalid = function (control) {
        return control && control.touched && !control.valid;
    };
    LoginComponent.prototype.errorClass = function (control) {
        var condition = this.isInvalid(control);
        return {
            'has-error': condition,
            'has-feedback': condition
        };
    };
    LoginComponent.prototype.login = function () {
        var _this = this;
        if (this.f.dirty && this.f.valid) {
            this.loading = true;
            var username = this.f.value.username, password = this.f.value.password;
            this.authService.login(username, password)
                .subscribe(function (userData) {
                _this.loading = false;
                // navigate to returnUrl just if login successfully
                if (userData.access_token) {
                    _this.router.navigate([_this.route.snapshot.queryParams['returnUrl'] || '/']);
                }
                else {
                    _this.showAuthError('Token not sent from service during authentication.');
                }
            }, function (error) {
                _this.showAuthError('The user is not authorized');
                _this.loading = false;
            });
        }
    };
    LoginComponent.prototype.showAuthError = function (message) {
        var that = this;
        this.authError = message;
        setTimeout(function () {
            that.authError = null;
        }, 1000);
    };
    LoginComponent.decorators = [
        { type: Component, args: [{
                    selector: 'app-login',
                    template: "\n  <div class=\"col-md-6 col-md-offset-3\">\n      <h2>Login</h2>\n      <form [formGroup]=\"f\" (ngSubmit)=\"login()\" novalidate>\n          <div *ngIf=\"authError\" id=\"message\" role=\"alert\" class=\"alert alert-danger\"><i class=\"fa fa-remove\"></i> {{authError}}</div>\n          <div class=\"form-group\" [ngClass]=\"errorClass(f.controls.username)\">\n              <label for=\"username\">User name:</label>\n              <input type=\"text\" class=\"form-control\" id=\"username\" formControlName=\"username\" placeholder=\"Enter user name ...\">\n              <span *ngIf=\"isInvalid(f.controls.username)\" class=\"glyphicon glyphicon-remove form-control-feedback\"></span>\n              <leaf-layout-control-messages [formControl]=\"f.controls.username\" [message]=\"'Username is required!'\"></leaf-layout-control-messages>\n          </div>\n          <div class=\"form-group\" [ngClass]=\"errorClass(f.controls.password)\">\n              <label for=\"pwd\">Password:</label>\n              <input type=\"password\" class=\"form-control\" id=\"pwd\" formControlName=\"password\" placeholder=\"Enter password ...\">\n              <span *ngIf=\"isInvalid(f.controls.password)\" class=\"glyphicon glyphicon-remove form-control-feedback\"></span>\n              <leaf-layout-control-messages [formControl]=\"f.controls.password\" [message]=\"'Password is required!'\"></leaf-layout-control-messages>\n          </div>\n          <div class=\"form-group\">\n              <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"(f.dirty && !f.valid) || loading\">Login</button>\n              <img *ngIf=\"loading\" src=\"data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==\" />\n          </div>\n      </form>\n  </div>\n  "
                },] },
    ];
    /** @nocollapse */
    LoginComponent.ctorParameters = function () { return [
        { type: FormBuilder, },
        { type: ActivatedRoute, },
        { type: Router, },
        { type: AuthService, decorators: [{ type: Inject, args: ['AuthService',] },] },
    ]; };
    return LoginComponent;
}());
export { LoginComponent };
//# sourceMappingURL=login.component.js.map