vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-3763] remove Sweet Alert from desktop and browser (#6138) 

* update desktop and browser swal references to use CL

* rename bit-dialog-close

* share fingerprint dialog between desktop and browser

* apply code review

* format fingerprint in template

* apply code review

* fix button color

* fix button types

* update var names

* close awaitDesktop dialog on success AND error

* add DialogService to NativeMessageHandlerService deps

* wrap browser message dialogs in ngZone.run

* wrap native messaging handler in ngzone.run

* apply code review

* fix async ngzone

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Will Martin 2023-09-11 14:54:23 -04:00 committed by GitHub
parent 2323509dee
commit f999e2cea9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 268 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/browser/src/background/nativeMessaging.background.ts
View File

@ -422,9 +422,10 @@ export class NativeMessagingBackground {
}
private async showFingerprintDialog() {
const fingerprint = (
await this.cryptoService.getFingerprint(await this.stateService.getUserId(), this.publicKey)
).join(" ");
const fingerprint = await this.cryptoService.getFingerprint(
await this.stateService.getUserId(),
this.publicKey
);
this.messagingService.send("showNativeMessagingFinterprintDialog", {
fingerprint: fingerprint,

24
apps/browser/src/popup/app.component.ts
View File

@ -9,8 +9,7 @@ import {
import { DomSanitizer } from "@angular/platform-browser";
import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
import { IndividualConfig, ToastrService } from "ngx-toastr";
import { filter, concatMap, Subject, takeUntil } from "rxjs";
import Swal from "sweetalert2";
import { filter, concatMap, Subject, takeUntil, firstValueFrom } from "rxjs";
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
@ -23,6 +22,7 @@ import { BrowserApi } from "../platform/browser/browser-api";
import { BrowserStateService } from "../platform/services/abstractions/browser-state.service";
import { routerTransition } from "./app-routing.animations";
import { DesktopSyncVerificationDialogComponent } from "./components/desktop-sync-verification-dialog.component";
@Component({
selector: "app-root",
@ -113,10 +113,10 @@ export class AppComponent implements OnInit, OnDestroy {
});
}
} else if (msg.command === "showDialog") {
await this.showDialog(msg);
await this.ngZone.run(() => this.showDialog(msg));
} else if (msg.command === "showNativeMessagingFinterprintDialog") {
// TODO: Should be refactored to live in another service.
await this.showNativeMessagingFingerprintDialog(msg);
await this.ngZone.run(() => this.showNativeMessagingFingerprintDialog(msg));
} else if (msg.command === "showToast") {
this.ngZone.run(() => {
this.showToast(msg);
@ -242,19 +242,11 @@ export class AppComponent implements OnInit, OnDestroy {
}
private async showNativeMessagingFingerprintDialog(msg: any) {
await Swal.fire({
heightAuto: false,
buttonsStyling: false,
icon: "warning",
iconHtml: '<i class="swal-custom-icon bwi bwi-exclamation-triangle text-warning"></i>',
html: `${this.i18nService.t("desktopIntegrationVerificationText")}<br><br><strong>${
msg.fingerprint
}</strong>`,
titleText: this.i18nService.t("desktopSyncVerificationTitle"),
showConfirmButton: true,
confirmButtonText: this.i18nService.t("ok"),
timer: 300000,
const dialogRef = DesktopSyncVerificationDialogComponent.open(this.dialogService, {
fingerprint: msg.fingerprint,
});
return firstValueFrom(dialogRef.closed);
}
private async clearComponentStates() {

18
apps/browser/src/popup/components/desktop-sync-verification-dialog.component.html Normal file
View File

@ -0,0 +1,18 @@
<bit-simple-dialog>
<span bitDialogTitle>
{{ "desktopSyncVerificationTitle" | i18n }}
</span>
<span bitDialogContent>
<p>
{{ "desktopIntegrationVerificationText" | i18n }}
</p>
<p>
<strong>{{ params.fingerprint.join("-") }}</strong>
</p>
</span>
<ng-container bitDialogFooter>
<button bitButton type="button" buttonType="primary" bitDialogClose>
{{ "ok" | i18n }}
</button>
</ng-container>
</bit-simple-dialog>

24
apps/browser/src/popup/components/desktop-sync-verification-dialog.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
export type DesktopSyncVerificationDialogParams = {
fingerprint: string[];
};
@Component({
templateUrl: "desktop-sync-verification-dialog.component.html",
standalone: true,
imports: [JslibModule, ButtonModule, DialogModule],
})
export class DesktopSyncVerificationDialogComponent {
constructor(@Inject(DIALOG_DATA) protected params: DesktopSyncVerificationDialogParams) {}
static open(dialogService: DialogService, data: DesktopSyncVerificationDialogParams) {
return dialogService.open(DesktopSyncVerificationDialogComponent, {
data,
});
}
}

11
apps/browser/src/popup/settings/await-desktop-dialog.component.html Normal file
View File

@ -0,0 +1,11 @@
<bit-simple-dialog>
<span bitDialogTitle>{{ "awaitDesktop" | i18n }}</span>
<span bitDialogContent>
{{ "awaitDesktopDesc" | i18n }}
</span>
<ng-container bitDialogFooter>
<button bitButton type="button" buttonType="secondary" [bitDialogClose]="true">
{{ "close" | i18n }}
</button>
</ng-container>
</bit-simple-dialog>

17
apps/browser/src/popup/settings/await-desktop-dialog.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
@Component({
templateUrl: "await-desktop-dialog.component.html",
standalone: true,
imports: [JslibModule, ButtonModule, DialogModule],
})
export class AwaitDesktopDialogComponent {
static open(dialogService: DialogService) {
return dialogService.open<boolean>(AwaitDesktopDialogComponent, {
disableClose: true,
});
}
}

47
apps/browser/src/popup/settings/settings.component.ts
View File

@ -15,9 +15,9 @@ import {
switchMap,
takeUntil,
} from "rxjs";
import Swal from "sweetalert2";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { FingerprintDialogComponent } from "@bitwarden/auth";
import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@ -39,6 +39,7 @@ import { SetPinComponent } from "../components/set-pin.component";
import { PopupUtilsService } from "../services/popup-utils.service";
import { AboutComponent } from "./about.component";
import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
const RateUrls = {
[DeviceType.ChromeExtension]:
@ -361,25 +362,15 @@ export class SettingsComponent implements OnInit {
return;
}
const submitted = Swal.fire({
heightAuto: false,
buttonsStyling: false,
titleText: this.i18nService.t("awaitDesktop"),
text: this.i18nService.t("awaitDesktopDesc"),
icon: "info",
iconHtml: '<i class="swal-custom-icon bwi bwi-info-circle text-info"></i>',
showCancelButton: true,
cancelButtonText: this.i18nService.t("cancel"),
showConfirmButton: false,
allowOutsideClick: false,
});
const awaitDesktopDialogRef = AwaitDesktopDialogComponent.open(this.dialogService);
const awaitDesktopDialogClosed = firstValueFrom(awaitDesktopDialogRef.closed);
await this.stateService.setBiometricAwaitingAcceptance(true);
await this.cryptoService.refreshAdditionalKeys();
await Promise.race([
submitted.then(async (result) => {
if (result.dismiss === Swal.DismissReason.cancel) {
awaitDesktopDialogClosed.then(async (result) => {
if (result) {
this.form.controls.biometric.setValue(false);
await this.stateService.setBiometricAwaitingAcceptance(null);
}
@ -388,8 +379,6 @@ export class SettingsComponent implements OnInit {
.authenticateBiometric()
.then((result) => {
this.form.controls.biometric.setValue(result);
Swal.close();
if (!result) {
this.platformUtilsService.showToast(
"error",
@ -411,6 +400,9 @@ export class SettingsComponent implements OnInit {
cancelButtonText: null,
type: "danger",
});
})
.finally(() => {
awaitDesktopDialogRef.close(false);
}),
]);
} else {
@ -497,27 +489,12 @@ export class SettingsComponent implements OnInit {
const fingerprint = await this.cryptoService.getFingerprint(
await this.stateService.getUserId()
);
const p = document.createElement("p");
p.innerText = this.i18nService.t("yourAccountsFingerprint") + ":";
const p2 = document.createElement("p");
p2.innerText = fingerprint.join("-");
const div = document.createElement("div");
div.appendChild(p);
div.appendChild(p2);
const result = await Swal.fire({
heightAuto: false,
buttonsStyling: false,
html: div,
showCancelButton: true,
cancelButtonText: this.i18nService.t("close"),
showConfirmButton: true,
confirmButtonText: this.i18nService.t("learnMore"),
const dialogRef = FingerprintDialogComponent.open(this.dialogService, {
fingerprint,
});
if (result.value) {
this.platformUtilsService.launchUri("https://bitwarden.com/help/fingerprint-phrase/");
}
return firstValueFrom(dialogRef.closed);
}
rate() {

15
apps/desktop/src/app/app.component.ts
View File

@ -16,6 +16,7 @@ import { firstValueFrom, Subject, takeUntil } from "rxjs";
import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { FingerprintDialogComponent } from "@bitwarden/auth";
import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
import { SearchService } from "@bitwarden/common/abstractions/search.service";
@ -244,18 +245,8 @@ export class AppComponent implements OnInit, OnDestroy {
const fingerprint = await this.cryptoService.getFingerprint(
await this.stateService.getUserId()
);
const result = await this.dialogService.openSimpleDialog({
title: { key: "fingerprintPhrase" },
content:
this.i18nService.t("yourAccountsFingerprint") + ":\n" + fingerprint.join("-"),
acceptButtonText: { key: "learnMore" },
cancelButtonText: { key: "close" },
type: "info",
});
if (result) {
this.platformUtilsService.launchUri("https://bitwarden.com/help/fingerprint-phrase/");
}
const dialogRef = FingerprintDialogComponent.open(this.dialogService, { fingerprint });
await firstValueFrom(dialogRef.closed);
break;
}
case "deleteAccount":

19
apps/desktop/src/app/components/browser-sync-verification-dialog.component.html Normal file
View File

@ -0,0 +1,19 @@
<bit-simple-dialog>
<span bitDialogTitle>
{{ "verifyBrowserTitle" | i18n }}
</span>
<span bitDialogContent>
<p>{{ "verifyBrowserDesc" | i18n }}</p>
<p>
<strong>{{ params.fingerprint.join("-") }}</strong>
</p>
</span>
<ng-container bitDialogFooter>
<button bitButton type="button" buttonType="primary" [bitDialogClose]="true">
{{ "approve" | i18n }}
</button>
<button bitButton type="button" buttonType="secondary" [bitDialogClose]="false">
{{ "cancel" | i18n }}
</button>
</ng-container>
</bit-simple-dialog>

25
apps/desktop/src/app/components/browser-sync-verification-dialog.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
export type BrowserSyncVerificationDialogParams = {
fingerprint: string[];
};
@Component({
templateUrl: "browser-sync-verification-dialog.component.html",
standalone: true,
imports: [JslibModule, ButtonModule, DialogModule],
})
export class BrowserSyncVerificationDialogComponent {
constructor(@Inject(DIALOG_DATA) protected params: BrowserSyncVerificationDialogParams) {}
static open(dialogService: DialogService, data: BrowserSyncVerificationDialogParams) {
return dialogService.open(BrowserSyncVerificationDialogComponent, {
data,
disableClose: true,
});
}
}

18
apps/desktop/src/app/components/verify-native-messaging-dialog.component.html Normal file
View File

@ -0,0 +1,18 @@
<bit-simple-dialog>
<span bitDialogTitle>
{{ "verifyNativeMessagingConnectionTitle" | i18n : data.applicationName }}:
</span>
<span bitDialogContent>
{{ "verifyNativeMessagingConnectionDesc" | i18n }}
<br />
{{ "verifyNativeMessagingConnectionWarning" | i18n }}
</span>
<ng-container bitDialogFooter>
<button bitButton type="button" buttonType="primary" [bitDialogClose]="true">
{{ "yes" | i18n }}
</button>
<button bitButton type="button" buttonType="secondary" [bitDialogClose]="false">
{{ "no" | i18n }}
</button>
</ng-container>
</bit-simple-dialog>

24
apps/desktop/src/app/components/verify-native-messaging-dialog.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
export type VerifyNativeMessagingDialogData = {
applicationName: string;
};
@Component({
templateUrl: "verify-native-messaging-dialog.component.html",
standalone: true,
imports: [JslibModule, ButtonModule, DialogModule],
})
export class VerifyNativeMessagingDialogComponent {
constructor(@Inject(DIALOG_DATA) protected data: VerifyNativeMessagingDialogData) {}
static open(dialogService: DialogService, data: VerifyNativeMessagingDialogData) {
return dialogService.open<boolean>(VerifyNativeMessagingDialogComponent, {
data,
});
}
}

1
apps/desktop/src/app/services/services.module.ts
View File

@ -169,6 +169,7 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
MessagingServiceAbstraction,
I18nServiceAbstraction,
EncryptedMessageHandlerService,
DialogService,
],
},
{

26
apps/desktop/src/services/native-message-handler.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from "@angular/core";
import { ipcRenderer } from "electron";
import Swal from "sweetalert2";
import { firstValueFrom } from "rxjs";
import { NativeMessagingVersion } from "@bitwarden/common/enums";
import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
@ -11,7 +11,9 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
import { EncryptedString, EncString } from "@bitwarden/common/platform/models/domain/enc-string";
import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
import { StateService } from "@bitwarden/common/platform/services/state.service";
import { DialogService } from "@bitwarden/components";
import { VerifyNativeMessagingDialogComponent } from "../app/components/verify-native-messaging-dialog.component";
import { DecryptedCommandData } from "../models/native-messaging/decrypted-command-data";
import { EncryptedMessage } from "../models/native-messaging/encrypted-message";
import { EncryptedMessageResponse } from "../models/native-messaging/encrypted-message-response";
@ -33,7 +35,8 @@ export class NativeMessageHandlerService {
private cryptoFunctionService: CryptoFunctionService,
private messagingService: MessagingService,
private i18nService: I18nService,
private encryptedMessageHandlerService: EncryptedMessageHandlerService
private encryptedMessageHandlerService: EncryptedMessageHandlerService,
private dialogService: DialogService
) {}
async handleMessage(message: Message) {
@ -87,21 +90,12 @@ export class NativeMessageHandlerService {
// Ask for confirmation from user
this.messagingService.send("setFocus");
const submitted = await Swal.fire({
heightAuto: false,
titleText: this.i18nService.t("verifyNativeMessagingConnectionTitle", applicationName),
html: `${this.i18nService.t("verifyNativeMessagingConnectionDesc")}<br>${this.i18nService.t(
"verifyNativeMessagingConnectionWarning"
)}`,
showCancelButton: true,
cancelButtonText: this.i18nService.t("no"),
showConfirmButton: true,
confirmButtonText: this.i18nService.t("yes"),
allowOutsideClick: false,
focusCancel: true,
});
if (submitted.value !== true) {
const nativeMessagingVerified = await firstValueFrom(
VerifyNativeMessagingDialogComponent.open(this.dialogService, { applicationName }).closed
);
if (nativeMessagingVerified !== true) {
this.sendResponse({
messageId: messageId,
version: NativeMessagingVersion.Latest,

52
apps/desktop/src/services/native-messaging.service.ts
View File

@ -1,7 +1,6 @@
import { Injectable } from "@angular/core";
import { Injectable, NgZone } from "@angular/core";
import { ipcRenderer } from "electron";
import { firstValueFrom } from "rxjs";
import Swal from "sweetalert2";
import { KeySuffixOptions } from "@bitwarden/common/enums";
import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
@ -14,7 +13,9 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
import { Utils } from "@bitwarden/common/platform/misc/utils";
import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
import { DialogService } from "@bitwarden/components";
import { BrowserSyncVerificationDialogComponent } from "../app/components/browser-sync-verification-dialog.component";
import { LegacyMessage } from "../models/native-messaging/legacy-message";
import { LegacyMessageWrapper } from "../models/native-messaging/legacy-message-wrapper";
import { Message } from "../models/native-messaging/message";
@ -36,7 +37,9 @@ export class NativeMessagingService {
private i18nService: I18nService,
private messagingService: MessagingService,
private stateService: StateService,
private nativeMessageHandler: NativeMessageHandlerService
private nativeMessageHandler: NativeMessageHandlerService,
private dialogService: DialogService,
private ngZone: NgZone
) {}
init() {
@ -69,27 +72,20 @@ export class NativeMessagingService {
if (await this.stateService.getEnableBrowserIntegrationFingerprint()) {
ipcRenderer.send("nativeMessagingReply", { command: "verifyFingerprint", appId: appId });
const fingerprint = (
await this.cryptoService.getFingerprint(
await this.stateService.getUserId(),
remotePublicKey
)
).join(" ");
const fingerprint = await this.cryptoService.getFingerprint(
await this.stateService.getUserId(),
remotePublicKey
);
this.messagingService.send("setFocus");
// Await confirmation that fingerprint is correct
const submitted = await Swal.fire({
titleText: this.i18nService.t("verifyBrowserTitle"),
html: `${this.i18nService.t("verifyBrowserDesc")}<br><br><strong>${fingerprint}</strong>`,
showCancelButton: true,
cancelButtonText: this.i18nService.t("cancel"),
showConfirmButton: true,
confirmButtonText: this.i18nService.t("approve"),
allowOutsideClick: false,
});
const dialogRef = this.ngZone.run(() =>
BrowserSyncVerificationDialogComponent.open(this.dialogService, { fingerprint })
);
if (submitted.value !== true) {
const browserSyncVerified = await firstValueFrom(dialogRef.closed);
if (browserSyncVerified !== true) {
return;
}
}
@ -127,13 +123,15 @@ export class NativeMessagingService {
if (!(await this.stateService.getBiometricUnlock({ userId: message.userId }))) {
this.send({ command: "biometricUnlock", response: "not enabled" }, appId);
return await Swal.fire({
title: this.i18nService.t("biometricsNotEnabledTitle"),
text: this.i18nService.t("biometricsNotEnabledDesc"),
showCancelButton: true,
cancelButtonText: this.i18nService.t("cancel"),
showConfirmButton: false,
});
return this.ngZone.run(() =>
this.dialogService.openSimpleDialog({
type: "warning",
title: { key: "biometricsNotEnabledTitle" },
content: { key: "biometricsNotEnabledDesc" },
cancelButtonText: null,
acceptButtonText: { key: "cancel" },
})
);
}
const userKey = await this.cryptoService.getUserKeyFromStorage(

8
apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.html
View File

@ -69,13 +69,7 @@
<button bitButton buttonType="primary" bitFormButton type="submit">
{{ "save" | i18n }}
</button>
<button
bitButton
buttonType="secondary"
type="button"
bitDialogClose
[bit-dialog-close]="ResultType.Canceled"
>
<button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Canceled">
{{ "cancel" | i18n }}
</button>
<button

23
libs/auth/src/components/fingerprint-dialog.component.html Normal file
View File

@ -0,0 +1,23 @@
<bit-simple-dialog>
<i bitDialogIcon class="bwi bwi-info-circle tw-text-3xl" aria-hidden="true"></i>
<span bitDialogTitle>{{ "yourAccountsFingerprint" | i18n }}:</span>
<span bitDialogContent>
<strong>{{ data.fingerprint.join("-") }}</strong>
</span>
<ng-container bitDialogFooter>
<a
bitButton
href="https://bitwarden.com/help/fingerprint-phrase/"
target="_blank"
rel="noopener"
buttonType="primary"
bitDialogClose
>
{{ "learnMore" | i18n }}
<i class="bwi bwi-external-link bwi-fw" aria-hidden="true"></i>
</a>
<button bitButton type="button" buttonType="secondary" bitDialogClose>
{{ "close" | i18n }}
</button>
</ng-container>
</bit-simple-dialog>

22
libs/auth/src/components/fingerprint-dialog.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
export type FingerprintDialogData = {
fingerprint: string[];
};
@Component({
templateUrl: "fingerprint-dialog.component.html",
standalone: true,
imports: [JslibModule, ButtonModule, DialogModule],
})
export class FingerprintDialogComponent {
constructor(@Inject(DIALOG_DATA) protected data: FingerprintDialogData) {}
static open(dialogService: DialogService, data: FingerprintDialogData) {
return dialogService.open(FingerprintDialogComponent, { data });
}
}

1
libs/auth/src/index.ts
View File

@ -0,0 +1 @@
export * from "./components/fingerprint-dialog.component";

4
libs/components/src/dialog/directives/dialog-close.directive.ts
View File

@ -5,9 +5,9 @@ import { Directive, HostListener, Input, Optional } from "@angular/core";
selector: "[bitDialogClose]",
})
export class DialogCloseDirective {
@Input("bit-dialog-close") dialogResult: any;
@Input("bitDialogClose") dialogResult: any;
constructor(@Optional() public dialogRef: DialogRef<any>) {}
constructor(@Optional() public dialogRef: DialogRef) {}
@HostListener("click") close(): void {
this.dialogRef.close(this.dialogResult);