[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

apps/browser/src/_locales/en/messages.json

@@ -639,6 +639,15 @@
   "totpCapture": {
     "message": "Scan authenticator QR code from current webpage"
   },
+  "totpHelperTitle": {
+    "message": "Make 2-step verification seamless"
+  },
+  "totpHelper": {
+    "message": "Bitwarden can store and fill 2-step verification codes. Copy and paste the key into this field."
+  },
+  "totpHelperWithCapture": {
+    "message": "Bitwarden can store and fill 2-step verification codes. Select the camera icon to take a screenshot of this website's authenticator QR code, or copy and paste the key into this field."
+  },
   "copyTOTP": {
     "message": "Copy Authenticator key (TOTP)"
   },
@@ -3619,6 +3628,12 @@
       }
     }
   },
+  "loginCredentials": {
+    "message": "Login credentials"
+  },
+  "authenticatorKey": {
+    "message": "Authenticator key"
+  },
   "cardDetails": {
     "message": "Card details"
   },

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -16,11 +16,13 @@ import {
   CipherFormMode,
   CipherFormModule,
   DefaultCipherFormConfigService,
+  TotpCaptureService,
 } from "@bitwarden/vault";
 
 import { PopupFooterComponent } from "../../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-page.component";
+import { BrowserTotpCaptureService } from "../../../services/browser-totp-capture.service";
 import { OpenAttachmentsComponent } from "../attachments/open-attachments/open-attachments.component";
 
 /**
@@ -79,7 +81,10 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
   selector: "app-add-edit-v2",
   templateUrl: "add-edit-v2.component.html",
   standalone: true,
-  providers: [{ provide: CipherFormConfigService, useClass: DefaultCipherFormConfigService }],
+  providers: [
+    { provide: CipherFormConfigService, useClass: DefaultCipherFormConfigService },
+    { provide: TotpCaptureService, useClass: BrowserTotpCaptureService },
+  ],
   imports: [
     CommonModule,
     SearchModule,

apps/browser/src/vault/popup/services/browser-totp-capture.service.spec.ts

@@ -0,0 +1,69 @@
+import { TestBed } from "@angular/core/testing";
+import qrcodeParser from "qrcode-parser";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+
+import { BrowserTotpCaptureService } from "./browser-totp-capture.service";
+
+jest.mock("qrcode-parser", () => jest.fn());
+
+const mockQrcodeParser = qrcodeParser as jest.Mock;
+
+describe("BrowserTotpCaptureService", () => {
+  let testBed: TestBed;
+  let service: BrowserTotpCaptureService;
+  let mockCaptureVisibleTab: jest.SpyInstance;
+
+  const validTotpUrl = "otpauth://totp/label?secret=123";
+
+  beforeEach(() => {
+    mockCaptureVisibleTab = jest.spyOn(BrowserApi, "captureVisibleTab");
+    mockCaptureVisibleTab.mockResolvedValue("screenshot");
+
+    testBed = TestBed.configureTestingModule({
+      providers: [BrowserTotpCaptureService],
+    });
+    service = testBed.inject(BrowserTotpCaptureService);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("should call captureVisibleTab and qrcodeParser when captureTotpSecret is called", async () => {
+    mockQrcodeParser.mockResolvedValue({ toString: () => validTotpUrl });
+
+    await service.captureTotpSecret();
+
+    expect(mockCaptureVisibleTab).toHaveBeenCalled();
+    expect(mockQrcodeParser).toHaveBeenCalledWith("screenshot");
+  });
+
+  it("should return the totpUrl when captureTotpSecret is called", async () => {
+    mockQrcodeParser.mockResolvedValue({ toString: () => validTotpUrl });
+
+    const result = await service.captureTotpSecret();
+
+    expect(result).toEqual(validTotpUrl);
+  });
+
+  it("should return null when the URL is not the otpauth: protocol", async () => {
+    mockQrcodeParser.mockResolvedValue({ toString: () => "https://example.com" });
+
+    const result = await service.captureTotpSecret();
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when the URL is missing the secret parameter", async () => {
+    mockQrcodeParser.mockResolvedValue({ toString: () => "otpauth://totp/label" });
+
+    const result = await service.captureTotpSecret();
+
+    expect(result).toBeNull();
+  });
+});

apps/browser/src/vault/popup/services/browser-totp-capture.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+import qrcodeParser from "qrcode-parser";
+
+import { TotpCaptureService } from "@bitwarden/vault";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+
+/**
+ * Implementation of TotpCaptureService for the browser which captures the
+ * TOTP secret from the currently visible tab.
+ */
+@Injectable()
+export class BrowserTotpCaptureService implements TotpCaptureService {
+  async captureTotpSecret() {
+    const screenshot = await BrowserApi.captureVisibleTab();
+    const data = await qrcodeParser(screenshot);
+    const url = new URL(data.toString());
+    if (url.protocol === "otpauth:" && url.searchParams.has("secret")) {
+      return data.toString();
+    }
+    return null;
+  }
+}

apps/web/src/locales/en/messages.json

@@ -42,6 +42,12 @@
   "cardholderName": {
     "message": "Cardholder name"
   },
+  "loginCredentials": {
+    "message": "Login credentials"
+  },
+  "authenticatorKey": {
+    "message": "Authenticator key"
+  },
   "number": {
     "message": "Number"
   },
@@ -138,6 +144,15 @@
   "authenticatorKeyTotp": {
     "message": "Authenticator key (TOTP)"
   },
+  "totpHelperTitle": {
+    "message": "Make 2-step verification seamless"
+  },
+  "totpHelper": {
+    "message": "Bitwarden can store and fill 2-step verification codes. Copy and paste the key into this field."
+  },
+  "totpHelperWithCapture": {
+    "message": "Bitwarden can store and fill 2-step verification codes. Select the camera icon to take a screenshot of this website's authenticator QR code, or copy and paste the key into this field."
+  },
   "folder": {
     "message": "Folder"
   },