Disable disconnecting if no password is set, show warning

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html

@@ -54,7 +54,18 @@
           <p i18n>Connected social accounts</p>
           <ul class="list-group">
             @for (account of socialAccounts; track account.id) {
-              <li class="list-group-item">{{account.name}} ({{account.provider}})<button type="button" class="btn btn-outline-danger btn-sm ms-2 align-baseline" (click)="disconnectSocialAccount(account.id)" i18n-title title="Disconnect {{ account.name }} social account">
+              <li class="list-group-item"
+                ngbPopover="Set a password before disconnecting social account."
+                i18n-ngbPopover
+                [disablePopover]="hasUsablePassword"
+                triggers="mouseenter:mouseleave">
+                {{account.name}} ({{account.provider}})
+                <button
+                  type="button"
+                  class="btn btn-outline-danger btn-sm ms-2 align-baseline"
+                  [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>
               </li>

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts

@@ -12,6 +12,7 @@ import {
   NgbAccordionModule,
   NgbActiveModal,
   NgbModalModule,
+  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { HttpClientModule } from '@angular/common/http'
 import { TextComponent } from '../input/text/text.component'
@@ -60,6 +61,7 @@ describe('ProfileEditDialogComponent', () => {
         NgbModalModule,
         NgbAccordionModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        NgbPopoverModule,
       ],
     })
     profileService = TestBed.inject(ProfileService)
@@ -158,6 +160,7 @@ describe('ProfileEditDialogComponent', () => {
       'getSocialAccountProviders'
     )
     getProvidersSpy.mockReturnValue(of(socialAccountProviders))
+    component.hasUsablePassword = true
     component.ngOnInit()
     component.form.get('password').patchValue('new*pass')
     component.onPasswordKeyUp({

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts

@@ -31,6 +31,7 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
   private newPassword: string
   private passwordConfirm: string
   public showPasswordConfirm: boolean = false
+  public hasUsablePassword: boolean = false
 
   private currentEmail: string
   private newEmail: string
@@ -63,6 +64,7 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
           this.onEmailChange()
         })
         this.currentPassword = profile.password
+        this.hasUsablePassword = profile.has_usable_password
         this.form.get('password').valueChanges.subscribe((newPassword) => {
           this.newPassword = newPassword
           this.onPasswordChange()

src-ui/src/app/data/user-profile.ts

@@ -16,4 +16,5 @@ export interface PaperlessUserProfile {
   last_name?: string
   auth_token?: string
   social_accounts?: SocialAccount[]
+  has_usable_password?: boolean
 }