From d00887393c39093591e2f6d180f1016202342174 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Thu, 15 Jan 2026 13:24:24 +0530 Subject: [PATCH 1/6] add snippt in for the user management --- .../management/management.component.html | 19 +++++++++++++++ .../users/management/management.component.ts | 8 ++++++- apps/proxy/src/app/users/users.module.ts | 4 ++++ libs/models/features-model/src/index.ts | 24 +++++++++++++++++++ 4 files changed, 54 insertions(+), 1 deletion(-) diff --git a/apps/proxy/src/app/users/management/management.component.html b/apps/proxy/src/app/users/management/management.component.html index 98f6187a..5d4c061f 100644 --- a/apps/proxy/src/app/users/management/management.component.html +++ b/apps/proxy/src/app/users/management/management.component.html @@ -219,6 +219,25 @@
Create Roles & Permissions
+ +
+
+ + +
+
+ Note: To integrate the user management component into your website or + application, simply add the script to your page.
+
+
+ +

Default Roles

diff --git a/apps/proxy/src/app/users/management/management.component.ts b/apps/proxy/src/app/users/management/management.component.ts index 3382d662..31385086 100644 --- a/apps/proxy/src/app/users/management/management.component.ts +++ b/apps/proxy/src/app/users/management/management.component.ts @@ -5,7 +5,8 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { FeatureComponentStore } from '../../features/feature/feature.store'; import { Observable, of, Subject, takeUntil } from 'rxjs'; import { filter } from 'rxjs/operators'; -import { IFeature } from '@proxy/models/features-model'; +import { IFeature, ProxyUserManagementScript } from '@proxy/models/features-model'; +import { environment } from '../../../environments/environment'; import { IPaginatedResponse } from '@proxy/models/root-models'; import { UserComponentStore } from '../user/user.store'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; @@ -70,6 +71,11 @@ export class ManagementComponent implements OnInit, OnDestroy { public updatePermission$: Observable = this.userComponentStore.updatePermission$; public featureDetails$: Observable = this.userComponentStore.featureDetails$; + public get userManagementScript(): string { + const referenceId = this.roleForm.get('feature_id')?.value; + return ProxyUserManagementScript(environment.proxyServer, referenceId || ''); + } + @ViewChild('addRoleDialogTemplate', { static: false }) addRoleDialogTemplate: TemplateRef; @ViewChild('addPermissionDialogTemplate', { static: false }) addPermissionDialogTemplate: TemplateRef; @ViewChild('rolesPaginator') rolesPaginator!: MatPaginator; diff --git a/apps/proxy/src/app/users/users.module.ts b/apps/proxy/src/app/users/users.module.ts index 23c5e6f2..0fad3512 100644 --- a/apps/proxy/src/app/users/users.module.ts +++ b/apps/proxy/src/app/users/users.module.ts @@ -28,6 +28,8 @@ import { MatDividerModule } from '@angular/material/divider'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { UiConfirmDialogModule } from '@proxy/ui/confirm-dialog'; import { ManagementComponent } from './management/management.component'; +import { MarkdownModule } from 'ngx-markdown'; +import { UiCopyButtonModule } from '@proxy/ui/copy-button'; // Components const routes: Routes = [ @@ -70,6 +72,8 @@ const routes: Routes = [ ServicesProxyUsersModule, ServicesProxyFeaturesModule, DirectivesSkeletonModule, + MarkdownModule.forRoot(), + UiCopyButtonModule, ], exports: [RouterModule], }) diff --git a/libs/models/features-model/src/index.ts b/libs/models/features-model/src/index.ts index 2722591d..6003e565 100644 --- a/libs/models/features-model/src/index.ts +++ b/libs/models/features-model/src/index.ts @@ -133,3 +133,27 @@ export enum FeatureServiceIds { GoogleAuthentication = 7, PasswordAuthentication = 9, } +export const ProxyUserManagementScript = ( + baseUrl: string, + authToken = '', + type = '', + time?: number +) => ` +`; From 80dc797ce945b53054a802c05797b69b76ca01d5 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 14:41:12 +0530 Subject: [PATCH 2/6] implement the dark theme --- apps/proxy-auth/src/app/app.component.html | 3 +- apps/proxy-auth/src/app/app.component.ts | 5 +- .../app/otp/send-otp/send-otp.component.html | 3 +- .../user-profile/user-profile.component.html | 2 +- .../user-profile/user-profile.component.scss | 259 ++++++++++++++++++ .../user-profile/user-profile.component.ts | 1 + 6 files changed, 267 insertions(+), 6 deletions(-) diff --git a/apps/proxy-auth/src/app/app.component.html b/apps/proxy-auth/src/app/app.component.html index fdbd484f..8141f0f7 100644 --- a/apps/proxy-auth/src/app/app.component.html +++ b/apps/proxy-auth/src/app/app.component.html @@ -1,3 +1,4 @@ -
+ +
diff --git a/apps/proxy-auth/src/app/app.component.ts b/apps/proxy-auth/src/app/app.component.ts index 916668d9..d8edb2f3 100644 --- a/apps/proxy-auth/src/app/app.component.ts +++ b/apps/proxy-auth/src/app/app.component.ts @@ -32,9 +32,8 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy { // showCompanyDetails: false, authToken: 'clV0YUt4UURVbzJYZTRwMHdBNkZ6QjZoay9qMmRRcjZhMGVXMGtCT1ZtdGNaelFxMmlNaGdNcEJuRy9UWmFSZHQvMHc0YnJYUHExakh5NDNGVjZMOEdXVmg3OG82R094Yk5tdE9XckxjUTV1dlNzUERXRWxaOWIwWm5JRmlMVHl5UmpZUHVDK2piOURJUi9IdytncFZBRWc5QnRyRDRVeUFOZlBCY1FST0FOZStISUVtK055VWNxaGduZWpGeUZxVWxYWjd6YXI2YTF0aGxHZTNka1BlQT09', - type: 'user-management', - exclude_role_ids: [2], - include_role_ids: [1], + // type: 'user-management', + isHidden: true, theme: 'light', // isPreview: true, isLogin: true, diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html index e1003946..478c1774 100644 --- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html +++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html @@ -4,7 +4,7 @@ [ngClass]="{ 'with-reference-id': referenceId, 'without-reference-id': authToken, - 'dark-theme': theme === 'dark' && type === 'user-management' + 'dark-theme': theme === 'dark' && (type === 'user-management' || authToken) }" >
+

Client Details

diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss index aa6c6706..58e07d5d 100644 --- a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss +++ b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss @@ -13,6 +13,264 @@ body { min-height: 600px; height: 100%; z-index: 10; + + // Dark theme styles + &.dark-theme { + background: transparent; + color: #e0e0e0; + + h2, + h3 { + color: #ffffff; + } + + .mat-mdc-form-field { + .mat-mdc-text-field-wrapper { + background-color: transparent; + } + + .mat-mdc-input-element { + color: #e0e0e0 !important; + } + + .mat-mdc-floating-label { + color: #a0a0a0 !important; + } + + // Label styling for dark theme + .mdc-floating-label { + color: #a0a0a0 !important; + } + + mat-label { + color: #a0a0a0 !important; + } + } + + // Force label color in all states + ::ng-deep .mat-mdc-form-field-flex .mdc-floating-label { + color: #a0a0a0 !important; + } + + ::ng-deep .mat-mdc-form-field .mat-mdc-floating-label { + color: #a0a0a0 !important; + } + + ::ng-deep .mdc-text-field--outlined .mdc-floating-label { + color: #a0a0a0 !important; + } + + ::ng-deep .mat-form-field-label { + color: #a0a0a0 !important; + } + + // Force white border on outlined form fields + ::ng-deep .mat-mdc-form-field-flex { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #ffffff !important; + } + } + + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing { + border-color: #ffffff !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline { + color: #ffffff !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick { + color: #ffffff !important; + } + + .input-field { + color: #e0e0e0 !important; + } + + table { + background-color: transparent; + box-shadow: none; + border: 1px solid #e0e0e0; + + th { + background-color: transparent; + color: #e0e0e0; + border-color: #e0e0e0; + font-weight: bold; + } + + td { + color: #c0c0c0; + border-color: #e0e0e0; + } + + tr:hover { + background-color: rgba(255, 255, 255, 0.05); + } + } + + .status-active { + color: #4caf50; + } + + .success-message { + color: #4caf50; + } + + .error-message { + color: #ff6b6b; + } + + .no-data { + color: #a0a0a0; + } + + button[mat-flat-button] { + background-color: #000000; + color: #ffffff; + border: 1px solid #ffffff; + + &:hover { + background-color: #222222; + } + + &[color='warn'] { + background-color: #000000; + color: #ffffff; + border: 1px solid #ffffff; + } + } + } + + // Light theme (default) + &.light-theme { + color: #333333; + + h2, + h3 { + color: #1a1a1a; + } + + .mat-mdc-form-field { + .mat-mdc-text-field-wrapper { + background-color: #ffffff; + } + + .mat-mdc-input-element { + color: #333333 !important; + } + + .mat-mdc-floating-label { + color: #555555 !important; + } + } + + // Form field outline styling for light theme + ::ng-deep .mat-mdc-form-field-flex { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #cccccc !important; + } + } + + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch, + ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing { + border-color: #cccccc !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline { + color: #cccccc !important; + } + + ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick { + color: #1976d2 !important; + } + + .input-field { + color: #333333 !important; + } + + table { + background-color: #ffffff; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; + + th { + background-color: #f5f5f5; + color: #333333; + border-color: #e0e0e0; + font-weight: bold; + } + + td { + color: #434242; + border-color: #e0e0e0; + } + + tr:hover { + background-color: rgba(0, 0, 0, 0.04); + } + } + + .status-active { + color: #2e7d32; + } + + .success-message { + color: #2e7d32; + } + + .error-message { + color: #d32f2f; + } + + .no-data { + color: #757575; + } + + button[mat-flat-button] { + background-color: #1976d2; + color: #ffffff; + border: none; + + &:hover { + background-color: #1565c0; + } + + &[color='warn'] { + background-color: #d32f2f; + color: #ffffff; + border: none; + } + } + + .dropdown-btn { + background: #ffffff; + border-color: #cccccc; + color: #333333; + } + + .dropdown-content { + background: #ffffff; + border-color: #cccccc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + } + + .modal-content { + background-color: #ffffff; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + } + + .input-label { + color: #404040; + } + } } .full-width { max-width: 300px; @@ -80,6 +338,7 @@ td.mat-cell { th { background-color: #f4f4f4; font-size: small; + font-weight: bold; height: 22px; padding-left: 24px !important; } diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts index 34d4e409..c3067bf5 100644 --- a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts +++ b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts @@ -31,6 +31,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit { @Input() public authToken: string; @Input() public target: string; @Input() public showCard: boolean; + @Input() public theme: string; @Input() set css(type: NgStyle['ngStyle']) { this.cssSubject$.next(type); From 7d2eec09a58e03af59aa860f0c5bb05fc7bdffc7 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 18:12:08 +0530 Subject: [PATCH 3/6] fix the container id --- .../app/users/management/management.component.html | 11 +++++++++++ .../src/app/users/management/management.component.ts | 4 ++++ 2 files changed, 15 insertions(+) diff --git a/apps/proxy/src/app/users/management/management.component.html b/apps/proxy/src/app/users/management/management.component.html index 5d4c061f..49c2250f 100644 --- a/apps/proxy/src/app/users/management/management.component.html +++ b/apps/proxy/src/app/users/management/management.component.html @@ -235,7 +235,18 @@
Create Roles & Permissions
Note: To integrate the user management component into your website or application, simply add the script to your page.
+
+ + +
+
diff --git a/apps/proxy/src/app/users/management/management.component.ts b/apps/proxy/src/app/users/management/management.component.ts index 31385086..eb24b52c 100644 --- a/apps/proxy/src/app/users/management/management.component.ts +++ b/apps/proxy/src/app/users/management/management.component.ts @@ -76,6 +76,10 @@ export class ManagementComponent implements OnInit, OnDestroy { return ProxyUserManagementScript(environment.proxyServer, referenceId || ''); } + public get userProxyContainerHtml(): string { + return `
`; + } + @ViewChild('addRoleDialogTemplate', { static: false }) addRoleDialogTemplate: TemplateRef; @ViewChild('addPermissionDialogTemplate', { static: false }) addPermissionDialogTemplate: TemplateRef; @ViewChild('rolesPaginator') rolesPaginator!: MatPaginator; From 27105a1652c2588a9d1ae0bb2a59d80a68f7b730 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 18:39:17 +0530 Subject: [PATCH 4/6] add login button --- apps/proxy/src/app/auth/auth.component.html | 4 +++ apps/proxy/src/app/auth/auth.component.scss | 37 +++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/apps/proxy/src/app/auth/auth.component.html b/apps/proxy/src/app/auth/auth.component.html index 18b9d9bf..5f62b090 100644 --- a/apps/proxy/src/app/auth/auth.component.html +++ b/apps/proxy/src/app/auth/auth.component.html @@ -1,4 +1,8 @@
+
+ +
+
diff --git a/apps/proxy/src/app/auth/auth.component.scss b/apps/proxy/src/app/auth/auth.component.scss index 2af80930..c11a35c2 100644 --- a/apps/proxy/src/app/auth/auth.component.scss +++ b/apps/proxy/src/app/auth/auth.component.scss @@ -55,6 +55,43 @@ $accent-dark: #14b8a6; overflow-x: hidden; } +.landing-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: flex-end; + padding: 16px 72px; + + @include media-breakpoint-down('tablet') { + padding: 16px 32px; + } + + @include media-breakpoint-down('phone') { + padding: 12px 20px; + } +} + +.header-login-btn { + padding: 10px 24px; + background: transparent; + color: $accent; + border: 1px solid $accent; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: rgba($accent, 0.1); + transform: translateY(-1px); + } +} + .hero { position: relative; z-index: 1; From 6eee7e8f6cab5880d346d278a0d1b0acd6e37071 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Thu, 22 Jan 2026 15:42:20 +0530 Subject: [PATCH 5/6] fix the register --- .../src/app/otp/send-otp/send-otp.component.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts index ff357703..35c85e39 100644 --- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts +++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts @@ -152,9 +152,11 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy this.theme = prefersDark.matches ? Theme.DARK : Theme.LIGHT; } this.selectWidgetTheme$.pipe(filter(Boolean), takeUntil(this.destroy$)).subscribe((theme) => { + console.log('theme', theme); if (theme?.theme !== Theme.SYSTEM) { this.theme = theme?.theme || theme; } + this.loginWidgetData = theme?.registerState; this.version = theme?.version || 'v1'; this.input_fields = theme?.input_fields || 'top'; this.show_social_login_icons = theme?.icons || false; @@ -202,11 +204,10 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy ); this.otpWidgetService.loadScript(); } - this.loginWidgetData = widgetData?.find( - (widget) => widget?.service_id === FeatureServiceIds.PasswordAuthentication - ); if (!this.loginWidgetData) { - this.loginWidgetData = widgetData[0]; + this.loginWidgetData = widgetData?.find( + (widget) => widget?.service_id === FeatureServiceIds.PasswordAuthentication + ); } }); this.otpWidgetService.otpWidgetToken.pipe(filter(Boolean), takeUntil(this.destroy$)).subscribe((token) => { From c2bf3850e929c9cabbff8138a62cb9fb8e4d8a96 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Thu, 22 Jan 2026 15:45:04 +0530 Subject: [PATCH 6/6] remove console --- apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts index 35c85e39..f44e9e96 100644 --- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts +++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts @@ -152,7 +152,6 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy this.theme = prefersDark.matches ? Theme.DARK : Theme.LIGHT; } this.selectWidgetTheme$.pipe(filter(Boolean), takeUntil(this.destroy$)).subscribe((theme) => { - console.log('theme', theme); if (theme?.theme !== Theme.SYSTEM) { this.theme = theme?.theme || theme; }