feat: qbd direct connector setup connector ts changes

fylein · Nov 11, 2024 · 3c2fe05 · 3c2fe05
1 parent d02b468
commit 3c2fe05
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/.../qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html b/.../qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html
@@ -42,11 +42,11 @@ <h4 class="tw-text-14-px tw-text-text-secondary tw-font-500">Use this password t
                                 </div>
                                 <div class="tw-flex tw-items-center tw-justify-end">
                                     <div class="tw-pr-10-px">
-                                        <app-svg-icon *ngIf="!isPasswordShown" [svgSource]="'eye-slash-medium'" [width]="'18px'" [height]="'18px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(true)"></app-svg-icon>
-                                        <app-svg-icon *ngIf="isPasswordShown" [svgSource]="'eye-medium'" [width]="'18px'" [height]="'18px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(false)"></app-svg-icon>
+                                        <app-svg-icon *ngIf="!isPasswordShown" [svgSource]="'eye-slash'" [width]="'24px'" [height]="'24px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(true)"></app-svg-icon>
+                                        <app-svg-icon *ngIf="isPasswordShown" [svgSource]="'eye'" [width]="'24px'" [height]="'24px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(false)"></app-svg-icon>
                                     </div>
                                     <div>
-                                        <app-svg-icon [svgSource]="'duplicate'" [width]="'18px'" [height]="'18px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="onClipboardCopy()"></app-svg-icon>
+                                        <app-svg-icon [svgSource]="'duplicate'" [width]="'22px'" [height]="'22px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="onClipboardCopy()"></app-svg-icon>
                                     </div>
                                 </div>
                             </div>

diff --git a/...ct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts b/...ct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts
@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { CardModule } from 'primeng/card';
 import { ConfigurationCta, QBDConnectionStatus } from 'src/app/core/models/enum/enum.model';
 import { brandingConfig } from 'src/app/branding/branding-config';
+import { checkBoxEmit } from 'src/app/core/models/common/helper.model';
+import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-qbd-direct-setup-connection',
@@ -14,15 +16,19 @@ import { brandingConfig } from 'src/app/branding/branding-config';
 })
 export class QbdDirectSetupConnectionComponent {
 
-  password: string = '098765';
+  @Input({required: true}) password: string = '098765';
 
-  isLoading: boolean;
+  @Input({required: true}) isLoading: boolean;
 
-  connectionStatus: QBDConnectionStatus;
+  @Input({required: true}) connectionStatus: QBDConnectionStatus;
 
-  isStepCompleted: boolean;
+  @Input({required: true}) isStepCompleted: boolean;
 
-  isCTAEnabled: boolean;
+  @Input({required: true}) isCTAEnabled: boolean;
+
+  @Output() doneClick: EventEmitter<checkBoxEmit> = new EventEmitter();
+
+  @Output() nextClick = new EventEmitter();
 
   qbdConnectionStatus = QBDConnectionStatus;
 
@@ -32,19 +38,35 @@ export class QbdDirectSetupConnectionComponent {
 
   readonly brandingConfig = brandingConfig;
 
-  onDoneClick(event: any) {
-    // Emit output
+  constructor(private messageService: MessageService) {}
+
+  onDoneClick(event: checkBoxEmit) {
+    this.doneClick.emit(event);
   }
 
   onNextClick() {
-    // Emit output
+    this.nextClick.emit();
   }
 
   onClipboardCopy() {
-    // Copy password to clipboard
+    const selBox = document.createElement('textarea');
+    selBox.value = this.password;
+    document.body.appendChild(selBox);
+    selBox.select();
+    selBox.click();
+    document.execCommand('copy');
+
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Password copied to clipboard'
+    });
+
+    document.body.removeChild(selBox);
+    event?.stopPropagation();
   }
 
   showPassword(isPasswordVisible: boolean) {
+    this.isPasswordShown = isPasswordVisible;
   }
 
 }