[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 messagespull/16948/head
Brandon Treston
6 months ago
committed by
GitHub
parent
2147f74ae8
commit
67ba1b83ea
@ -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>
|
||||
@ -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);
|
||||
};
|
||||
}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue