[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 2024-03-08 09:15:07 -05:00 committed by GitHub
parent 551e43031e
commit c09b446e63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 671 additions and 675 deletions

View File

@ -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">&times;</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>

View File

@ -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,
);
}
}

View File

@ -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">&times;</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>

View File

@ -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,
);
};
}

View File

@ -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>

View File

@ -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);

View File

@ -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">&times;</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>

View File

@ -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,
);
};
}

View File

@ -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>

View File

@ -578,6 +578,9 @@
"access": {
"message": "Access"
},
"accessLevel": {
"message": "Access level"
},
"loggedOut": {
"message": "Logged out"
},