Feature: OIDC & social authentication (#5190)

---------

Co-authored-by: Moritz Pflanzer <moritz@chickadee-engineering.com>
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

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

@@ -49,6 +49,43 @@
         </div>
         <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the token cannot be undone</div>
       </div>
+      @if (socialAccounts?.length > 0) {
+        <div class="mb-3">
+          <p i18n>Connected social accounts</p>
+          <ul class="list-group">
+            @for (account of socialAccounts; track account.id) {
+              <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 && socialAccounts.length === 1"
+                  (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>
+            }
+          </ul>
+          <div class="form-text text-muted text-end fst-italic" i18n>Warning: disconnecting social accounts cannot be undone</div>
+        </div>
+      }
+      @if (socialAccountProviders?.length > 0) {
+        <div class="mb-3">
+          <p i18n>Connect new social account</p>
+          <div class="list-group">
+            @for (provider of socialAccountProviders; track provider.name) {
+              <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" rel="noopener noreferrer">
+                {{provider.name}}&nbsp;<i-bs class="pb-1 ps-1" name="box-arrow-up-right"></i-bs>
+              </a>
+            }
+          </div>
+        </div>
+      }
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>

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'
@@ -21,13 +22,22 @@ import { ToastService } from 'src/app/services/toast.service'
 import { Clipboard } from '@angular/cdk/clipboard'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
+const socialAccount = {
+  id: 1,
+  provider: 'test_provider',
+  name: 'Test Provider',
+}
 const profile = {
   email: 'foo@bar.com',
   password: '*********',
   first_name: 'foo',
   last_name: 'bar',
   auth_token: '123456789abcdef',
+  social_accounts: [socialAccount],
 }
+const socialAccountProviders = [
+  { name: 'Test Provider', login_url: 'https://example.com' },
+]
 
 describe('ProfileEditDialogComponent', () => {
   let component: ProfileEditDialogComponent
@@ -51,6 +61,7 @@ describe('ProfileEditDialogComponent', () => {
         NgbModalModule,
         NgbAccordionModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        NgbPopoverModule,
       ],
     })
     profileService = TestBed.inject(ProfileService)
@@ -64,6 +75,11 @@ describe('ProfileEditDialogComponent', () => {
   it('should get profile on init, display in form', () => {
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
     component.ngOnInit()
     expect(getSpy).toHaveBeenCalled()
     fixture.detectChanges()
@@ -103,6 +119,11 @@ describe('ProfileEditDialogComponent', () => {
     expect(component.form.get('email_confirm').enabled).toBeFalsy()
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
     component.ngOnInit()
     component.form.get('email').patchValue('foo@bar2.com')
     component.onEmailKeyUp({ target: { value: 'foo@bar2.com' } } as any)
@@ -134,6 +155,12 @@ describe('ProfileEditDialogComponent', () => {
     expect(component.form.get('password_confirm').enabled).toBeFalsy()
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
+    component.hasUsablePassword = true
     component.ngOnInit()
     component.form.get('password').patchValue('new*pass')
     component.onPasswordKeyUp({
@@ -167,6 +194,11 @@ describe('ProfileEditDialogComponent', () => {
   it('should logout on save if password changed', fakeAsync(() => {
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
     component.ngOnInit()
     component['newPassword'] = 'new*pass'
     component.form.get('password').patchValue('new*pass')
@@ -189,6 +221,11 @@ describe('ProfileEditDialogComponent', () => {
   it('should support auth token copy', fakeAsync(() => {
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
     component.ngOnInit()
     const copySpy = jest.spyOn(clipboard, 'copy')
     component.copyAuthToken()
@@ -220,4 +257,40 @@ describe('ProfileEditDialogComponent', () => {
     )
     expect(component.form.get('auth_token').value).toEqual(newToken)
   })
+
+  it('should get social account providers on init', () => {
+    const getSpy = jest.spyOn(profileService, 'get')
+    getSpy.mockReturnValue(of(profile))
+    const getProvidersSpy = jest.spyOn(
+      profileService,
+      'getSocialAccountProviders'
+    )
+    getProvidersSpy.mockReturnValue(of(socialAccountProviders))
+    component.ngOnInit()
+    expect(getProvidersSpy).toHaveBeenCalled()
+  })
+
+  it('should remove disconnected social account from component, show error if needed', () => {
+    const disconnectSpy = jest.spyOn(profileService, 'disconnectSocialAccount')
+    const getSpy = jest.spyOn(profileService, 'get')
+    getSpy.mockImplementation(() => of(profile))
+    component.ngOnInit()
+
+    const errorSpy = jest.spyOn(toastService, 'showError')
+
+    expect(component.socialAccounts).toContainEqual(socialAccount)
+
+    // fail first
+    disconnectSpy.mockReturnValueOnce(
+      throwError(() => new Error('unable to disconnect'))
+    )
+    component.disconnectSocialAccount(socialAccount.id)
+    expect(errorSpy).toHaveBeenCalled()
+
+    // succeed
+    disconnectSpy.mockReturnValue(of(socialAccount.id))
+    component.disconnectSocialAccount(socialAccount.id)
+    expect(disconnectSpy).toHaveBeenCalled()
+    expect(component.socialAccounts).not.toContainEqual(socialAccount)
+  })
 })

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

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { ProfileService } from 'src/app/services/profile.service'
+import { SocialAccount, SocialAccountProvider } from 'src/app/data/user-profile'
 import { ToastService } from 'src/app/services/toast.service'
 import { Subject, takeUntil } from 'rxjs'
 import { Clipboard } from '@angular/cdk/clipboard'
@@ -30,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
@@ -38,6 +40,9 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
 
   public copied: boolean = false
 
+  public socialAccounts: SocialAccount[] = []
+  public socialAccountProviders: SocialAccountProvider[] = []
+
   constructor(
     private profileService: ProfileService,
     public activeModal: NgbActiveModal,
@@ -59,10 +64,19 @@ 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()
         })
+        this.socialAccounts = profile.social_accounts
+      })
+
+    this.profileService
+      .getSocialAccountProviders()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((providers) => {
+        this.socialAccountProviders = providers
       })
   }
 
@@ -182,4 +196,21 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
       this.copied = false
     }, 3000)
   }
+
+  disconnectSocialAccount(id: number): void {
+    this.profileService
+      .disconnectSocialAccount(id)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (id: number) => {
+          this.socialAccounts = this.socialAccounts.filter((a) => a.id != id)
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`Error disconnecting social account`,
+            error
+          )
+        },
+      })
+  }
 }