1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00

[PM-26369] [PM-26362] Implement Auto Confirm Policy and Multi Step Dialog Workflow (#16831)

* implement multi step dialog for auto confirm

* wip

* implement extension messgae for auto confirm

* expand layout logic for header and footer, implement function to open extension

* add back missing test

* refactor test

* clean up

* clean up

* clean up

* fix policy step increment

* clean up

* Ac/pm 26369 add auto confirm policy to client domain models (#16830)

* refactor BasePoliicyEditDefinition

* fix circular dep

* wip

* wip

* fix policy submission and refreshing

* add svg, copy, and finish layout

* clean up

* cleanup

* cleanup, fix SVG

* design review changes

* fix copy

* fix padding

* address organization plan feature FIXME

* fix test

* remove placeholder URL

* prevent duplicate messages
This commit is contained in:
Brandon Treston
2025-10-22 16:11:33 -04:00
committed by GitHub
parent 2147f74ae8
commit 67ba1b83ea
23 changed files with 659 additions and 61 deletions

View File

@@ -0,0 +1,91 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog [loading]="loading">
<ng-container bitDialogTitle>
@let title = (multiStepSubmit | async)[currentStep()]?.titleContent();
@if (title) {
<ng-container [ngTemplateOutlet]="title"></ng-container>
}
</ng-container>
<ng-container bitDialogContent>
@if (loading) {
<div>
<i
class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div>
}
<div [hidden]="loading">
@if (policy.showDescription) {
<p bitTypography="body1">{{ policy.description | i18n }}</p>
}
</div>
<ng-template #policyForm></ng-template>
</ng-container>
<ng-container bitDialogFooter>
@let footer = (multiStepSubmit | async)[currentStep()]?.footerContent();
@if (footer) {
<ng-container [ngTemplateOutlet]="footer"></ng-container>
}
</ng-container>
</bit-dialog>
</form>
<ng-template #step0Title>
<div class="tw-flex tw-flex-col">
@let showBadge = firstTimeDialog();
@if (showBadge) {
<span bitBadge variant="info" class="tw-w-28 tw-my-2"> {{ "availableNow" | i18n }}</span>
}
<span>
{{ (firstTimeDialog ? "autoConfirm" : "editPolicy") | i18n }}
@if (!firstTimeDialog) {
<span class="tw-text-muted tw-font-normal tw-text-sm">
{{ policy.name | i18n }}
</span>
}
</span>
</div>
</ng-template>
<ng-template #step1Title>
{{ "howToTurnOnAutoConfirm" | i18n }}
</ng-template>
<ng-template #step0>
<button
bitButton
buttonType="primary"
[disabled]="saveDisabled$ | async"
bitFormButton
type="submit"
>
@if (autoConfirmEnabled$ | async) {
{{ "save" | i18n }}
} @else {
{{ "continue" | i18n }}
}
</button>
<button bitButton buttonType="secondary" bitDialogClose type="button">
{{ "cancel" | i18n }}
</button>
</ng-template>
<ng-template #step1>
<button
bitButton
buttonType="primary"
[disabled]="saveDisabled$ | async"
bitFormButton
type="submit"
>
{{ "openExtension" | i18n }}
<i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
</button>
<button bitButton buttonType="secondary" bitDialogClose type="button">
{{ "close" | i18n }}
</button>
</ng-template>

View File

@@ -0,0 +1,249 @@
import {
AfterViewInit,
ChangeDetectorRef,
Component,
Inject,
signal,
Signal,
TemplateRef,
viewChild,
} from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { Router } from "@angular/router";
import {
combineLatest,
firstValueFrom,
map,
Observable,
of,
shareReplay,
startWith,
switchMap,
tap,
} from "rxjs";
import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import {
DIALOG_DATA,
DialogConfig,
DialogRef,
DialogService,
ToastService,
} from "@bitwarden/components";
import { KeyService } from "@bitwarden/key-management";
import { SharedModule } from "../../../shared";
import { AutoConfirmPolicyEditComponent } from "./policy-edit-definitions/auto-confirm-policy.component";
import {
PolicyEditDialogComponent,
PolicyEditDialogData,
PolicyEditDialogResult,
} from "./policy-edit-dialog.component";
export type MultiStepSubmit = {
sideEffect: () => Promise<void>;
footerContent: Signal<TemplateRef<unknown> | undefined>;
titleContent: Signal<TemplateRef<unknown> | undefined>;
};
export type AutoConfirmPolicyDialogData = PolicyEditDialogData & {
firstTimeDialog?: boolean;
};
/**
* Custom policy dialog component for Auto-Confirm policy.
* Satisfies the PolicyDialogComponent interface structurally
* via its static open() function.
*/
@Component({
templateUrl: "auto-confirm-edit-policy-dialog.component.html",
imports: [SharedModule],
})
export class AutoConfirmPolicyDialogComponent
extends PolicyEditDialogComponent
implements AfterViewInit
{
policyType = PolicyType;
protected firstTimeDialog = signal(false);
protected currentStep = signal(0);
protected multiStepSubmit: Observable<MultiStepSubmit[]> = of([]);
protected autoConfirmEnabled$: Observable<boolean> = this.accountService.activeAccount$.pipe(
getUserId,
switchMap((userId) => this.policyService.policies$(userId)),
map((policies) => policies.find((p) => p.type === PolicyType.AutoConfirm)?.enabled ?? false),
);
private submitPolicy: Signal<TemplateRef<unknown> | undefined> = viewChild("step0");
private openExtension: Signal<TemplateRef<unknown> | undefined> = viewChild("step1");
private submitPolicyTitle: Signal<TemplateRef<unknown> | undefined> = viewChild("step0Title");
private openExtensionTitle: Signal<TemplateRef<unknown> | undefined> = viewChild("step1Title");
override policyComponent: AutoConfirmPolicyEditComponent | undefined;
constructor(
@Inject(DIALOG_DATA) protected data: AutoConfirmPolicyDialogData,
accountService: AccountService,
policyApiService: PolicyApiServiceAbstraction,
i18nService: I18nService,
cdr: ChangeDetectorRef,
formBuilder: FormBuilder,
dialogRef: DialogRef<PolicyEditDialogResult>,
toastService: ToastService,
configService: ConfigService,
keyService: KeyService,
private policyService: PolicyService,
private router: Router,
) {
super(
data,
accountService,
policyApiService,
i18nService,
cdr,
formBuilder,
dialogRef,
toastService,
configService,
keyService,
);
this.firstTimeDialog.set(data.firstTimeDialog ?? false);
}
/**
* Instantiates the child policy component and inserts it into the view.
*/
async ngAfterViewInit() {
await super.ngAfterViewInit();
if (this.policyComponent) {
this.saveDisabled$ = combineLatest([
this.autoConfirmEnabled$,
this.policyComponent.enabled.valueChanges.pipe(
startWith(this.policyComponent.enabled.value),
),
]).pipe(map(([policyEnabled, value]) => !policyEnabled && !value));
}
this.multiStepSubmit = this.accountService.activeAccount$.pipe(
getUserId,
switchMap((userId) => this.policyService.policies$(userId)),
map((policies) => policies.find((p) => p.type === PolicyType.SingleOrg)?.enabled ?? false),
tap((singleOrgPolicyEnabled) =>
this.policyComponent?.setSingleOrgEnabled(singleOrgPolicyEnabled),
),
map((singleOrgPolicyEnabled) => [
{
sideEffect: () => this.handleSubmit(singleOrgPolicyEnabled ?? false),
footerContent: this.submitPolicy,
titleContent: this.submitPolicyTitle,
},
{
sideEffect: () => this.openBrowserExtension(),
footerContent: this.openExtension,
titleContent: this.openExtensionTitle,
},
]),
shareReplay({ bufferSize: 1, refCount: true }),
);
}
private async handleSubmit(singleOrgEnabled: boolean) {
if (!singleOrgEnabled) {
await this.submitSingleOrg();
}
await this.submitAutoConfirm();
}
/**
* Triggers policy submission for auto confirm.
* @returns boolean: true if multi-submit workflow should continue, false otherwise.
*/
private async submitAutoConfirm() {
if (!this.policyComponent) {
throw new Error("PolicyComponent not initialized.");
}
const autoConfirmRequest = await this.policyComponent.buildRequest();
await this.policyApiService.putPolicy(
this.data.organizationId,
this.data.policy.type,
autoConfirmRequest,
);
this.toastService.showToast({
variant: "success",
message: this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
});
if (!this.policyComponent.enabled.value) {
this.dialogRef.close("saved");
}
}
private async submitSingleOrg(): Promise<void> {
const singleOrgRequest: PolicyRequest = {
type: PolicyType.SingleOrg,
enabled: true,
data: null,
};
await this.policyApiService.putPolicy(
this.data.organizationId,
PolicyType.SingleOrg,
singleOrgRequest,
);
}
private async openBrowserExtension() {
await this.router.navigate(["/browser-extension-prompt"], {
queryParams: { url: "AutoConfirm" },
});
}
submit = async () => {
if (!this.policyComponent) {
throw new Error("PolicyComponent not initialized.");
}
if ((await this.policyComponent.confirm()) == false) {
this.dialogRef.close();
return;
}
try {
const multiStepSubmit = await firstValueFrom(this.multiStepSubmit);
await multiStepSubmit[this.currentStep()].sideEffect();
if (this.currentStep() === multiStepSubmit.length - 1) {
this.dialogRef.close("saved");
return;
}
this.currentStep.update((value) => value + 1);
this.policyComponent.setStep(this.currentStep());
} catch (error: any) {
this.toastService.showToast({
variant: "error",
message: error.message,
});
}
};
static open = (
dialogService: DialogService,
config: DialogConfig<AutoConfirmPolicyDialogData>,
) => {
return dialogService.open<PolicyEditDialogResult>(AutoConfirmPolicyDialogComponent, config);
};
}

View File

@@ -8,8 +8,20 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { DialogConfig, DialogRef, DialogService } from "@bitwarden/components";
import type { PolicyEditDialogComponent } from "./policy-edit-dialog.component";
import type { PolicyEditDialogData, PolicyEditDialogResult } from "./policy-edit-dialog.component";
/**
* Interface for policy dialog components.
* Any component that implements this interface can be used as a custom policy edit dialog.
*/
export interface PolicyDialogComponent {
open: (
dialogService: DialogService,
config: DialogConfig<PolicyEditDialogData>,
) => DialogRef<PolicyEditDialogResult>;
}
/**
* A metadata class that defines how a policy is displayed in the Admin Console Policies page for editing.
@@ -37,9 +49,8 @@ export abstract class BasePolicyEditDefinition {
/**
* The dialog component that will be opened when editing this policy.
* This allows customizing the look and feel of each policy's dialog contents.
* If not specified, defaults to {@link PolicyEditDialogComponent}.
*/
editDialogComponent?: typeof PolicyEditDialogComponent;
editDialogComponent?: PolicyDialogComponent;
/**
* If true, the {@link description} will be reused in the policy edit modal. Set this to false if you

View File

@@ -1,17 +1,18 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute } from "@angular/router";
import {
combineLatest,
firstValueFrom,
lastValueFrom,
Observable,
of,
switchMap,
first,
map,
withLatestFrom,
tap,
} from "rxjs";
import {
@@ -19,9 +20,11 @@ import {
OrganizationService,
} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { getUserId } from "@bitwarden/common/auth/services/account.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { DialogService } from "@bitwarden/components";
import { safeProvider } from "@bitwarden/ui-common";
@@ -29,7 +32,7 @@ import { safeProvider } from "@bitwarden/ui-common";
import { HeaderModule } from "../../../layouts/header/header.module";
import { SharedModule } from "../../../shared";
import { BasePolicyEditDefinition } from "./base-policy-edit.component";
import { BasePolicyEditDefinition, PolicyDialogComponent } from "./base-policy-edit.component";
import { PolicyEditDialogComponent } from "./policy-edit-dialog.component";
import { PolicyListService } from "./policy-list.service";
import { POLICY_EDIT_REGISTER } from "./policy-register-token";
@@ -59,8 +62,18 @@ export class PoliciesComponent implements OnInit {
private policyApiService: PolicyApiServiceAbstraction,
private policyListService: PolicyListService,
private dialogService: DialogService,
private policyService: PolicyService,
protected configService: ConfigService,
) {}
) {
this.accountService.activeAccount$
.pipe(
getUserId,
switchMap((userId) => this.policyService.policies$(userId)),
tap(async () => await this.load()),
takeUntilDestroyed(),
)
.subscribe();
}
async ngOnInit() {
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
@@ -127,17 +140,13 @@ export class PoliciesComponent implements OnInit {
}
async edit(policy: BasePolicyEditDefinition) {
const dialogComponent = policy.editDialogComponent ?? PolicyEditDialogComponent;
const dialogRef = dialogComponent.open(this.dialogService, {
const dialogComponent: PolicyDialogComponent =
policy.editDialogComponent ?? PolicyEditDialogComponent;
dialogComponent.open(this.dialogService, {
data: {
policy: policy,
organizationId: this.organizationId,
},
});
const result = await lastValueFrom(dialogRef.closed);
if (result == "saved") {
await this.load();
}
}
}

View File

@@ -0,0 +1,59 @@
<ng-container [ngTemplateOutlet]="steps[step]()"></ng-container>
<ng-template #step0>
<p class="tw-mb-6">
{{ "autoConfirmPolicyEditDescription" | i18n }}
</p>
<ul class="tw-mb-6 tw-pl-6">
<li>
<span class="tw-font-bold">
{{ "autoConfirmAcceptSecurityRiskTitle" | i18n }}
</span>
{{ "autoConfirmAcceptSecurityRiskDescription" | i18n }}
<a bitLink href="https://bitwarden.com/help/automatic-confirmation/" target="_blank">
{{ "autoConfirmAcceptSecurityRiskLearnMore" | i18n }}
<i class="bwi bwi-external-link bwi-fw"></i>
</a>
</li>
<li>
@if (singleOrgEnabled$ | async) {
<span class="tw-font-bold">
{{ "autoConfirmSingleOrgExemption" | i18n }}
</span>
} @else {
<span class="tw-font-bold">
{{ "autoConfirmSingleOrgRequired" | i18n }}
</span>
}
{{ "autoConfirmSingleOrgRequiredDescription" | i18n }}
</li>
<li>
<span class="tw-font-bold">
{{ "autoConfirmNoEmergencyAccess" | i18n }}
</span>
{{ "autoConfirmNoEmergencyAccessDescription" | i18n }}
</li>
</ul>
<input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
<bit-label>{{ "autoConfirmCheckBoxLabel" | i18n }}</bit-label>
</ng-template>
<ng-template #step1>
<div class="tw-flex tw-justify-center tw-mb-6">
<bit-icon class="tw-w-[233px]" [icon]="autoConfirmSvg"></bit-icon>
</div>
<ol>
<li>1. {{ "autoConfirmStep1" | i18n }}</li>
<li>
2. {{ "autoConfirmStep2a" | i18n }}
<strong>
{{ "autoConfirmStep2b" | i18n }}
</strong>
</li>
</ol>
</ng-template>

View File

@@ -0,0 +1,50 @@
import { Component, OnInit, Signal, TemplateRef, viewChild } from "@angular/core";
import { BehaviorSubject, map, Observable } from "rxjs";
import { AutoConfirmSvg } from "@bitwarden/assets/svg";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { SharedModule } from "../../../../shared";
import { AutoConfirmPolicyDialogComponent } from "../auto-confirm-edit-policy-dialog.component";
import { BasePolicyEditDefinition, BasePolicyEditComponent } from "../base-policy-edit.component";
export class AutoConfirmPolicy extends BasePolicyEditDefinition {
name = "autoConfirm";
description = "autoConfirmDescription";
type = PolicyType.AutoConfirm;
component = AutoConfirmPolicyEditComponent;
showDescription = false;
editDialogComponent = AutoConfirmPolicyDialogComponent;
override display$(organization: Organization, configService: ConfigService): Observable<boolean> {
return configService
.getFeatureFlag$(FeatureFlag.AutoConfirm)
.pipe(map((enabled) => enabled && organization.useAutomaticUserConfirmation));
}
}
@Component({
templateUrl: "auto-confirm-policy.component.html",
imports: [SharedModule],
})
export class AutoConfirmPolicyEditComponent extends BasePolicyEditComponent implements OnInit {
protected readonly autoConfirmSvg = AutoConfirmSvg;
private policyForm: Signal<TemplateRef<any> | undefined> = viewChild("step0");
private extensionButton: Signal<TemplateRef<any> | undefined> = viewChild("step1");
protected step: number = 0;
protected steps = [this.policyForm, this.extensionButton];
protected singleOrgEnabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
setSingleOrgEnabled(enabled: boolean) {
this.singleOrgEnabled$.next(enabled);
}
setStep(step: number) {
this.step = step;
}
}

View File

@@ -14,3 +14,4 @@ export {
vNextOrganizationDataOwnershipPolicy,
vNextOrganizationDataOwnershipPolicyComponent,
} from "./vnext-organization-data-ownership.component";
export { AutoConfirmPolicy } from "./auto-confirm-policy.component";

View File

@@ -30,7 +30,7 @@ import { KeyService } from "@bitwarden/key-management";
import { SharedModule } from "../../../shared";
import { BasePolicyEditDefinition, BasePolicyEditComponent } from "./base-policy-edit.component";
import { vNextOrganizationDataOwnershipPolicyComponent } from "./policy-edit-definitions";
import { vNextOrganizationDataOwnershipPolicyComponent } from "./policy-edit-definitions/vnext-organization-data-ownership.component";
export type PolicyEditDialogData = {
/**
@@ -64,13 +64,13 @@ export class PolicyEditDialogComponent implements AfterViewInit {
});
constructor(
@Inject(DIALOG_DATA) protected data: PolicyEditDialogData,
private accountService: AccountService,
private policyApiService: PolicyApiServiceAbstraction,
private i18nService: I18nService,
protected accountService: AccountService,
protected policyApiService: PolicyApiServiceAbstraction,
protected i18nService: I18nService,
private cdr: ChangeDetectorRef,
private formBuilder: FormBuilder,
private dialogRef: DialogRef<PolicyEditDialogResult>,
private toastService: ToastService,
protected dialogRef: DialogRef<PolicyEditDialogResult>,
protected toastService: ToastService,
private configService: ConfigService,
private keyService: KeyService,
) {}

View File

@@ -1,5 +1,6 @@
import { BasePolicyEditDefinition } from "./base-policy-edit.component";
import {
AutoConfirmPolicy,
DesktopAutotypeDefaultSettingPolicy,
DisableSendPolicy,
MasterPasswordPolicy,
@@ -33,4 +34,5 @@ export const ossPolicyEditRegister: BasePolicyEditDefinition[] = [
new SendOptionsPolicy(),
new RestrictedItemTypesPolicy(),
new DesktopAutotypeDefaultSettingPolicy(),
new AutoConfirmPolicy(),
];

View File

@@ -4,13 +4,14 @@
<p bitTypography="body1" class="tw-mb-0 tw-mt-2">{{ "openingExtension" | i18n }}</p>
</ng-container>
@let page = extensionPage$ | async;
<ng-container *ngIf="pageState === BrowserPromptState.Error">
<p bitTypography="body1" class="tw-mb-4 tw-text-xl">{{ "openingExtensionError" | i18n }}</p>
<button
bitButton
buttonType="primary"
type="button"
(click)="openExtension()"
(click)="openExtension(page)"
id="bw-extension-prompt-button"
>
{{ "openExtension" | i18n }}
@@ -21,7 +22,7 @@
<ng-container *ngIf="pageState === BrowserPromptState.Success">
<i class="bwi tw-text-2xl bwi-check-circle tw-text-success-700" aria-hidden="true"></i>
<p bitTypography="body1" class="tw-mb-4 tw-text-xl">
{{ "openedExtensionViewAtRiskPasswords" | i18n }}
{{ pageToI18nKeyMap[page] | i18n }}
</p>
</ng-container>

View File

@@ -1,6 +1,7 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { BehaviorSubject } from "rxjs";
import { ActivatedRoute } from "@angular/router";
import { BehaviorSubject, of } from "rxjs";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -16,6 +17,7 @@ describe("BrowserExtensionPromptComponent", () => {
let component: BrowserExtensionPromptComponent;
const start = jest.fn();
const openExtension = jest.fn();
const registerPopupUrl = jest.fn();
const pageState$ = new BehaviorSubject<BrowserPromptState>(BrowserPromptState.Loading);
const setAttribute = jest.fn();
const getAttribute = jest.fn().mockReturnValue("width=1010");
@@ -23,6 +25,7 @@ describe("BrowserExtensionPromptComponent", () => {
beforeEach(async () => {
start.mockClear();
openExtension.mockClear();
registerPopupUrl.mockClear();
setAttribute.mockClear();
getAttribute.mockClear();
@@ -41,12 +44,20 @@ describe("BrowserExtensionPromptComponent", () => {
providers: [
{
provide: BrowserExtensionPromptService,
useValue: { start, openExtension, pageState$ },
useValue: { start, openExtension, registerPopupUrl, pageState$ },
},
{
provide: I18nService,
useValue: { t: (key: string) => key },
},
{
provide: ActivatedRoute,
useValue: {
queryParamMap: of({
get: (key: string) => null,
}),
},
},
],
}).compileComponents();
@@ -92,7 +103,7 @@ describe("BrowserExtensionPromptComponent", () => {
button.click();
expect(openExtension).toHaveBeenCalledTimes(1);
expect(openExtension).toHaveBeenCalledWith(true);
expect(openExtension).toHaveBeenCalledWith("openAtRiskPasswords", true);
});
});

View File

@@ -1,6 +1,10 @@
import { CommonModule, DOCUMENT } from "@angular/common";
import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute } from "@angular/router";
import { map, Observable, of, tap } from "rxjs";
import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
import { ButtonComponent, IconModule } from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
@@ -16,6 +20,8 @@ import { ManuallyOpenExtensionComponent } from "../manually-open-extension/manua
imports: [CommonModule, I18nPipe, ButtonComponent, IconModule, ManuallyOpenExtensionComponent],
})
export class BrowserExtensionPromptComponent implements OnInit, OnDestroy {
protected VaultMessages = VaultMessages;
/** Current state of the prompt page */
protected pageState$ = this.browserExtensionPromptService.pageState$;
@@ -25,14 +31,33 @@ export class BrowserExtensionPromptComponent implements OnInit, OnDestroy {
/** Content of the meta[name="viewport"] element */
private viewportContent: string | null = null;
/** Map of extension page identifiers to their i18n keys */
protected readonly pageToI18nKeyMap: Record<string, string> = {
[VaultMessages.OpenAtRiskPasswords]: "openedExtensionViewAtRiskPasswords",
AutoConfirm: "autoConfirmExtensionOpened",
} as const;
protected extensionPage$: Observable<string> = of(VaultMessages.OpenAtRiskPasswords);
constructor(
private browserExtensionPromptService: BrowserExtensionPromptService,
private route: ActivatedRoute,
@Inject(DOCUMENT) private document: Document,
) {}
) {
this.extensionPage$ = this.route.queryParamMap.pipe(
map((params) => params.get("url") ?? VaultMessages.OpenAtRiskPasswords),
);
this.extensionPage$
.pipe(
tap((url) => this.browserExtensionPromptService.registerPopupUrl(url)),
takeUntilDestroyed(),
)
.subscribe();
}
ngOnInit(): void {
this.browserExtensionPromptService.start();
// It is not be uncommon for users to hit this page from a mobile device.
// There are global styles and the viewport meta tag that set a min-width
// for the page which cause it to render poorly. Remove them here.
@@ -57,7 +82,7 @@ export class BrowserExtensionPromptComponent implements OnInit, OnDestroy {
}
}
openExtension(): void {
this.browserExtensionPromptService.openExtension(true);
async openExtension(command: string) {
await this.browserExtensionPromptService.openExtension(command, true);
}
}

View File

@@ -1,4 +1,5 @@
import { TestBed } from "@angular/core/testing";
import { firstValueFrom, Observable } from "rxjs";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -9,11 +10,13 @@ import {
BrowserExtensionPromptService,
BrowserPromptState,
} from "./browser-extension-prompt.service";
import { WebBrowserInteractionService } from "./web-browser-interaction.service";
describe("BrowserExtensionPromptService", () => {
let service: BrowserExtensionPromptService;
const setAnonLayoutWrapperData = jest.fn();
const isFirefox = jest.fn().mockReturnValue(false);
const openExtensionMock = jest.fn().mockResolvedValue(undefined);
const postMessage = jest.fn();
window.postMessage = postMessage;
@@ -21,12 +24,14 @@ describe("BrowserExtensionPromptService", () => {
setAnonLayoutWrapperData.mockClear();
postMessage.mockClear();
isFirefox.mockClear();
openExtensionMock.mockClear();
TestBed.configureTestingModule({
providers: [
BrowserExtensionPromptService,
{ provide: AnonLayoutWrapperDataService, useValue: { setAnonLayoutWrapperData } },
{ provide: PlatformUtilsService, useValue: { isFirefox } },
{ provide: WebBrowserInteractionService, useValue: { openExtension: openExtensionMock } },
],
});
jest.useFakeTimers();
@@ -45,38 +50,42 @@ describe("BrowserExtensionPromptService", () => {
});
});
describe("start", () => {
describe("registerPopupUrl", () => {
it("posts message to check for extension", () => {
service.start();
service.registerPopupUrl(VaultMessages.OpenAtRiskPasswords);
expect(window.postMessage).toHaveBeenCalledWith({
command: VaultMessages.checkBwInstalled,
});
});
it("sets timeout for error state", () => {
service.start();
expect(service["extensionCheckTimeout"]).not.toBeNull();
});
it("attempts to open the extension when installed", () => {
service.start();
service.registerPopupUrl(VaultMessages.OpenAtRiskPasswords);
window.dispatchEvent(
new MessageEvent("message", { data: { command: VaultMessages.HasBwInstalled } }),
);
expect(window.postMessage).toHaveBeenCalledTimes(2);
expect(window.postMessage).toHaveBeenCalledWith({
command: VaultMessages.checkBwInstalled,
});
expect(window.postMessage).toHaveBeenCalledWith({
command: VaultMessages.OpenAtRiskPasswords,
});
});
});
describe("success state", () => {
beforeEach(() => {
describe("start", () => {
it("sets timeout for error state", () => {
service.start();
expect(service["extensionCheckTimeout"]).not.toBeNull();
});
});
describe("success registerPopupUrl", () => {
beforeEach(() => {
service.registerPopupUrl(VaultMessages.OpenAtRiskPasswords);
window.dispatchEvent(
new MessageEvent("message", { data: { command: VaultMessages.PopupOpened } }),
@@ -155,7 +164,7 @@ describe("BrowserExtensionPromptService", () => {
describe("error state", () => {
beforeEach(() => {
service.start();
service.registerPopupUrl(VaultMessages.OpenAtRiskPasswords);
jest.advanceTimersByTime(1000);
});
@@ -172,19 +181,17 @@ describe("BrowserExtensionPromptService", () => {
});
});
it("sets manual open state when open extension is called", (done) => {
service.openExtension(true);
it("sets manual open state when open extension is called", async () => {
const pageState$: Observable<BrowserPromptState> = service.pageState$;
await service.openExtension(VaultMessages.OpenAtRiskPasswords, true);
jest.advanceTimersByTime(1000);
service.pageState$.subscribe((state) => {
expect(state).toBe(BrowserPromptState.ManualOpen);
done();
});
expect(await firstValueFrom(pageState$)).toBe(BrowserPromptState.ManualOpen);
});
it("shows success state when extension auto opens", (done) => {
service.openExtension(true);
it("shows success state when extension auto opens", async () => {
await service.openExtension(VaultMessages.OpenAtRiskPasswords, true);
jest.advanceTimersByTime(500); // don't let timeout occur
@@ -192,11 +199,9 @@ describe("BrowserExtensionPromptService", () => {
new MessageEvent("message", { data: { command: VaultMessages.PopupOpened } }),
);
service.pageState$.subscribe((state) => {
expect(state).toBe(BrowserPromptState.Success);
expect(service["extensionCheckTimeout"]).toBeUndefined();
done();
});
const pageState$: Observable<BrowserPromptState> = service.pageState$;
expect(await firstValueFrom(pageState$)).toBe(BrowserPromptState.Success);
expect(service["extensionCheckTimeout"]).toBeUndefined();
});
});
});

View File

@@ -4,10 +4,13 @@ import { BehaviorSubject, fromEvent } from "rxjs";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";
import { ExtensionPageUrls } from "@bitwarden/common/vault/enums";
import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
import { AnonLayoutWrapperDataService } from "@bitwarden/components";
import { WebBrowserInteractionService } from "./web-browser-interaction.service";
export const BrowserPromptState = {
Loading: "loading",
Error: "error",
@@ -36,6 +39,7 @@ export class BrowserExtensionPromptService {
private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
private destroyRef: DestroyRef,
private platformUtilsService: PlatformUtilsService,
private webBrowserInteractionService: WebBrowserInteractionService,
) {}
start(): void {
@@ -52,14 +56,19 @@ export class BrowserExtensionPromptService {
this.setErrorState(BrowserPromptState.ManualOpen);
return;
}
}
this.checkForBrowserExtension();
registerPopupUrl(url: string) {
this.checkForBrowserExtension(url);
}
/** Post a message to the extension to open */
openExtension(setManualErrorTimeout = false) {
window.postMessage({ command: VaultMessages.OpenAtRiskPasswords });
async openExtension(url: string, setManualErrorTimeout = false) {
if (url == VaultMessages.OpenAtRiskPasswords) {
window.postMessage({ command: url });
} else {
await this.webBrowserInteractionService.openExtension(ExtensionPageUrls[url]);
}
// Optionally, configure timeout to show the manual open error state if
// the extension does not open within one second.
if (setManualErrorTimeout) {
@@ -72,11 +81,11 @@ export class BrowserExtensionPromptService {
}
/** Send message checking for the browser extension */
private checkForBrowserExtension() {
private checkForBrowserExtension(url: string) {
fromEvent<MessageEvent>(window, "message")
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((event) => {
void this.getMessages(event);
void this.getMessages(event, url);
});
window.postMessage({ command: VaultMessages.checkBwInstalled });
@@ -88,9 +97,9 @@ export class BrowserExtensionPromptService {
}
/** Handle window message events */
private getMessages(event: any) {
private async getMessages(event: any, url: string) {
if (event.data.command === VaultMessages.HasBwInstalled) {
this.openExtension();
await this.openExtension(url);
}
if (event.data.command === VaultMessages.PopupOpened) {

View File

@@ -5716,6 +5716,65 @@
"message": "Learn more about the ",
"description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Learn more about the credential lifecycle.'"
},
"availableNow": {
"message": "Available now"
},
"autoConfirm": {
"message": "Automatic confirmation of new users"
},
"autoConfirmDescription": {
"message": "New users invited to the organization will be automatically confirmed when an admins device is unlocked.",
"description": "This is the description of the policy as it appears in the 'Policies' page"
},
"howToTurnOnAutoConfirm": {
"message": "How to turn on automatic user confirmation"
},
"autoConfirmStep1": {
"message": "Open your Bitwarden extension."
},
"autoConfirmStep2a": {
"message": "Select",
"description": "This is a fragment of a larger sencence. The whole sentence will read: 'Select Turn on.'"
},
"autoConfirmStep2b": {
"message": " Turn on.",
"description": "This is a fragment of a larger sencence. The whole sentence will read: 'Select Turn on.'"
},
"autoConfirmExtensionOpened": {
"message": "Successfully opened the Bitwarden browser extension. You can now activate the automatic user confirmation setting."
},
"autoConfirmPolicyEditDescription": {
"message": "New users invited to the organization will be automatically confirmed when an admins device is unlocked. Before turning on this policy, please review and agree to the following: ",
"description": "This is the description of the policy as it appears inside the policy edit dialog"
},
"autoConfirmAcceptSecurityRiskTitle": {
"message": "Potential security risk. "
},
"autoConfirmAcceptSecurityRiskDescription": {
"message": "Automatic user confirmation could pose a security risk to your organizations data."
},
"autoConfirmAcceptSecurityRiskLearnMore": {
"message": "Learn about the risks",
"description": "The is the link copy for the first check box option in the edit policy dialog"
},
"autoConfirmSingleOrgRequired": {
"message": "Single organization policy required. "
},
"autoConfirmSingleOrgRequiredDescription": {
"message": "Anyone part of more than one organization will have their access revoked until they leave the other organizations."
},
"autoConfirmSingleOrgExemption": {
"message": "Single organization policy will extend to all roles. "
},
"autoConfirmNoEmergencyAccess": {
"message": "No emergency access. "
},
"autoConfirmNoEmergencyAccessDescription": {
"message": "Emergency Access will be removed."
},
"autoConfirmCheckBoxLabel": {
"message": "I accept these risks and policy updates"
},
"personalOwnership": {
"message": "Remove individual vault"
},

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,7 @@
export * from "./account-warning.icon";
export * from "./active-send.icon";
export { default as AdminConsoleLogo } from "./admin-console";
export * from "./auto-confirmation";
export * from "./background-left-illustration";
export * from "./background-right-illustration";
export * from "./bitwarden-icon";

View File

@@ -19,4 +19,5 @@ export enum PolicyType {
RestrictedItemTypes = 15, // Restricts item types that can be created within an organization
UriMatchDefaults = 16, // Sets the default URI matching strategy for all users within an organization
AutotypeDefaultSetting = 17, // Sets the default autotype setting for desktop app
AutoConfirm = 18, // Enables the auto confirmation feature for admins to enable in their client
}

View File

@@ -30,6 +30,7 @@ describe("ORGANIZATIONS state", () => {
useSecretsManager: false,
usePasswordManager: false,
useActivateAutofillPolicy: false,
useAutomaticUserConfirmation: false,
selfHost: false,
usersGetPremium: false,
seats: 0,

View File

@@ -30,6 +30,7 @@ export class OrganizationData {
useSecretsManager: boolean;
usePasswordManager: boolean;
useActivateAutofillPolicy: boolean;
useAutomaticUserConfirmation: boolean;
selfHost: boolean;
usersGetPremium: boolean;
seats: number;
@@ -99,6 +100,7 @@ export class OrganizationData {
this.useSecretsManager = response.useSecretsManager;
this.usePasswordManager = response.usePasswordManager;
this.useActivateAutofillPolicy = response.useActivateAutofillPolicy;
this.useAutomaticUserConfirmation = response.useAutomaticUserConfirmation;
this.selfHost = response.selfHost;
this.usersGetPremium = response.usersGetPremium;
this.seats = response.seats;

View File

@@ -38,6 +38,7 @@ export class Organization {
useSecretsManager: boolean;
usePasswordManager: boolean;
useActivateAutofillPolicy: boolean;
useAutomaticUserConfirmation: boolean;
selfHost: boolean;
usersGetPremium: boolean;
seats: number;
@@ -124,6 +125,7 @@ export class Organization {
this.useSecretsManager = obj.useSecretsManager;
this.usePasswordManager = obj.usePasswordManager;
this.useActivateAutofillPolicy = obj.useActivateAutofillPolicy;
this.useAutomaticUserConfirmation = obj.useAutomaticUserConfirmation;
this.selfHost = obj.selfHost;
this.usersGetPremium = obj.usersGetPremium;
this.seats = obj.seats;

View File

@@ -23,6 +23,7 @@ export class ProfileOrganizationResponse extends BaseResponse {
useSecretsManager: boolean;
usePasswordManager: boolean;
useActivateAutofillPolicy: boolean;
useAutomaticUserConfirmation: boolean;
selfHost: boolean;
usersGetPremium: boolean;
seats: number;
@@ -82,6 +83,7 @@ export class ProfileOrganizationResponse extends BaseResponse {
this.useSecretsManager = this.getResponseProperty("UseSecretsManager");
this.usePasswordManager = this.getResponseProperty("UsePasswordManager");
this.useActivateAutofillPolicy = this.getResponseProperty("UseActivateAutofillPolicy");
this.useAutomaticUserConfirmation = this.getResponseProperty("UseAutomaticUserConfirmation");
this.selfHost = this.getResponseProperty("SelfHost");
this.usersGetPremium = this.getResponseProperty("UsersGetPremium");
this.seats = this.getResponseProperty("Seats");

View File

@@ -12,6 +12,7 @@ import { ServerConfig } from "../platform/abstractions/config/server-config";
export enum FeatureFlag {
/* Admin Console Team */
CreateDefaultLocation = "pm-19467-create-default-location",
AutoConfirm = "pm-19934-auto-confirm-organization-users",
/* Auth */
PM22110_DisableAlternateLoginMethods = "pm-22110-disable-alternate-login-methods",
@@ -80,6 +81,7 @@ const FALSE = false as boolean;
export const DefaultFeatureFlagValue = {
/* Admin Console Team */
[FeatureFlag.CreateDefaultLocation]: FALSE,
[FeatureFlag.AutoConfirm]: FALSE,
/* Autofill */
[FeatureFlag.MacOsNativeCredentialSync]: FALSE,