mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 16:23:44 +00:00
[PM-8524] Cipher Form - Edit Login Details Section (#10081)
* [PM-8524] Introduce login details section component
* [PM-8524] Add ability to remove passkey
* [PM-8524] Introduce TotpCaptureService and the Browser implementation
* [PM-8524] Tweak storybook
* [PM-8524] Add note regarding existing login view references
* [PM-8524] Fix clone mode so that a new cipher is created
* [PM-8524] Add support for generating usernames/passwords and auditing passwords
* [PM-8524] Migrate password/username generation to CipherFormGenerationService
* [PM-8524] Add optional passwordInput to BitPasswordInputToggle to support conditionally rendered password toggle buttons
* [PM-8524] Add LoginDetailsSection tests
* [PM-8524] Add BrowserTotpCaptureService tests
* Revert "[PM-8524] Add optional passwordInput to BitPasswordInputToggle to support conditionally rendered password toggle buttons"
This reverts commit e76a0ccfe8.
* [PM-8524] Add null check to password input toggle
This commit is contained in:
Shane Melton
GitHub
@@ -6,6 +6,10 @@
|
||||
[originalCipherView]="originalCipherView"
|
||||
></vault-item-details-section>
|
||||
|
||||
<vault-login-details-section
|
||||
*ngIf="config.cipherType === CipherType.Login"
|
||||
></vault-login-details-section>
|
||||
|
||||
<vault-identity-section
|
||||
*ngIf="config.cipherType === CipherType.Identity"
|
||||
[disabled]="config.mode === 'partial-edit'"
|
||||
|
||||
@@ -39,6 +39,7 @@ import { AdditionalOptionsSectionComponent } from "./additional-options/addition
|
||||
import { CardDetailsSectionComponent } from "./card-details-section/card-details-section.component";
|
||||
import { IdentitySectionComponent } from "./identity/identity.component";
|
||||
import { ItemDetailsSectionComponent } from "./item-details/item-details-section.component";
|
||||
import { LoginDetailsSectionComponent } from "./login-details-section/login-details-section.component";
|
||||
|
||||
@Component({
|
||||
selector: "vault-cipher-form",
|
||||
@@ -64,6 +65,7 @@ import { ItemDetailsSectionComponent } from "./item-details/item-details-section
|
||||
IdentitySectionComponent,
|
||||
NgIf,
|
||||
AdditionalOptionsSectionComponent,
|
||||
LoginDetailsSectionComponent,
|
||||
],
|
||||
})
|
||||
export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, CipherFormContainer {
|
||||
@@ -184,6 +186,10 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
|
||||
);
|
||||
|
||||
this.updatedCipherView = Object.assign(this.updatedCipherView, this.originalCipherView);
|
||||
|
||||
if (this.config.mode === "clone") {
|
||||
this.updatedCipherView.id = null;
|
||||
}
|
||||
} else {
|
||||
this.updatedCipherView.type = this.config.cipherType;
|
||||
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<bit-section [formGroup]="loginDetailsForm">
|
||||
<bit-section-header>
|
||||
<h2 bitTypography="h5">
|
||||
{{ "loginCredentials" | i18n }}
|
||||
</h2>
|
||||
</bit-section-header>
|
||||
|
||||
<bit-card>
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "username" | i18n }}</bit-label>
|
||||
<input bitInput formControlName="username" />
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-generate"
|
||||
bitSuffix
|
||||
*ngIf="loginDetailsForm.controls.username.enabled"
|
||||
data-testid="generate-username-button"
|
||||
[appA11yTitle]="'generateUsername' | i18n"
|
||||
[bitAction]="generateUsername"
|
||||
></button>
|
||||
</bit-form-field>
|
||||
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "password" | i18n }}</bit-label>
|
||||
<input bitInput formControlName="password" type="password" />
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-check-circle"
|
||||
bitSuffix
|
||||
*ngIf="
|
||||
loginDetailsForm.controls.password.enabled &&
|
||||
loginDetailsForm.controls.password.value?.length > 0
|
||||
"
|
||||
data-testid="check-password-button"
|
||||
[appA11yTitle]="'checkPassword' | i18n"
|
||||
[bitAction]="checkPassword"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton
|
||||
bitSuffix
|
||||
*ngIf="viewHiddenFields"
|
||||
data-testid="toggle-password-visibility"
|
||||
bitPasswordInputToggle
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-generate"
|
||||
bitSuffix
|
||||
*ngIf="loginDetailsForm.controls.password.enabled"
|
||||
data-testid="generate-password-button"
|
||||
[appA11yTitle]="'generatePassword' | i18n"
|
||||
[bitAction]="generatePassword"
|
||||
></button>
|
||||
</bit-form-field>
|
||||
|
||||
<bit-form-field *ngIf="hasPasskey">
|
||||
<bit-label>{{ "typePasskey" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
disabled
|
||||
[value]="fido2CredentialCreationDateValue"
|
||||
data-testid="passkey-field"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-minus-circle"
|
||||
buttonType="danger"
|
||||
bitSuffix
|
||||
*ngIf="loginDetailsForm.enabled"
|
||||
[bitAction]="removePasskey"
|
||||
data-testid="remove-passkey-button"
|
||||
[appA11yTitle]="'removePasskey' | i18n"
|
||||
></button>
|
||||
</bit-form-field>
|
||||
|
||||
<bit-form-field>
|
||||
<bit-label>
|
||||
{{ "authenticatorKey" | i18n }}
|
||||
<button
|
||||
bitIconButton="bwi-question-circle"
|
||||
type="button"
|
||||
size="small"
|
||||
[bitPopoverTriggerFor]="totpPopover"
|
||||
></button>
|
||||
<bit-popover #totpPopover [title]="'totpHelperTitle' | i18n">
|
||||
<p>{{ (canCaptureTotp ? "totpHelperWithCapture" : "totpHelper") | i18n }}</p>
|
||||
</bit-popover>
|
||||
</bit-label>
|
||||
<input bitInput formControlName="totp" type="password" />
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton
|
||||
bitSuffix
|
||||
*ngIf="viewHiddenFields"
|
||||
data-testid="toggle-totp-visibility"
|
||||
bitPasswordInputToggle
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
bitIconButton="bwi-camera"
|
||||
bitSuffix
|
||||
*ngIf="canCaptureTotp"
|
||||
data-testid="capture-totp-button"
|
||||
[bitAction]="captureTotp"
|
||||
[appA11yTitle]="'totpCapture' | i18n"
|
||||
></button>
|
||||
</bit-form-field>
|
||||
</bit-card>
|
||||
</bit-section>
|
||||
@@ -0,0 +1,503 @@
|
||||
import { DatePipe } from "@angular/common";
|
||||
import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
|
||||
import { mock, MockProxy } from "jest-mock-extended";
|
||||
|
||||
import { AuditService } from "@bitwarden/common/abstractions/audit.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
|
||||
import { Fido2CredentialView } from "@bitwarden/common/vault/models/view/fido2-credential.view";
|
||||
import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
|
||||
import { ToastService } from "@bitwarden/components";
|
||||
|
||||
import { CipherFormGenerationService } from "../../abstractions/cipher-form-generation.service";
|
||||
import { TotpCaptureService } from "../../abstractions/totp-capture.service";
|
||||
import { CipherFormContainer } from "../../cipher-form-container";
|
||||
|
||||
import { LoginDetailsSectionComponent } from "./login-details-section.component";
|
||||
|
||||
describe("LoginDetailsSectionComponent", () => {
|
||||
let component: LoginDetailsSectionComponent;
|
||||
let fixture: ComponentFixture<LoginDetailsSectionComponent>;
|
||||
|
||||
let cipherFormContainer: MockProxy<CipherFormContainer>;
|
||||
let generationService: MockProxy<CipherFormGenerationService>;
|
||||
let auditService: MockProxy<AuditService>;
|
||||
let toastService: MockProxy<ToastService>;
|
||||
let totpCaptureService: MockProxy<TotpCaptureService>;
|
||||
let i18nService: MockProxy<I18nService>;
|
||||
|
||||
beforeEach(async () => {
|
||||
cipherFormContainer = mock<CipherFormContainer>();
|
||||
|
||||
generationService = mock<CipherFormGenerationService>();
|
||||
auditService = mock<AuditService>();
|
||||
toastService = mock<ToastService>();
|
||||
totpCaptureService = mock<TotpCaptureService>();
|
||||
i18nService = mock<I18nService>();
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [LoginDetailsSectionComponent],
|
||||
providers: [
|
||||
{ provide: CipherFormContainer, useValue: cipherFormContainer },
|
||||
{ provide: CipherFormGenerationService, useValue: generationService },
|
||||
{ provide: AuditService, useValue: auditService },
|
||||
{ provide: ToastService, useValue: toastService },
|
||||
{ provide: TotpCaptureService, useValue: totpCaptureService },
|
||||
{ provide: I18nService, useValue: i18nService },
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(LoginDetailsSectionComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it("registers 'loginDetailsForm' form with CipherFormContainer", () => {
|
||||
expect(cipherFormContainer.registerChildForm).toHaveBeenCalledWith(
|
||||
"loginDetails",
|
||||
component.loginDetailsForm,
|
||||
);
|
||||
});
|
||||
|
||||
it("patches 'loginDetailsForm' changes to CipherFormContainer", () => {
|
||||
component.loginDetailsForm.patchValue({
|
||||
username: "new-username",
|
||||
password: "secret-password",
|
||||
totp: "123456",
|
||||
});
|
||||
|
||||
expect(cipherFormContainer.patchCipher).toHaveBeenLastCalledWith({
|
||||
login: expect.objectContaining({
|
||||
username: "new-username",
|
||||
password: "secret-password",
|
||||
totp: "123456",
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
it("disables 'loginDetailsForm' when in partial-edit mode", async () => {
|
||||
cipherFormContainer.config.mode = "partial-edit";
|
||||
|
||||
await component.ngOnInit();
|
||||
|
||||
expect(component.loginDetailsForm.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("initializes 'loginDetailsForm' with original cipher view values", async () => {
|
||||
(cipherFormContainer.originalCipherView as CipherView) = {
|
||||
viewPassword: true,
|
||||
login: {
|
||||
password: "original-password",
|
||||
username: "original-username",
|
||||
totp: "original-totp",
|
||||
} as LoginView,
|
||||
} as CipherView;
|
||||
|
||||
await component.ngOnInit();
|
||||
|
||||
expect(component.loginDetailsForm.value).toEqual({
|
||||
username: "original-username",
|
||||
password: "original-password",
|
||||
totp: "original-totp",
|
||||
});
|
||||
});
|
||||
|
||||
it("initializes 'loginDetailsForm' with generated password when creating a new cipher", async () => {
|
||||
generationService.generateInitialPassword.mockResolvedValue("generated-password");
|
||||
|
||||
await component.ngOnInit();
|
||||
|
||||
expect(component.loginDetailsForm.controls.password.value).toBe("generated-password");
|
||||
});
|
||||
|
||||
describe("viewHiddenFields", () => {
|
||||
beforeEach(() => {
|
||||
(cipherFormContainer.originalCipherView as CipherView) = {
|
||||
viewPassword: false,
|
||||
login: {
|
||||
password: "original-password",
|
||||
} as LoginView,
|
||||
} as CipherView;
|
||||
});
|
||||
|
||||
it("returns value of originalCipher.viewPassword", () => {
|
||||
(cipherFormContainer.originalCipherView as CipherView).viewPassword = true;
|
||||
|
||||
expect(component.viewHiddenFields).toBe(true);
|
||||
|
||||
(cipherFormContainer.originalCipherView as CipherView).viewPassword = false;
|
||||
|
||||
expect(component.viewHiddenFields).toBe(false);
|
||||
});
|
||||
|
||||
it("returns true when creating a new cipher", () => {
|
||||
(cipherFormContainer.originalCipherView as CipherView) = null;
|
||||
|
||||
expect(component.viewHiddenFields).toBe(true);
|
||||
});
|
||||
|
||||
it("disables the password and totp fields when passwords are hidden for the original cipher", async () => {
|
||||
await component.ngOnInit();
|
||||
|
||||
expect(component.loginDetailsForm.controls.password.disabled).toBe(true);
|
||||
expect(component.loginDetailsForm.controls.totp.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("still provides original values for hidden fields when passwords are hidden", async () => {
|
||||
await component.ngOnInit();
|
||||
|
||||
component.loginDetailsForm.patchValue({
|
||||
username: "new-username",
|
||||
});
|
||||
|
||||
expect(cipherFormContainer.patchCipher).toHaveBeenLastCalledWith({
|
||||
login: expect.objectContaining({
|
||||
username: "new-username",
|
||||
password: "original-password",
|
||||
}),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("username", () => {
|
||||
const getGenerateUsernameBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='generate-username-button']");
|
||||
|
||||
it("should show generate username button when editable", () => {
|
||||
expect(getGenerateUsernameBtn()).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should hide generate username button when not editable", fakeAsync(() => {
|
||||
component.loginDetailsForm.controls.username.disable();
|
||||
fixture.detectChanges();
|
||||
expect(getGenerateUsernameBtn()).toBeNull();
|
||||
}));
|
||||
|
||||
it("should generate a username when the generate username button is clicked", fakeAsync(() => {
|
||||
generationService.generateUsername.mockResolvedValue("generated-username");
|
||||
|
||||
getGenerateUsernameBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
expect(component.loginDetailsForm.controls.username.value).toEqual("generated-username");
|
||||
}));
|
||||
|
||||
it("should not replace an existing username if generation returns null", fakeAsync(() => {
|
||||
generationService.generateUsername.mockResolvedValue(null);
|
||||
|
||||
getGenerateUsernameBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
const usernameSpy = jest.spyOn(component.loginDetailsForm.controls.username, "patchValue");
|
||||
|
||||
expect(usernameSpy).not.toHaveBeenCalled();
|
||||
}));
|
||||
});
|
||||
|
||||
describe("password", () => {
|
||||
const getGeneratePasswordBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='generate-password-button']");
|
||||
|
||||
const getCheckPasswordBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='check-password-button']");
|
||||
|
||||
const getTogglePasswordVisibilityBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='toggle-password-visibility']");
|
||||
|
||||
it("should show the password visibility toggle button based on viewHiddenFields", () => {
|
||||
jest.spyOn(component, "viewHiddenFields", "get").mockReturnValue(true);
|
||||
fixture.detectChanges();
|
||||
expect(getTogglePasswordVisibilityBtn()).not.toBeNull();
|
||||
|
||||
jest.spyOn(component, "viewHiddenFields", "get").mockReturnValue(false);
|
||||
fixture.detectChanges();
|
||||
expect(getTogglePasswordVisibilityBtn()).toBeNull();
|
||||
});
|
||||
|
||||
describe("password generation", () => {
|
||||
it("should show generate password button when editable", () => {
|
||||
expect(getGeneratePasswordBtn()).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should hide generate password button when not editable", fakeAsync(() => {
|
||||
component.loginDetailsForm.controls.password.disable();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getGeneratePasswordBtn()).toBeNull();
|
||||
}));
|
||||
|
||||
it("should generate a password when the generate password button is clicked", fakeAsync(() => {
|
||||
generationService.generatePassword.mockResolvedValue("generated-password");
|
||||
|
||||
getGeneratePasswordBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
expect(component.loginDetailsForm.controls.password.value).toEqual("generated-password");
|
||||
}));
|
||||
|
||||
it("should not replace an existing password if generation returns null", fakeAsync(() => {
|
||||
generationService.generatePassword.mockResolvedValue(null);
|
||||
|
||||
getGeneratePasswordBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
const passwordSpy = jest.spyOn(component.loginDetailsForm.controls.password, "patchValue");
|
||||
|
||||
expect(passwordSpy).not.toHaveBeenCalled();
|
||||
}));
|
||||
});
|
||||
|
||||
describe("password checking", () => {
|
||||
it("should show the password check button when a password is present and editable", () => {
|
||||
component.loginDetailsForm.controls.password.setValue("password");
|
||||
fixture.detectChanges();
|
||||
expect(getCheckPasswordBtn()).not.toBeNull();
|
||||
});
|
||||
|
||||
it("should hide the password check button when the password is missing", () => {
|
||||
component.loginDetailsForm.controls.password.setValue(null);
|
||||
fixture.detectChanges();
|
||||
expect(getCheckPasswordBtn()).toBeNull();
|
||||
});
|
||||
|
||||
it("should hide the password check button when the password is not editable", () => {
|
||||
component.loginDetailsForm.controls.password.disable();
|
||||
fixture.detectChanges();
|
||||
expect(getCheckPasswordBtn()).toBeNull();
|
||||
});
|
||||
|
||||
it("should call checkPassword when the password check button is clicked", fakeAsync(() => {
|
||||
component.checkPassword = jest.fn();
|
||||
component.loginDetailsForm.controls.password.setValue("password");
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
getCheckPasswordBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
expect(component.checkPassword).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
describe("checkPassword", () => {
|
||||
it("should not call the audit service when the password is empty", async () => {
|
||||
component.loginDetailsForm.controls.password.setValue(null);
|
||||
|
||||
await component.checkPassword();
|
||||
|
||||
expect(auditService.passwordLeaked).not.toHaveBeenCalled();
|
||||
expect(toastService.showToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should show a warning toast when the password has been exposed in a data breach", async () => {
|
||||
component.loginDetailsForm.controls.password.setValue("password");
|
||||
auditService.passwordLeaked.mockResolvedValue(1);
|
||||
i18nService.t.mockReturnValue("passwordExposedMsg");
|
||||
|
||||
await component.checkPassword();
|
||||
|
||||
expect(auditService.passwordLeaked).toHaveBeenCalledWith("password");
|
||||
expect(toastService.showToast).toHaveBeenCalledWith({
|
||||
variant: "warning",
|
||||
title: null,
|
||||
message: "passwordExposedMsg",
|
||||
});
|
||||
expect(i18nService.t).toHaveBeenCalledWith("passwordExposed", "1");
|
||||
});
|
||||
|
||||
it("should show a success toast when the password has not been exposed in a data breach", async () => {
|
||||
component.loginDetailsForm.controls.password.setValue("password");
|
||||
auditService.passwordLeaked.mockResolvedValue(0);
|
||||
i18nService.t.mockReturnValue("passwordSafeMsg");
|
||||
|
||||
await component.checkPassword();
|
||||
|
||||
expect(auditService.passwordLeaked).toHaveBeenCalledWith("password");
|
||||
expect(toastService.showToast).toHaveBeenCalledWith({
|
||||
variant: "success",
|
||||
title: null,
|
||||
message: "passwordSafeMsg",
|
||||
});
|
||||
expect(i18nService.t).toHaveBeenCalledWith("passwordSafe");
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("totp", () => {
|
||||
const getToggleTotpVisibilityBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='toggle-totp-visibility']");
|
||||
|
||||
const getCaptureTotpBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='capture-totp-button']");
|
||||
|
||||
it("should show the totp visibility toggle button based on viewHiddenFields", () => {
|
||||
jest.spyOn(component, "viewHiddenFields", "get").mockReturnValue(true);
|
||||
fixture.detectChanges();
|
||||
expect(getToggleTotpVisibilityBtn()).not.toBeNull();
|
||||
|
||||
jest.spyOn(component, "viewHiddenFields", "get").mockReturnValue(false);
|
||||
fixture.detectChanges();
|
||||
expect(getToggleTotpVisibilityBtn()).toBeNull();
|
||||
});
|
||||
|
||||
it("should show the totp capture button based on canCaptureTotp", () => {
|
||||
jest.spyOn(component, "canCaptureTotp", "get").mockReturnValue(true);
|
||||
fixture.detectChanges();
|
||||
expect(getCaptureTotpBtn()).not.toBeNull();
|
||||
|
||||
jest.spyOn(component, "canCaptureTotp", "get").mockReturnValue(false);
|
||||
fixture.detectChanges();
|
||||
expect(getCaptureTotpBtn()).toBeNull();
|
||||
});
|
||||
|
||||
it("should call captureTotp when the capture totp button is clicked", fakeAsync(() => {
|
||||
component.captureTotp = jest.fn();
|
||||
fixture.detectChanges();
|
||||
|
||||
getCaptureTotpBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
expect(component.captureTotp).toHaveBeenCalled();
|
||||
}));
|
||||
|
||||
describe("canCaptureTotp", () => {
|
||||
it("should return true when totpCaptureService is present and totp is editable", () => {
|
||||
component.loginDetailsForm.controls.totp.enable();
|
||||
expect(component.canCaptureTotp).toBe(true);
|
||||
});
|
||||
|
||||
it("should return false when totpCaptureService is missing", () => {
|
||||
(component as any).totpCaptureService = null;
|
||||
expect(component.canCaptureTotp).toBe(false);
|
||||
});
|
||||
|
||||
it("should return false when totp is disabled", () => {
|
||||
component.loginDetailsForm.controls.totp.disable();
|
||||
expect(component.canCaptureTotp).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("captureTotp", () => {
|
||||
it("should not call totpCaptureService.captureTotpSecret when canCaptureTotp is false", async () => {
|
||||
jest.spyOn(component, "canCaptureTotp", "get").mockReturnValue(false);
|
||||
await component.captureTotp();
|
||||
expect(totpCaptureService.captureTotpSecret).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should patch the totp value when totpCaptureService.captureTotpSecret returns a value", async () => {
|
||||
jest.spyOn(component, "canCaptureTotp", "get").mockReturnValue(true);
|
||||
totpCaptureService.captureTotpSecret.mockResolvedValue("some-totp-secret");
|
||||
i18nService.t.mockReturnValue("totpCaptureSuccessMsg");
|
||||
|
||||
await component.captureTotp();
|
||||
|
||||
expect(component.loginDetailsForm.controls.totp.value).toBe("some-totp-secret");
|
||||
expect(toastService.showToast).toHaveBeenCalledWith({
|
||||
variant: "success",
|
||||
title: null,
|
||||
message: "totpCaptureSuccessMsg",
|
||||
});
|
||||
});
|
||||
|
||||
it("should show an error toast when totpCaptureService.captureTotpSecret throws", async () => {
|
||||
jest.spyOn(component, "canCaptureTotp", "get").mockReturnValue(true);
|
||||
totpCaptureService.captureTotpSecret.mockRejectedValue(new Error());
|
||||
i18nService.t.mockReturnValueOnce("errorOccurredMsg");
|
||||
i18nService.t.mockReturnValueOnce("totpCaptureErrorMsg");
|
||||
|
||||
const totpSpy = jest.spyOn(component.loginDetailsForm.controls.totp, "patchValue");
|
||||
|
||||
await component.captureTotp();
|
||||
|
||||
expect(totpSpy).not.toHaveBeenCalled();
|
||||
expect(toastService.showToast).toHaveBeenCalledWith({
|
||||
variant: "error",
|
||||
title: "errorOccurredMsg",
|
||||
message: "totpCaptureErrorMsg",
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("passkeys", () => {
|
||||
const passkeyDate = new Date();
|
||||
const dateSpy = jest
|
||||
.spyOn(DatePipe.prototype, "transform")
|
||||
.mockReturnValue(passkeyDate.toString());
|
||||
|
||||
const getRemovePasskeyBtn = () =>
|
||||
fixture.nativeElement.querySelector("button[data-testid='remove-passkey-button']");
|
||||
|
||||
const getPasskeyField = () =>
|
||||
fixture.nativeElement.querySelector("input[data-testid='passkey-field']");
|
||||
|
||||
beforeEach(() => {
|
||||
(cipherFormContainer.originalCipherView as CipherView) = {
|
||||
login: Object.assign(new LoginView(), {
|
||||
fido2Credentials: [{ creationDate: passkeyDate } as Fido2CredentialView],
|
||||
}),
|
||||
} as CipherView;
|
||||
|
||||
fixture = TestBed.createComponent(LoginDetailsSectionComponent);
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it("renders the passkey field when available", () => {
|
||||
i18nService.t.mockReturnValue("Created");
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
const passkeyField = getPasskeyField();
|
||||
|
||||
expect(passkeyField).not.toBeNull();
|
||||
expect(dateSpy).toHaveBeenLastCalledWith(passkeyDate, "short");
|
||||
expect(passkeyField.value).toBe("Created " + passkeyDate.toString());
|
||||
});
|
||||
|
||||
it("renders the passkey remove button when editable", () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getRemovePasskeyBtn).not.toBeNull();
|
||||
});
|
||||
|
||||
it("does not render the passkey remove button when not editable", () => {
|
||||
cipherFormContainer.config.mode = "partial-edit";
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getRemovePasskeyBtn()).toBeNull();
|
||||
});
|
||||
|
||||
it("hides the passkey field when missing a passkey", () => {
|
||||
(cipherFormContainer.originalCipherView as CipherView).login.fido2Credentials = [];
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getPasskeyField()).toBeNull();
|
||||
});
|
||||
|
||||
it("should remove the passkey when the remove button is clicked", fakeAsync(() => {
|
||||
fixture.detectChanges();
|
||||
|
||||
getRemovePasskeyBtn().click();
|
||||
|
||||
tick();
|
||||
|
||||
expect(cipherFormContainer.patchCipher).toHaveBeenLastCalledWith({
|
||||
login: expect.objectContaining({
|
||||
fido2Credentials: null,
|
||||
}),
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,228 @@
|
||||
import { DatePipe, NgIf } from "@angular/common";
|
||||
import { Component, inject, OnInit, Optional } from "@angular/core";
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
|
||||
import { map } from "rxjs";
|
||||
|
||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
import { AuditService } from "@bitwarden/common/abstractions/audit.service";
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
|
||||
import {
|
||||
AsyncActionsModule,
|
||||
CardComponent,
|
||||
FormFieldModule,
|
||||
IconButtonModule,
|
||||
PopoverModule,
|
||||
SectionComponent,
|
||||
SectionHeaderComponent,
|
||||
ToastService,
|
||||
TypographyModule,
|
||||
} from "@bitwarden/components";
|
||||
|
||||
import { CipherFormGenerationService } from "../../abstractions/cipher-form-generation.service";
|
||||
import { TotpCaptureService } from "../../abstractions/totp-capture.service";
|
||||
import { CipherFormContainer } from "../../cipher-form-container";
|
||||
|
||||
@Component({
|
||||
selector: "vault-login-details-section",
|
||||
templateUrl: "./login-details-section.component.html",
|
||||
standalone: true,
|
||||
imports: [
|
||||
SectionComponent,
|
||||
ReactiveFormsModule,
|
||||
SectionHeaderComponent,
|
||||
TypographyModule,
|
||||
JslibModule,
|
||||
CardComponent,
|
||||
FormFieldModule,
|
||||
IconButtonModule,
|
||||
AsyncActionsModule,
|
||||
NgIf,
|
||||
PopoverModule,
|
||||
],
|
||||
})
|
||||
export class LoginDetailsSectionComponent implements OnInit {
|
||||
loginDetailsForm = this.formBuilder.group({
|
||||
username: [""],
|
||||
password: [""],
|
||||
totp: [""],
|
||||
});
|
||||
|
||||
/**
|
||||
* Whether the TOTP field can be captured from the current tab. Only available in the browser extension.
|
||||
*/
|
||||
get canCaptureTotp() {
|
||||
return this.totpCaptureService != null && this.loginDetailsForm.controls.totp.enabled;
|
||||
}
|
||||
|
||||
private datePipe = inject(DatePipe);
|
||||
|
||||
private loginView: LoginView;
|
||||
|
||||
get hasPasskey(): boolean {
|
||||
return this.loginView?.hasFido2Credentials;
|
||||
}
|
||||
|
||||
get fido2CredentialCreationDateValue(): string {
|
||||
const dateCreated = this.i18nService.t("dateCreated");
|
||||
const creationDate = this.datePipe.transform(
|
||||
this.loginView?.fido2Credentials?.[0]?.creationDate,
|
||||
"short",
|
||||
);
|
||||
return `${dateCreated} ${creationDate}`;
|
||||
}
|
||||
|
||||
get viewHiddenFields() {
|
||||
if (this.cipherFormContainer.originalCipherView) {
|
||||
return this.cipherFormContainer.originalCipherView.viewPassword;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private cipherFormContainer: CipherFormContainer,
|
||||
private formBuilder: FormBuilder,
|
||||
private i18nService: I18nService,
|
||||
private generationService: CipherFormGenerationService,
|
||||
private auditService: AuditService,
|
||||
private toastService: ToastService,
|
||||
@Optional() private totpCaptureService?: TotpCaptureService,
|
||||
) {
|
||||
this.cipherFormContainer.registerChildForm("loginDetails", this.loginDetailsForm);
|
||||
|
||||
this.loginDetailsForm.valueChanges
|
||||
.pipe(
|
||||
takeUntilDestroyed(),
|
||||
// getRawValue() is used as fields can be disabled when passwords are hidden
|
||||
map(() => this.loginDetailsForm.getRawValue()),
|
||||
)
|
||||
.subscribe((value) => {
|
||||
Object.assign(this.loginView, {
|
||||
username: value.username,
|
||||
password: value.password,
|
||||
totp: value.totp,
|
||||
} as LoginView);
|
||||
|
||||
this.cipherFormContainer.patchCipher({
|
||||
login: this.loginView,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.loginView = new LoginView();
|
||||
if (this.cipherFormContainer.originalCipherView?.login) {
|
||||
this.initFromExistingCipher(this.cipherFormContainer.originalCipherView.login);
|
||||
} else {
|
||||
await this.initNewCipher();
|
||||
}
|
||||
|
||||
if (this.cipherFormContainer.config.mode === "partial-edit") {
|
||||
this.loginDetailsForm.disable();
|
||||
}
|
||||
}
|
||||
|
||||
private initFromExistingCipher(existingLogin: LoginView) {
|
||||
// Note: this.loginView will still contain references to the existing login's Uri and Fido2Credential arrays.
|
||||
// We may need to deep clone these in the future.
|
||||
Object.assign(this.loginView, existingLogin);
|
||||
this.loginDetailsForm.patchValue({
|
||||
username: this.loginView.username,
|
||||
password: this.loginView.password,
|
||||
totp: this.loginView.totp,
|
||||
});
|
||||
|
||||
if (!this.viewHiddenFields) {
|
||||
this.loginDetailsForm.controls.password.disable();
|
||||
this.loginDetailsForm.controls.totp.disable();
|
||||
}
|
||||
}
|
||||
|
||||
private async initNewCipher() {
|
||||
this.loginDetailsForm.controls.password.patchValue(
|
||||
await this.generationService.generateInitialPassword(),
|
||||
);
|
||||
}
|
||||
|
||||
captureTotp = async () => {
|
||||
if (!this.canCaptureTotp) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const totp = await this.totpCaptureService.captureTotpSecret();
|
||||
if (totp) {
|
||||
this.loginDetailsForm.controls.totp.patchValue(totp);
|
||||
this.toastService.showToast({
|
||||
variant: "success",
|
||||
title: null,
|
||||
message: this.i18nService.t("totpCaptureSuccess"),
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
this.toastService.showToast({
|
||||
variant: "error",
|
||||
title: this.i18nService.t("errorOccurred"),
|
||||
message: this.i18nService.t("totpCaptureError"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
removePasskey = async () => {
|
||||
// Fido2Credentials do not have a form control, so update directly
|
||||
this.loginView.fido2Credentials = null;
|
||||
this.cipherFormContainer.patchCipher({
|
||||
login: this.loginView,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a new password and update the form.
|
||||
* TODO: Browser extension needs a means to cache the current form so values are not lost upon navigating to the generator.
|
||||
*/
|
||||
generatePassword = async () => {
|
||||
const newPassword = await this.generationService.generatePassword();
|
||||
|
||||
if (newPassword) {
|
||||
this.loginDetailsForm.controls.password.patchValue(newPassword);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a new username and update the form.
|
||||
* TODO: Browser extension needs a means to cache the current form so values are not lost upon navigating to the generator.
|
||||
*/
|
||||
generateUsername = async () => {
|
||||
const newUsername = await this.generationService.generateUsername();
|
||||
if (newUsername) {
|
||||
this.loginDetailsForm.controls.username.patchValue(newUsername);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if the password has been exposed in a data breach using the AuditService.
|
||||
*/
|
||||
checkPassword = async () => {
|
||||
const password = this.loginDetailsForm.controls.password.value;
|
||||
|
||||
if (password == null || password === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
const matches = await this.auditService.passwordLeaked(password);
|
||||
|
||||
if (matches > 0) {
|
||||
this.toastService.showToast({
|
||||
variant: "warning",
|
||||
title: null,
|
||||
message: this.i18nService.t("passwordExposed", matches.toString()),
|
||||
});
|
||||
} else {
|
||||
this.toastService.showToast({
|
||||
variant: "success",
|
||||
title: null,
|
||||
message: this.i18nService.t("passwordSafe"),
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user