diff --git a/apps/web/src/app/admin-console/common/base.people.component.ts b/apps/web/src/app/admin-console/common/base.people.component.ts index fbb9faf569..a33bd9298a 100644 --- a/apps/web/src/app/admin-console/common/base.people.component.ts +++ b/apps/web/src/app/admin-console/common/base.people.component.ts @@ -1,5 +1,13 @@ import { Directive, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; -import { BehaviorSubject, Subject, firstValueFrom, from, switchMap, takeUntil } from "rxjs"; +import { + BehaviorSubject, + Subject, + firstValueFrom, + from, + lastValueFrom, + switchMap, + takeUntil, +} from "rxjs"; import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe"; import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe"; @@ -385,25 +393,16 @@ export abstract class BasePeopleComponent< this.organizationManagementPreferencesService.autoConfirmFingerPrints.state$, ); if (autoConfirm == null || !autoConfirm) { - const [modal] = await this.modalService.openViewRef( - UserConfirmComponent, - this.confirmModalRef, - (comp) => { - comp.name = this.userNamePipe.transform(user); - comp.userId = user != null ? user.userId : null; - comp.publicKey = publicKey; - // eslint-disable-next-line rxjs/no-async-subscribe - comp.onConfirmedUser.subscribe(async () => { - try { - comp.formPromise = confirmUser(publicKey); - await comp.formPromise; - modal.close(); - } catch (e) { - this.logService.error(e); - } - }); + const dialogRef = UserConfirmComponent.open(this.dialogService, { + data: { + name: this.userNamePipe.transform(user), + userId: user != null ? user.userId : null, + publicKey: publicKey, + confirmUser: () => confirmUser(publicKey), }, - ); + }); + await lastValueFrom(dialogRef.closed); + return; } diff --git a/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.html b/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.html index 7762067784..2588f0e7e4 100644 --- a/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.html +++ b/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.html @@ -1,52 +1,36 @@ - + {{ "learnMore" | i18n }} +

+

+ {{ fingerprint }} +

+ + + {{ "dontAskFingerprintAgain" | i18n }} + + + + + + + + diff --git a/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.ts b/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.ts index 4f712f30a8..e96b349e03 100644 --- a/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.ts +++ b/apps/web/src/app/admin-console/organizations/manage/user-confirm.component.ts @@ -1,29 +1,47 @@ -import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; +import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog"; +import { Component, Inject, OnInit } from "@angular/core"; +import { FormControl, FormGroup } from "@angular/forms"; import { OrganizationManagementPreferencesService } from "@bitwarden/common/admin-console/abstractions/organization-management-preferences/organization-management-preferences.service"; import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; +import { DialogService } from "@bitwarden/components"; + +export type UserConfirmDialogData = { + name: string; + userId: string; + publicKey: Uint8Array; + confirmUser: (publicKey: Uint8Array) => Promise; +}; @Component({ selector: "app-user-confirm", templateUrl: "user-confirm.component.html", }) export class UserConfirmComponent implements OnInit { - @Input() name: string; - @Input() userId: string; - @Input() publicKey: Uint8Array; - @Output() onConfirmedUser = new EventEmitter(); + name: string; + userId: string; + publicKey: Uint8Array; - dontAskAgain = false; loading = true; fingerprint: string; formPromise: Promise; + formGroup = new FormGroup({ + dontAskAgain: new FormControl(false), + }); + constructor( + @Inject(DIALOG_DATA) protected data: UserConfirmDialogData, + private dialogRef: DialogRef, private cryptoService: CryptoService, private logService: LogService, private organizationManagementPreferencesService: OrganizationManagementPreferencesService, - ) {} + ) { + this.name = data.name; + this.userId = data.userId; + this.publicKey = data.publicKey; + } async ngOnInit() { try { @@ -39,15 +57,21 @@ export class UserConfirmComponent implements OnInit { this.loading = false; } - async submit() { + submit = async () => { if (this.loading) { return; } - if (this.dontAskAgain) { + if (this.formGroup.value.dontAskAgain) { await this.organizationManagementPreferencesService.autoConfirmFingerPrints.set(true); } - this.onConfirmedUser.emit(); + await this.data.confirmUser(this.publicKey); + + this.dialogRef.close(); + }; + + static open(dialogService: DialogService, config: DialogConfig) { + return dialogService.open(UserConfirmComponent, config); } }