P0062|need to show the snippet in the proxy panel for the user management

apps/proxy/src/app/users/management/management.component.html

@@ -219,6 +219,36 @@ <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 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">
                     <div class="">
                         <p class="mat-body-2 text-secondary fw-bold p-0">Default Roles</p>

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,15 @@ 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>');
+    }
+
+    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;

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],
 })

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>`;