Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-26 12:25:20 +01:00
Code Issues Projects Releases Wiki Activity

[PM-9051][PM-8641] Use reusable export-component on web (#9741)

Browse Source 
* Add export-web.component

Introduce new export-web component
Delete old component
export.module - With export-web being standalone there's no need for a importModule
Change routing to load new component

* Prepare export.component to receive a orgId via the hosting-component

* Remove unused onSaved as it's replaced by onSuccessfulExport

* Refactor org-vault-export.component

Introduce new org-vault-export.component.html as the old component relied on the markup from password manager
Refactor org-vault-export.component
Retrieve organizationId from Route and pass it into the shared export.component
Ensure when exporting from AC to include all data from the selected org
org-vault-export.module - With the new component being standalone there's no need for a importModule
Change routing to load new org-vault-export component

* PM-8641 - Add success toast to base-export component
This ensures a success toast is shown on all clients consistently
Add missing entries into clients messages.json

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Daniel James Smith 2024-06-25 19:17:03 +02:00 committed by GitHub
parent 9ec01422df
commit c35bbc522c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 138 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/browser/src/_locales/en/messages.json
View File

@ -3107,6 +3107,9 @@
"confirmFilePassword": {
"message": "Confirm file password"
},
"exportSuccess": {
"message": "Vault data exported"
},
"typePasskey": {
"message": "Passkey"
},

3
apps/desktop/src/locales/en/messages.json
View File

@ -2843,6 +2843,9 @@
"confirmFilePassword": {
"message": "Confirm file password"
},
"exportSuccess": {
"message": "Vault data exported"
},
"multifactorAuthenticationCancelled": {
"message": "Multifactor authentication cancelled"
},

8
apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts
View File

@ -56,12 +56,14 @@ const routes: Routes = [
},
{
path: "export",
loadChildren: () =>
import("../tools/vault-export/org-vault-export.module").then(
(m) => m.OrganizationVaultExportModule,
loadComponent: () =>
import("../tools/vault-export/org-vault-export.component").then(
(mod) => mod.OrganizationVaultExportComponent,
),
canActivate: [OrganizationPermissionsGuard],
data: {
titleId: "exportVault",
organizationPermissions: (org: Organization) => org.canAccessImportExport,
},
},
],

25
apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export-routing.module.ts
View File

@ -1,25 +0,0 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { OrganizationPermissionsGuard } from "../../guards/org-permissions.guard";
import { OrganizationVaultExportComponent } from "./org-vault-export.component";
const routes: Routes = [
{
path: "",
component: OrganizationVaultExportComponent,
canActivate: [OrganizationPermissionsGuard],
data: {
titleId: "exportVault",
organizationPermissions: (org: Organization) => org.canAccessImportExport,
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class OrganizationVaultExportRoutingModule {}

21
apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.component.html Normal file
View File

@ -0,0 +1,21 @@
<app-header></app-header>
<bit-container>
<tools-export
(formDisabled)="this.disabled = $event"
(formLoading)="this.loading = $event"
(onSuccessfulExport)="this.onSuccessfulExport($event)"
organizationId="{{ routeOrgId }}"
></tools-export>
<button
[disabled]="disabled"
[loading]="loading"
form="export_form_exportForm"
bitButton
type="submit"
bitFormButton
buttonType="primary"
>
{{ "confirmFormat" | i18n }}
</button>
</bit-container>

87
apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.component.ts
View File

@ -1,83 +1,28 @@
import { Component } from "@angular/core";
import { UntypedFormBuilder } from "@angular/forms";
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { EventType } from "@bitwarden/common/enums";
import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { DialogService, ToastService } from "@bitwarden/components";
import { VaultExportServiceAbstraction } from "@bitwarden/vault-export-core";
import { ExportComponent } from "@bitwarden/vault-export-ui";
import { ExportComponent } from "../../../../tools/vault-export/export.component";
import { LooseComponentsModule, SharedModule } from "../../../../shared";
@Component({
selector: "app-org-export",
templateUrl: "../../../../tools/vault-export/export.component.html",
templateUrl: "org-vault-export.component.html",
standalone: true,
imports: [SharedModule, ExportComponent, LooseComponentsModule],
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class OrganizationVaultExportComponent extends ExportComponent {
constructor(
i18nService: I18nService,
toastService: ToastService,
exportService: VaultExportServiceAbstraction,
eventCollectionService: EventCollectionService,
private route: ActivatedRoute,
policyService: PolicyService,
logService: LogService,
formBuilder: UntypedFormBuilder,
fileDownloadService: FileDownloadService,
dialogService: DialogService,
organizationService: OrganizationService,
) {
super(
i18nService,
toastService,
exportService,
eventCollectionService,
policyService,
logService,
formBuilder,
fileDownloadService,
dialogService,
organizationService,
);
}
export class OrganizationVaultExportComponent implements OnInit {
protected routeOrgId: string = null;
protected loading = false;
protected disabled = false;
protected get disabledByPolicy(): boolean {
return false;
}
constructor(private route: ActivatedRoute) {}
async ngOnInit() {
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
this.route.parent.parent.params.subscribe(async (params) => {
this.organizationId = params.organizationId;
});
await super.ngOnInit();
this.routeOrgId = this.route.snapshot.paramMap.get("organizationId");
}
getExportData() {
return this.exportService.getOrganizationExport(
this.organizationId,
this.format,
this.filePassword,
);
}
getFileName() {
return super.getFileName("org");
}
async collectEvent(): Promise<void> {
await this.eventCollectionService.collect(
EventType.Organization_ClientExportedVault,
null,
null,
this.organizationId,
);
}
/**
* Callback that is called after a successful export.
*/
protected async onSuccessfulExport(organizationId: string): Promise<void> {}
}

19
apps/web/src/app/admin-console/organizations/tools/vault-export/org-vault-export.module.ts
View File

@ -1,19 +0,0 @@
import { NgModule } from "@angular/core";
import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
import { LooseComponentsModule, SharedModule } from "../../../../shared";
import { OrganizationVaultExportRoutingModule } from "./org-vault-export-routing.module";
import { OrganizationVaultExportComponent } from "./org-vault-export.component";
@NgModule({
imports: [
SharedModule,
LooseComponentsModule,
OrganizationVaultExportRoutingModule,
ExportScopeCalloutComponent,
],
declarations: [OrganizationVaultExportComponent],
})
export class OrganizationVaultExportModule {}

9
apps/web/src/app/oss-routing.module.ts
View File

@ -448,8 +448,13 @@ const routes: Routes = [
},
{
path: "export",
loadChildren: () =>
import("./tools/vault-export/export.module").then((m) => m.ExportModule),
loadComponent: () =>
import("./tools/vault-export/export-web.component").then(
(mod) => mod.ExportWebComponent,
),
data: {
titleId: "exportVault",
} satisfies DataProperties,
},
{
path: "generator",

17
apps/web/src/app/tools/vault-export/export-routing.module.ts
View File

@ -1,17 +0,0 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { ExportComponent } from "./export.component";
const routes: Routes = [
{
path: "",
component: ExportComponent,
data: { titleId: "exportVault" },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class ExportRoutingModule {}

20
apps/web/src/app/tools/vault-export/export-web.component.html Normal file
View File

@ -0,0 +1,20 @@
<app-header></app-header>
<bit-container>
<tools-export
(formDisabled)="this.disabled = $event"
(formLoading)="this.loading = $event"
(onSuccessfulExport)="this.onSuccessfulExport($event)"
></tools-export>
<button
[disabled]="disabled"
[loading]="loading"
form="export_form_exportForm"
bitButton
type="submit"
bitFormButton
buttonType="primary"
>
{{ "confirmFormat" | i18n }}
</button>
</bit-container>

24
apps/web/src/app/tools/vault-export/export-web.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { ExportComponent } from "@bitwarden/vault-export-ui";
import { HeaderModule } from "../../layouts/header/header.module";
import { SharedModule } from "../../shared";
@Component({
templateUrl: "export-web.component.html",
standalone: true,
imports: [SharedModule, ExportComponent, HeaderModule],
})
export class ExportWebComponent {
protected loading = false;
protected disabled = false;
constructor(private router: Router) {}
/**
* Callback that is called after a successful export.
*/
protected async onSuccessfulExport(organizationId: string): Promise<void> {}
}

115
apps/web/src/app/tools/vault-export/export.component.html
View File

@ -1,115 +0,0 @@
<app-header></app-header>
<bit-container>
<form [formGroup]="exportForm" [bitSubmit]="submit">
<bit-callout type="danger" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
{{ "personalVaultExportPolicyInEffect" | i18n }}
</bit-callout>
<tools-export-scope-callout
[organizationId]="organizationId"
*ngIf="!disabledByPolicy"
></tools-export-scope-callout>
<ng-container *ngIf="organizations$ | async as organizations">
<bit-form-field *ngIf="organizations.length > 0">
<bit-label>{{ "exportFrom" | i18n }}</bit-label>
<bit-select formControlName="vaultSelector">
<bit-option [label]="'myVault' | i18n" value="myVault" icon="bwi-user" />
<bit-option
*ngFor="let o of organizations$ | async"
[value]="o.id"
[label]="o.name"
icon="bwi-business"
/>
</bit-select>
</bit-form-field>
</ng-container>
<bit-form-field>
<bit-label>{{ "fileFormat" | i18n }}</bit-label>
<bit-select formControlName="format">
<bit-option *ngFor="let f of formatOptions" [value]="f.value" [label]="f.name" />
</bit-select>
</bit-form-field>
<ng-container *ngIf="format === 'encrypted_json'">
<bit-radio-group formControlName="fileEncryptionType" aria-label="exportTypeHeading">
<bit-label>{{ "exportTypeHeading" | i18n }}</bit-label>
<bit-radio-button
id="AccountEncrypted"
name="fileEncryptionType"
class="tw-block"
[value]="encryptedExportType.AccountEncrypted"
checked="fileEncryptionType === encryptedExportType.AccountEncrypted"
>
<bit-label>{{ "accountRestricted" | i18n }}</bit-label>
<bit-hint>{{ "accountRestrictedOptionDescription" | i18n }}</bit-hint>
</bit-radio-button>
<bit-radio-button
id="FileEncrypted"
name="fileEncryptionType"
class="tw-block"
[value]="encryptedExportType.FileEncrypted"
checked="fileEncryptionType === encryptedExportType.FileEncrypted"
>
<bit-label>{{ "passwordProtected" | i18n }}</bit-label>
<bit-hint>{{ "passwordProtectedOptionDescription" | i18n }}</bit-hint>
</bit-radio-button>
</bit-radio-group>
<ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
<div class="tw-mb-3">
<bit-form-field>
<bit-label>{{ "filePassword" | i18n }}</bit-label>
<input
bitInput
type="password"
id="filePassword"
formControlName="filePassword"
name="password"
/>
<button
type="button"
bitSuffix
bitIconButton
bitPasswordInputToggle
[(toggled)]="showFilePassword"
></button>
<bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
</bit-form-field>
<app-password-strength [password]="filePassword" [showText]="true">
</app-password-strength>
</div>
<bit-form-field>
<bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
<input
bitInput
type="password"
id="confirmFilePassword"
formControlName="confirmFilePassword"
name="confirmFilePassword"
/>
<button
type="button"
bitSuffix
bitIconButton
bitPasswordInputToggle
[(toggled)]="showFilePassword"
></button>
</bit-form-field>
</ng-container>
</ng-container>
<button
bitButton
bitFormButton
type="submit"
buttonType="primary"
[disabled]="disabledByPolicy"
>
{{ "confirmFormat" | i18n }}
</button>
</form>
</bit-container>

53
apps/web/src/app/tools/vault-export/export.component.ts
View File

@ -1,53 +0,0 @@
import { Component } from "@angular/core";
import { UntypedFormBuilder } from "@angular/forms";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { DialogService, ToastService } from "@bitwarden/components";
import { VaultExportServiceAbstraction } from "@bitwarden/vault-export-core";
import { ExportComponent as BaseExportComponent } from "@bitwarden/vault-export-ui";
@Component({
selector: "app-export",
templateUrl: "export.component.html",
})
export class ExportComponent extends BaseExportComponent {
constructor(
i18nService: I18nService,
toastService: ToastService,
exportService: VaultExportServiceAbstraction,
eventCollectionService: EventCollectionService,
policyService: PolicyService,
logService: LogService,
formBuilder: UntypedFormBuilder,
fileDownloadService: FileDownloadService,
dialogService: DialogService,
organizationService: OrganizationService,
) {
super(
i18nService,
toastService,
exportService,
eventCollectionService,
policyService,
logService,
formBuilder,
fileDownloadService,
dialogService,
organizationService,
);
}
protected saved() {
super.saved();
this.toastService.showToast({
variant: "success",
title: null,
message: this.i18nService.t("exportSuccess"),
});
}
}

14
apps/web/src/app/tools/vault-export/export.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from "@angular/core";
import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
import { LooseComponentsModule, SharedModule } from "../../shared";
import { ExportRoutingModule } from "./export-routing.module";
import { ExportComponent } from "./export.component";
@NgModule({
imports: [SharedModule, LooseComponentsModule, ExportRoutingModule, ExportScopeCalloutComponent],
declarations: [ExportComponent],
})
export class ExportModule {}

49
libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts
View File

@ -1,5 +1,13 @@
import { CommonModule } from "@angular/common";
import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from "@angular/core";
import {
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewChild,
} from "@angular/core";
import { ReactiveFormsModule, UntypedFormBuilder, Validators } from "@angular/forms";
import { map, merge, Observable, startWith, Subject, takeUntil } from "rxjs";
@ -53,6 +61,26 @@ import { ExportScopeCalloutComponent } from "./export-scope-callout.component";
],
})
export class ExportComponent implements OnInit, OnDestroy {
private _organizationId: string;
get organizationId(): string {
return this._organizationId;
}
/**
* Enables the hosting control to pass in an organizationId
* If a organizationId is provided, the organization selection is disabled.
*/
@Input() set organizationId(value: string) {
this._organizationId = value;
this.organizationService
.get$(this._organizationId)
.pipe(takeUntil(this.destroy$))
.subscribe((organization) => {
this._organizationId = organization?.id;
});
}
/**
* The hosting control also needs a bitSubmitDirective (on the Submit button) which calls this components {@link submit}-method.
* This components formState (loading/disabled) is emitted back up to the hosting component so for example the Submit button can be enabled/disabled and show loading state.
@ -82,7 +110,6 @@ export class ExportComponent implements OnInit, OnDestroy {
@Output()
onSuccessfulExport = new EventEmitter<string>();
@Output() onSaved = new EventEmitter();
@ViewChild(PasswordStrengthComponent) passwordStrengthComponent: PasswordStrengthComponent;
encryptedExportType = EncryptedExportType;
@ -91,7 +118,6 @@ export class ExportComponent implements OnInit, OnDestroy {
filePasswordValue: string = null;
private _disabledByPolicy = false;
protected organizationId: string = null;
organizations$: Observable<Organization[]>;
protected get disabledByPolicy(): boolean {
@ -120,6 +146,7 @@ export class ExportComponent implements OnInit, OnDestroy {
];
private destroy$ = new Subject<void>();
private onlyManagedCollections = true;
constructor(
protected i18nService: I18nService,
@ -163,6 +190,8 @@ export class ExportComponent implements OnInit, OnDestroy {
);
this.exportForm.controls.vaultSelector.patchValue(this.organizationId);
this.exportForm.controls.vaultSelector.disable();
this.onlyManagedCollections = false;
return;
}
@ -211,7 +240,12 @@ export class ExportComponent implements OnInit, OnDestroy {
try {
const data = await this.getExportData();
this.downloadFile(data);
this.saved();
this.toastService.showToast({
variant: "success",
title: null,
message: this.i18nService.t("exportSuccess"),
});
this.onSuccessfulExport.emit(this.organizationId);
await this.collectEvent();
this.exportForm.get("secret").setValue("");
this.exportForm.clearValidators();
@ -252,11 +286,6 @@ export class ExportComponent implements OnInit, OnDestroy {
await this.doExport();
};
protected saved() {
this.onSaved.emit();
this.onSuccessfulExport.emit(this.organizationId);
}
private async verifyUser(): Promise<boolean> {
let confirmDescription = "exportWarningDesc";
if (this.isFileEncryptedExport) {
@ -298,7 +327,7 @@ export class ExportComponent implements OnInit, OnDestroy {
this.organizationId,
this.format,
this.filePassword,
true,
this.onlyManagedCollections,
);
}