bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-05 11:13:44 +00:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin' into auth/pm-14943/auth-request-extension-dialog-approve

Browse Source
This commit is contained in:
Patrick Pimentel
2025-08-21 10:10:03 -04:00
parent 20daa16971 b0f46004ff
commit 7aadd36c6d
20 changed files with 295 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts
View File

@@ -76,10 +76,8 @@ describe("VaultGeneratorDialogComponent", () => {
component.onValueGenerated("test-password");
fixture.detectChanges();
const button = fixture.debugElement.query(
By.css("[data-testid='select-button']"),
).nativeElement;
expect(button.disabled).toBe(false);
const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
expect(button.attributes["aria-disabled"]).toBe(undefined);
});
it("should disable the button if no value has been generated", () => {
@@ -90,10 +88,8 @@ describe("VaultGeneratorDialogComponent", () => {
generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
fixture.detectChanges();
const button = fixture.debugElement.query(
By.css("[data-testid='select-button']"),
).nativeElement;
expect(button.disabled).toBe(true);
const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
expect(button.attributes["aria-disabled"]).toBe("true");
});
it("should disable the button if no algorithm is selected", () => {
@@ -104,10 +100,8 @@ describe("VaultGeneratorDialogComponent", () => {
generator.valueGenerated.emit("test-password");
fixture.detectChanges();
const button = fixture.debugElement.query(
By.css("[data-testid='select-button']"),
).nativeElement;
expect(button.disabled).toBe(true);
const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
expect(button.attributes["aria-disabled"]).toBe("true");
});
it("should update button text when algorithm is selected", () => {

3
apps/web/src/app/auth/settings/verify-email.component.html
View File

@@ -4,10 +4,9 @@
id="sendBtn"
bitLink
linkType="secondary"
bitButton
type="button"
buttonType="unstyled"
[bitAction]="send"
(click)="send()"
>
{{ "sendEmail" | i18n }}
</button>

1
apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html
View File

@@ -51,6 +51,7 @@
<h2 class="tw-mb-3 tw-text-base tw-font-semibold">{{ "paymentType" | i18n }}</h2>
<app-payment [showAccountCredit]="false"></app-payment>
<app-manage-tax-information
[showTaxIdField]="showTaxIdField"
(taxInformationChanged)="onTaxInformationChanged()"
></app-manage-tax-information>

9
apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.ts
View File

@@ -259,6 +259,15 @@ export class TrialBillingStepComponent implements OnInit, OnDestroy {
return planType ? this.applicablePlans.find((plan) => plan.type === planType) : null;
}
protected get showTaxIdField(): boolean {
switch (this.organizationInfo.type) {
case ProductTierType.Families:
return false;
default:
return true;
}
}
private getBillingInformationFromTaxInfoComponent(): BillingInformation {
return {
postalCode: this.taxInfoComponent.getTaxInformation()?.postalCode,

18
apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts
View File

@@ -70,10 +70,8 @@ describe("WebVaultGeneratorDialogComponent", () => {
generator.valueGenerated.emit("test-password");
fixture.detectChanges();
const button = fixture.debugElement.query(
By.css("[data-testid='select-button']"),
).nativeElement;
expect(button.disabled).toBe(false);
const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
expect(button.attributes["aria-disabled"]).toBe(undefined);
});
it("should disable the button if no value has been generated", () => {
@@ -84,10 +82,8 @@ describe("WebVaultGeneratorDialogComponent", () => {
generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
fixture.detectChanges();
const button = fixture.debugElement.query(
By.css("[data-testid='select-button']"),
).nativeElement;
expect(button.disabled).toBe(true);
const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
expect(button.attributes["aria-disabled"]).toBe("true");
});
it("should disable the button if no algorithm is selected", () => {
@@ -98,10 +94,8 @@ describe("WebVaultGeneratorDialogComponent", () => {
generator.valueGenerated.emit("test-password");
fixture.detectChanges();
const button = fixture.debugElement.query(
By.css("[data-testid='select-button']"),
).nativeElement;
expect(button.disabled).toBe(true);
const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
expect(button.attributes["aria-disabled"]).toBe("true");
});
it("should close with selected value when confirmed", () => {

2
libs/common/src/platform/abstractions/key-generation.service.ts
View File

@@ -1,2 +0,0 @@
/** Temporary re-export. This should not be used for new imports */
export { KeyGenerationService } from "../../key-management/crypto/key-generation/key-generation.service";

123
libs/common/src/platform/ipc/ipc.service.ts
View File

@@ -2,25 +2,136 @@ import { Observable, shareReplay } from "rxjs";
import { IpcClient, IncomingMessage, OutgoingMessage } from "@bitwarden/sdk-internal";
/**
* Entry point for inter-process communication (IPC).
*
* - {@link IpcService.init} should be called in the initialization phase of the client.
* - This service owns the underlying {@link IpcClient} lifecycle and starts it during initialization.
*
* ## Usage
*
* ### Publish / Subscribe
* There are 2 main ways of sending and receiving messages over IPC in TypeScript:
*
* #### 1. TypeScript only JSON-based messages
* This is the simplest form of IPC, where messages are sent as untyped JSON objects.
* This is useful for simple message passing without the need for Rust code.
*
* ```typescript
* // Send a message
* await ipcService.send(OutgoingMessage.new_json_payload({ my: "data" }, "BrowserBackground", "my-topic"));
*
* // Receive messages
* ipcService.messages$.subscribe((message: IncomingMessage) => {
* if (message.topic === "my-topic") {
* const data = incomingMessage.parse_payload_as_json();
* console.log("Received message:", data);
* }
* });
* ```
*
* #### 2. Rust compatible messages
* If you need to send messages that can also be handled by Rust code you can use typed Rust structs
* together with Rust functions to send and receive messages. For more information on typed structs
* refer to `TypedOutgoingMessage` and `TypedIncomingMessage` in the SDK.
*
* For examples on how to use the RPC framework with Rust see the section below.
*
* ### RPC (Request / Response)
* The RPC functionality is more complex than simple message passing and requires Rust code
* to send and receive calls. For this reason, the service also exposes the underlying
* {@link IpcClient} so it can be passed directly into Rust code.
*
* #### Rust code
* ```rust
* #[wasm_bindgen(js_name = ipcRegisterPingHandler)]
* pub async fn ipc_register_ping_handler(ipc_client: &JsIpcClient) {
* ipc_client
* .client
* // See Rust docs for more information on how to implement a handler
* .register_rpc_handler(PingHandler::new())
* .await;
* }
*
* #[wasm_bindgen(js_name = ipcRequestPing)]
* pub async fn ipc_request_ping(
* ipc_client: &JsIpcClient,
* destination: Endpoint,
* abort_signal: Option<AbortSignal>,
* ) -> Result<PingResponse, RequestError> {
* ipc_client
* .client
* .request(
* PingRequest,
* destination,
* abort_signal.map(|c| c.to_cancellation_token()),
* )
* .await
* }
* ```
*
* #### TypeScript code
* ```typescript
* import { IpcService } from "@bitwarden/common/platform/ipc";
* import { IpcClient, ipcRegisterPingHandler, ipcRequestPing } from "@bitwarden/sdk-internal";
*
* class MyService {
* constructor(private ipcService: IpcService) {}
*
* async init() {
* await ipcRegisterPingHandler(this.ipcService.client);
* }
*
* async ping(destination: Endpoint): Promise<PingResponse> {
* return await ipcRequestPing(this.ipcService.client, destination);
* }
* }
*/
export abstract class IpcService {
private _client?: IpcClient;
/**
* Access to the underlying {@link IpcClient} for advanced/Rust RPC usage.
*
* @throws If the service has not been initialized.
*/
get client(): IpcClient {
if (!this._client) {
throw new Error("IpcService not initialized");
throw new Error("IpcService not initialized. Call init() first.");
}
return this._client;
}
private _messages$?: Observable<IncomingMessage>;
protected get messages$(): Observable<IncomingMessage> {
/**
* Hot stream of {@link IncomingMessage} from the IPC layer.
*
* @remarks
* - Uses `shareReplay({ bufferSize: 0, refCount: true })`, so no events are replayed to late subscribers.
* Subscribe early if you must not miss messages.
*
* @throws If the service has not been initialized.
*/
get messages$(): Observable<IncomingMessage> {
if (!this._messages$) {
throw new Error("IpcService not initialized");
throw new Error("IpcService not initialized. Call init() first.");
}
return this._messages$;
}
/**
* Initializes the service and starts the IPC client.
*/
abstract init(): Promise<void>;
/**
* Wires the provided {@link IpcClient}, starts it, and sets up the message stream.
*
* - Starts the client via `client.start()`.
* - Subscribes to the client's receive loop and exposes it through {@link messages$}.
* - Implementations may override `init` but should call this helper exactly once.
*/
protected async initWithClient(client: IpcClient): Promise<void> {
this._client = client;
await this._client.start();
@@ -47,6 +158,12 @@ export abstract class IpcService {
}).pipe(shareReplay({ bufferSize: 0, refCount: true }));
}
/**
* Sends an {@link OutgoingMessage} over IPC.
*
* @param message The message to send.
* @throws If the service is not initialized or the underlying client fails to send.
*/
async send(message: OutgoingMessage) {
await this.client.send(message);
}

2
libs/common/src/platform/services/key-generation.service.ts
View File

@@ -1,2 +0,0 @@
/** Temporary re-export. This should not be used for new imports */
export { DefaultKeyGenerationService as KeyGenerationService } from "../../key-management/crypto/key-generation/default-key-generation.service";

12
libs/components/src/a11y/aria-disable.directive.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Directive, inject } from "@angular/core";
import { AriaDisabledClickCaptureService } from "./aria-disabled-click-capture.service";
@Directive({
host: {
"[attr.bit-aria-disable]": "true",
},
})
export class AriaDisableDirective {
protected ariaDisabledClickCaptureService = inject(AriaDisabledClickCaptureService);
}

30
libs/components/src/a11y/aria-disabled-click-capture.service.ts Normal file
View File

@@ -0,0 +1,30 @@
import { DOCUMENT } from "@angular/common";
import { Injectable, Inject, NgZone, OnDestroy } from "@angular/core";
@Injectable({ providedIn: "root" })
export class AriaDisabledClickCaptureService implements OnDestroy {
private listener!: (e: MouseEvent | KeyboardEvent) => void;
constructor(
@Inject(DOCUMENT) private document: Document,
private ngZone: NgZone,
) {
this.ngZone.runOutsideAngular(() => {
this.listener = (e: MouseEvent | KeyboardEvent) => {
const btn = (e.target as HTMLElement).closest(
'[aria-disabled="true"][bit-aria-disable="true"]',
);
if (btn) {
e.stopPropagation();
e.preventDefault();
return false;
}
};
this.document.addEventListener("click", this.listener, /* capture */ true);
});
}
ngOnDestroy() {
this.document.removeEventListener("click", this.listener, true);
}
}

2
libs/components/src/a11y/index.ts
View File

@@ -1 +1,3 @@
export * from "./a11y-title.directive";
export * from "./aria-disabled-click-capture.service";
export * from "./aria-disable.directive";

14
libs/components/src/button/button.component.spec.ts
View File

@@ -34,23 +34,25 @@ describe("Button", () => {
expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
});
it("should be disabled when disabled is true", () => {
it("should be aria-disabled and not html attribute disabled when disabled is true", () => {
testAppComponent.disabled = true;
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.disabled).toBeTruthy();
expect(buttonDebugElement.attributes["aria-disabled"]).toBe("true");
expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
// Anchor tags cannot be disabled.
});
it("should be disabled when attribute disabled is true", () => {
expect(disabledButtonDebugElement.nativeElement.disabled).toBeTruthy();
it("should be aria-disabled not html attribute disabled when attribute disabled is true", () => {
fixture.detectChanges();
expect(disabledButtonDebugElement.attributes["aria-disabled"]).toBe("true");
expect(disabledButtonDebugElement.nativeElement.disabled).toBeFalsy();
});
it("should be disabled when loading is true", () => {
testAppComponent.loading = true;
fixture.detectChanges();
expect(buttonDebugElement.nativeElement.disabled).toBeTruthy();
expect(buttonDebugElement.attributes["aria-disabled"]).toBe("true");
});
});

41
libs/components/src/button/button.component.ts
View File

@@ -1,9 +1,20 @@
import { NgClass } from "@angular/common";
import { input, HostBinding, Component, model, computed, booleanAttribute } from "@angular/core";
import {
input,
HostBinding,
Component,
model,
computed,
booleanAttribute,
inject,
ElementRef,
} from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { debounce, interval } from "rxjs";
import { AriaDisableDirective } from "../a11y";
import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
import { ariaDisableElement } from "../utils";
const focusRing = [
"focus-visible:tw-ring-2",
@@ -50,9 +61,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
templateUrl: "button.component.html",
providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
imports: [NgClass],
host: {
"[attr.disabled]": "disabledAttr()",
},
hostDirectives: [AriaDisableDirective],
})
export class ButtonComponent implements ButtonLikeAbstraction {
@HostBinding("class") get classList() {
@@ -72,14 +81,15 @@ export class ButtonComponent implements ButtonLikeAbstraction {
.concat(
this.showDisabledStyles() || this.disabled()
? [
"disabled:tw-bg-secondary-300",
"disabled:hover:tw-bg-secondary-300",
"disabled:tw-border-secondary-300",
"disabled:hover:tw-border-secondary-300",
"disabled:!tw-text-muted",
"disabled:hover:!tw-text-muted",
"disabled:tw-cursor-not-allowed",
"disabled:hover:tw-no-underline",
"aria-disabled:!tw-bg-secondary-300",
"hover:tw-bg-secondary-300",
"aria-disabled:tw-border-secondary-300",
"hover:tw-border-secondary-300",
"aria-disabled:!tw-text-muted",
"hover:!tw-text-muted",
"aria-disabled:tw-cursor-not-allowed",
"hover:tw-no-underline",
"aria-disabled:tw-pointer-events-none",
]
: [],
)
@@ -88,7 +98,7 @@ export class ButtonComponent implements ButtonLikeAbstraction {
protected disabledAttr = computed(() => {
const disabled = this.disabled() != null && this.disabled() !== false;
return disabled || this.loading() ? true : null;
return disabled || this.loading();
});
/**
@@ -128,4 +138,9 @@ export class ButtonComponent implements ButtonLikeAbstraction {
);
disabled = model<boolean>(false);
private el = inject(ElementRef<HTMLButtonElement>);
constructor() {
ariaDisableElement(this.el.nativeElement, this.disabledAttr);
}
}

2
libs/components/src/form-field/form-field.component.html
View File

@@ -46,7 +46,7 @@
</div>
</div>
<div
class="tw-gap-1 tw-bg-background tw-rounded-lg tw-flex tw-min-h-11 [&:not(:has(button:enabled)):has(input:read-only)]:tw-bg-secondary-100 [&:not(:has(button:enabled)):has(textarea:read-only)]:tw-bg-secondary-100"
class="tw-gap-1 tw-bg-background tw-rounded-lg tw-flex tw-min-h-11 [&:has(input:read-only,textarea:read-only):not(:has(button:not([aria-disabled='true'])))]:tw-bg-secondary-100"
>
<div
#prefixContainer

29
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -1,11 +1,22 @@
import { NgClass } from "@angular/common";
import { Component, computed, effect, ElementRef, HostBinding, input, model } from "@angular/core";
import {
Component,
computed,
effect,
ElementRef,
HostBinding,
inject,
input,
model,
} from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { debounce, interval } from "rxjs";
import { AriaDisableDirective } from "../a11y";
import { setA11yTitleAndAriaLabel } from "../a11y/set-a11y-title-and-aria-label";
import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
import { FocusableElement } from "../shared/focusable-element";
import { ariaDisableElement } from "../utils";
export type IconButtonType = "primary" | "danger" | "contrast" | "main" | "muted" | "nav-contrast";
@@ -78,7 +89,6 @@ const sizes: Record<IconButtonSize, string[]> = {
],
imports: [NgClass],
host: {
"[attr.disabled]": "disabledAttr()",
/**
* When the `bitIconButton` input is dynamic from a consumer, Angular doesn't put the
* `bitIconButton` attribute into the DOM. We use the attribute as a css selector in
@@ -87,6 +97,7 @@ const sizes: Record<IconButtonSize, string[]> = {
*/
"[attr.bitIconButton]": "icon()",
},
hostDirectives: [AriaDisableDirective],
})
export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
readonly icon = model.required<string>({ alias: "bitIconButton" });
@@ -118,7 +129,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
.concat(sizes[this.size()])
.concat(
this.showDisabledStyles() || this.disabled()
? ["disabled:tw-opacity-60", "disabled:hover:!tw-bg-transparent"]
? ["aria-disabled:tw-opacity-60", "aria-disabled:hover:!tw-bg-transparent"]
: [],
);
}
@@ -129,7 +140,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
protected disabledAttr = computed(() => {
const disabled = this.disabled() != null && this.disabled() !== false;
return disabled || this.loading() ? true : null;
return disabled || this.loading();
});
/**
@@ -168,8 +179,14 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
return this.elementRef.nativeElement;
}
constructor(private elementRef: ElementRef) {
const originalTitle = this.elementRef.nativeElement.getAttribute("title");
private elementRef = inject(ElementRef);
constructor() {
const element = this.elementRef.nativeElement;
ariaDisableElement(element, this.disabledAttr);
const originalTitle = element.getAttribute("title");
effect(() => {
setA11yTitleAndAriaLabel({

20
libs/components/src/link/link.directive.ts
View File

@@ -1,4 +1,7 @@
import { input, HostBinding, Directive } from "@angular/core";
import { input, HostBinding, Directive, inject, ElementRef, booleanAttribute } from "@angular/core";
import { AriaDisableDirective } from "../a11y";
import { ariaDisableElement } from "../utils";
export type LinkType = "primary" | "secondary" | "contrast" | "light";
@@ -58,6 +61,11 @@ const commonStyles = [
"before:tw-transition",
"focus-visible:before:tw-ring-2",
"focus-visible:tw-z-10",
"aria-disabled:tw-no-underline",
"aria-disabled:tw-pointer-events-none",
"aria-disabled:!tw-text-secondary-300",
"aria-disabled:hover:!tw-text-secondary-300",
"aria-disabled:hover:tw-no-underline",
];
@Directive()
@@ -86,11 +94,21 @@ export class AnchorLinkDirective extends LinkDirective {
@Directive({
selector: "button[bitLink]",
hostDirectives: [AriaDisableDirective],
})
export class ButtonLinkDirective extends LinkDirective {
private el = inject(ElementRef<HTMLButtonElement>);
disabled = input(false, { transform: booleanAttribute });
@HostBinding("class") get classList() {
return ["before:-tw-inset-y-[0.25rem]"]
.concat(commonStyles)
.concat(linkStyles[this.linkType()] ?? []);
}
constructor() {
super();
ariaDisableElement(this.el.nativeElement, this.disabled);
}
}

8
libs/components/src/menu/menu.component.spec.ts
View File

@@ -58,6 +58,14 @@ describe("Menu", () => {
expect(getBitMenuPanel()).toBeFalsy();
});
it("should not open when the trigger button is disabled", () => {
const buttonDebugElement = fixture.debugElement.query(By.directive(MenuTriggerForDirective));
buttonDebugElement.nativeElement.setAttribute("disabled", "true");
(buttonDebugElement.nativeElement as HTMLButtonElement).click();
expect(getBitMenuPanel()).toBeFalsy();
});
});
@Component({

1
libs/components/src/toast/toast.stories.ts
View File

@@ -20,6 +20,7 @@ const toastServiceExampleTemplate = `
@Component({
selector: "toast-service-example",
template: toastServiceExampleTemplate,
imports: [ButtonModule],
})
export class ToastServiceExampleComponent {
@Input()

19
libs/components/src/utils/aria-disable-element.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Signal } from "@angular/core";
import { toObservable, takeUntilDestroyed } from "@angular/core/rxjs-interop";
/**
* a11y helper util used to `aria-disable` elements as opposed to using the HTML `disabled` attr.
* - Removes HTML `disabled` attr and replaces it with `aria-disabled="true"`
*/
export function ariaDisableElement(el: HTMLElement, disabled: Signal<boolean | undefined>) {
toObservable(disabled)
.pipe(takeUntilDestroyed())
.subscribe((isDisabled) => {
if (isDisabled) {
el.removeAttribute("disabled");
el.setAttribute("aria-disabled", "true");
} else {
el.removeAttribute("aria-disabled");
}
});
}

1
libs/components/src/utils/index.ts
View File

@@ -1,2 +1,3 @@
export * from "./aria-disable-element";
export * from "./function-to-observable";
export * from "./i18n-mock.service";