widgets (#107)

package.json

@@ -33,8 +33,10 @@
 		]
 	},
 	"dependencies": {
-		"@descope/web-component": "3.8.2",
-		"@descope/user-management-widget": "0.0.9",
+		"@descope/user-management-widget": "0.4.9",
+		"@descope/role-management-widget": "0.1.8",
+		"@descope/access-key-management-widget": "0.1.8",
+		"@descope/web-component": "3.8.17",
 		"tslib": "^2.3.0"
 	},
 	"optionalDependencies": {

projects/angular-sdk/ng-package.json

@@ -6,6 +6,8 @@
 	},
 	"allowedNonPeerDependencies": [
 		"@descope/web-component",
-		"@descope/user-management-widget"
+		"@descope/user-management-widget",
+		"@descope/role-management-widget",
+		"@descope/access-key-management-widget"
 	]
 }

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

@@ -0,0 +1,79 @@
+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() };
+		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();
+	});
+});

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

@@ -0,0 +1,58 @@
+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;
+	@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;
+	}
+
+	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.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;
+		}
+	}
+}

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

@@ -21,6 +21,7 @@ import { DescopeAuthConfig } from '../../types/types';
 })
 export class DescopeComponent implements OnInit, OnChanges {
 	projectId: string;
+	baseUrl?: string;
 	@Input() flowId: string;
 
 	@Input() locale: string;
@@ -50,6 +51,7 @@ export class DescopeComponent implements OnInit, OnChanges {
 		descopeConfig: DescopeAuthConfig
 	) {
 		this.projectId = descopeConfig.projectId;
+		this.baseUrl = descopeConfig.baseUrl;
 	}
 
 	ngOnInit() {
@@ -85,6 +87,10 @@ export class DescopeComponent implements OnInit, OnChanges {
 	private setupWebComponent() {
 		this.webComponent.setAttribute('project-id', this.projectId);
 		this.webComponent.setAttribute('flow-id', this.flowId);
+
+		if (this.baseUrl) {
+			this.webComponent.setAttribute('base-url', this.baseUrl);
+		}
 		if (this.locale) {
 			this.webComponent.setAttribute('locale', this.locale);
 		}