@sambath999/localize-token 12.2.2 → 12.2.3

package/src/localize-logindlg/localize-logindlg.component.ts

@@ -0,0 +1,400 @@
+import { HttpClient } from "@angular/common/http";
+import {
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+  ViewEncapsulation,
+} from "@angular/core";
+import { MessageService } from "primeng/api";
+import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
+import { JwtPayload, LocalizeTokenService } from "../localize-token/localize.token.service";
+import { LocalizeToken } from "../localize-token/localize.token";
+import { ILoginDialogConfig } from "./localize-logindlg.service";
+
+@Component({
+  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;
+    }
+  }
+  #login-dlg-wrap .loader-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:100%;
+    width:100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    background: #ffffff42;
+    backdrop-filter: blur(1px);
+  }
+
+  #login-dlg-wrap .login-dlg-loader {
+    border: 15px solid #e7e7e7;
+    border-top: 15px solid #52dba1;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    animation: spinloader 2s linear infinite;
+  }
+
+  #login-dlg-wrap .loader-wrap::before {
+    content: "";
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    border: 15px solid #e7e7e700;
+    border-top: 15px solid #52dba1c9;
+    border-radius: 50%;
+    animation: spinloader .75s linear infinite;
+  }
+
+  @keyframes spinloader {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  `],
+  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 *ngIf="loading" class="loader-wrap">
+          <div class="login-dlg-loader"></div>
+        </div>
+        <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 [disabled]="loading" (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,
+})
+export class LocalizeLogindlgComponent implements OnInit {
+  readonly messageKey = "$login-dlg";
+  password: any;
+  readonly decodeToken: JwtPayload | null;
+  loading = false;
+  success = false;
+  private get config() { return this.tokenConfig.getConfig }
+  private readonly loginConfig: ILoginDialogConfig
+
+  private logout?: () => any
+  private loginUrl?: string;
+
+
+  constructor(
+    private readonly messageService: MessageService,
+    private readonly cdt: ChangeDetectorRef,
+    private readonly dlgRef: DynamicDialogRef,
+    private readonly dlgConfig: DynamicDialogConfig,
+    private readonly tokenService: LocalizeTokenService,
+    private readonly httpClient: HttpClient,
+    private readonly tokenConfig: LocalizeToken,
+  ) {
+    this.decodeToken = this.tokenService.decodeRefreshToken;
+    this.loginConfig = this.dlgConfig.data.loginConfig;
+  }
+
+  ngOnInit(): void {
+    this.dlgConfig.closable = false;
+    this.logout = this.loginConfig.logoutFunc;
+    this.loginUrl = this.loginConfig.loginUrl
+
+    if (!this.decodeToken) {
+      this.showMessage("error", "Token is invalid");
+      setTimeout(() => this.logout?.(), 2000);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.cdt.detectChanges();
+  }
+
+  async clickLogin() {
+    if (!this.isValidPassword) {
+      this.showMessage("error", "Password is required and must be at least 6 characters");
+      return;
+    }
+
+    this.loading = true;
+    const loginRes = await this.login();
+    if (!loginRes?.status) {
+      this.showMessage("error", loginRes.message ?? "An error occurred");
+      return;
+    }
+
+    this.tokenService.accessToken = loginRes.tokens.accessToken;
+    const cookieOptions = { expires: this.loginConfig.expire ?? 5 }
+    LocalizeToken.storage.set(this.config.refreshTokenName!, loginRes.tokens.refreshToken, cookieOptions);
+    this.success = true;
+    setTimeout(() => this.dlgRef.close(true), 2000);
+  }
+
+  private async login() {
+    if (!this.loginUrl || !this.loginUrl.trim().length) {
+      this.showMessage("error", "Login url is required");
+      throw new Error("Login url is required");
+    }
+
+    try {
+      return await new Promise<any>((resolve, reject) =>
+        this.httpClient.post(this.loginUrl!, { password: this.password.trim() }, { headers: this.getHeaders() })
+          .subscribe({ next: resolve, error: reject }));
+    } catch (e: any) {
+      this.showMessage("error", e.message);
+      return null;
+    }
+  }
+
+  private getHeaders() {
+    return {
+      [LocalizeToken.httpHeaders.X_REFRESH_TOKEN]: LocalizeToken.storage.get(this.config.refreshTokenName!) ?? "",
+      [LocalizeToken.httpHeaders.X_TENANT]: LocalizeToken.storage.get(this.config.tenantTokenName!) ?? "",
+    };
+  }
+
+  get isValidPassword(): boolean {
+    this.loading = false;
+    return this.password && this.password.trim().length >= 6 && this.password.trim().length <= 16;
+  }
+
+  clickLogout = () => this.logout?.();
+
+  private showMessage(severity: string, summary: string) {
+    this.messageService.add({ key: this.messageKey, severity, summary });
+    this.loading = false;
+  }
+}

package/src/localize-logindlg/localize-logindlg.module.ts

@@ -0,0 +1,25 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { LocalizeLogindlgComponent } from "./localize-logindlg.component";
+import { ToastModule } from "primeng/toast";
+import { InputTextModule } from "primeng/inputtext";
+import { ButtonModule } from "primeng/button";
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { LocalizeLogindlgService } from "./localize-logindlg.service";
+
+@NgModule({
+  declarations: [LocalizeLogindlgComponent],
+  exports: [LocalizeLogindlgComponent],
+  imports: [
+    CommonModule,
+    ToastModule,
+    InputTextModule,
+    BrowserModule,
+    FormsModule,
+    ButtonModule,
+  ],
+  providers: [LocalizeLogindlgService],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class LocalizeLogindlgModule { }

package/src/localize-logindlg/localize-logindlg.service.ts

@@ -0,0 +1,38 @@
+import { Injectable, Injector } from '@angular/core';
+import { DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
+import { LocalizeLogindlgComponent } from './localize-logindlg.component';
+export interface ILoginDialogConfig {
+  loginUrl?: string;
+  logoutUrl?: string;
+  logoutFunc?: () => void;
+  /**
+   * Cookie expiration date in days from now. If not provided the cookie is a session cookie
+   */
+  expire?: number;
+}
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalizeLogindlgService {
+
+  constructor(private readonly injector: Injector) { }
+
+  async openLoginDialog(loginConfig: ILoginDialogConfig, config?: DynamicDialogConfig) {
+    config ??= {
+      header: 'Login',
+      height: '650px',
+      style: { 'max-width': '400px', width: '100%', 'height': '650px' },
+    }
+    config.data = { ...config.data || {}, ...{ loginConfig } };
+
+    const dialogService = this.injector.get(DialogService);
+    const dialog = dialogService.open(LocalizeLogindlgComponent, config);
+
+    await new Promise<void>((resolve) =>
+      dialog.onClose.subscribe(res => {
+        if (res) {
+          resolve();
+        }
+      }));
+  }
+}

package/src/localize-logindlg/public-api.ts

@@ -0,0 +1,3 @@
+export * from './localize-logindlg.component'
+export * from './localize-logindlg.module'
+export * from './localize-logindlg.service'

package/src/localize-token/localize.api.service.ts

@@ -0,0 +1,177 @@
+import { Injectable } from "@angular/core";
+import { LocalizeTokenService } from "./localize.token.service";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { LocalizeToken, waitFor, waitUntil } from "./localize.token";
+import { BehaviorSubject } from "rxjs";
+
+/**
+ * Http method options
+ */
+export enum EMethod {
+  POST = 1,
+  GET = 2,
+  PUT = 3,
+  DELETE = 4,
+  PATCH = 5
+}
+
+interface ILocalizeApiConfigs {
+  onPrepareRequest?: () => any;
+  /**
+   *  A function that is called when refresh token is missing then perform the auto logout.
+   * @returns - The base URL of the API.
+   */
+  onAutoLogout?: () => any;
+  /**
+   * A function that is called when request revoking token unauthorized.
+   * @returns - The login dialog service.
+   */
+  onRevokeUnauthorized?: () => any;
+  /**
+   * The time to wait for each request to complete in milliseconds.
+   * Be careful with this option, it may cause the application to hang if the request is not completed.
+   */
+  waitEachRequest?: {
+    milliseconds: number
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalizeApiService {
+
+  readonly isRequestingSubject = new BehaviorSubject<boolean>(false);
+  readonly isResolvedStartupSubject = new BehaviorSubject<boolean>(false);
+  get isRequesting() { return this.isRequestingSubject.value; }
+  get isResolvedStartup() { return this.isResolvedStartupSubject.value; }
+
+  private apiConfigs: ILocalizeApiConfigs = {};
+  private get config() { return this.tokenConfig.getConfig }
+
+  constructor(readonly httpClient: HttpClient,
+    private readonly tokenConfig: LocalizeToken,
+    private readonly localizeTokenService: LocalizeTokenService
+  ) { }
+
+  /**
+   * Initialize the API service.
+   * @param apiConfigs - The API configurations.
+   */
+  init(apiConfigs: ILocalizeApiConfigs) {
+    this.apiConfigs = apiConfigs;
+  }
+
+
+  /**
+   * A higher-order function that returns a curried function for making API requests.
+   *
+   * @param baseUrl - The base URL of the API.
+   * @returns A curried function that can be used to make API requests.
+   */
+  func = (baseUrl: string) =>
+    (path: string, method: EMethod = EMethod.GET, value: any = null, isFormData: boolean = false, headers?: { [x: string]: string }) =>
+      this.base(baseUrl, path, method, value, isFormData, headers)
+
+  private async base(baseUrl: string,
+    path: string,
+    method: EMethod = EMethod.GET,
+    value: any = null,
+    isFormData: boolean = false,
+    headers?: { [x: string]: string }) {
+
+    await this.ifPromise(this.apiConfigs.onPrepareRequest);
+
+    const url = `${baseUrl.trim().replace(/\/?$/, '/')}${path.trim().replace(/^\//, '')}`;
+    const httpMethod = EMethod[method].toLowerCase();
+    const request = () => { return { body: value, headers: this.options(isFormData, headers) } };
+
+    // Wait for previous request to complete
+    await this.toWaitForPreviousRequest();
+
+    // Process request
+    try { return await this.processRequest(httpMethod, url, request()) }
+    // Handle unauthorized error if any
+    catch (error) {
+      if ((error as any).status !== 401) { throw error; }
+      return await this.onUnauthorizedError(httpMethod, url, request);
+    }
+  }
+
+  private async onUnauthorizedError(httpMethod: string, url: string, request: Function) {
+    await this.revokeToken();
+    if (!this.isResolvedStartup) {
+      return await this.processRequest(httpMethod, url, request());
+    }
+  }
+
+  private async toWaitForPreviousRequest() {
+    if (this.localizeTokenService.isRevokingToken) {
+      await waitUntil(() => !this.localizeTokenService.isRevokingToken);
+    }
+    // to wait for each request in 50ms, even if the request is not completed
+    if (this.apiConfigs.waitEachRequest?.milliseconds) {
+      await waitFor(this.apiConfigs.waitEachRequest.milliseconds, this.isRequesting);
+    }
+  }
+
+  private async processRequest(method: string, url: string, options: any): Promise<any> {
+    this.isRequestingSubject.next(true);
+    const result = await new Promise((resolve, reject) =>
+      this.httpClient.request<any>(method, url, options).subscribe({ next: resolve, error: reject }))
+    this.isRequestingSubject.next(false);
+    return result;
+  }
+
+  private async revokeToken(force: boolean = false): Promise<void> {
+
+    if (this.localizeTokenService.isRevokingToken && !force) {
+      await waitUntil(() => !this.localizeTokenService.isRevokingToken)
+      return;
+    }
+
+    try {
+      this.localizeTokenService.isRevokingToken = true;
+      const reqUrl = this.config.revokeTokenUrl;
+      const reqHeaders = this.options().append(LocalizeToken.httpHeaders.X_REFRESH_TOKEN, `${this.localizeTokenService.refreshToken}`);
+      const revokeToken: any = await new Promise((resolve, reject) =>
+        this.httpClient.get<any>(reqUrl!, { headers: reqHeaders }).subscribe({ next: resolve, error: reject }))
+
+      if (revokeToken?.status) {
+        this.localizeTokenService.accessToken = revokeToken.message;
+      } else if (!this.localizeTokenService.refreshToken) {
+        await this.ifPromise(this.apiConfigs.onAutoLogout)
+      } else {
+        if (this.apiConfigs.onRevokeUnauthorized) {
+          await this.ifPromise(this.apiConfigs.onRevokeUnauthorized);
+          await this.revokeToken(true);
+        }
+      }
+    } finally {
+      this.localizeTokenService.isRevokingToken = false;
+    }
+  }
+
+  /** default http request options */
+  private options(isFormData: boolean = false, headers: { [key: string]: string } = {}): HttpHeaders {
+    const defaultHeaders = { [LocalizeToken.httpHeaders.AUTHORIZATION]: `Bearer ${this.localizeTokenService.accessToken}`, };
+    if (this.config.needTenant) {
+      defaultHeaders[LocalizeToken.httpHeaders.X_TENANT] = `${this.localizeTokenService.tenantToken()}`;
+    }
+
+    if (!isFormData) {
+      defaultHeaders[LocalizeToken.httpHeaders.CONTENT_TYPE] = 'application/json';
+    }
+
+    const filteredHeaders = Object.keys(defaultHeaders).filter(key => !Object.keys(headers).includes(key))
+      .reduce((acc, key) => ({ ...acc, [key]: defaultHeaders[key] }), {})
+    const mergedHeaders = { ...filteredHeaders, ...headers };
+    return new HttpHeaders(mergedHeaders);
+  }
+
+  private async ifPromise(fn?: Function) {
+    if (!fn) return;
+    return fn instanceof Promise ? await fn() : fn();
+  }
+
+}//class

package/src/localize-token/localize.token.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { LocalizeTokenService } from './localize.token.service';
+import { LocalizeApiService } from './localize.api.service';
+import { LocalizeToken } from './localize.token';
+
+@NgModule({
+    providers: [
+        LocalizeTokenService,
+        LocalizeApiService,
+        LocalizeToken
+    ],
+})
+export class LocalizeTokenModule { }