mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-22 11:45:59 +01:00
[PM-5054] migrate emergency access to CL (#7850)
Co-authored-by: vinith-kovan <156108204+vinith-kovan@users.noreply.github.com>
This commit is contained in:
Will Martin
GitHub
parent
551e43031e
commit
c09b446e63
@ -1,52 +1,37 @@
|
||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title" id="confirmUserTitle">
|
||||
{{ "confirmUser" | i18n }}
|
||||
<small class="text-muted" *ngIf="name">{{ name }}</small>
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
appA11yTitle="{{ 'close' | i18n }}"
|
||||
<form [formGroup]="confirmForm" [bitSubmit]="submit">
|
||||
<bit-dialog dialogSize="large" [loading]="loading">
|
||||
<span bitDialogTitle>
|
||||
{{ "confirmUser" | i18n }}
|
||||
<small class="tw-text-muted">{{ params.name }}</small>
|
||||
</span>
|
||||
<div bitDialogContent>
|
||||
<p bitTypography="body1">
|
||||
{{ "fingerprintEnsureIntegrityVerify" | i18n }}
|
||||
<a
|
||||
bitLink
|
||||
href="https://bitwarden.com/help/fingerprint-phrase/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{ "fingerprintEnsureIntegrityVerify" | i18n }}
|
||||
<a href="https://bitwarden.com/help/fingerprint-phrase/" target="_blank" rel="noreferrer">
|
||||
{{ "learnMore" | i18n }}</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<code>{{ fingerprint }}</code>
|
||||
</p>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="dontAskAgain"
|
||||
name="DontAskAgain"
|
||||
[(ngModel)]="dontAskAgain"
|
||||
/>
|
||||
<label class="form-check-label" for="dontAskAgain">
|
||||
{{ "dontAskFingerprintAgain" | i18n }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "confirm" | i18n }}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{ "learnMore" | i18n }}</a
|
||||
>
|
||||
</p>
|
||||
<p bitTypography="body1">
|
||||
<code>{{ fingerprint }}</code>
|
||||
</p>
|
||||
|
||||
<bit-form-control>
|
||||
<input type="checkbox" bitCheckbox formControlName="dontAskAgain" />
|
||||
<bit-label> {{ "dontAskFingerprintAgain" | i18n }}</bit-label>
|
||||
</bit-form-control>
|
||||
</div>
|
||||
<div bitDialogFooter>
|
||||
<button type="submit" buttonType="primary" bitButton bitFormButton>
|
||||
<span>{{ "confirm" | i18n }}</span>
|
||||
</button>
|
||||
<button bitButton bitFormButton buttonType="secondary" type="button" bitDialogClose>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
|
||||
@ -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<any>;
|
||||
@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<EmergencyAccessConfirmDialogResult>,
|
||||
) {}
|
||||
|
||||
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<EmergencyAccessConfirmDialogData>,
|
||||
) {
|
||||
return dialogService.open<EmergencyAccessConfirmDialogResult>(
|
||||
EmergencyAccessConfirmComponent,
|
||||
config,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,142 +1,68 @@
|
||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
|
||||
<form
|
||||
class="modal-content"
|
||||
#form
|
||||
(ngSubmit)="submit()"
|
||||
[appApiAction]="formPromise"
|
||||
ngNativeValidate
|
||||
>
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title" id="userAddEditTitle">
|
||||
<app-premium-badge *ngIf="readOnly"></app-premium-badge>
|
||||
{{ title }}
|
||||
<small class="text-muted" *ngIf="name">{{ name }}</small>
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
appA11yTitle="{{ 'close' | i18n }}"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" *ngIf="loading">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
</div>
|
||||
<div class="modal-body" *ngIf="!loading">
|
||||
<ng-container *ngIf="!editMode">
|
||||
<p>{{ "inviteEmergencyContactDesc" | i18n }}</p>
|
||||
<div class="form-group mb-4">
|
||||
<label for="email">{{ "email" | i18n }}</label>
|
||||
<input
|
||||
id="email"
|
||||
class="form-control"
|
||||
type="text"
|
||||
name="Email"
|
||||
[(ngModel)]="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</ng-container>
|
||||
<h3>
|
||||
<form [formGroup]="addEditForm" [bitSubmit]="submit">
|
||||
<bit-dialog dialogSize="large" [loading]="loading">
|
||||
<span bitDialogTitle>
|
||||
<app-premium-badge *ngIf="readOnly"></app-premium-badge>
|
||||
{{ title }}
|
||||
<small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
|
||||
</span>
|
||||
<ng-container bitDialogContent>
|
||||
<ng-container *ngIf="!editMode">
|
||||
<p bitTypography="body1">{{ "inviteEmergencyContactDesc" | i18n }}</p>
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "email" | i18n }}</bit-label>
|
||||
<input bitInput formControlName="email" />
|
||||
</bit-form-field>
|
||||
</ng-container>
|
||||
<bit-radio-group formControlName="emergencyAccessType" [block]="true">
|
||||
<bit-label>
|
||||
{{ "userAccess" | i18n }}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
bitLink
|
||||
linkType="primary"
|
||||
appA11yTitle="{{ 'learnMore' | i18n }}"
|
||||
href="https://bitwarden.com/help/emergency-access/#user-access"
|
||||
>
|
||||
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
||||
</a>
|
||||
</h3>
|
||||
<div class="form-check mt-2 form-check-block">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="userType"
|
||||
id="emergencyTypeView"
|
||||
[value]="emergencyAccessType.View"
|
||||
[(ngModel)]="type"
|
||||
/>
|
||||
<label class="form-check-label" for="emergencyTypeView">
|
||||
{{ "view" | i18n }}
|
||||
<small>{{ "viewDesc" | i18n }}</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mt-2 form-check-block">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="userType"
|
||||
id="emergencyTypeTakeover"
|
||||
[value]="emergencyAccessType.Takeover"
|
||||
[(ngModel)]="type"
|
||||
[disabled]="readOnly"
|
||||
/>
|
||||
<label class="form-check-label" for="emergencyTypeTakeover">
|
||||
{{ "takeover" | i18n }}
|
||||
<small>{{ "takeoverDesc" | i18n }}</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group col-6 mt-4">
|
||||
<label for="waitTime">{{ "waitTime" | i18n }}</label>
|
||||
<select
|
||||
id="waitTime"
|
||||
name="waitTime"
|
||||
[(ngModel)]="waitTime"
|
||||
class="form-control"
|
||||
[disabled]="readOnly"
|
||||
>
|
||||
<option *ngFor="let o of waitTimes" [ngValue]="o.value">{{ o.name }}</option>
|
||||
</select>
|
||||
<small class="text-muted">{{ "waitTimeDesc" | i18n }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
buttonType="primary"
|
||||
bitButton
|
||||
[loading]="loading || form.loading"
|
||||
[disabled]="readOnly"
|
||||
>
|
||||
{{ "save" | i18n }}
|
||||
</button>
|
||||
<button bitButton buttonType="secondary" type="button" data-dismiss="modal">
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
#deleteBtn
|
||||
bitButton
|
||||
buttonType="danger"
|
||||
type="button"
|
||||
(click)="delete()"
|
||||
appA11yTitle="{{ 'delete' | i18n }}"
|
||||
*ngIf="editMode"
|
||||
[disabled]="$any(deleteBtn).loading"
|
||||
>
|
||||
<i
|
||||
class="bwi bwi-trash bwi-lg bwi-fw"
|
||||
[hidden]="$any(deleteBtn).loading"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
|
||||
[hidden]="!$any(deleteBtn).loading"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</bit-label>
|
||||
<bit-radio-button id="emergencyTypeView" [value]="emergencyAccessType.View">
|
||||
<bit-label>{{ "view" | i18n }}</bit-label>
|
||||
<bit-hint>{{ "viewDesc" | i18n }}</bit-hint>
|
||||
</bit-radio-button>
|
||||
|
||||
<bit-radio-button id="emergencyTypeTakeover" [value]="emergencyAccessType.Takeover">
|
||||
<bit-label>{{ "takeover" | i18n }}</bit-label>
|
||||
<bit-hint>{{ "takeoverDesc" | i18n }}</bit-hint>
|
||||
</bit-radio-button>
|
||||
</bit-radio-group>
|
||||
|
||||
<bit-form-field class="tw-w-1/2 tw-relative tw-px-2.5">
|
||||
<bit-label>{{ "waitTime" | i18n }}</bit-label>
|
||||
<bit-select formControlName="waitTime">
|
||||
<bit-option *ngFor="let o of waitTimes" [value]="o.value" [label]="o.name"></bit-option>
|
||||
</bit-select>
|
||||
<bit-hint class="tw-text-sm">{{ "waitTimeDesc" | i18n }}</bit-hint>
|
||||
</bit-form-field>
|
||||
</ng-container>
|
||||
<ng-container bitDialogFooter>
|
||||
<button type="submit" buttonType="primary" bitButton bitFormButton [disabled]="readOnly">
|
||||
{{ "save" | i18n }}
|
||||
</button>
|
||||
<button bitButton bitFormButton buttonType="secondary" type="button" bitDialogClose>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitFormButton
|
||||
class="tw-ml-auto"
|
||||
bitIconButton="bwi-trash"
|
||||
buttonType="danger"
|
||||
[bitAction]="delete"
|
||||
*ngIf="editMode"
|
||||
appA11yTitle="{{ 'delete' | i18n }}"
|
||||
></button>
|
||||
</ng-container>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
|
||||
@ -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<any>;
|
||||
|
||||
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<EmergencyAccessAddEditDialogResult>,
|
||||
) {}
|
||||
|
||||
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<EmergencyAccessAddEditDialogData>,
|
||||
) => {
|
||||
return dialogService.open<EmergencyAccessAddEditDialogResult>(
|
||||
EmergencyAccessAddEditComponent,
|
||||
config,
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,264 +1,276 @@
|
||||
<app-header></app-header>
|
||||
|
||||
<bit-container>
|
||||
<p>
|
||||
{{ "emergencyAccessDesc" | i18n }}
|
||||
<a href="https://bitwarden.com/help/emergency-access/" target="_blank" rel="noreferrer">
|
||||
{{ "learnMore" | i18n }}.
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p *ngIf="isOrganizationOwner">
|
||||
<b>{{ "warning" | i18n }}:</b> {{ "emergencyAccessOwnerWarning" | i18n }}
|
||||
</p>
|
||||
|
||||
<div class="page-header d-flex">
|
||||
<h2>
|
||||
{{ "trustedEmergencyContacts" | i18n }}
|
||||
<app-premium-badge></app-premium-badge>
|
||||
</h2>
|
||||
<div class="ml-auto d-flex">
|
||||
<button
|
||||
class="btn btn-sm btn-outline-primary ml-3"
|
||||
type="button"
|
||||
(click)="invite()"
|
||||
[disabled]="!canAccessPremium"
|
||||
<bit-section>
|
||||
<p bitTypography="body1">
|
||||
<span class="tw-text-main">{{ "emergencyAccessDesc" | i18n }}</span>
|
||||
<a
|
||||
bitLink
|
||||
href="https://bitwarden.com/help/emergency-access/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
|
||||
{{ "addEmergencyContact" | i18n }}
|
||||
</button>
|
||||
{{ "learnMore" | i18n }}.
|
||||
</a>
|
||||
</p>
|
||||
<bit-callout *ngIf="isOrganizationOwner" type="warning" title="{{ 'warning' | i18n }}">{{
|
||||
"emergencyAccessOwnerWarning" | i18n
|
||||
}}</bit-callout>
|
||||
</bit-section>
|
||||
<bit-section>
|
||||
<div class="tw-flex tw-items-center tw-gap-2 tw-mb-2">
|
||||
<h2 bitTypography="h2" noMargin class="tw-mb-0">
|
||||
{{ "trustedEmergencyContacts" | i18n }}
|
||||
</h2>
|
||||
<app-premium-badge></app-premium-badge>
|
||||
<div class="tw-ml-auto tw-flex">
|
||||
<button
|
||||
type="button"
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
[bitAction]="invite"
|
||||
[disabled]="!canAccessPremium"
|
||||
>
|
||||
<i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
|
||||
{{ "addEmergencyContact" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<bit-table *ngIf="trustedContacts && trustedContacts.length">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>{{ "name" | i18n }}</th>
|
||||
<th bitCell>{{ "accessLevel" | i18n }}</th>
|
||||
<th bitCell class="tw-text-right">{{ "options" | i18n }}</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body>
|
||||
<tr bitRow *ngFor="let c of trustedContacts; let i = index">
|
||||
<td bitCell class="tw-flex tw-items-center tw-gap-4">
|
||||
<bit-avatar
|
||||
[text]="c | userName"
|
||||
[id]="c.granteeId"
|
||||
[color]="c.avatarColor"
|
||||
size="small"
|
||||
></bit-avatar>
|
||||
<span>
|
||||
<a bitLink href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
|
||||
<span
|
||||
bitBadge
|
||||
variant="secondary"
|
||||
*ngIf="c.status === emergencyAccessStatusType.Invited"
|
||||
>{{ "invited" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.Accepted"
|
||||
>{{ "accepted" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
|
||||
>{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
|
||||
>
|
||||
<span bitBadge *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{
|
||||
"emergencyAccessRecoveryApproved" | i18n
|
||||
}}</span>
|
||||
|
||||
<table
|
||||
class="table table-hover table-list mb-0"
|
||||
*ngIf="trustedContacts && trustedContacts.length"
|
||||
>
|
||||
<tbody>
|
||||
<tr *ngFor="let c of trustedContacts; let i = index">
|
||||
<td width="30">
|
||||
<bit-avatar
|
||||
[text]="c | userName"
|
||||
[id]="c.granteeId"
|
||||
[color]="c.avatarColor"
|
||||
size="small"
|
||||
></bit-avatar>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
|
||||
<span
|
||||
bitBadge
|
||||
variant="secondary"
|
||||
*ngIf="c.status === emergencyAccessStatusType.Invited"
|
||||
>{{ "invited" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.Accepted"
|
||||
>{{ "accepted" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
|
||||
>{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
|
||||
>
|
||||
<span bitBadge *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{
|
||||
"emergencyAccessRecoveryApproved" | i18n
|
||||
}}</span>
|
||||
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
|
||||
"takeover" | i18n
|
||||
}}</span>
|
||||
|
||||
<small class="text-muted d-block" *ngIf="c.name">{{ c.name }}</small>
|
||||
</td>
|
||||
<td class="table-list-options">
|
||||
<button
|
||||
[bitMenuTriggerFor]="trustedContactOptions"
|
||||
class="tw-border-none tw-bg-transparent tw-text-main"
|
||||
type="button"
|
||||
appA11yTitle="{{ 'options' | i18n }}"
|
||||
>
|
||||
<i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<bit-menu #trustedContactOptions>
|
||||
<small class="tw-text-muted tw-block" *ngIf="c.name">{{ c.name }}</small>
|
||||
</span>
|
||||
</td>
|
||||
<td bitCell>
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
|
||||
"takeover" | i18n
|
||||
}}</span>
|
||||
</td>
|
||||
<td bitCell class="tw-text-right">
|
||||
<button
|
||||
[bitMenuTriggerFor]="trustedContactOptions"
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.Invited"
|
||||
(click)="reinvite(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
|
||||
{{ "resendInvitation" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.Accepted"
|
||||
(click)="confirm(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
|
||||
{{ "confirm" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
|
||||
(click)="approve(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
|
||||
{{ "approve" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="
|
||||
c.status === emergencyAccessStatusType.RecoveryInitiated ||
|
||||
c.status === emergencyAccessStatusType.RecoveryApproved
|
||||
"
|
||||
(click)="reject(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
|
||||
{{ "reject" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="remove(c)">
|
||||
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
|
||||
{{ "remove" | i18n }}
|
||||
</button>
|
||||
</bit-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ng-container *ngIf="!trustedContacts || !trustedContacts.length">
|
||||
<p *ngIf="loaded">{{ "noTrustedContacts" | i18n }}</p>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
appA11yTitle="{{ 'options' | i18n }}"
|
||||
bitIconButton="bwi-ellipsis-v"
|
||||
buttonType="main"
|
||||
></button>
|
||||
<bit-menu #trustedContactOptions>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.Invited"
|
||||
(click)="reinvite(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
|
||||
{{ "resendInvitation" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.Accepted"
|
||||
(click)="confirm(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
|
||||
{{ "confirm" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
|
||||
(click)="approve(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
|
||||
{{ "approve" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="
|
||||
c.status === emergencyAccessStatusType.RecoveryInitiated ||
|
||||
c.status === emergencyAccessStatusType.RecoveryApproved
|
||||
"
|
||||
(click)="reject(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
|
||||
{{ "reject" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="remove(c)">
|
||||
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
|
||||
{{ "remove" | i18n }}
|
||||
</button>
|
||||
</bit-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
<ng-container *ngIf="!trustedContacts || !trustedContacts.length">
|
||||
<p bitTypography="body1" class="tw-mt-2" *ngIf="loaded">{{ "noTrustedContacts" | i18n }}</p>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</bit-section>
|
||||
|
||||
<div class="page-header spaced-header">
|
||||
<h2>{{ "designatedEmergencyContacts" | i18n }}</h2>
|
||||
</div>
|
||||
<bit-section>
|
||||
<h2 bitTypography="h2">{{ "designatedEmergencyContacts" | i18n }}</h2>
|
||||
|
||||
<table
|
||||
class="table table-hover table-list mb-0"
|
||||
*ngIf="grantedContacts && grantedContacts.length"
|
||||
>
|
||||
<tbody>
|
||||
<tr *ngFor="let c of grantedContacts; let i = index">
|
||||
<td width="30">
|
||||
<bit-avatar
|
||||
[text]="c | userName"
|
||||
[id]="c.grantorId"
|
||||
[color]="c.avatarColor"
|
||||
size="small"
|
||||
></bit-avatar>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ c.email }}</span>
|
||||
<span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
|
||||
"invited" | i18n
|
||||
}}</span>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.Accepted"
|
||||
>{{ "accepted" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
|
||||
>{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="success"
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
|
||||
>{{ "emergencyAccessRecoveryApproved" | i18n }}</span
|
||||
>
|
||||
<bit-table *ngIf="grantedContacts && grantedContacts.length">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>{{ "name" | i18n }}</th>
|
||||
<th bitCell>{{ "accessLevel" | i18n }}</th>
|
||||
<th bitCell class="tw-text-right">{{ "options" | i18n }}</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body>
|
||||
<tr bitRow *ngFor="let c of grantedContacts; let i = index">
|
||||
<td bitCell class="tw-flex tw-items-center tw-gap-4">
|
||||
<bit-avatar
|
||||
[text]="c | userName"
|
||||
[id]="c.grantorId"
|
||||
[color]="c.avatarColor"
|
||||
size="small"
|
||||
></bit-avatar>
|
||||
<span>
|
||||
<span>{{ c.email }}</span>
|
||||
<span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
|
||||
"invited" | i18n
|
||||
}}</span>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.Accepted"
|
||||
>{{ "accepted" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="warning"
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
|
||||
>{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
|
||||
>
|
||||
<span
|
||||
bitBadge
|
||||
variant="success"
|
||||
*ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
|
||||
>{{ "emergencyAccessRecoveryApproved" | i18n }}</span
|
||||
>
|
||||
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
|
||||
"takeover" | i18n
|
||||
}}</span>
|
||||
|
||||
<small class="text-muted d-block" *ngIf="c.name">{{ c.name }}</small>
|
||||
</td>
|
||||
<td class="table-list-options">
|
||||
<button
|
||||
[bitMenuTriggerFor]="grantedContactOptions"
|
||||
class="tw-border-none tw-bg-transparent tw-text-main"
|
||||
type="button"
|
||||
appA11yTitle="{{ 'options' | i18n }}"
|
||||
>
|
||||
<i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<bit-menu #grantedContactOptions>
|
||||
<small class="tw-text-muted tw-block" *ngIf="c.name">{{ c.name }}</small>
|
||||
</span>
|
||||
</td>
|
||||
<td bitCell>
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
|
||||
<span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
|
||||
"takeover" | i18n
|
||||
}}</span>
|
||||
</td>
|
||||
<td bitCell class="tw-text-right">
|
||||
<button
|
||||
[bitMenuTriggerFor]="grantedContactOptions"
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.Confirmed"
|
||||
(click)="requestAccess(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
|
||||
{{ "requestAccess" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="
|
||||
c.status === emergencyAccessStatusType.RecoveryApproved &&
|
||||
c.type === emergencyAccessType.Takeover
|
||||
"
|
||||
(click)="takeover(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
|
||||
{{ "takeover" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="
|
||||
c.status === emergencyAccessStatusType.RecoveryApproved &&
|
||||
c.type === emergencyAccessType.View
|
||||
"
|
||||
[routerLink]="c.id"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
|
||||
{{ "view" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="remove(c)">
|
||||
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
|
||||
{{ "remove" | i18n }}
|
||||
</button>
|
||||
</bit-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ng-container *ngIf="!grantedContacts || !grantedContacts.length">
|
||||
<p *ngIf="loaded">{{ "noGrantedAccess" | i18n }}</p>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
appA11yTitle="{{ 'options' | i18n }}"
|
||||
bitIconButton="bwi-ellipsis-v"
|
||||
buttonType="main"
|
||||
></button>
|
||||
<bit-menu #grantedContactOptions>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="c.status === emergencyAccessStatusType.Confirmed"
|
||||
(click)="requestAccess(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
|
||||
{{ "requestAccess" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="
|
||||
c.status === emergencyAccessStatusType.RecoveryApproved &&
|
||||
c.type === emergencyAccessType.Takeover
|
||||
"
|
||||
(click)="takeover(c)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
|
||||
{{ "takeover" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="
|
||||
c.status === emergencyAccessStatusType.RecoveryApproved &&
|
||||
c.type === emergencyAccessType.View
|
||||
"
|
||||
[routerLink]="c.id"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
|
||||
{{ "view" | i18n }}
|
||||
</button>
|
||||
<button type="button" bitMenuItem (click)="remove(c)">
|
||||
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
|
||||
{{ "remove" | i18n }}
|
||||
</button>
|
||||
</bit-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
<ng-container *ngIf="!grantedContacts || !grantedContacts.length">
|
||||
<p bitTypography="body1" *ngIf="loaded">{{ "noGrantedAccess" | i18n }}</p>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</bit-section>
|
||||
</bit-container>
|
||||
|
||||
<ng-template #addEdit></ng-template>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -1,79 +1,54 @@
|
||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
|
||||
<form
|
||||
class="modal-content"
|
||||
#form
|
||||
(ngSubmit)="submit()"
|
||||
[appApiAction]="formPromise"
|
||||
ngNativeValidate
|
||||
>
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title" id="userAddEditTitle">
|
||||
{{ "takeover" | i18n }}
|
||||
<small class="text-muted" *ngIf="name">{{ name }}</small>
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
appA11yTitle="{{ 'close' | i18n }}"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
|
||||
<auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
|
||||
</auth-password-callout>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="form-group">
|
||||
<label for="masterPassword">{{ "newMasterPass" | i18n }}</label>
|
||||
<input
|
||||
id="masterPassword"
|
||||
type="password"
|
||||
name="NewMasterPasswordHash"
|
||||
class="form-control mb-1"
|
||||
[(ngModel)]="masterPassword"
|
||||
required
|
||||
appInputVerbatim
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<app-password-strength
|
||||
[password]="masterPassword"
|
||||
[email]="email"
|
||||
[showText]="true"
|
||||
(passwordStrengthResult)="getStrengthResult($event)"
|
||||
>
|
||||
</app-password-strength>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="form-group">
|
||||
<label for="masterPasswordRetype">{{ "confirmNewMasterPass" | i18n }}</label>
|
||||
<input
|
||||
id="masterPasswordRetype"
|
||||
type="password"
|
||||
name="MasterPasswordRetype"
|
||||
class="form-control"
|
||||
[(ngModel)]="masterPasswordRetype"
|
||||
required
|
||||
appInputVerbatim
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<form [formGroup]="takeoverForm" [bitSubmit]="submit">
|
||||
<bit-dialog dialogSize="large">
|
||||
<span bitDialogTitle>
|
||||
{{ "takeover" | i18n }}
|
||||
<small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
|
||||
</span>
|
||||
<div bitDialogContent>
|
||||
<app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
|
||||
<auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
|
||||
</auth-password-callout>
|
||||
<div class="tw-w-full tw-flex tw-gap-4">
|
||||
<div class="tw-relative tw-flex-1">
|
||||
<bit-form-field disableMargin class="tw-mb-2">
|
||||
<bit-label>{{ "newMasterPass" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
formControlName="masterPassword"
|
||||
/>
|
||||
<button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
|
||||
</bit-form-field>
|
||||
<app-password-strength
|
||||
[password]="takeoverForm.value.masterPassword"
|
||||
[email]="email"
|
||||
[showText]="true"
|
||||
(passwordStrengthResult)="getStrengthResult($event)"
|
||||
>
|
||||
</app-password-strength>
|
||||
</div>
|
||||
<div class="tw-relative tw-flex-1">
|
||||
<bit-form-field disableMargin class="tw-mb-2">
|
||||
<bit-label>{{ "confirmNewMasterPass" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
formControlName="masterPasswordRetype"
|
||||
/>
|
||||
<button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
|
||||
</bit-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "save" | i18n }}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div bitDialogFooter>
|
||||
<button type="submit" bitButton bitFormButton buttonType="primary">
|
||||
{{ "save" | i18n }}
|
||||
</button>
|
||||
<button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</bit-dialog>
|
||||
</form>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
|
||||
import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
|
||||
import { Component, OnDestroy, OnInit, Inject, Input } from "@angular/core";
|
||||
import { FormBuilder, Validators } from "@angular/forms";
|
||||
import { takeUntil } from "rxjs";
|
||||
|
||||
import { ChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
|
||||
@ -15,6 +17,17 @@ import { DialogService } from "@bitwarden/components";
|
||||
|
||||
import { EmergencyAccessService } from "../../../emergency-access";
|
||||
|
||||
export enum EmergencyAccessTakeoverResultType {
|
||||
Done = "done",
|
||||
}
|
||||
type EmergencyAccessTakeoverDialogData = {
|
||||
/** display name of the account requesting emergency access takeover */
|
||||
name: string;
|
||||
/** email of the account requesting emergency access takeover */
|
||||
email: string;
|
||||
/** traces a unique emergency request */
|
||||
emergencyAccessId: string;
|
||||
};
|
||||
@Component({
|
||||
selector: "emergency-access-takeover",
|
||||
templateUrl: "emergency-access-takeover.component.html",
|
||||
@ -24,16 +37,16 @@ export class EmergencyAccessTakeoverComponent
|
||||
extends ChangePasswordComponent
|
||||
implements OnInit, OnDestroy
|
||||
{
|
||||
@Output() onDone = new EventEmitter();
|
||||
@Input() emergencyAccessId: string;
|
||||
@Input() name: string;
|
||||
@Input() email: string;
|
||||
@Input() kdf: KdfType;
|
||||
@Input() kdfIterations: number;
|
||||
|
||||
formPromise: Promise<any>;
|
||||
takeoverForm = this.formBuilder.group({
|
||||
masterPassword: ["", [Validators.required]],
|
||||
masterPasswordRetype: ["", [Validators.required]],
|
||||
});
|
||||
|
||||
constructor(
|
||||
@Inject(DIALOG_DATA) protected params: EmergencyAccessTakeoverDialogData,
|
||||
private formBuilder: FormBuilder,
|
||||
i18nService: I18nService,
|
||||
cryptoService: CryptoService,
|
||||
messagingService: MessagingService,
|
||||
@ -44,6 +57,7 @@ export class EmergencyAccessTakeoverComponent
|
||||
private emergencyAccessService: EmergencyAccessService,
|
||||
private logService: LogService,
|
||||
dialogService: DialogService,
|
||||
private dialogRef: DialogRef<EmergencyAccessTakeoverResultType>,
|
||||
) {
|
||||
super(
|
||||
i18nService,
|
||||
@ -58,7 +72,9 @@ export class EmergencyAccessTakeoverComponent
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
const policies = await this.emergencyAccessService.getGrantorPolicies(this.emergencyAccessId);
|
||||
const policies = await this.emergencyAccessService.getGrantorPolicies(
|
||||
this.params.emergencyAccessId,
|
||||
);
|
||||
this.policyService
|
||||
.masterPasswordPolicyOptions$(policies)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
@ -70,18 +86,23 @@ export class EmergencyAccessTakeoverComponent
|
||||
super.ngOnDestroy();
|
||||
}
|
||||
|
||||
async submit() {
|
||||
submit = async () => {
|
||||
if (this.takeoverForm.invalid) {
|
||||
this.takeoverForm.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
this.masterPassword = this.takeoverForm.get("masterPassword").value;
|
||||
this.masterPasswordRetype = this.takeoverForm.get("masterPasswordRetype").value;
|
||||
if (!(await this.strongPassword())) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.emergencyAccessService.takeover(
|
||||
this.emergencyAccessId,
|
||||
this.params.emergencyAccessId,
|
||||
this.masterPassword,
|
||||
this.email,
|
||||
this.params.email,
|
||||
);
|
||||
this.onDone.emit();
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
this.platformUtilsService.showToast(
|
||||
@ -90,5 +111,20 @@ export class EmergencyAccessTakeoverComponent
|
||||
this.i18nService.t("unexpectedError"),
|
||||
);
|
||||
}
|
||||
}
|
||||
this.dialogRef.close(EmergencyAccessTakeoverResultType.Done);
|
||||
};
|
||||
/**
|
||||
* Strongly typed helper to open a EmergencyAccessTakeoverComponent
|
||||
* @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<EmergencyAccessTakeoverDialogData>,
|
||||
) => {
|
||||
return dialogService.open<EmergencyAccessTakeoverResultType>(
|
||||
EmergencyAccessTakeoverComponent,
|
||||
config,
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,71 +1,76 @@
|
||||
<div class="page-header">
|
||||
<h1>{{ "vault" | i18n }}</h1>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h1 bitTypography="h1">{{ "vault" | i18n }}</h1>
|
||||
|
||||
<div class="tw-mt-6">
|
||||
<ng-container *ngIf="ciphers.length">
|
||||
<table class="table table-hover table-list table-ciphers">
|
||||
<tbody>
|
||||
<tr *ngFor="let c of ciphers">
|
||||
<td class="table-list-icon">
|
||||
<app-vault-icon [cipher]="c"></app-vault-icon>
|
||||
<bit-table>
|
||||
<ng-template body>
|
||||
<tr bitRow *ngFor="let currentCipher of ciphers">
|
||||
<td bitCell>
|
||||
<app-vault-icon [cipher]="currentCipher"></app-vault-icon>
|
||||
</td>
|
||||
<td class="reduced-lh wrap">
|
||||
<a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
|
||||
c.name
|
||||
}}</a>
|
||||
<ng-container *ngIf="c.organizationId">
|
||||
<td bitCell class="tw-w-full">
|
||||
<a
|
||||
bitLink
|
||||
href="#"
|
||||
appStopClick
|
||||
(click)="selectCipher(currentCipher)"
|
||||
title="{{ 'editItem' | i18n }}"
|
||||
>{{ currentCipher.name }}</a
|
||||
>
|
||||
<ng-container *ngIf="currentCipher.organizationId">
|
||||
<i
|
||||
class="bwi bwi-collection"
|
||||
appStopProp
|
||||
title="{{ 'shared' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "shared" | i18n }}</span>
|
||||
<span class="tw-sr-only">{{ "shared" | i18n }}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="c.hasAttachments">
|
||||
<ng-container *ngIf="currentCipher.hasAttachments">
|
||||
<i
|
||||
class="bwi bwi-paperclip"
|
||||
appStopProp
|
||||
title="{{ 'attachments' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "attachments" | i18n }}</span>
|
||||
<span class="tw-sr-only">{{ "attachments" | i18n }}</span>
|
||||
</ng-container>
|
||||
<br />
|
||||
<small>{{ c.subTitle }}</small>
|
||||
<small class="tw-text-xs">{{ currentCipher.subTitle }}</small>
|
||||
</td>
|
||||
<td class="table-list-options">
|
||||
<div class="dropdown" appListDropdown *ngIf="c.hasAttachments">
|
||||
<td bitCell>
|
||||
<div *ngIf="currentCipher.hasAttachments">
|
||||
<button
|
||||
class="btn btn-outline-secondary dropdown-toggle"
|
||||
[bitMenuTriggerFor]="optionsMenu"
|
||||
type="button"
|
||||
id="dropdownMenuButton"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
buttonType="main"
|
||||
bitIconButton="bwi-ellipsis-v"
|
||||
appA11yTitle="{{ 'options' | i18n }}"
|
||||
>
|
||||
<i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#" appStopClick (click)="viewAttachments(c)">
|
||||
></button>
|
||||
<bit-menu #optionsMenu>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
appStopClick
|
||||
(click)="viewAttachments(currentCipher)"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
|
||||
{{ "attachments" | i18n }}
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
</bit-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-template #cipherAddEdit></ng-template>
|
||||
|
||||
@ -578,6 +578,9 @@
|
||||
"access": {
|
||||
"message": "Access"
|
||||
},
|
||||
"accessLevel": {
|
||||
"message": "Access level"
|
||||
},
|
||||
"loggedOut": {
|
||||
"message": "Logged out"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user