ui-logon-angular
Version:
Refer [UI-Logon](https://www.npmjs.com/package/ui-logon).
282 lines (272 loc) • 22.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, ElementRef, Component, Inject, ViewChild, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common/http';
import { HttpHeaders, HttpClientModule } from '@angular/common/http';
import * as i4 from 'ui-message-angular';
import { messageType, MessageModule } from 'ui-message-angular';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import * as i6 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i1$1 from '@angular/router';
import * as i2 from '@angular/cdk/text-field';
import * as i5 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
const msgStore = [
{ msgCat: 'EXCEPTION',
msgName: 'GENERIC',
msgText: {
EN: { shortText: 'Exception Occurs',
longText: '%s1' }
}
}
];
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
class LogonService {
constructor(http, messageService) {
this.http = http;
this.messageService = messageService;
this.host = '';
this.messageService.setMessageStore(msgStore, 'EN');
}
setHost(host) {
this.host = host;
}
logon(userid, password) {
return this.http.post(this.host ? this.host + '/api/logon' : 'api/logon', { username: userid, password: password }, httpOptions).pipe(catchError(this.handleError('Logon')));
}
logout() {
return this.http.delete(this.host ? this.host + '/api/logout' : 'api/logout', httpOptions).pipe(catchError(this.handleError('Logout')));
}
session() {
return this.http.get(this.host ? this.host + '/api/session' : 'api/session', httpOptions).pipe(catchError(this.handleError('Get session')));
}
/**
* this method is called during logon component initialization. It tries to get the session,
* but without raising any errors.
*/
try_get_session() {
return this.http.get(this.host ? this.host + '/api/session' : 'api/session', httpOptions);
}
query(queryObject) {
return this.http.post(this.host ? this.host + '/api/query' : 'api/query', queryObject, httpOptions).pipe(catchError(this.handleError('query')));
}
read(instanceGUID) {
return this.http.get(this.host ? this.host + `/api/entity/instance/${instanceGUID}` : `api/entity/instance/${instanceGUID}`)
.pipe(catchError(this.handleError('read')));
}
handleError(operation = 'operation', result) {
return (error) => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
this.messageService.addMessage('EXCEPTION', 'GENERIC', messageType.Exception, JSON.stringify(error));
// Let the app keep running by returning an empty result.
return of(result);
};
}
}
LogonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonService, deps: [{ token: i1.HttpClient }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
LogonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i4.MessageService }]; } });
class User {
}
class PluralField {
}
class QueryObject {
}
class Projection {
}
class Selection {
}
class Sort {
}
class Session {
}
class LogonComponent {
constructor(document, router, route, autofill, logonService, messageService) {
this.document = document;
this.router = router;
this.route = route;
this.autofill = autofill;
this.logonService = logonService;
this.messageService = messageService;
this.user = new User;
this.isWaiting = false;
this.title = 'Logon Portal';
this.userLabel = 'User ID';
this.pwdLabel = 'Password';
this.btnLabel = 'Logon';
this.redirectUrl = '';
this.redirectPath = '';
this.host = '';
}
ngOnInit() {
this.autofill.monitor(this.inputUserID.nativeElement);
this.autofill.monitor(this.inputPassword.nativeElement);
if (this.route.snapshot.data['title']) {
this.title = this.route.snapshot.data['title'];
}
if (this.route.snapshot.data['userLabel']) {
this.userLabel = this.route.snapshot.data['userLabel'];
}
if (this.route.snapshot.data['pwdLabel']) {
this.pwdLabel = this.route.snapshot.data['pwdLabel'];
}
if (this.route.snapshot.data['btnLabel']) {
this.btnLabel = this.route.snapshot.data['btnLabel'];
}
if (this.route.snapshot.data['redirectUrl']) {
this.redirectUrl = this.route.snapshot.data['redirectUrl'];
}
if (this.route.snapshot.data['redirectPath']) {
this.redirectPath = this.route.snapshot.data['redirectPath'];
}
if (this.route.snapshot.data['host']) {
this.host = this.route.snapshot.data['host'];
}
this.logonService.setHost(this.host);
}
ngOnDestroy() {
this.autofill.stopMonitoring(this.inputUserID.nativeElement);
this.autofill.stopMonitoring(this.inputPassword.nativeElement);
}
logon() {
this.isWaiting = true;
this.logonService.logon(this.user.userid, this.user.password).subscribe(data => {
this.isWaiting = false;
if (!data) {
return;
}
if (data.err) {
if (Array.isArray(data.err)) {
data.err.forEach(err => this.messageService.add(err));
}
else {
this.messageService.report(data.err);
}
}
else {
this.user.displayName = data.user['DISPLAY_NAME'];
this.user.userid = data.user['USER_ID'];
this.user.username = data.user['USER_NAME'];
this.user.locked = data.user['LOCK'];
this.user.pwdState = data.user['PWD_STATE'];
this.user.name = data.user['GIVEN_NAME'];
if (this.redirectPath) {
this.router.navigateByUrl(this.redirectPath);
}
else if (this.redirectUrl) {
this.document.location.href = this.redirectUrl;
}
}
});
}
}
LogonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.AutofillMonitor }, { token: LogonService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component });
LogonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LogonComponent, selector: "dk-logon", inputs: { title: "title", userLabel: "userLabel", pwdLabel: "pwdLabel", btnLabel: "btnLabel", redirectUrl: "redirectUrl", redirectPath: "redirectPath", host: "host" }, viewQueries: [{ propertyName: "inputUserID", first: true, predicate: ["inputUserID"], descendants: true, read: ElementRef, static: true }, { propertyName: "inputPassword", first: true, predicate: ["inputPassword"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form class=\"dk-form-logon\" (ngSubmit)=\"logon()\">\n <fieldset [disabled]=\"isWaiting\">\n <div class=\"text-center dk-mb-4\">\n <!--<img class=\"mb-4\" src=\"https://getbootstrap.com/assets/brand/bootstrap-solid.svg\" alt=\"\" width=\"72\" height=\"72\">-->\n <h1 class=\"dk-form-title dk-mb-3 font-weight-normal\">{{title}}</h1>\n </div>\n\n <div class=\"dk-message-area\">\n <dk-message></dk-message>\n </div>\n\n <div class=\"dk-form-label-group\">\n <input type=\"text\" id=\"inputUserID\" name=\"inputUserID\" #inputUserID class=\"form-control dk-form-control\"\n [(ngModel)]=\"user.userid\" placeholder=\"User ID\" required=\"\" autofocus=\"\">\n <label for=\"inputUserID\">{{userLabel}}</label>\n </div>\n\n <div class=\"dk-form-label-group\">\n <input type=\"password\" id=\"inputPassword\" name=\"inputPassword\" #inputPassword class=\"form-control dk-form-control\"\n [(ngModel)]=\"user.password\" placeholder=\"Password\" required=\"\">\n <label for=\"inputPassword\">{{pwdLabel}}</label>\n </div>\n\n <button class=\"btn dk-btn-lg btn-primary btn-block\" type=\"submit\">\n <i *ngIf=\"isWaiting\" class=\"fas fa-spinner fa-spin\"></i> {{btnLabel}}\n </button>\n </fieldset>\n</form>\n\n", styles: [".dk-form-logon{width:100%;max-width:420px;padding:15px;margin:0 auto;line-height:1.5;--input-padding-x: .75rem;--input-padding-y: .75rem}.dk-form-logon label{margin-bottom:.5rem;font-size:1rem}.dk-message-area{margin-bottom:.5rem}.dk-mb-3{margin-bottom:1rem}.dk-mb-4{margin-bottom:1.5rem}.dk-form-title{font-size:1.75rem;line-height:1.2;color:inherit;font-family:inherit}.dk-form-label-group{position:relative;margin-bottom:1rem}.dk-form-control{font-size:1rem;border-radius:.25rem;height:calc(2.9rem + 2px)}.dk-form-label-group>input,.dk-form-label-group>label{padding:var(--input-padding-y) var(--input-padding-x)}.dk-form-label-group>label{position:absolute;top:0;left:0;display:block;width:100%;margin-bottom:0;line-height:1.5;color:#495057;border:1px solid transparent;border-radius:.25rem;transition:all .1s ease-in-out}.dk-form-label-group input:-ms-input-placeholder{color:transparent}.dk-form-label-group input::-moz-placeholder{color:transparent}.dk-form-label-group input::placeholder{color:transparent}.dk-form-label-group input:-webkit-autofill{-webkit-animation-name:cdk-text-field-autofill-start;animation-name:cdk-text-field-autofill-start;-webkit-transition:background-color 50000s ease-in-out 0s;transition:background-color 50000s ease-in-out 0s}.dk-form-label-group input:not(:-webkit-autofill){-webkit-animation-name:cdk-text-field-autofill-end;animation-name:cdk-text-field-autofill-end}.dk-form-label-group input:not(:-moz-placeholder-shown){padding-top:calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));padding-bottom:calc(var(--input-padding-y) / 3)}.dk-form-label-group input:not(:-ms-input-placeholder){padding-top:calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));padding-bottom:calc(var(--input-padding-y) / 3)}.dk-form-label-group input:not(:placeholder-shown),.dk-form-label-group input.cdk-text-field-autofilled{padding-top:calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));padding-bottom:calc(var(--input-padding-y) / 3)}.dk-form-label-group input:not(:-moz-placeholder-shown)~label{padding-top:calc(var(--input-padding-y) / 3);padding-bottom:calc(var(--input-padding-y) / 3);font-size:.75rem;color:#777}.dk-form-label-group input:not(:-ms-input-placeholder)~label{padding-top:calc(var(--input-padding-y) / 3);padding-bottom:calc(var(--input-padding-y) / 3);font-size:.75rem;color:#777}.dk-form-label-group input:not(:placeholder-shown)~label,.dk-form-label-group input.cdk-text-field-autofilled~label{padding-top:calc(var(--input-padding-y) / 3);padding-bottom:calc(var(--input-padding-y) / 3);font-size:.75rem;color:#777}.dk-btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}\n"], components: [{ type: i4.MessageComponent, selector: "dk-message" }], directives: [{ type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonComponent, decorators: [{
type: Component,
args: [{ selector: 'dk-logon', template: "<form class=\"dk-form-logon\" (ngSubmit)=\"logon()\">\n <fieldset [disabled]=\"isWaiting\">\n <div class=\"text-center dk-mb-4\">\n <!--<img class=\"mb-4\" src=\"https://getbootstrap.com/assets/brand/bootstrap-solid.svg\" alt=\"\" width=\"72\" height=\"72\">-->\n <h1 class=\"dk-form-title dk-mb-3 font-weight-normal\">{{title}}</h1>\n </div>\n\n <div class=\"dk-message-area\">\n <dk-message></dk-message>\n </div>\n\n <div class=\"dk-form-label-group\">\n <input type=\"text\" id=\"inputUserID\" name=\"inputUserID\" #inputUserID class=\"form-control dk-form-control\"\n [(ngModel)]=\"user.userid\" placeholder=\"User ID\" required=\"\" autofocus=\"\">\n <label for=\"inputUserID\">{{userLabel}}</label>\n </div>\n\n <div class=\"dk-form-label-group\">\n <input type=\"password\" id=\"inputPassword\" name=\"inputPassword\" #inputPassword class=\"form-control dk-form-control\"\n [(ngModel)]=\"user.password\" placeholder=\"Password\" required=\"\">\n <label for=\"inputPassword\">{{pwdLabel}}</label>\n </div>\n\n <button class=\"btn dk-btn-lg btn-primary btn-block\" type=\"submit\">\n <i *ngIf=\"isWaiting\" class=\"fas fa-spinner fa-spin\"></i> {{btnLabel}}\n </button>\n </fieldset>\n</form>\n\n", styles: [".dk-form-logon{width:100%;max-width:420px;padding:15px;margin:0 auto;line-height:1.5;--input-padding-x: .75rem;--input-padding-y: .75rem}.dk-form-logon label{margin-bottom:.5rem;font-size:1rem}.dk-message-area{margin-bottom:.5rem}.dk-mb-3{margin-bottom:1rem}.dk-mb-4{margin-bottom:1.5rem}.dk-form-title{font-size:1.75rem;line-height:1.2;color:inherit;font-family:inherit}.dk-form-label-group{position:relative;margin-bottom:1rem}.dk-form-control{font-size:1rem;border-radius:.25rem;height:calc(2.9rem + 2px)}.dk-form-label-group>input,.dk-form-label-group>label{padding:var(--input-padding-y) var(--input-padding-x)}.dk-form-label-group>label{position:absolute;top:0;left:0;display:block;width:100%;margin-bottom:0;line-height:1.5;color:#495057;border:1px solid transparent;border-radius:.25rem;transition:all .1s ease-in-out}.dk-form-label-group input:-ms-input-placeholder{color:transparent}.dk-form-label-group input::-moz-placeholder{color:transparent}.dk-form-label-group input::placeholder{color:transparent}.dk-form-label-group input:-webkit-autofill{-webkit-animation-name:cdk-text-field-autofill-start;animation-name:cdk-text-field-autofill-start;-webkit-transition:background-color 50000s ease-in-out 0s;transition:background-color 50000s ease-in-out 0s}.dk-form-label-group input:not(:-webkit-autofill){-webkit-animation-name:cdk-text-field-autofill-end;animation-name:cdk-text-field-autofill-end}.dk-form-label-group input:not(:-moz-placeholder-shown){padding-top:calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));padding-bottom:calc(var(--input-padding-y) / 3)}.dk-form-label-group input:not(:-ms-input-placeholder){padding-top:calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));padding-bottom:calc(var(--input-padding-y) / 3)}.dk-form-label-group input:not(:placeholder-shown),.dk-form-label-group input.cdk-text-field-autofilled{padding-top:calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));padding-bottom:calc(var(--input-padding-y) / 3)}.dk-form-label-group input:not(:-moz-placeholder-shown)~label{padding-top:calc(var(--input-padding-y) / 3);padding-bottom:calc(var(--input-padding-y) / 3);font-size:.75rem;color:#777}.dk-form-label-group input:not(:-ms-input-placeholder)~label{padding-top:calc(var(--input-padding-y) / 3);padding-bottom:calc(var(--input-padding-y) / 3);font-size:.75rem;color:#777}.dk-form-label-group input:not(:placeholder-shown)~label,.dk-form-label-group input.cdk-text-field-autofilled~label{padding-top:calc(var(--input-padding-y) / 3);padding-bottom:calc(var(--input-padding-y) / 3);font-size:.75rem;color:#777}.dk-btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}\n"] }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.AutofillMonitor }, { type: LogonService }, { type: i4.MessageService }];
}, propDecorators: { inputUserID: [{
type: ViewChild,
args: ['inputUserID', { read: ElementRef, static: true }]
}], inputPassword: [{
type: ViewChild,
args: ['inputPassword', { read: ElementRef, static: true }]
}], title: [{
type: Input
}], userLabel: [{
type: Input
}], pwdLabel: [{
type: Input
}], btnLabel: [{
type: Input
}], redirectUrl: [{
type: Input
}], redirectPath: [{
type: Input
}], host: [{
type: Input
}] } });
class LandingPageComponent {
constructor(router, logonService) {
this.router = router;
this.logonService = logonService;
}
ngOnInit() {
}
logout() {
this.logonService.logout().subscribe(data => {
this.router.navigateByUrl('');
});
}
session() {
this.logonService.session().subscribe(data => {
this.result = data;
});
}
query() {
const queryObject = {
ENTITY_ID: 'person',
RELATION_ID: 'r_user'
};
this.logonService.query(queryObject).subscribe(data => this.result = data);
}
read() {
this.logonService.read('2FBE7490E10F11E8A90957FA46F2CECA').subscribe(data => this.result = data);
}
}
LandingPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LandingPageComponent, deps: [{ token: i1$1.Router }, { token: LogonService }], target: i0.ɵɵFactoryTarget.Component });
LandingPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LandingPageComponent, selector: "dk-landing-page", ngImport: i0, template: "<h4>\n Logon Successfully\n</h4>\n\n<div class=\"btn-group\" role=\"group\">\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"logout()\">Logout</button>\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"session()\">Get Session</button>\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"query()\">Query</button>\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"read()\">Read</button>\n</div>\n<div class=\"container\">\n <pre>{{result | json}}</pre>\n</div>\n", pipes: { "json": i6.JsonPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LandingPageComponent, decorators: [{
type: Component,
args: [{ selector: 'dk-landing-page', template: "<h4>\n Logon Successfully\n</h4>\n\n<div class=\"btn-group\" role=\"group\">\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"logout()\">Logout</button>\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"session()\">Get Session</button>\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"query()\">Query</button>\n <button type=\"button\" class=\"btn dk-btn-lg btn-primary\" (click)=\"read()\">Read</button>\n</div>\n<div class=\"container\">\n <pre>{{result | json}}</pre>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: LogonService }]; } });
class LogonModule {
}
LogonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LogonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonModule, declarations: [LogonComponent, LandingPageComponent], imports: [CommonModule,
BrowserModule,
FormsModule,
HttpClientModule,
MessageModule], exports: [LogonComponent] });
LogonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonModule, imports: [[
CommonModule,
BrowserModule,
FormsModule,
HttpClientModule,
MessageModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LogonModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
BrowserModule,
FormsModule,
HttpClientModule,
MessageModule
],
declarations: [LogonComponent, LandingPageComponent],
exports: [LogonComponent]
}]
}] });
/*
* Public API Surface of logon
*/
/**
* Generated bundle index. Do not edit.
*/
export { LandingPageComponent, LogonComponent, LogonModule, LogonService, PluralField, Projection, QueryObject, Selection, Session, Sort, User };
//# sourceMappingURL=ui-logon-angular.mjs.map