From d00887393c39093591e2f6d180f1016202342174 Mon Sep 17 00:00:00 2001
From: prakharlowanshi <walkover@walkovers-Mini.localdomain>
Date: Thu, 15 Jan 2026 13:24:24 +0530
Subject: [PATCH 1/2] 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 @@ <h5 class="mat-body-2 text-secondary fw-bold">Create Roles & Permissions</h5>
                         </mat-paginator>
                     </div>
                 </mat-tab>
+                <mat-tab label="Snippet">
+                    <div class="p-3">
+                        <div class="overflow-auto code-snippet-view position-relative rounded-4 w-50">
+                            <markdown [data]="userManagementScript | language: 'javascript'"> </markdown>
+                            <proxy-copy-button
+                                class="position-absolute"
+                                style="top: 16px; right: 8px"
+                                [copyData]="userManagementScript"
+                                tooltip="Copy Script"
+                                iconClass="text-white"
+                            ></proxy-copy-button>
+                        </div>
+                        <div class="mat-body-2 mt-2">
+                            <strong>Note: </strong> To integrate the user management component into your website or
+                            application, simply add the script to your page. <br />
+                        </div>
+                    </div>
+                </mat-tab>
+
                 <mat-tab label="Settings">
                     <div class="">
                         <p class="mat-body-2 text-secondary fw-bold p-0">Default Roles</p>
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<any> = this.userComponentStore.updatePermission$;
     public featureDetails$: Observable<any> = this.userComponentStore.featureDetails$;
 
+    public get userManagementScript(): string {
+        const referenceId = this.roleForm.get('feature_id')?.value;
+        return ProxyUserManagementScript(environment.proxyServer, referenceId || '<auth_token>');
+    }
+
     @ViewChild('addRoleDialogTemplate', { static: false }) addRoleDialogTemplate: TemplateRef<any>;
     @ViewChild('addPermissionDialogTemplate', { static: false }) addPermissionDialogTemplate: TemplateRef<any>;
     @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 = '<auth_token>',
+    type = '<type>',
+    time?: number
+) => `<script type="text/javascript">
+    var configuration = {
+        authToken: '{{authToken}}',
+        type: 'user-management',
+        success: (data) => {
+            // get verified token in response
+            console.log('success response', data);
+        },
+        failure: (error) => {
+            // handle error
+            console.log('failure reason', error);
+        },
+    };
+</script>
+<script
+    type="text/javascript"
+    onload="initVerification(configuration)"
+    src="${ProxyAuthScriptUrl(baseUrl, time)}"
+></script>`;

From 7d2eec09a58e03af59aa860f0c5bb05fc7bdffc7 Mon Sep 17 00:00:00 2001
From: prakharlowanshi <walkover@walkovers-Mini.localdomain>
Date: Tue, 20 Jan 2026 18:12:08 +0530
Subject: [PATCH 2/2] 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 @@ <h5 class="mat-body-2 text-secondary fw-bold">Create Roles & Permissions</h5>
                             <strong>Note: </strong> To integrate the user management component into your website or
                             application, simply add the script to your page. <br />
                         </div>
+                        <div class="overflow-auto code-snippet-view position-relative rounded-4 w-50 mt-3">
+                            <markdown [data]="userProxyContainerHtml | language: 'html'"> </markdown>
+                            <proxy-copy-button
+                                class="position-absolute"
+                                style="top: 16px; right: 8px"
+                                [copyData]="userProxyContainerHtml"
+                                tooltip="Copy Code"
+                                iconClass="text-white"
+                            ></proxy-copy-button>
+                        </div>
                     </div>
+                    <div id="userProxyContainer"></div>
                 </mat-tab>
 
                 <mat-tab label="Settings">
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 || '<auth_token>');
     }
 
+    public get userProxyContainerHtml(): string {
+        return `<div id="userProxyContainer"></div>`;
+    }
+
     @ViewChild('addRoleDialogTemplate', { static: false }) addRoleDialogTemplate: TemplateRef<any>;
     @ViewChild('addPermissionDialogTemplate', { static: false }) addPermissionDialogTemplate: TemplateRef<any>;
     @ViewChild('rolesPaginator') rolesPaginator!: MatPaginator;