@descope/angular-sdk 0.5.10 → 0.5.11

package/projects/angular-sdk/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@descope/angular-sdk",
+  "version": "0.5.11",
+  "peerDependencies": {
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": "^16.14.0 || >=18.10.0",
+    "npm": ">= 8.1.0"
+  },
+  "module": "fesm2022/descope-angular-sdk.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/descope-angular-sdk.mjs",
+      "esm": "./esm2022/descope-angular-sdk.mjs",
+      "default": "./fesm2022/descope-angular-sdk.mjs"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged",
+    "prebuild": "node scripts/setversion/setversion.js",
+    "build": "npm run build:lib && rm -rf ./dist/package.json",
+    "build:lib": "cp package.json ./projects/angular-sdk && ng build angular-sdk",
+    "build:app": "ng build demo-app",
+    "pretest": "cp package.json ./projects/angular-sdk",
+    "watch": "ng build --watch --configuration development",
+    "test": "jest --config jest.config.js",
+    "lint": "ng lint",
+    "format": "prettier . -w --ignore-path .gitignore",
+    "format-check": "prettier . --check --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@descope/access-key-management-widget": "workspace:*",
+    "@descope/audit-management-widget": "workspace:*",
+    "@descope/role-management-widget": "workspace:*",
+    "@descope/user-management-widget": "workspace:*",
+    "@descope/user-profile-widget": "workspace:*",
+    "@descope/web-component": "workspace:*",
+    "@descope/web-js-sdk": "workspace:*",
+    "@descope/core-js-sdk": "workspace:*",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.2.6",
+    "@angular-eslint/builder": "16.3.1",
+    "@angular-eslint/eslint-plugin": "16.3.1",
+    "@angular-eslint/eslint-plugin-template": "16.3.1",
+    "@angular-eslint/schematics": "16.3.1",
+    "@angular-eslint/template-parser": "16.3.1",
+    "@angular/animations": "^16.2.9",
+    "@angular/cli": "^16.2.6",
+    "@angular/common": "^16.2.9",
+    "@angular/compiler": "^16.2.9",
+    "@angular/compiler-cli": "^16.2.9",
+    "@angular/core": "^16.2.9",
+    "@angular/forms": "^16.2.9",
+    "@angular/platform-browser": "^16.2.9",
+    "@angular/platform-browser-dynamic": "^16.2.9",
+    "@angular/router": "^16.2.9",
+    "@types/jest": "^29.5.5",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "^13.1.2",
+    "lint-staged": "^15.2.0",
+    "ng-mocks": "^14.11.0",
+    "ng-packagr": "^16.2.3",
+    "prettier": "2.8.8",
+    "pretty-quick": "^3.1.3",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "typescript": "4.9.3",
+    "zone.js": "~0.13.0"
+  }
+}

package/projects/angular-sdk/src/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  buildVersion: '0.5.10'
+};

package/projects/angular-sdk/src/lib/components/access-key-management/access-key-management.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccessKeyManagementComponent } from './access-key-management.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeAccessKeyManagementWidget
+jest.mock('@descope/access-key-management-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-access-key-management-widget');
+  });
+});
+
+describe('DescopeAccessKeyManagementComponent', () => {
+  let component: AccessKeyManagementComponent;
+  let fixture: ComponentFixture<AccessKeyManagementComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onAccessKeyChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onAccessKeyChange: onAccessKeyChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(AccessKeyManagementComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.tenant = 'tenant-1';
+    component.widgetId = 'widget-1';
+    component.logger = {
+      info: jest.fn(),
+      error: jest.fn(),
+      warn: jest.fn(),
+      debug: jest.fn()
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-access-key-management-widget'
+    );
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-access-key-management-widget'
+    )!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('tenant')).toStrictEqual('tenant-1');
+    expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+      'widget-1'
+    );
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+  });
+});

package/projects/angular-sdk/src/lib/components/access-key-management/access-key-management.component.ts

@@ -0,0 +1,63 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeAccessKeyManagementWidget from '@descope/access-key-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'access-key-management[tenant]',
+  standalone: true,
+  template: ''
+})
+export class AccessKeyManagementComponent implements OnInit, OnChanges {
+  projectId: string;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  @Input() tenant: string;
+  @Input() widgetId: string;
+
+  @Input() theme: 'light' | 'dark' | 'os';
+  @Input() debug: boolean;
+  @Input() logger: ILogger;
+
+  private readonly webComponent = new DescopeAccessKeyManagementWidget();
+
+  constructor(
+    private elementRef: ElementRef,
+    descopeConfig: DescopeAuthConfig
+  ) {
+    this.projectId = descopeConfig.projectId;
+    this.baseUrl = descopeConfig.baseUrl;
+    this.baseStaticUrl = descopeConfig.baseStaticUrl;
+  }
+
+  ngOnInit() {
+    this.setupWebComponent();
+    this.elementRef.nativeElement.appendChild(this.webComponent);
+  }
+
+  ngOnChanges(): void {
+    this.setupWebComponent();
+  }
+
+  private setupWebComponent() {
+    this.webComponent.setAttribute('project-id', this.projectId);
+    this.webComponent.setAttribute('tenant', this.tenant);
+    this.webComponent.setAttribute('widget-id', this.widgetId);
+    if (this.baseUrl) {
+      this.webComponent.setAttribute('base-url', this.baseUrl);
+    }
+    if (this.baseStaticUrl) {
+      this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+    }
+    if (this.theme) {
+      this.webComponent.setAttribute('theme', this.theme);
+    }
+    if (this.debug) {
+      this.webComponent.setAttribute('debug', this.debug.toString());
+    }
+
+    if (this.logger) {
+      (this.webComponent as any).logger = this.logger;
+    }
+  }
+}

package/projects/angular-sdk/src/lib/components/audit-management/audit-management.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AuditManagementComponent } from './audit-management.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeAuditManagementWidget
+jest.mock('@descope/audit-management-widget', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-audit-management-widget');
+  });
+});
+
+describe('DescopeAuditManagementComponent', () => {
+  let component: AuditManagementComponent;
+  let fixture: ComponentFixture<AuditManagementComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onAuditChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onAuditChange: onAuditChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(AuditManagementComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.tenant = 'tenant-1';
+    component.widgetId = 'widget-1';
+    component.logger = {
+      info: jest.fn(),
+      error: jest.fn(),
+      warn: jest.fn(),
+      debug: jest.fn()
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-audit-management-widget'
+    );
+    expect(webComponentHtml).toBeDefined();
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector(
+      'descope-audit-management-widget'
+    )!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('tenant')).toStrictEqual('tenant-1');
+    expect(webComponentHtml.getAttribute('widget-id')).toStrictEqual(
+      'widget-1'
+    );
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+  });
+});

package/projects/angular-sdk/src/lib/components/audit-management/audit-management.component.ts

@@ -0,0 +1,63 @@
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import DescopeAuditManagementWidget from '@descope/audit-management-widget';
+import { ILogger } from '@descope/web-component';
+import { DescopeAuthConfig } from '../../types/types';
+
+@Component({
+  selector: 'audit-management[tenant]',
+  standalone: true,
+  template: ''
+})
+export class AuditManagementComponent implements OnInit, OnChanges {
+  projectId: string;
+  baseUrl?: string;
+  baseStaticUrl?: string;
+  @Input() tenant: string;
+  @Input() widgetId: string;
+
+  @Input() theme: 'light' | 'dark' | 'os';
+  @Input() debug: boolean;
+  @Input() logger: ILogger;
+
+  private readonly webComponent = new DescopeAuditManagementWidget();
+
+  constructor(
+    private elementRef: ElementRef,
+    descopeConfig: DescopeAuthConfig
+  ) {
+    this.projectId = descopeConfig.projectId;
+    this.baseUrl = descopeConfig.baseUrl;
+    this.baseStaticUrl = descopeConfig.baseStaticUrl;
+  }
+
+  ngOnInit() {
+    this.setupWebComponent();
+    this.elementRef.nativeElement.appendChild(this.webComponent);
+  }
+
+  ngOnChanges(): void {
+    this.setupWebComponent();
+  }
+
+  private setupWebComponent() {
+    this.webComponent.setAttribute('project-id', this.projectId);
+    this.webComponent.setAttribute('tenant', this.tenant);
+    this.webComponent.setAttribute('widget-id', this.widgetId);
+    if (this.baseUrl) {
+      this.webComponent.setAttribute('base-url', this.baseUrl);
+    }
+    if (this.baseStaticUrl) {
+      this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+    }
+    if (this.theme) {
+      this.webComponent.setAttribute('theme', this.theme);
+    }
+    if (this.debug) {
+      this.webComponent.setAttribute('debug', this.debug.toString());
+    }
+
+    if (this.logger) {
+      (this.webComponent as any).logger = this.logger;
+    }
+  }
+}

package/projects/angular-sdk/src/lib/components/descope/descope.component.spec.ts

@@ -0,0 +1,142 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { default as DescopeWC } from '@descope/web-component';
+import { DescopeComponent } from './descope.component';
+import createSdk from '@descope/web-js-sdk';
+import { DescopeAuthConfig } from '../../types/types';
+import { CUSTOM_ELEMENTS_SCHEMA, EventEmitter } from '@angular/core';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+//Mock DescopeWebComponent
+jest.mock('@descope/web-component', () => {
+  return jest.fn(() => {
+    // Create a mock DOM element
+    return document.createElement('descope-wc');
+  });
+});
+
+describe('DescopeComponent', () => {
+  let component: DescopeComponent;
+  let fixture: ComponentFixture<DescopeComponent>;
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onUserChangeSpy = jest.fn();
+  const afterRequestHooksSpy = jest.fn();
+  const mockConfig: DescopeAuthConfig = {
+    projectId: 'someProject'
+  };
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onUserChange: onUserChangeSpy,
+      httpClient: {
+        hooks: {
+          afterRequest: afterRequestHooksSpy
+        }
+      }
+    });
+
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: mockConfig }
+      ]
+    });
+
+    fixture = TestBed.createComponent(DescopeComponent);
+    component = fixture.componentInstance;
+    component.projectId = '123';
+    component.flowId = 'sign-in';
+    component.locale = 'en-US';
+    component.success = new EventEmitter<CustomEvent>();
+    component.error = new EventEmitter<CustomEvent>();
+    component.logger = {
+      info: jest.fn(),
+      error: jest.fn(),
+      warn: jest.fn(),
+      debug: jest.fn()
+    };
+    component.errorTransformer = jest.fn();
+    component.client = {};
+    component.form = {};
+    component.storeLastAuthenticatedUser = true;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-wc');
+    expect(webComponentHtml).toBeDefined();
+
+    expect(DescopeWC.sdkConfigOverrides).toEqual({
+      baseHeaders: {
+        'x-descope-sdk-name': 'angular',
+        'x-descope-sdk-version': expect.stringMatching(/^\d+\.\d+\.\d+$/)
+      },
+      persistTokens: false,
+      hooks: {
+        beforeRequest: undefined
+      }
+    });
+  });
+
+  it('should correctly setup attributes based on inputs', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-wc')!;
+    expect(webComponentHtml.getAttribute('project-id')).toStrictEqual('123');
+    expect(webComponentHtml.getAttribute('flow-id')).toStrictEqual('sign-in');
+    expect(webComponentHtml.getAttribute('locale')).toStrictEqual('en-US');
+    expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+    expect(webComponentHtml.getAttribute('error-transformer')).toBeDefined();
+    expect(webComponentHtml.getAttribute('redirect-url')).toBeNull();
+    expect(
+      webComponentHtml?.getAttribute('store-last-authenticated-user')
+    ).toEqual('true');
+  });
+
+  it('should emit success when web component emits success', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-wc')!;
+
+    const event = {
+      detail: { user: { name: 'user1' }, sessionJwt: 'session1' }
+    };
+    component.success.subscribe((e) => {
+      expect(afterRequestHooksSpy).toHaveBeenCalled();
+      expect(e.detail).toHaveBeenCalledWith(event.detail);
+    });
+    webComponentHtml.dispatchEvent(new CustomEvent('success', event));
+  });
+
+  it('should emit error when web component emits error', () => {
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-wc')!;
+
+    const event = {
+      detail: {
+        errorCode: 'someError',
+        errorDescription: 'someErrorDescription'
+      }
+    };
+    component.error.subscribe((e) => {
+      expect(e.detail).toEqual(event.detail);
+    });
+    webComponentHtml.dispatchEvent(new CustomEvent('error', event));
+  });
+
+  it('should emit ready when web component emits ready', () => {
+    const spy = jest.spyOn(component.ready, 'emit');
+
+    const html: HTMLElement = fixture.nativeElement;
+    const webComponentHtml = html.querySelector('descope-wc')!;
+
+    webComponentHtml.dispatchEvent(new CustomEvent('ready', {}));
+
+    expect(spy).toHaveBeenCalled();
+  });
+});