@sambath999/localize-token 12.1.2 → 12.1.4

package/fesm2015/sambath999-localize-token.js

@@ -1,9 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, NgModule } from '@angular/core';
+import { Injectable, NgModule, Component, ViewEncapsulation, ChangeDetectorRef, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { __awaiter } from 'tslib';
 import { BehaviorSubject } from 'rxjs';
 import * as jwt_decode from 'jwt-decode';
-import { HttpHeaders } from '@angular/common/http';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClient } from '@angular/common/http';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogRef, DynamicDialogConfig, DialogService } from 'primeng/dynamicdialog';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { ToastModule } from 'primeng/toast';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
 
 /**
 * Assembly of @package ng2-cookies @see https://www.npmjs.com/package/ng2-cookies
@@ -63,7 +72,20 @@ class LocalizeTokenStorageHelper {
         }
         return cookies;
     }
-    get defaultOptions() { return LocalizeToken.cookieOptions; }
+    get defaultOptions() {
+        const getMainDomain = (subdomain) => {
+            const parts = subdomain.split('.');
+            return parts.length > 2 ? parts.slice(-2).join('.') : subdomain;
+        };
+        const mainDomain = getMainDomain(window.location.hostname);
+        return {
+            path: '/',
+            domain: mainDomain,
+            secure: true,
+            // samesite: SameSiteType.strict,
+            expires: 1
+        };
+    }
     set(name, value, options) {
         options !== null && options !== void 0 ? options : (options = this.defaultOptions);
         const { expires, path, domain, secure, samesite } = options;
@@ -231,7 +253,8 @@ var EMethod;
     EMethod[EMethod["PATCH"] = 5] = "PATCH";
 })(EMethod || (EMethod = {}));
 class LocalizeApiService {
-    constructor(localizeTokenService) {
+    constructor(httpClient, localizeTokenService) {
+        this.httpClient = httpClient;
         this.localizeTokenService = localizeTokenService;
         this.isRequestingSubject = new BehaviorSubject(false);
         this.isResolvedStartupSubject = new BehaviorSubject(false);
@@ -250,8 +273,7 @@ class LocalizeApiService {
      * Initialize the API service.
      * @param apiConfigs - The API configurations.
      */
-    init(httpClient, apiConfigs) {
-        this.httpClient = httpClient;
+    init(apiConfigs) {
         this.apiConfigs = apiConfigs;
     }
     base(baseUrl, path, method = EMethod.GET, value = null, isFormData = false, headers) {
@@ -295,7 +317,7 @@ class LocalizeApiService {
     processRequest(method, url, options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.isRequestingSubject.next(true);
-            const result = yield new Promise((resolve, reject) => { var _a; return (_a = this.httpClient) === null || _a === void 0 ? void 0 : _a.request(method, url, options).subscribe({ next: resolve, error: reject }); });
+            const result = yield new Promise((resolve, reject) => this.httpClient.request(method, url, options).subscribe({ next: resolve, error: reject }));
             this.isRequestingSubject.next(false);
             return result;
         });
@@ -310,7 +332,7 @@ class LocalizeApiService {
                 this.localizeTokenService.isRevokingToken = true;
                 const reqUrl = LocalizeToken.config.revokeTokenUrl;
                 const reqHeaders = this.options().append(LocalizeToken.httpHeaders.X_REFRESH_TOKEN, `${this.localizeTokenService.refreshToken}`);
-                const revokeToken = yield new Promise((resolve, reject) => { var _a; return (_a = this.httpClient) === null || _a === void 0 ? void 0 : _a.get(reqUrl, { headers: reqHeaders }).subscribe({ next: resolve, error: reject }); });
+                const revokeToken = yield new Promise((resolve, reject) => this.httpClient.get(reqUrl, { headers: reqHeaders }).subscribe({ next: resolve, error: reject }));
                 if (revokeToken === null || revokeToken === void 0 ? void 0 : revokeToken.status) {
                     this.localizeTokenService.accessToken = revokeToken.message;
                 }
@@ -351,13 +373,14 @@ class LocalizeApiService {
         });
     }
 } //class
-LocalizeApiService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalizeApiService_Factory() { return new LocalizeApiService(i0.ɵɵinject(LocalizeTokenService)); }, token: LocalizeApiService, providedIn: "root" });
+LocalizeApiService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalizeApiService_Factory() { return new LocalizeApiService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(LocalizeTokenService)); }, token: LocalizeApiService, providedIn: "root" });
 LocalizeApiService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
 LocalizeApiService.ctorParameters = () => [
+    { type: HttpClient },
     { type: LocalizeTokenService }
 ];
 
@@ -372,9 +395,396 @@ LocalizeTokenModule.decorators = [
             },] }
 ];
 
+class LocalizeLogindlgComponent {
+    constructor(messageService, cdt, dlgRef, dlgConfig, tokenService, httpClient) {
+        this.messageService = messageService;
+        this.cdt = cdt;
+        this.dlgRef = dlgRef;
+        this.dlgConfig = dlgConfig;
+        this.tokenService = tokenService;
+        this.httpClient = httpClient;
+        this.messageKey = "$login-dlg";
+        this.loading = false;
+        this.success = false;
+        this.clickLogout = () => { var _a; return (_a = this.logout) === null || _a === void 0 ? void 0 : _a.call(this); };
+        this.decodeToken = this.tokenService.decodeRefreshToken;
+        this.config = LocalizeToken.config;
+        this.loginConfig = this.dlgConfig.data.loginConfig;
+    }
+    ngOnInit() {
+        this.dlgConfig.closable = false;
+        this.logout = this.loginConfig.logoutFunc;
+        this.loginUrl = this.loginConfig.loginUrl;
+        if (!this.decodeToken) {
+            this.messageService.add({
+                key: this.messageKey,
+                severity: "error",
+                summary: "Token is invalid",
+            });
+            setTimeout(() => { var _a; return (_a = this.logout) === null || _a === void 0 ? void 0 : _a.call(this); }, 2000);
+        }
+    }
+    ngAfterViewInit() {
+        this.cdt.detectChanges();
+    }
+    clickLogin() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isValidPassword) {
+                this.messageService.add({
+                    key: this.messageKey,
+                    severity: "error",
+                    summary: "Password is required and must be at least 6 characters",
+                });
+            }
+            this.loading = true;
+            const loginRes = yield this.login();
+            if (!(loginRes === null || loginRes === void 0 ? void 0 : loginRes.status)) {
+                this.messageService.add({
+                    key: this.messageKey,
+                    severity: "error",
+                    summary: loginRes.message,
+                });
+                this.loading = false;
+                return;
+            }
+            this.tokenService.accessToken = loginRes.tokens.accessToken;
+            LocalizeToken.storage.set(this.config.refreshTokenName, loginRes.tokens.refreshToken);
+            this.success = true;
+            setTimeout(() => this.dlgRef.close(true), 2000);
+        });
+    }
+    login() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const path = (_a = this.loginUrl) !== null && _a !== void 0 ? _a : "/api/auth/login";
+            const response = yield new Promise((resolve, reject) => this.httpClient
+                .post(path, { password: this.password.trim() }, { headers: this.getHeaders() })
+                .subscribe({ next: resolve, error: reject }));
+            return response;
+        });
+    }
+    getHeaders() {
+        var _a, _b;
+        return {
+            [LocalizeToken.httpHeaders.X_REFRESH_TOKEN]: (_a = LocalizeToken.storage.get(this.config.refreshTokenName)) !== null && _a !== void 0 ? _a : "",
+            [LocalizeToken.httpHeaders.X_TENANT]: (_b = LocalizeToken.storage.get(this.config.tenantTokenName)) !== null && _b !== void 0 ? _b : "",
+        };
+    }
+    get isValidPassword() {
+        return this.password && this.password.trim().length >= 6;
+    }
+}
+LocalizeLogindlgComponent.decorators = [
+    { type: Component, args: [{
+                template: `<p-toast key="$login-dlg" position="top-center"></p-toast>
+  <div id="login-dlg-wrap">
+    <div id="login-dlg-header">
+      <div id="login-logo" class="p-mb-2"></div>
+      <h3 *ngIf="!success">Your session is expired! <br> Please login again to continue.</h3>
+      <h3 *ngIf="success" style="color:green !important;">You haved successfully logged in.</h3>
+    </div>
+    <div id="login-dlg-content">
+      <ng-container *ngIf="!success">
+        <div class="login-dlg-elm">
+          <div class="p-inputgroup">
+            <span class="p-inputgroup-addon">
+              <i class="material-icons-round">person</i>
+            </span>
+            <input disabled pInputText type="text" placeholder="Username" [value]="decodeToken?.email" />
+          </div>
+        </div>
+  
+        <div class="login-dlg-elm">
+          <div class="p-inputgroup">
+            <span class="p-inputgroup-addon">
+              <i class="material-icons-round">lock</i>
+            </span>
+            <input (keydown.enter)="clickLogin()" pInputText type="password" placeholder="Password" [(ngModel)]="password"
+              autofocus />
+          </div>
+        </div>
+        <div class="login-dlg-elm">
+          <button style="width: 100%;" pButton type="button" label="Login" (click)="clickLogin()"
+            [disabled]="!password || loading"></button>
+        </div>
+  
+        <div class="login-dlg-elm" style="display:flex;align-items: center;user-select: none;">
+          <span>No, I want to login with another user.</span>
+          <button class="p-button-text" pButton type="button" label="Logout" (click)="clickLogout()"></button>
+        </div>
+      </ng-container>
+  
+      <ng-container *ngIf="success">
+        <div style="margin-top:35px;"></div>
+        <div class="check-animation-wrap">
+          <div class="check-main-container">
+            <div class="check-container">
+              <div class="check-background">
+                <svg viewBox="0 0 65 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M7 25L27.3077 44L58.5 7" stroke="white" stroke-width="13" stroke-linecap="round"
+                    stroke-linejoin="round"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </div>`,
+                selector: "app-localize-logindlg",
+                providers: [MessageService],
+                encapsulation: ViewEncapsulation.None,
+                styles: [`#login-dlg-wrap {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 30px;
+  }
+  
+  .login-dlg-elm {
+    margin-top: 1rem;
+  }
+  
+  #login-dlg-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  #login-dlg-header h3 {
+    font-weight: bold;
+    font-size: 0.9rem;
+    color: orange;
+    text-align: center;
+  }
+  
+  #login-logo {
+    height: 40px;
+    width: 40px;
+    background: url("/assets/images/logo-300px.png") no-repeat;
+    background-size: contain;
+  }
+  
+  #login-dlg-content .p-inputgroup {
+    height: 45px;
+  }
+  
+  #login-dlg-content .p-inputgroup .p-inputgroup-addon {
+    height: 45px;
+    border-radius: 15px 0 0 15px;
+    width: 50px;
+  }
+  
+  #login-dlg-content .p-inputgroup .p-inputgroup-addon * {
+    font-size: 1rem;
+  }
+  
+  #login-dlg-content .p-inputgroup input {
+    height: 45px;
+    border-radius: 0 15px 15px 0;
+  }
+  
+  #login-dlg-content button {
+    height: 45px;
+    border-radius: 15px;
+  }
+  
+  /*check animation block*/
+  
+  .check-animation-wrap {
+    top: 0;
+    left: 0;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: calc(100% - 200px);
+    min-height: 400px;
+  }
+  
+  .check-main-container {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .check-container {
+    width: 6.25rem;
+    height: 7.5rem;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .check-container .check-background {
+    width: 100%;
+    height: calc(100% - 1.25rem);
+    background: linear-gradient(to bottom right, #5de593, #41d67c);
+    box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
+    transform: scale(0.84);
+    border-radius: 50%;
+    animation: animateContainer 0.75s ease-out forwards 0.75s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+  
+  .check-container .check-background svg {
+    width: 65%;
+    transform: translateY(0.25rem);
+    stroke-dasharray: 80;
+    stroke-dashoffset: 80;
+    animation: animateCheck 0.35s forwards 1.25s ease-out;
+    min-width: auto !important;
+  }
+  
+  .check-container .check-shadow {
+    bottom: calc(-15% - 5px);
+    left: 0;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, rgba(73, 218, 131, 1), transparent);
+    animation: animateShadow 0.75s ease-out forwards 0.75s;
+  }
+  
+  @keyframes animateContainer {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+      box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
+    }
+  
+    25% {
+      opacity: 1;
+      transform: scale(0.9);
+      box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
+    }
+  
+    43.75% {
+      transform: scale(1.15);
+      box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
+    }
+  
+    62.5% {
+      transform: scale(1);
+      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
+    }
+  
+    81.25% {
+      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
+    }
+  
+    100% {
+      opacity: 1;
+      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
+    }
+  }
+  
+  @keyframes animateCheck {
+    from {
+      stroke-dashoffset: 80;
+    }
+  
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+  
+  @keyframes animateShadow {
+    0% {
+      opacity: 0;
+      width: 100%;
+      height: 15%;
+    }
+  
+    25% {
+      opacity: 0.25;
+    }
+  
+    43.75% {
+      width: 40%;
+      height: 7%;
+      opacity: 0.35;
+    }
+  
+    100% {
+      width: 85%;
+      height: 15%;
+      opacity: 0.25;
+    }
+  }`]
+            },] }
+];
+LocalizeLogindlgComponent.ctorParameters = () => [
+    { type: MessageService },
+    { type: ChangeDetectorRef },
+    { type: DynamicDialogRef },
+    { type: DynamicDialogConfig },
+    { type: LocalizeTokenService },
+    { type: HttpClient }
+];
+
+class LocalizeLogindlgService {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    openLoginDialog(loginConfig, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            config !== null && config !== void 0 ? config : (config = {
+                header: 'Login',
+                height: '650px',
+                style: { 'max-width': '400px', width: '100%', 'height': '650px' },
+            });
+            config.data = Object.assign(Object.assign({}, config.data || {}), { loginConfig });
+            const dialogService = this.injector.get(DialogService);
+            const dialog = dialogService.open(LocalizeLogindlgComponent, config);
+            yield new Promise((resolve) => dialog.onClose.subscribe(res => {
+                if (res) {
+                    resolve();
+                }
+            }));
+        });
+    }
+}
+LocalizeLogindlgService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalizeLogindlgService_Factory() { return new LocalizeLogindlgService(i0.ɵɵinject(i0.INJECTOR)); }, token: LocalizeLogindlgService, providedIn: "root" });
+LocalizeLogindlgService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+LocalizeLogindlgService.ctorParameters = () => [
+    { type: Injector }
+];
+
+class LocalizeLogindlgModule {
+}
+LocalizeLogindlgModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [LocalizeLogindlgComponent],
+                exports: [LocalizeLogindlgComponent],
+                imports: [
+                    CommonModule,
+                    ToastModule,
+                    InputTextModule,
+                    BrowserModule,
+                    FormsModule,
+                    ButtonModule,
+                ],
+                providers: [LocalizeLogindlgService],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA],
+            },] }
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EMethod, ISameSiteType, LocalizeApiService, LocalizeToken, LocalizeTokenModule, LocalizeTokenService, LocalizeTokenStorageHelper, waitFor, waitUntil };
+export { EMethod, ISameSiteType, LocalizeApiService, LocalizeLogindlgComponent, LocalizeLogindlgModule, LocalizeLogindlgService, LocalizeToken, LocalizeTokenModule, LocalizeTokenService, LocalizeTokenStorageHelper, waitFor, waitUntil };
 //# sourceMappingURL=sambath999-localize-token.js.map