@descope/angular-sdk 0.5.10 → 0.5.11

package/projects/demo-app/src/app/login/login.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html'
+})
+export class LoginComponent {
+  flowId = environment.descopeFlowId ?? 'sign-up-or-in';
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  telemetryKey = environment.descopeTelemetryKey ?? '';
+  debugMode = environment.descopeDebugMode ?? false;
+  tenantId = environment.descopeTenantId ?? '';
+  locale = environment.descopeLocale ?? '';
+  redirectUrl = environment.descopeRedirectUrl ?? '';
+
+  isLoading = true;
+
+  constructor(private router: Router) {}
+
+  errorTransformer = (error: { text: string; type: string }): string => {
+    const translationMap: { [key: string]: string } = {
+      SAMLStartFailed: 'Failed to start SAML flow'
+    };
+    return translationMap[error.type] || error.text;
+  };
+
+  onSuccess(e: CustomEvent) {
+    console.log('SUCCESSFULLY LOGGED IN FROM WEB COMPONENT', e.detail);
+    this.router.navigate(['/']).catch((err) => console.error(err));
+  }
+
+  onError(e: CustomEvent) {
+    console.log('ERROR FROM LOG IN FLOW FROM WEB COMPONENT', e);
+  }
+
+  onReady() {
+    this.isLoading = false;
+  }
+}

package/projects/demo-app/src/app/manage-access-keys/manage-access-keys.component.html

@@ -0,0 +1,12 @@
+<access-key-management
+  [tenant]="tenant"
+  [theme]="theme"
+  [debug]="debugMode"
+  widgetId="access-key-management-widget"
+/>
+<access-key-management
+  [tenant]="tenant"
+  [theme]="theme"
+  [debug]="debugMode"
+  widgetId="user-access-key-management-widget"
+/>

package/projects/demo-app/src/app/manage-access-keys/manage-access-keys.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ManageAccessKeysComponent } from './manage-access-keys.component';
+import createSdk from '@descope/web-js-sdk';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+
+describe('ManageAccessKeysComponent', () => {
+  let component: ManageAccessKeysComponent;
+  let fixture: ComponentFixture<ManageAccessKeysComponent>;
+
+  let mockedCreateSdk: jest.Mock;
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+    mockedCreateSdk.mockReturnValue({});
+
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [ManageAccessKeysComponent],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+      ]
+    });
+    fixture = TestBed.createComponent(ManageAccessKeysComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/demo-app/src/app/manage-access-keys/manage-access-keys.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-manage-access-keys',
+  templateUrl: './manage-access-keys.component.html'
+})
+export class ManageAccessKeysComponent {
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  debugMode = environment.descopeDebugMode ?? false;
+  tenant = environment.descopeTenantId ?? '';
+
+  constructor(private _: Router) {}
+}

package/projects/demo-app/src/app/manage-audit/manage-audit.component.html

@@ -0,0 +1,6 @@
+<audit-management
+  [tenant]="tenant"
+  [theme]="theme"
+  [debug]="debugMode"
+  widgetId="audit-management-widget"
+/>

package/projects/demo-app/src/app/manage-audit/manage-audit.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ManageAuditComponent } from './manage-audit.component';
+import createSdk from '@descope/web-js-sdk';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+
+describe('ManageAuditComponent', () => {
+  let component: ManageAuditComponent;
+  let fixture: ComponentFixture<ManageAuditComponent>;
+
+  let mockedCreateSdk: jest.Mock;
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+    mockedCreateSdk.mockReturnValue({});
+
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [ManageAuditComponent],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+      ]
+    });
+    fixture = TestBed.createComponent(ManageAuditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/demo-app/src/app/manage-audit/manage-audit.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-manage-audit',
+  templateUrl: './manage-audit.component.html'
+})
+export class ManageAuditComponent {
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  debugMode = environment.descopeDebugMode ?? false;
+  tenant = environment.descopeTenantId ?? '';
+
+  constructor(private _: Router) {}
+}

package/projects/demo-app/src/app/manage-roles/manage-roles.component.html

@@ -0,0 +1,6 @@
+<role-management
+  [tenant]="tenant"
+  [theme]="theme"
+  [debug]="debugMode"
+  widgetId="role-management-widget"
+/>

package/projects/demo-app/src/app/manage-roles/manage-roles.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ManageRolesComponent } from './manage-roles.component';
+import createSdk from '@descope/web-js-sdk';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+
+describe('ManageRolesComponent', () => {
+  let component: ManageRolesComponent;
+  let fixture: ComponentFixture<ManageRolesComponent>;
+
+  let mockedCreateSdk: jest.Mock;
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+    mockedCreateSdk.mockReturnValue({});
+
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [ManageRolesComponent],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+      ]
+    });
+    fixture = TestBed.createComponent(ManageRolesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/demo-app/src/app/manage-roles/manage-roles.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-manage-roles',
+  templateUrl: './manage-roles.component.html'
+})
+export class ManageRolesComponent {
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  debugMode = environment.descopeDebugMode ?? false;
+  tenant = environment.descopeTenantId ?? '';
+
+  constructor(private _: Router) {}
+}

package/projects/demo-app/src/app/manage-users/manage-users.component.html

@@ -0,0 +1,6 @@
+<user-management
+  [tenant]="tenant"
+  [theme]="theme"
+  [debug]="debugMode"
+  widgetId="user-management-widget"
+/>

package/projects/demo-app/src/app/manage-users/manage-users.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ManageUsersComponent } from './manage-users.component';
+import createSdk from '@descope/web-js-sdk';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+
+describe('ManageUsersComponent', () => {
+  let component: ManageUsersComponent;
+  let fixture: ComponentFixture<ManageUsersComponent>;
+
+  let mockedCreateSdk: jest.Mock;
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+    mockedCreateSdk.mockReturnValue({});
+
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [ManageUsersComponent],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+      ]
+    });
+    fixture = TestBed.createComponent(ManageUsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/demo-app/src/app/manage-users/manage-users.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-manage-users',
+  templateUrl: './manage-users.component.html'
+})
+export class ManageUsersComponent {
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  debugMode = environment.descopeDebugMode ?? false;
+  tenant = environment.descopeTenantId ?? '';
+
+  constructor(private _: Router) {}
+}

package/projects/demo-app/src/app/my-user-profile/my-user-profile.component.html

@@ -0,0 +1,6 @@
+<user-profile
+  [theme]="theme"
+  [debug]="debugMode"
+  widgetId="user-profile-widget"
+  (logout)="onLogout($event)"
+/>

package/projects/demo-app/src/app/my-user-profile/my-user-profile.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MyUserProfileComponent } from './my-user-profile.component';
+import createSdk from '@descope/web-js-sdk';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import mocked = jest.mocked;
+
+jest.mock('@descope/web-js-sdk');
+
+describe('MyUserProfileComponent', () => {
+  let component: MyUserProfileComponent;
+  let fixture: ComponentFixture<MyUserProfileComponent>;
+
+  let mockedCreateSdk: jest.Mock;
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+    mockedCreateSdk.mockReturnValue({});
+
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [MyUserProfileComponent],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+      ]
+    });
+    fixture = TestBed.createComponent(MyUserProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/demo-app/src/app/my-user-profile/my-user-profile.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-my-user-profile',
+  templateUrl: './my-user-profile.component.html',
+  styleUrls: ['./my-user-profile.scss']
+})
+export class MyUserProfileComponent {
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  debugMode = environment.descopeDebugMode ?? false;
+
+  onLogout(e: CustomEvent) {
+    console.log('SUCCESSFULLY LOGGED IN FROM WEB COMPONENT', e.detail);
+    this.router.navigate(['/login']).catch((err) => console.error(err));
+  }
+
+  constructor(private router: Router) {}
+}

package/projects/demo-app/src/app/my-user-profile/my-user-profile.scss

@@ -0,0 +1,18 @@
+:host {
+  height: 100vh;
+  position: relative;
+}
+main {
+  border-radius: 10px;
+  margin: auto;
+  border: 1px solid lightgray;
+  padding: 20px;
+  max-width: 700px;
+  box-shadow:
+    13px 13px 20px #cbced1,
+    -13px -13px 20px #fff;
+  background: #ecf0f3;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}

package/projects/demo-app/src/app/protected/protected.component.html

@@ -0,0 +1,18 @@
+<descope
+  *ngIf="!stepUpSuccess"
+  (success)="onSuccess($event)"
+  (error)="onError($event)"
+  [theme]="theme"
+  [flowId]="flowId"
+  [locale]="locale"
+  [redirectUrl]="redirectUrl"
+  [telemetryKey]="telemetryKey"
+  [tenant]="tenantId"
+  [debug]="debugMode"
+  [errorTransformer]="errorTransformer"
+></descope>
+
+<ng-container *ngIf="stepUpSuccess">
+  <h2>STEP UP SUCCESS</h2>
+  <button (click)="goBack()">GO BACK</button>
+</ng-container>

package/projects/demo-app/src/app/protected/protected.component.scss

@@ -0,0 +1,8 @@
+:host {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+}

package/projects/demo-app/src/app/protected/protected.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProtectedComponent } from './protected.component';
+import createSdk from '@descope/web-js-sdk';
+import mocked = jest.mocked;
+import { DescopeAuthConfig } from '../../../../angular-sdk/src/lib/types/types';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+jest.mock('@descope/web-js-sdk');
+
+describe('ProtectedComponent', () => {
+  let component: ProtectedComponent;
+  let fixture: ComponentFixture<ProtectedComponent>;
+
+  let mockedCreateSdk: jest.Mock;
+  const onSessionTokenChangeSpy = jest.fn();
+  const onUserChangeSpy = jest.fn();
+
+  beforeEach(() => {
+    mockedCreateSdk = mocked(createSdk);
+    mockedCreateSdk.mockReturnValue({
+      onSessionTokenChange: onSessionTokenChangeSpy,
+      onUserChange: onUserChangeSpy
+    });
+
+    TestBed.configureTestingModule({
+      declarations: [ProtectedComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        DescopeAuthConfig,
+        { provide: DescopeAuthConfig, useValue: { projectId: 'test' } }
+      ]
+    });
+    fixture = TestBed.createComponent(ProtectedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/demo-app/src/app/protected/protected.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
+
+@Component({
+  selector: 'app-protected',
+  templateUrl: './protected.component.html',
+  styleUrls: ['./protected.component.scss']
+})
+export class ProtectedComponent {
+  flowId = environment.descopeStepUpFlowId ?? 'sign-up-or-in';
+  theme = (environment.descopeTheme as 'light' | 'dark' | 'os') ?? 'os';
+  telemetryKey = environment.descopeTelemetryKey ?? '';
+  debugMode = environment.descopeDebugMode ?? false;
+  tenantId = environment.descopeTenantId ?? '';
+  locale = environment.descopeLocale ?? '';
+  redirectUrl = environment.descopeRedirectUrl ?? '';
+
+  stepUpSuccess = false;
+  constructor(private router: Router) {}
+
+  errorTransformer = (error: { text: string; type: string }): string => {
+    const translationMap: { [key: string]: string } = {
+      SAMLStartFailed: 'Failed to start SAML flow'
+    };
+    return translationMap[error.type] || error.text;
+  };
+
+  onSuccess(e: CustomEvent) {
+    console.log('SUCCESSFULLY DONE IN PROTECTED ROUTE FLOW', e.detail);
+    this.stepUpSuccess = true;
+  }
+
+  onError(e: CustomEvent) {
+    console.log('ERROR FROM PROTECTED ROUTE FLOW', e);
+  }
+
+  goBack() {
+    this.router.navigate(['/']).catch((err) => console.error(err));
+  }
+}

package/projects/demo-app/src/environments/conifg.ts

@@ -0,0 +1,14 @@
+export interface Env {
+  descopeProjectId: string;
+  descopeBaseUrl?: string;
+  descopeBaseStaticUrl?: string;
+  descopeFlowId?: string;
+  descopeDebugMode?: false;
+  descopeTheme?: string;
+  descopeLocale?: string;
+  descopeRedirectUrl?: string;
+  descopeTenantId?: string;
+  descopeTelemetryKey?: string;
+  descopeStepUpFlowId?: string;
+  backendUrl?: string;
+}

package/projects/demo-app/src/environments/environment.ts

@@ -0,0 +1,20 @@
+import { Env } from './conifg';
+
+/**
+ * Create environment.development.ts file and copy content of this file to it.
+ * Fill the env vars according to your needs
+ */
+export const environment: Env = {
+  descopeProjectId: '',
+  descopeBaseUrl: '',
+  descopeBaseStaticUrl: '',
+  descopeFlowId: '',
+  descopeDebugMode: false,
+  descopeTheme: '',
+  descopeLocale: '',
+  descopeRedirectUrl: '',
+  descopeTenantId: '',
+  descopeTelemetryKey: '',
+  descopeStepUpFlowId: '',
+  backendUrl: ''
+};

package/projects/demo-app/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DemoApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/projects/demo-app/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

package/projects/demo-app/src/styles.scss

@@ -0,0 +1,21 @@
+/* You can add global styles to this file, and also import other style files */
+
+body {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+button {
+  width: 200px;
+  height: 40px;
+  border: none;
+  background-color: #00ace1;
+  color: white;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #047293;
+  }
+}

package/projects/demo-app/tsconfig.app.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "target": "ES2022",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

package/projects/demo-app/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jest"],
+    "module": "CommonJs"
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

package/scripts/setversion/setversion.js

@@ -0,0 +1,20 @@
+const { writeFile } = require('fs');
+const { version } = require('./../../package.json');
+const envFile = `export const environment = {
+  buildVersion: '${version}'
+};
+`;
+
+console.log(
+  `Writing version ${version} to projects/angular-sdk/src/environment.ts`
+);
+
+writeFile('./projects/angular-sdk/src/environment.ts', envFile, function (err) {
+  if (err) {
+    console.error(err);
+    process.exit(1);
+  }
+  console.log(`Environment file updated with version: ${version}`);
+});
+
+console.log('Writing version done!');

package/setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';