From c09b446e63210f68bcbfd91f5e2f3b5c4dedd609 Mon Sep 17 00:00:00 2001 From: Will Martin Date: Fri, 8 Mar 2024 09:15:07 -0500 Subject: [PATCH] [PM-5054] migrate emergency access to CL (#7850) Co-authored-by: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com> --- .../emergency-access-confirm.component.html | 87 ++- .../emergency-access-confirm.component.ts | 53 +- .../emergency-access-add-edit.component.html | 192 ++----- .../emergency-access-add-edit.component.ts | 98 +++- .../emergency-access.component.html | 506 +++++++++--------- .../emergency-access.component.ts | 139 +++-- .../emergency-access-takeover.component.html | 129 ++--- .../emergency-access-takeover.component.ts | 62 ++- .../view/emergency-access-view.component.html | 77 +-- apps/web/src/locales/en/messages.json | 3 + 10 files changed, 671 insertions(+), 675 deletions(-) diff --git a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html index 7762067784..a8a4bd53d9 100644 --- a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html @@ -1,52 +1,37 @@ - + {{ "learnMore" | i18n }} +

+

+ {{ fingerprint }} +

+ + + + {{ "dontAskFingerprintAgain" | i18n }} + + +
+ + +
+ + diff --git a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts index 711a7ba9a5..4afc60c9be 100644 --- a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts +++ b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts @@ -1,39 +1,52 @@ -import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; +import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog"; +import { Component, OnInit, Inject } from "@angular/core"; +import { FormBuilder } from "@angular/forms"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; import { StateService } from "@bitwarden/common/platform/abstractions/state.service"; import { Utils } from "@bitwarden/common/platform/misc/utils"; +import { DialogService } from "@bitwarden/components"; +export enum EmergencyAccessConfirmDialogResult { + Confirmed = "confirmed", +} +type EmergencyAccessConfirmDialogData = { + /** display name of the account requesting emergency access */ + name: string; + /** identifies the account requesting emergency access */ + userId: string; + /** traces a unique emergency request */ + emergencyAccessId: string; +}; @Component({ selector: "emergency-access-confirm", templateUrl: "emergency-access-confirm.component.html", }) export class EmergencyAccessConfirmComponent implements OnInit { - @Input() name: string; - @Input() userId: string; - @Input() emergencyAccessId: string; - @Input() formPromise: Promise; - @Output() onConfirmed = new EventEmitter(); - - dontAskAgain = false; loading = true; fingerprint: string; + confirmForm = this.formBuilder.group({ + dontAskAgain: [false], + }); constructor( + @Inject(DIALOG_DATA) protected params: EmergencyAccessConfirmDialogData, + private formBuilder: FormBuilder, private apiService: ApiService, private cryptoService: CryptoService, private stateService: StateService, private logService: LogService, + private dialogRef: DialogRef, ) {} async ngOnInit() { try { - const publicKeyResponse = await this.apiService.getUserPublicKey(this.userId); + const publicKeyResponse = await this.apiService.getUserPublicKey(this.params.userId); if (publicKeyResponse != null) { const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey); - const fingerprint = await this.cryptoService.getFingerprint(this.userId, publicKey); + const fingerprint = await this.cryptoService.getFingerprint(this.params.userId, publicKey); if (fingerprint != null) { this.fingerprint = fingerprint.join("-"); } @@ -44,19 +57,33 @@ export class EmergencyAccessConfirmComponent implements OnInit { this.loading = false; } - async submit() { + submit = async () => { if (this.loading) { return; } - if (this.dontAskAgain) { + if (this.confirmForm.get("dontAskAgain").value) { await this.stateService.setAutoConfirmFingerprints(true); } try { - this.onConfirmed.emit(); + this.dialogRef.close(EmergencyAccessConfirmDialogResult.Confirmed); } catch (e) { this.logService.error(e); } + }; + /** + * Strongly typed helper to open a EmergencyAccessConfirmComponent + * @param dialogService Instance of the dialog service that will be used to open the dialog + * @param config Configuration for the dialog + */ + static open( + dialogService: DialogService, + config: DialogConfig, + ) { + return dialogService.open( + EmergencyAccessConfirmComponent, + config, + ); } } diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html index 43961d6a13..1e61585e42 100644 --- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html @@ -1,142 +1,68 @@ - + + + {{ "view" | i18n }} + {{ "viewDesc" | i18n }} + + + + {{ "takeover" | i18n }} + {{ "takeoverDesc" | i18n }} + + + + + {{ "waitTime" | i18n }} + + + + {{ "waitTimeDesc" | i18n }} + + + + + + + + + diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts index 4aec390a56..d99c693e73 100644 --- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts +++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts @@ -1,45 +1,59 @@ -import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; +import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog"; +import { Component, Inject, OnInit } from "@angular/core"; +import { FormBuilder, Validators } from "@angular/forms"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { DialogService } from "@bitwarden/components"; import { EmergencyAccessService } from "../../emergency-access"; import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type"; +export type EmergencyAccessAddEditDialogData = { + /** display name of the account requesting emergency access */ + name: string; + /** traces a unique emergency request */ + emergencyAccessId: string; + /** A boolean indicating whether the emergency access request is in read-only mode (true for view-only, false for editing). */ + readOnly: boolean; +}; + +export enum EmergencyAccessAddEditDialogResult { + Saved = "saved", + Canceled = "canceled", + Deleted = "deleted", +} @Component({ selector: "emergency-access-add-edit", templateUrl: "emergency-access-add-edit.component.html", }) export class EmergencyAccessAddEditComponent implements OnInit { - @Input() name: string; - @Input() emergencyAccessId: string; - @Output() onSaved = new EventEmitter(); - @Output() onDeleted = new EventEmitter(); - loading = true; readOnly = false; editMode = false; title: string; - email: string; type: EmergencyAccessType = EmergencyAccessType.View; - formPromise: Promise; - emergencyAccessType = EmergencyAccessType; waitTimes: { name: string; value: number }[]; - waitTime: number; + addEditForm = this.formBuilder.group({ + email: ["", [Validators.email, Validators.required]], + emergencyAccessType: [this.emergencyAccessType.View], + waitTime: [{ value: null, disabled: this.readOnly }, [Validators.required]], + }); constructor( + @Inject(DIALOG_DATA) protected params: EmergencyAccessAddEditDialogData, + private formBuilder: FormBuilder, private emergencyAccessService: EmergencyAccessService, private i18nService: I18nService, private platformUtilsService: PlatformUtilsService, private logService: LogService, + private dialogRef: DialogRef, ) {} - async ngOnInit() { - this.editMode = this.loading = this.emergencyAccessId != null; - + this.editMode = this.loading = this.params.emergencyAccessId != null; this.waitTimes = [ { name: this.i18nService.t("oneDay"), value: 1 }, { name: this.i18nService.t("days", "2"), value: 2 }, @@ -50,46 +64,72 @@ export class EmergencyAccessAddEditComponent implements OnInit { ]; if (this.editMode) { - this.editMode = true; this.title = this.i18nService.t("editEmergencyContact"); try { const emergencyAccess = await this.emergencyAccessService.getEmergencyAccess( - this.emergencyAccessId, + this.params.emergencyAccessId, ); - this.type = emergencyAccess.type; - this.waitTime = emergencyAccess.waitTimeDays; + this.addEditForm.patchValue({ + email: emergencyAccess.email, + waitTime: emergencyAccess.waitTimeDays, + emergencyAccessType: emergencyAccess.type, + }); } catch (e) { this.logService.error(e); } } else { this.title = this.i18nService.t("inviteEmergencyContact"); - this.waitTime = this.waitTimes[2].value; + this.addEditForm.patchValue({ waitTime: this.waitTimes[2].value }); } this.loading = false; } - async submit() { + submit = async () => { + if (this.addEditForm.invalid) { + this.addEditForm.markAllAsTouched(); + return; + } try { if (this.editMode) { - await this.emergencyAccessService.update(this.emergencyAccessId, this.type, this.waitTime); + await this.emergencyAccessService.update( + this.params.emergencyAccessId, + this.addEditForm.value.emergencyAccessType, + this.addEditForm.value.waitTime, + ); } else { - await this.emergencyAccessService.invite(this.email, this.type, this.waitTime); + await this.emergencyAccessService.invite( + this.addEditForm.value.email, + this.addEditForm.value.emergencyAccessType, + this.addEditForm.value.waitTime, + ); } - - await this.formPromise; this.platformUtilsService.showToast( "success", null, - this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.name), + this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.params.name), ); - this.onSaved.emit(); + this.dialogRef.close(EmergencyAccessAddEditDialogResult.Saved); } catch (e) { this.logService.error(e); } - } + }; - async delete() { - this.onDeleted.emit(); - } + delete = async () => { + this.dialogRef.close(EmergencyAccessAddEditDialogResult.Deleted); + }; + /** + * Strongly typed helper to open a EmergencyAccessAddEditComponent + * @param dialogService Instance of the dialog service that will be used to open the dialog + * @param config Configuration for the dialog + */ + static open = ( + dialogService: DialogService, + config: DialogConfig, + ) => { + return dialogService.open( + EmergencyAccessAddEditComponent, + config, + ); + }; } diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html index 27bfc673ec..41c62db609 100644 --- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html @@ -1,264 +1,276 @@ - -

- {{ "emergencyAccessDesc" | i18n }} - - {{ "learnMore" | i18n }}. - -

- -

- {{ "warning" | i18n }}: {{ "emergencyAccessOwnerWarning" | i18n }} -

- -
-

- {{ "trustedEmergencyContacts" | i18n }} - -

-
- + {{ "learnMore" | i18n }}. + +

+ {{ + "emergencyAccessOwnerWarning" | i18n + }} + + +
+

+ {{ "trustedEmergencyContacts" | i18n }} +

+ +
+ +
-
+ + + + {{ "name" | i18n }} + {{ "accessLevel" | i18n }} + {{ "options" | i18n }} + + + + + + + + {{ c.email }} + {{ "invited" | i18n }} + {{ "accepted" | i18n }} + {{ "emergencyAccessRecoveryInitiated" | i18n }} + {{ + "emergencyAccessRecoveryApproved" | i18n + }} - - - - - - + + - - -
- - - {{ c.email }} - {{ "invited" | i18n }} - {{ "accepted" | i18n }} - {{ "emergencyAccessRecoveryInitiated" | i18n }} - {{ - "emergencyAccessRecoveryApproved" | i18n - }} - - {{ "view" | i18n }} - {{ - "takeover" | i18n - }} - - {{ c.name }} - - - + {{ c.name }} + + + {{ "view" | i18n }} + {{ + "takeover" | i18n + }} + - - - - - -
- - -

{{ "noTrustedContacts" | i18n }}

- - - {{ "loading" | i18n }} + appA11yTitle="{{ 'options' | i18n }}" + bitIconButton="bwi-ellipsis-v" + buttonType="main" + > + + + + + + + + + + + + +

{{ "noTrustedContacts" | i18n }}

+ + + {{ "loading" | i18n }} + - + -
-

{{ "designatedEmergencyContacts" | i18n }}

-
+ +

{{ "designatedEmergencyContacts" | i18n }}

- - - - - + + + + + + + + - + + - - -
- - - {{ c.email }} - {{ - "invited" | i18n - }} - {{ "accepted" | i18n }} - {{ "emergencyAccessRecoveryInitiated" | i18n }} - {{ "emergencyAccessRecoveryApproved" | i18n }} + + +
{{ "name" | i18n }}{{ "accessLevel" | i18n }}{{ "options" | i18n }}
+ + + {{ c.email }} + {{ + "invited" | i18n + }} + {{ "accepted" | i18n }} + {{ "emergencyAccessRecoveryInitiated" | i18n }} + {{ "emergencyAccessRecoveryApproved" | i18n }} - {{ "view" | i18n }} - {{ - "takeover" | i18n - }} - - {{ c.name }} - - - + {{ c.name }} + + + {{ "view" | i18n }} + {{ + "takeover" | i18n + }} + - - - - -
- - -

{{ "noGrantedAccess" | i18n }}

- - - {{ "loading" | i18n }} + appA11yTitle="{{ 'options' | i18n }}" + bitIconButton="bwi-ellipsis-v" + buttonType="main" + > + + + + + + + + + + + +

{{ "noGrantedAccess" | i18n }}

+ + + {{ "loading" | i18n }} + - + diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts index 084a80a582..7293860bea 100644 --- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts +++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; +import { lastValueFrom } from "rxjs"; import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe"; -import { ModalService } from "@bitwarden/angular/services/modal.service"; import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; @@ -18,9 +18,18 @@ import { GrantorEmergencyAccess, } from "../../emergency-access/models/emergency-access"; -import { EmergencyAccessConfirmComponent } from "./confirm/emergency-access-confirm.component"; -import { EmergencyAccessAddEditComponent } from "./emergency-access-add-edit.component"; -import { EmergencyAccessTakeoverComponent } from "./takeover/emergency-access-takeover.component"; +import { + EmergencyAccessConfirmComponent, + EmergencyAccessConfirmDialogResult, +} from "./confirm/emergency-access-confirm.component"; +import { + EmergencyAccessAddEditComponent, + EmergencyAccessAddEditDialogResult, +} from "./emergency-access-add-edit.component"; +import { + EmergencyAccessTakeoverComponent, + EmergencyAccessTakeoverResultType, +} from "./takeover/emergency-access-takeover.component"; @Component({ selector: "emergency-access", @@ -46,7 +55,6 @@ export class EmergencyAccessComponent implements OnInit { constructor( private emergencyAccessService: EmergencyAccessService, private i18nService: I18nService, - private modalService: ModalService, private platformUtilsService: PlatformUtilsService, private messagingService: MessagingService, private userNamePipe: UserNamePipe, @@ -78,37 +86,26 @@ export class EmergencyAccessComponent implements OnInit { } } - async edit(details: GranteeEmergencyAccess) { - const [modal] = await this.modalService.openViewRef( - EmergencyAccessAddEditComponent, - this.addEditModalRef, - (comp) => { - comp.name = this.userNamePipe.transform(details); - comp.emergencyAccessId = details?.id; - comp.readOnly = !this.canAccessPremium; - // eslint-disable-next-line rxjs-angular/prefer-takeuntil - comp.onSaved.subscribe(() => { - modal.close(); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.load(); - }); - // eslint-disable-next-line rxjs-angular/prefer-takeuntil - comp.onDeleted.subscribe(() => { - modal.close(); - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.remove(details); - }); + edit = async (details: GranteeEmergencyAccess) => { + const dialogRef = EmergencyAccessAddEditComponent.open(this.dialogService, { + data: { + name: this.userNamePipe.transform(details), + emergencyAccessId: details?.id, + readOnly: !this.canAccessPremium, }, - ); - } + }); - invite() { - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.edit(null); - } + const result = await lastValueFrom(dialogRef.closed); + if (result === EmergencyAccessAddEditDialogResult.Saved) { + await this.load(); + } else if (result === EmergencyAccessAddEditDialogResult.Deleted) { + await this.remove(details); + } + }; + + invite = async () => { + await this.edit(null); + }; async reinvite(contact: GranteeEmergencyAccess) { if (this.actionPromise != null) { @@ -135,29 +132,23 @@ export class EmergencyAccessComponent implements OnInit { const autoConfirm = await this.stateService.getAutoConfirmFingerPrints(); if (autoConfirm == null || !autoConfirm) { - const [modal] = await this.modalService.openViewRef( - EmergencyAccessConfirmComponent, - this.confirmModalRef, - (comp) => { - comp.name = this.userNamePipe.transform(contact); - comp.emergencyAccessId = contact.id; - comp.userId = contact?.granteeId; - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - comp.onConfirmed.subscribe(async () => { - modal.close(); - - comp.formPromise = this.emergencyAccessService.confirm(contact.id, contact.granteeId); - await comp.formPromise; - - updateUser(); - this.platformUtilsService.showToast( - "success", - null, - this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)), - ); - }); + const dialogRef = EmergencyAccessConfirmComponent.open(this.dialogService, { + data: { + name: this.userNamePipe.transform(contact), + emergencyAccessId: contact.id, + userId: contact?.granteeId, }, - ); + }); + const result = await lastValueFrom(dialogRef.closed); + if (result === EmergencyAccessConfirmDialogResult.Confirmed) { + await this.emergencyAccessService.confirm(contact.id, contact.granteeId); + updateUser(); + this.platformUtilsService.showToast( + "success", + null, + this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)), + ); + } return; } @@ -267,27 +258,23 @@ export class EmergencyAccessComponent implements OnInit { ); } - async takeover(details: GrantorEmergencyAccess) { - const [modal] = await this.modalService.openViewRef( - EmergencyAccessTakeoverComponent, - this.takeoverModalRef, - (comp) => { - comp.name = this.userNamePipe.transform(details); - comp.email = details.email; - comp.emergencyAccessId = details != null ? details.id : null; - - // eslint-disable-next-line rxjs-angular/prefer-takeuntil - comp.onDone.subscribe(() => { - modal.close(); - this.platformUtilsService.showToast( - "success", - null, - this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)), - ); - }); + takeover = async (details: GrantorEmergencyAccess) => { + const dialogRef = EmergencyAccessTakeoverComponent.open(this.dialogService, { + data: { + name: this.userNamePipe.transform(details), + email: details.email, + emergencyAccessId: details.id ?? null, }, - ); - } + }); + const result = await lastValueFrom(dialogRef.closed); + if (result === EmergencyAccessTakeoverResultType.Done) { + this.platformUtilsService.showToast( + "success", + null, + this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)), + ); + } + }; private removeGrantee(details: GranteeEmergencyAccess) { const index = this.trustedContacts.indexOf(details); diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html index 99aa194c5d..5c72efbd61 100644 --- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html @@ -1,79 +1,54 @@ -