feat: add style-id to widgets (#840)

## Related Issues
descope/etc#4875

## Related PRs
#782

## Description
add style id to angular
add style id to all widgets in angular, vue and react

## Must

- [x] Tests
- [ ] Documentation (if applicable)

Co-authored-by: Doron Sharon <dorsha@descope.com>

packages/sdks/angular-sdk/README.md

@@ -173,6 +173,9 @@ export class AppComponent {
     Example:
     client={{ version: "1.2.0" }}
 
+    Use a custom style name or keep empty to use the default style.
+    styleId="my-awesome-style"
+
      logger is an object describing how to log info, warn and errors.
      NOTE: logger is not required. If not provided, the logs will be printed to the console.
      Example:

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

@@ -18,6 +18,7 @@ export class AccessKeyManagementComponent implements OnInit, OnChanges {
   @Input() theme: 'light' | 'dark' | 'os';
   @Input() debug: boolean;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   private readonly webComponent = new DescopeAccessKeyManagementWidget();
 

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/applications-portal/applications-portal.component.ts

@@ -25,6 +25,7 @@ export class ApplicationsPortalComponent implements OnInit, OnChanges {
   @Input() theme: 'light' | 'dark' | 'os';
   @Input() debug: boolean;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   @Output() logout: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
 
@@ -67,6 +68,9 @@ export class ApplicationsPortalComponent implements OnInit, OnChanges {
     if (this.logger) {
       (this.webComponent as any).logger = this.logger;
     }
+    if (this.styleId) {
+      this.webComponent.setAttribute('style-id', this.styleId);
+    }
 
     if (this.logout) {
       this.webComponent.addEventListener('logout', (e: Event) => {

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

@@ -51,6 +51,7 @@ describe('DescopeAuditManagementComponent', () => {
     component.projectId = '123';
     component.tenant = 'tenant-1';
     component.widgetId = 'widget-1';
+    component.styleId = 'style-1';
     component.logger = {
       info: jest.fn(),
       error: jest.fn(),
@@ -80,5 +81,6 @@ describe('DescopeAuditManagementComponent', () => {
       'widget-1'
     );
     expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+    expect(webComponentHtml.getAttribute('style-id')).toStrictEqual('style-1');
   });
 });

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

@@ -18,6 +18,7 @@ export class AuditManagementComponent implements OnInit, OnChanges {
   @Input() theme: 'light' | 'dark' | 'os';
   @Input() debug: boolean;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   private readonly webComponent = new DescopeAuditManagementWidget();
 
@@ -55,6 +56,9 @@ export class AuditManagementComponent implements OnInit, OnChanges {
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());
     }
+    if (this.styleId) {
+      this.webComponent.setAttribute('style-id', this.styleId);
+    }
 
     if (this.logger) {
       (this.webComponent as any).logger = this.logger;

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

@@ -54,6 +54,7 @@ describe('DescopeComponent', () => {
     component.locale = 'en-US';
     component.success = new EventEmitter<CustomEvent>();
     component.error = new EventEmitter<CustomEvent>();
+    component.styleId = 'style-1';
     component.logger = {
       info: jest.fn(),
       error: jest.fn(),
@@ -94,6 +95,7 @@ describe('DescopeComponent', () => {
     expect(webComponentHtml.getAttribute('logger')).toBeDefined();
     expect(webComponentHtml.getAttribute('error-transformer')).toBeDefined();
     expect(webComponentHtml.getAttribute('redirect-url')).toBeNull();
+    expect(webComponentHtml.getAttribute('style-id')).toBe('style-1');
     expect(
       webComponentHtml?.getAttribute('store-last-authenticated-user')
     ).toEqual('true');

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

@@ -38,6 +38,7 @@ export class DescopeComponent implements OnInit, OnChanges {
   @Input() client: Record<string, any>;
   @Input() form: Record<string, any>;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   @Output() success: EventEmitter<CustomEvent> =
     new EventEmitter<CustomEvent>();
@@ -125,6 +126,9 @@ export class DescopeComponent implements OnInit, OnChanges {
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());
     }
+    if (this.styleId) {
+      this.webComponent.setAttribute('style-id', this.styleId);
+    }
 
     if (this.errorTransformer) {
       this.webComponent.errorTransformer = this.errorTransformer;

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/role-management/role-management.component.spec.ts

@@ -51,6 +51,7 @@ describe('DescopeRoleManagementComponent', () => {
     component.projectId = '123';
     component.tenant = 'tenant-1';
     component.widgetId = 'widget-1';
+    component.styleId = 'style-1';
     component.logger = {
       info: jest.fn(),
       error: jest.fn(),
@@ -80,5 +81,6 @@ describe('DescopeRoleManagementComponent', () => {
       'widget-1'
     );
     expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+    expect(webComponentHtml.getAttribute('style-id')).toStrictEqual('style-1');
   });
 });

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/role-management/role-management.component.ts

@@ -18,6 +18,7 @@ export class RoleManagementComponent implements OnInit, OnChanges {
   @Input() theme: 'light' | 'dark' | 'os';
   @Input() debug: boolean;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   private readonly webComponent = new DescopeRoleManagementWidget();
 
@@ -55,6 +56,9 @@ export class RoleManagementComponent implements OnInit, OnChanges {
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());
     }
+    if (this.styleId) {
+      this.webComponent.setAttribute('style-id', this.styleId);
+    }
 
     if (this.logger) {
       (this.webComponent as any).logger = this.logger;

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.html

@@ -13,5 +13,6 @@
   [client]="client"
   [form]="form"
   [logger]="logger"
+  [styleId]="styleId"
 >
 </descope>

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-in-flow/sign-in-flow.component.ts

@@ -24,6 +24,7 @@ export class SignInFlowComponent {
   @Input() client: Record<string, any>;
   @Input() form: Record<string, any>;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   @Output() success: EventEmitter<CustomEvent> =
     new EventEmitter<CustomEvent>();

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.html

@@ -13,5 +13,6 @@
   [client]="client"
   [form]="form"
   [logger]="logger"
+  [styleId]="styleId"
 >
 </descope>

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-flow/sign-up-flow.component.ts

@@ -24,6 +24,7 @@ export class SignUpFlowComponent {
   @Input() client: Record<string, any>;
   @Input() form: Record<string, any>;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   @Output() success: EventEmitter<CustomEvent> =
     new EventEmitter<CustomEvent>();

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.html

@@ -13,5 +13,6 @@
   [client]="client"
   [form]="form"
   [logger]="logger"
+  [styleId]="styleId"
 >
 </descope>

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/sign-up-or-in-flow/sign-up-or-in-flow.component.ts

@@ -24,6 +24,7 @@ export class SignUpOrInFlowComponent {
   @Input() client: Record<string, any>;
   @Input() form: Record<string, any>;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   @Output() success: EventEmitter<CustomEvent> =
     new EventEmitter<CustomEvent>();

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/user-management/user-management.component.spec.ts

@@ -51,6 +51,7 @@ describe('DescopeUserManagementComponent', () => {
     component.projectId = '123';
     component.tenant = 'tenant-1';
     component.widgetId = 'widget-1';
+    component.styleId = 'style-1';
     component.logger = {
       info: jest.fn(),
       error: jest.fn(),
@@ -80,5 +81,6 @@ describe('DescopeUserManagementComponent', () => {
       'widget-1'
     );
     expect(webComponentHtml.getAttribute('logger')).toBeDefined();
+    expect(webComponentHtml.getAttribute('style-id')).toStrictEqual('style-1');
   });
 });

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/user-management/user-management.component.ts

@@ -18,6 +18,7 @@ export class UserManagementComponent implements OnInit, OnChanges {
   @Input() theme: 'light' | 'dark' | 'os';
   @Input() debug: boolean;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   private readonly webComponent = new DescopeUserManagementWidget();
 
@@ -56,6 +57,9 @@ export class UserManagementComponent implements OnInit, OnChanges {
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());
     }
+    if (this.styleId) {
+      this.webComponent.setAttribute('style-id', this.styleId);
+    }
 
     if (this.logger) {
       (this.webComponent as any).logger = this.logger;

packages/sdks/angular-sdk/projects/angular-sdk/src/lib/components/user-profile/user-profile.component.ts

@@ -25,6 +25,7 @@ export class UserProfileComponent implements OnInit, OnChanges {
   @Input() theme: 'light' | 'dark' | 'os';
   @Input() debug: boolean;
   @Input() logger: ILogger;
+  @Input() styleId: string;
 
   @Output() logout: EventEmitter<CustomEvent> = new EventEmitter<CustomEvent>();
 
@@ -63,6 +64,9 @@ export class UserProfileComponent implements OnInit, OnChanges {
     if (this.debug) {
       this.webComponent.setAttribute('debug', this.debug.toString());
     }
+    if (this.styleId) {
+      this.webComponent.setAttribute('style-id', this.styleId);
+    }
 
     if (this.logger) {
       (this.webComponent as any).logger = this.logger;

packages/sdks/react-sdk/src/components/AccessKeyManagement.tsx

@@ -22,6 +22,7 @@ const AccessKeyManagementWC = lazy(async () => {
       widgetId,
       theme,
       debug,
+      styleId,
     }) => (
 	<descope-access-key-management-widget
         project-id={projectId}
@@ -31,6 +32,7 @@ const AccessKeyManagementWC = lazy(async () => {
         theme={theme}
         tenant={tenant}
         debug={debug}
+        style-id={styleId}
         ref={innerRef}
       />
     ),

packages/sdks/react-sdk/src/components/ApplicationsPortal.tsx

@@ -21,6 +21,7 @@ const ApplicationsPortalWC = lazy(async () => {
       widgetId,
       theme,
       debug,
+      styleId,
     }) => (
 	<descope-applications-portal-widget
         project-id={projectId}
@@ -29,6 +30,7 @@ const ApplicationsPortalWC = lazy(async () => {
         base-static-url={baseStaticUrl}
         theme={theme}
         debug={debug}
+        style-id={styleId}
         ref={innerRef}
       />
     ),
@@ -38,7 +40,7 @@ const ApplicationsPortalWC = lazy(async () => {
 const ApplicationsPortal = React.forwardRef<
   HTMLElement,
   ApplicationsPortalProps
->(({ logger, theme, debug, widgetId }, ref) => {
+>(({ logger, theme, debug, widgetId, styleId }, ref) => {
   const [innerRef, setInnerRef] = useState(null);
 
   useImperativeHandle(ref, () => innerRef);
@@ -60,6 +62,7 @@ const ApplicationsPortal = React.forwardRef<
         innerRef={setInnerRef}
         theme={theme}
         debug={debug}
+        styleId={styleId}
       />
 	</Suspense>
   );

packages/sdks/react-sdk/src/components/AuditManagement.tsx

@@ -22,6 +22,7 @@ const AuditManagementWC = lazy(async () => {
       widgetId,
       theme,
       debug,
+      styleId,
     }) => (
 	<descope-audit-management-widget
         project-id={projectId}
@@ -31,14 +32,15 @@ const AuditManagementWC = lazy(async () => {
         theme={theme}
         tenant={tenant}
         debug={debug}
+        style-id={styleId}
         ref={innerRef}
       />
     ),
   };
 });
 
 const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
-  ({ logger, tenant, theme, debug, widgetId }, ref) => {
+  ({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -61,6 +63,7 @@ const AuditManagement = React.forwardRef<HTMLElement, AuditManagementProps>(
           innerRef={setInnerRef}
           tenant={tenant}
           theme={theme}
+          styleId={styleId}
           debug={debug}
         />
 	</Suspense>

packages/sdks/react-sdk/src/components/RoleManagement.tsx

@@ -22,6 +22,7 @@ const RoleManagementWC = lazy(async () => {
       widgetId,
       theme,
       debug,
+      styleId,
     }) => (
 	<descope-role-management-widget
         project-id={projectId}
@@ -31,14 +32,15 @@ const RoleManagementWC = lazy(async () => {
         theme={theme}
         tenant={tenant}
         debug={debug}
+        style-id={styleId}
         ref={innerRef}
       />
     ),
   };
 });
 
 const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
-  ({ logger, tenant, theme, debug, widgetId }, ref) => {
+  ({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -61,6 +63,7 @@ const RoleManagement = React.forwardRef<HTMLElement, RoleManagementProps>(
           innerRef={setInnerRef}
           tenant={tenant}
           theme={theme}
+          styleId={styleId}
           debug={debug}
         />
 	</Suspense>

packages/sdks/react-sdk/src/components/UserManagement.tsx

@@ -22,6 +22,7 @@ const UserManagementWC = lazy(async () => {
       widgetId,
       theme,
       debug,
+      styleId,
     }) => (
 	<descope-user-management-widget
         project-id={projectId}
@@ -31,14 +32,15 @@ const UserManagementWC = lazy(async () => {
         theme={theme}
         tenant={tenant}
         debug={debug}
+        style-id={styleId}
         ref={innerRef}
       />
     ),
   };
 });
 
 const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
-  ({ logger, tenant, theme, debug, widgetId }, ref) => {
+  ({ logger, tenant, theme, debug, widgetId, styleId }, ref) => {
     const [innerRef, setInnerRef] = useState(null);
 
     useImperativeHandle(ref, () => innerRef);
@@ -61,6 +63,7 @@ const UserManagement = React.forwardRef<HTMLElement, UserManagementProps>(
           innerRef={setInnerRef}
           tenant={tenant}
           theme={theme}
+          styleId={styleId}
           debug={debug}
         />
 	</Suspense>