From f6dd27aa7e2c8004ac809a9e91f84f7c4a059e72 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 6 Feb 2024 21:33:12 -0800
Subject: [PATCH] Use confirm button for profile social disconnect + regenerate
 API key

---
 .../profile-edit-dialog.component.html        | 27 ++++++++++++-------
 .../profile-edit-dialog.component.spec.ts     |  2 ++
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
index 79099a905..713d68864 100644
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
@@ -41,9 +41,14 @@
               }
               <span class="visually-hidden" i18n>Copy</span>
             </button>
-            <button type="button" class="btn btn-outline-secondary" (click)="generateAuthToken()" i18n-title title="Regenerate auth token">
-              <i-bs width="1.2em" height="1.2em" name="arrow-repeat"></i-bs>
-            </button>
+            <pngx-confirm-button
+              title="Regenerate auth token"
+              i18n-title
+              buttonClasses=" btn-outline-secondary"
+              iconName="arrow-repeat"
+              [disabled]="!hasUsablePassword"
+              (confirm)="generateAuthToken()">
+            </pngx-confirm-button>
           </div>
           <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
         </div>
@@ -60,14 +65,16 @@
                 [disablePopover]="hasUsablePassword"
                 triggers="mouseenter:mouseleave">
                 {{account.name}} ({{account.provider}})
-                <button
-                  type="button"
-                  class="btn btn-outline-danger btn-sm ms-2 align-baseline"
+                <pngx-confirm-button
+                  label="Disconnect"
+                  i18n-label
+                  title="Disconnect {{ account.name }} social account"
+                  i18n-title
+                  buttonClasses="btn-outline-danger btn-sm ms-2 align-baseline"
+                  iconName="trash"
                   [disabled]="!hasUsablePassword"
-                  (click)="disconnectSocialAccount(account.id)"
-                  i18n-title title="Disconnect {{ account.name }} social account">
-                <ng-container i18n>Disconnect</ng-container>&nbsp;<i-bs name="trash"></i-bs>
-                </button>
+                  (confirm)="disconnectSocialAccount(account.id)">
+                </pngx-confirm-button>
               </li>
             }
           </ul>
diff --git a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
index 36888d4bd..b57cf07f2 100644
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
@@ -21,6 +21,7 @@ import { of, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
 import { Clipboard } from '@angular/cdk/clipboard'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from '../confirm-button/confirm-button.component'
 
 const socialAccount = {
   id: 1,
@@ -52,6 +53,7 @@ describe('ProfileEditDialogComponent', () => {
         ProfileEditDialogComponent,
         TextComponent,
         PasswordComponent,
+        ConfirmButtonComponent,
       ],
       providers: [NgbActiveModal],
       imports: [