[SG-998] and [SG-999] Vault and Autofill team refactor (#4542)

* Move DeprecatedVaultFilterService to vault folder

* [libs] move VaultItemsComponent

* [libs] move AddEditComponent

* [libs] move AddEditCustomFields

* [libs] move attachmentsComponent

* [libs] folderAddEditComponent

* [libs] IconComponent

* [libs] PasswordRepormptComponent

* [libs] PremiumComponent

* [libs] ViewCustomFieldsComponent

* [libs] ViewComponent

* [libs] PasswordRepromptService

* [libs] Move FolderService and FolderApiService abstractions

* [libs] FolderService imports

* [libs] PasswordHistoryComponent

* [libs] move Sync and SyncNotifier abstractions

* [libs] SyncService imports

* [libs] fix file casing for passwordReprompt abstraction

* [libs] SyncNotifier import fix

* [libs] CipherServiceAbstraction

* [libs] PasswordRepromptService abstraction

* [libs] Fix file casing for angular passwordReprompt service

* [libs] fix file casing for SyncNotifierService

* [libs] CipherRepromptType

* [libs] rename CipherRepromptType

* [libs] CipherType

* [libs] Rename CipherType

* [libs] CipherData

* [libs] FolderData

* [libs] PasswordHistoryData

* [libs] AttachmentData

* [libs] CardData

* [libs] FieldData

* [libs] IdentityData

* [libs] LocalData

* [libs] LoginData

* [libs] SecureNoteData

* [libs] LoginUriData

* [libs] Domain classes

* [libs] SecureNote

* [libs] Request models

* [libs] Response models

* [libs] View part 1

* [libs] Views part 2

* [libs] Move folder services

* [libs] Views fixes

* [libs] Move sync services

* [libs] cipher service

* [libs] Types

* [libs] Sync file casing

* [libs] Fix folder service import

* [libs] Move spec files

* [libs] casing fixes on spec files

* [browser] Autofill background, clipboard, commands

* [browser] Fix ContextMenusBackground casing

* [browser] Rename fix

* [browser] Autofill content

* [browser] autofill.js

* [libs] enpass importer spec fix

* [browser] autofill models

* [browser] autofill manifest path updates

* [browser] Autofill notification files

* [browser] autofill services

* [browser] Fix file casing

* [browser] Vault popup loose components

* [browser] Vault components

* [browser] Manifest fixes

* [browser] Vault services

* [cli] vault commands and models

* [browser] File capitilization fixes

* [desktop] Vault components and services

* [web] vault loose components

* [web] Vault components

* [browser] Fix misc-utils import

* [libs] Fix psono spec imports

* [fix] Add comments to address lint rules

libs/common/src/vault/models/view/attachment.view.spec.ts

@@ -0,0 +1,18 @@
+import { mockFromJson } from "../../../../spec/utils";
+import { SymmetricCryptoKey } from "../../../models/domain/symmetric-crypto-key";
+
+import { AttachmentView } from "./attachment.view";
+
+jest.mock("../../../models/domain/symmetric-crypto-key");
+
+describe("AttachmentView", () => {
+  it("fromJSON initializes nested objects", () => {
+    jest.spyOn(SymmetricCryptoKey, "fromJSON").mockImplementation(mockFromJson);
+
+    const actual = AttachmentView.fromJSON({
+      key: "encKeyB64" as any,
+    });
+
+    expect(actual.key).toEqual("encKeyB64_fromJSON");
+  });
+});

libs/common/src/vault/models/view/attachment.view.ts

@@ -0,0 +1,41 @@
+import { Jsonify } from "type-fest";
+
+import { SymmetricCryptoKey } from "../../../models/domain/symmetric-crypto-key";
+import { View } from "../../../models/view/view";
+import { Attachment } from "../domain/attachment";
+
+export class AttachmentView implements View {
+  id: string = null;
+  url: string = null;
+  size: string = null;
+  sizeName: string = null;
+  fileName: string = null;
+  key: SymmetricCryptoKey = null;
+
+  constructor(a?: Attachment) {
+    if (!a) {
+      return;
+    }
+
+    this.id = a.id;
+    this.url = a.url;
+    this.size = a.size;
+    this.sizeName = a.sizeName;
+  }
+
+  get fileSize(): number {
+    try {
+      if (this.size != null) {
+        return parseInt(this.size, null);
+      }
+    } catch {
+      // Invalid file size.
+    }
+    return 0;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<AttachmentView>>): AttachmentView {
+    const key = obj.key == null ? null : SymmetricCryptoKey.fromJSON(obj.key);
+    return Object.assign(new AttachmentView(), obj, { key: key });
+  }
+}

libs/common/src/vault/models/view/card.view.ts

@@ -0,0 +1,84 @@
+import { Jsonify } from "type-fest";
+
+import { CardLinkedId as LinkedId } from "../../../enums/linkedIdType";
+import { linkedFieldOption } from "../../../misc/linkedFieldOption.decorator";
+
+import { ItemView } from "./item.view";
+
+export class CardView extends ItemView {
+  @linkedFieldOption(LinkedId.CardholderName)
+  cardholderName: string = null;
+  @linkedFieldOption(LinkedId.ExpMonth, "expirationMonth")
+  expMonth: string = null;
+  @linkedFieldOption(LinkedId.ExpYear, "expirationYear")
+  expYear: string = null;
+  @linkedFieldOption(LinkedId.Code, "securityCode")
+  code: string = null;
+
+  private _brand: string = null;
+  private _number: string = null;
+  private _subTitle: string = null;
+
+  get maskedCode(): string {
+    return this.code != null ? "•".repeat(this.code.length) : null;
+  }
+
+  get maskedNumber(): string {
+    return this.number != null ? "•".repeat(this.number.length) : null;
+  }
+
+  @linkedFieldOption(LinkedId.Brand)
+  get brand(): string {
+    return this._brand;
+  }
+  set brand(value: string) {
+    this._brand = value;
+    this._subTitle = null;
+  }
+
+  @linkedFieldOption(LinkedId.Number)
+  get number(): string {
+    return this._number;
+  }
+  set number(value: string) {
+    this._number = value;
+    this._subTitle = null;
+  }
+
+  get subTitle(): string {
+    if (this._subTitle == null) {
+      this._subTitle = this.brand;
+      if (this.number != null && this.number.length >= 4) {
+        if (this._subTitle != null && this._subTitle !== "") {
+          this._subTitle += ", ";
+        } else {
+          this._subTitle = "";
+        }
+
+        // Show last 5 on amex, last 4 for all others
+        const count =
+          this.number.length >= 5 && this.number.match(new RegExp("^3[47]")) != null ? 5 : 4;
+        this._subTitle += "*" + this.number.substr(this.number.length - count);
+      }
+    }
+    return this._subTitle;
+  }
+
+  get expiration(): string {
+    if (!this.expMonth && !this.expYear) {
+      return null;
+    }
+
+    let exp = this.expMonth != null ? ("0" + this.expMonth).slice(-2) : "__";
+    exp += " / " + (this.expYear != null ? this.formatYear(this.expYear) : "____");
+    return exp;
+  }
+
+  private formatYear(year: string): string {
+    return year.length === 2 ? "20" + year : year;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<CardView>>): CardView {
+    return Object.assign(new CardView(), obj);
+  }
+}

libs/common/src/vault/models/view/cipher.view.spec.ts

@@ -0,0 +1,76 @@
+import { mockFromJson } from "../../../../spec/utils";
+import { CipherType } from "../../enums/cipher-type";
+
+import { AttachmentView } from "./attachment.view";
+import { CardView } from "./card.view";
+import { CipherView } from "./cipher.view";
+import { FieldView } from "./field.view";
+import { IdentityView } from "./identity.view";
+import { LoginView } from "./login.view";
+import { PasswordHistoryView } from "./password-history.view";
+import { SecureNoteView } from "./secure-note.view";
+
+jest.mock("../../models/view/login.view");
+jest.mock("../../models/view/attachment.view");
+jest.mock("../../models/view/field.view");
+jest.mock("../../models/view/password-history.view");
+
+describe("CipherView", () => {
+  beforeEach(() => {
+    (LoginView as any).mockClear();
+    (AttachmentView as any).mockClear();
+    (FieldView as any).mockClear();
+    (PasswordHistoryView as any).mockClear();
+  });
+
+  describe("fromJSON", () => {
+    it("initializes nested objects", () => {
+      jest.spyOn(AttachmentView, "fromJSON").mockImplementation(mockFromJson);
+      jest.spyOn(FieldView, "fromJSON").mockImplementation(mockFromJson);
+      jest.spyOn(PasswordHistoryView, "fromJSON").mockImplementation(mockFromJson);
+
+      const revisionDate = new Date("2022-08-04T01:06:40.441Z");
+      const deletedDate = new Date("2022-09-04T01:06:40.441Z");
+      const actual = CipherView.fromJSON({
+        revisionDate: revisionDate.toISOString(),
+        deletedDate: deletedDate.toISOString(),
+        attachments: ["attachment1", "attachment2"] as any,
+        fields: ["field1", "field2"] as any,
+        passwordHistory: ["ph1", "ph2", "ph3"] as any,
+      });
+
+      const expected = {
+        revisionDate: revisionDate,
+        deletedDate: deletedDate,
+        attachments: ["attachment1_fromJSON", "attachment2_fromJSON"],
+        fields: ["field1_fromJSON", "field2_fromJSON"],
+        passwordHistory: ["ph1_fromJSON", "ph2_fromJSON", "ph3_fromJSON"],
+      };
+
+      expect(actual).toMatchObject(expected);
+    });
+
+    test.each([
+      // Test description, CipherType, expected output
+      ["LoginView", CipherType.Login, { login: "myLogin_fromJSON" }],
+      ["CardView", CipherType.Card, { card: "myCard_fromJSON" }],
+      ["IdentityView", CipherType.Identity, { identity: "myIdentity_fromJSON" }],
+      ["Secure Note", CipherType.SecureNote, { secureNote: "mySecureNote_fromJSON" }],
+    ])("initializes %s", (description: string, cipherType: CipherType, expected: any) => {
+      jest.spyOn(LoginView, "fromJSON").mockImplementation(mockFromJson);
+      jest.spyOn(IdentityView, "fromJSON").mockImplementation(mockFromJson);
+      jest.spyOn(CardView, "fromJSON").mockImplementation(mockFromJson);
+      jest.spyOn(SecureNoteView, "fromJSON").mockImplementation(mockFromJson);
+
+      const actual = CipherView.fromJSON({
+        login: "myLogin",
+        card: "myCard",
+        identity: "myIdentity",
+        secureNote: "mySecureNote",
+        type: cipherType,
+      } as any);
+
+      expect(actual).toMatchObject(expected);
+    });
+  });
+});

libs/common/src/vault/models/view/cipher.view.ts

@@ -0,0 +1,179 @@
+import { Jsonify } from "type-fest";
+
+import { LinkedIdType } from "../../../enums/linkedIdType";
+import { InitializerMetadata } from "../../../interfaces/initializer-metadata.interface";
+import { View } from "../../../models/view/view";
+import { InitializerKey } from "../../../services/cryptography/initializer-key";
+import { CipherRepromptType } from "../../enums/cipher-reprompt-type";
+import { CipherType } from "../../enums/cipher-type";
+import { LocalData } from "../data/local.data";
+import { Cipher } from "../domain/cipher";
+
+import { AttachmentView } from "./attachment.view";
+import { CardView } from "./card.view";
+import { FieldView } from "./field.view";
+import { IdentityView } from "./identity.view";
+import { LoginView } from "./login.view";
+import { PasswordHistoryView } from "./password-history.view";
+import { SecureNoteView } from "./secure-note.view";
+
+export class CipherView implements View, InitializerMetadata {
+  readonly initializerKey = InitializerKey.CipherView;
+
+  id: string = null;
+  organizationId: string = null;
+  folderId: string = null;
+  name: string = null;
+  notes: string = null;
+  type: CipherType = null;
+  favorite = false;
+  organizationUseTotp = false;
+  edit = false;
+  viewPassword = true;
+  localData: LocalData;
+  login = new LoginView();
+  identity = new IdentityView();
+  card = new CardView();
+  secureNote = new SecureNoteView();
+  attachments: AttachmentView[] = null;
+  fields: FieldView[] = null;
+  passwordHistory: PasswordHistoryView[] = null;
+  collectionIds: string[] = null;
+  revisionDate: Date = null;
+  creationDate: Date = null;
+  deletedDate: Date = null;
+  reprompt: CipherRepromptType = CipherRepromptType.None;
+
+  constructor(c?: Cipher) {
+    if (!c) {
+      return;
+    }
+
+    this.id = c.id;
+    this.organizationId = c.organizationId;
+    this.folderId = c.folderId;
+    this.favorite = c.favorite;
+    this.organizationUseTotp = c.organizationUseTotp;
+    this.edit = c.edit;
+    this.viewPassword = c.viewPassword;
+    this.type = c.type;
+    this.localData = c.localData;
+    this.collectionIds = c.collectionIds;
+    this.revisionDate = c.revisionDate;
+    this.creationDate = c.creationDate;
+    this.deletedDate = c.deletedDate;
+    // Old locally stored ciphers might have reprompt == null. If so set it to None.
+    this.reprompt = c.reprompt ?? CipherRepromptType.None;
+  }
+
+  private get item() {
+    switch (this.type) {
+      case CipherType.Login:
+        return this.login;
+      case CipherType.SecureNote:
+        return this.secureNote;
+      case CipherType.Card:
+        return this.card;
+      case CipherType.Identity:
+        return this.identity;
+      default:
+        break;
+    }
+
+    return null;
+  }
+
+  get subTitle(): string {
+    return this.item.subTitle;
+  }
+
+  get hasPasswordHistory(): boolean {
+    return this.passwordHistory && this.passwordHistory.length > 0;
+  }
+
+  get hasAttachments(): boolean {
+    return this.attachments && this.attachments.length > 0;
+  }
+
+  get hasOldAttachments(): boolean {
+    if (this.hasAttachments) {
+      for (let i = 0; i < this.attachments.length; i++) {
+        if (this.attachments[i].key == null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  get hasFields(): boolean {
+    return this.fields && this.fields.length > 0;
+  }
+
+  get passwordRevisionDisplayDate(): Date {
+    if (this.type !== CipherType.Login || this.login == null) {
+      return null;
+    } else if (this.login.password == null || this.login.password === "") {
+      return null;
+    }
+    return this.login.passwordRevisionDate;
+  }
+
+  get isDeleted(): boolean {
+    return this.deletedDate != null;
+  }
+
+  get linkedFieldOptions() {
+    return this.item.linkedFieldOptions;
+  }
+
+  linkedFieldValue(id: LinkedIdType) {
+    const linkedFieldOption = this.linkedFieldOptions?.get(id);
+    if (linkedFieldOption == null) {
+      return null;
+    }
+
+    const item = this.item;
+    return this.item[linkedFieldOption.propertyKey as keyof typeof item];
+  }
+
+  linkedFieldI18nKey(id: LinkedIdType): string {
+    return this.linkedFieldOptions.get(id)?.i18nKey;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<CipherView>>): CipherView {
+    const view = new CipherView();
+    const revisionDate = obj.revisionDate == null ? null : new Date(obj.revisionDate);
+    const deletedDate = obj.deletedDate == null ? null : new Date(obj.deletedDate);
+    const attachments = obj.attachments?.map((a: any) => AttachmentView.fromJSON(a));
+    const fields = obj.fields?.map((f: any) => FieldView.fromJSON(f));
+    const passwordHistory = obj.passwordHistory?.map((ph: any) => PasswordHistoryView.fromJSON(ph));
+
+    Object.assign(view, obj, {
+      revisionDate: revisionDate,
+      deletedDate: deletedDate,
+      attachments: attachments,
+      fields: fields,
+      passwordHistory: passwordHistory,
+    });
+
+    switch (obj.type) {
+      case CipherType.Card:
+        view.card = CardView.fromJSON(obj.card);
+        break;
+      case CipherType.Identity:
+        view.identity = IdentityView.fromJSON(obj.identity);
+        break;
+      case CipherType.Login:
+        view.login = LoginView.fromJSON(obj.login);
+        break;
+      case CipherType.SecureNote:
+        view.secureNote = SecureNoteView.fromJSON(obj.secureNote);
+        break;
+      default:
+        break;
+    }
+
+    return view;
+  }
+}

libs/common/src/vault/models/view/field.view.ts

@@ -0,0 +1,33 @@
+import { Jsonify } from "type-fest";
+
+import { FieldType } from "../../../enums/fieldType";
+import { LinkedIdType } from "../../../enums/linkedIdType";
+import { View } from "../../../models/view/view";
+import { Field } from "../domain/field";
+
+export class FieldView implements View {
+  name: string = null;
+  value: string = null;
+  type: FieldType = null;
+  newField = false; // Marks if the field is new and hasn't been saved
+  showValue = false;
+  showCount = false;
+  linkedId: LinkedIdType = null;
+
+  constructor(f?: Field) {
+    if (!f) {
+      return;
+    }
+
+    this.type = f.type;
+    this.linkedId = f.linkedId;
+  }
+
+  get maskedValue(): string {
+    return this.value != null ? "••••••••" : null;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<FieldView>>): FieldView {
+    return Object.assign(new FieldView(), obj);
+  }
+}

libs/common/src/vault/models/view/folder.view.spec.ts

@@ -0,0 +1,22 @@
+import { FolderView } from "./folder.view";
+
+describe("FolderView", () => {
+  describe("fromJSON", () => {
+    it("initializes nested objects", () => {
+      const revisionDate = new Date("2022-08-04T01:06:40.441Z");
+      const actual = FolderView.fromJSON({
+        revisionDate: revisionDate.toISOString(),
+        name: "name",
+        id: "id",
+      });
+
+      const expected = {
+        revisionDate: revisionDate,
+        name: "name",
+        id: "id",
+      };
+
+      expect(actual).toMatchObject(expected);
+    });
+  });
+});

libs/common/src/vault/models/view/folder.view.ts

@@ -0,0 +1,25 @@
+import { Jsonify } from "type-fest";
+
+import { ITreeNodeObject } from "../../../models/domain/tree-node";
+import { View } from "../../../models/view/view";
+import { Folder } from "../domain/folder";
+
+export class FolderView implements View, ITreeNodeObject {
+  id: string = null;
+  name: string = null;
+  revisionDate: Date = null;
+
+  constructor(f?: Folder) {
+    if (!f) {
+      return;
+    }
+
+    this.id = f.id;
+    this.revisionDate = f.revisionDate;
+  }
+
+  static fromJSON(obj: Jsonify<FolderView>) {
+    const revisionDate = obj.revisionDate == null ? null : new Date(obj.revisionDate);
+    return Object.assign(new FolderView(), obj, { revisionDate });
+  }
+}

libs/common/src/vault/models/view/identity.view.ts

@@ -0,0 +1,148 @@
+import { Jsonify } from "type-fest";
+
+import { IdentityLinkedId as LinkedId } from "../../../enums/linkedIdType";
+import { linkedFieldOption } from "../../../misc/linkedFieldOption.decorator";
+import { Utils } from "../../../misc/utils";
+
+import { ItemView } from "./item.view";
+
+export class IdentityView extends ItemView {
+  @linkedFieldOption(LinkedId.Title)
+  title: string = null;
+  @linkedFieldOption(LinkedId.MiddleName)
+  middleName: string = null;
+  @linkedFieldOption(LinkedId.Address1)
+  address1: string = null;
+  @linkedFieldOption(LinkedId.Address2)
+  address2: string = null;
+  @linkedFieldOption(LinkedId.Address3)
+  address3: string = null;
+  @linkedFieldOption(LinkedId.City, "cityTown")
+  city: string = null;
+  @linkedFieldOption(LinkedId.State, "stateProvince")
+  state: string = null;
+  @linkedFieldOption(LinkedId.PostalCode, "zipPostalCode")
+  postalCode: string = null;
+  @linkedFieldOption(LinkedId.Country)
+  country: string = null;
+  @linkedFieldOption(LinkedId.Company)
+  company: string = null;
+  @linkedFieldOption(LinkedId.Email)
+  email: string = null;
+  @linkedFieldOption(LinkedId.Phone)
+  phone: string = null;
+  @linkedFieldOption(LinkedId.Ssn)
+  ssn: string = null;
+  @linkedFieldOption(LinkedId.Username)
+  username: string = null;
+  @linkedFieldOption(LinkedId.PassportNumber)
+  passportNumber: string = null;
+  @linkedFieldOption(LinkedId.LicenseNumber)
+  licenseNumber: string = null;
+
+  private _firstName: string = null;
+  private _lastName: string = null;
+  private _subTitle: string = null;
+
+  constructor() {
+    super();
+  }
+
+  @linkedFieldOption(LinkedId.FirstName)
+  get firstName(): string {
+    return this._firstName;
+  }
+  set firstName(value: string) {
+    this._firstName = value;
+    this._subTitle = null;
+  }
+
+  @linkedFieldOption(LinkedId.LastName)
+  get lastName(): string {
+    return this._lastName;
+  }
+  set lastName(value: string) {
+    this._lastName = value;
+    this._subTitle = null;
+  }
+
+  get subTitle(): string {
+    if (this._subTitle == null && (this.firstName != null || this.lastName != null)) {
+      this._subTitle = "";
+      if (this.firstName != null) {
+        this._subTitle = this.firstName;
+      }
+      if (this.lastName != null) {
+        if (this._subTitle !== "") {
+          this._subTitle += " ";
+        }
+        this._subTitle += this.lastName;
+      }
+    }
+
+    return this._subTitle;
+  }
+
+  @linkedFieldOption(LinkedId.FullName)
+  get fullName(): string {
+    if (
+      this.title != null ||
+      this.firstName != null ||
+      this.middleName != null ||
+      this.lastName != null
+    ) {
+      let name = "";
+      if (this.title != null) {
+        name += this.title + " ";
+      }
+      if (this.firstName != null) {
+        name += this.firstName + " ";
+      }
+      if (this.middleName != null) {
+        name += this.middleName + " ";
+      }
+      if (this.lastName != null) {
+        name += this.lastName;
+      }
+      return name.trim();
+    }
+
+    return null;
+  }
+
+  get fullAddress(): string {
+    let address = this.address1;
+    if (!Utils.isNullOrWhitespace(this.address2)) {
+      if (!Utils.isNullOrWhitespace(address)) {
+        address += ", ";
+      }
+      address += this.address2;
+    }
+    if (!Utils.isNullOrWhitespace(this.address3)) {
+      if (!Utils.isNullOrWhitespace(address)) {
+        address += ", ";
+      }
+      address += this.address3;
+    }
+    return address;
+  }
+
+  get fullAddressPart2(): string {
+    if (this.city == null && this.state == null && this.postalCode == null) {
+      return null;
+    }
+    const city = this.city || "-";
+    const state = this.state;
+    const postalCode = this.postalCode || "-";
+    let addressPart2 = city;
+    if (!Utils.isNullOrWhitespace(state)) {
+      addressPart2 += ", " + state;
+    }
+    addressPart2 += ", " + postalCode;
+    return addressPart2;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<IdentityView>>): IdentityView {
+    return Object.assign(new IdentityView(), obj);
+  }
+}

libs/common/src/vault/models/view/item.view.ts

@@ -0,0 +1,7 @@
+import { LinkedMetadata } from "../../../misc/linkedFieldOption.decorator";
+import { View } from "../../../models/view/view";
+
+export abstract class ItemView implements View {
+  linkedFieldOptions: Map<number, LinkedMetadata>;
+  abstract get subTitle(): string;
+}

libs/common/src/vault/models/view/login-uri-view.spec.ts

@@ -0,0 +1,66 @@
+import { UriMatchType } from "../../../enums/uriMatchType";
+
+import { LoginUriView } from "./login-uri.view";
+
+const testData = [
+  {
+    match: UriMatchType.Host,
+    uri: "http://example.com/login",
+    expected: "http://example.com/login",
+  },
+  {
+    match: UriMatchType.Host,
+    uri: "bitwarden.com",
+    expected: "http://bitwarden.com",
+  },
+  {
+    match: UriMatchType.Host,
+    uri: "bitwarden.de",
+    expected: "http://bitwarden.de",
+  },
+  {
+    match: UriMatchType.Host,
+    uri: "bitwarden.br",
+    expected: "http://bitwarden.br",
+  },
+];
+
+describe("LoginUriView", () => {
+  it("isWebsite() given an invalid domain should return false", async () => {
+    const uri = new LoginUriView();
+    Object.assign(uri, { match: UriMatchType.Host, uri: "bit!:_&ward.com" });
+    expect(uri.isWebsite).toBe(false);
+  });
+
+  testData.forEach((data) => {
+    it(`isWebsite() given ${data.uri} should return true`, async () => {
+      const uri = new LoginUriView();
+      Object.assign(uri, { match: data.match, uri: data.uri });
+      expect(uri.isWebsite).toBe(true);
+    });
+
+    it(`launchUri() given ${data.uri} should return ${data.expected}`, async () => {
+      const uri = new LoginUriView();
+      Object.assign(uri, { match: data.match, uri: data.uri });
+      expect(uri.launchUri).toBe(data.expected);
+    });
+
+    it(`canLaunch() given ${data.uri} should return true`, async () => {
+      const uri = new LoginUriView();
+      Object.assign(uri, { match: data.match, uri: data.uri });
+      expect(uri.canLaunch).toBe(true);
+    });
+  });
+
+  it(`canLaunch should return false when MatchDetection is set to Regex`, async () => {
+    const uri = new LoginUriView();
+    Object.assign(uri, { match: UriMatchType.RegularExpression, uri: "bitwarden.com" });
+    expect(uri.canLaunch).toBe(false);
+  });
+
+  it(`canLaunch() should return false when the given protocol does not match CanLaunchWhiteList`, async () => {
+    const uri = new LoginUriView();
+    Object.assign(uri, { match: UriMatchType.Host, uri: "someprotocol://bitwarden.com" });
+    expect(uri.canLaunch).toBe(false);
+  });
+});

libs/common/src/vault/models/view/login-uri.view.ts

@@ -0,0 +1,132 @@
+import { Jsonify } from "type-fest";
+
+import { UriMatchType } from "../../../enums/uriMatchType";
+import { Utils } from "../../../misc/utils";
+import { View } from "../../../models/view/view";
+import { LoginUri } from "../domain/login-uri";
+
+const CanLaunchWhitelist = [
+  "https://",
+  "http://",
+  "ssh://",
+  "ftp://",
+  "sftp://",
+  "irc://",
+  "vnc://",
+  // https://docs.microsoft.com/en-us/windows-server/remote/remote-desktop-services/clients/remote-desktop-uri
+  "rdp://", // Legacy RDP URI scheme
+  "ms-rd:", // Preferred RDP URI scheme
+  "chrome://",
+  "iosapp://",
+  "androidapp://",
+];
+
+export class LoginUriView implements View {
+  match: UriMatchType = null;
+
+  private _uri: string = null;
+  private _domain: string = null;
+  private _hostname: string = null;
+  private _host: string = null;
+  private _canLaunch: boolean = null;
+
+  constructor(u?: LoginUri) {
+    if (!u) {
+      return;
+    }
+
+    this.match = u.match;
+  }
+
+  get uri(): string {
+    return this._uri;
+  }
+  set uri(value: string) {
+    this._uri = value;
+    this._domain = null;
+    this._canLaunch = null;
+  }
+
+  get domain(): string {
+    if (this._domain == null && this.uri != null) {
+      this._domain = Utils.getDomain(this.uri);
+      if (this._domain === "") {
+        this._domain = null;
+      }
+    }
+
+    return this._domain;
+  }
+
+  get hostname(): string {
+    if (this.match === UriMatchType.RegularExpression) {
+      return null;
+    }
+    if (this._hostname == null && this.uri != null) {
+      this._hostname = Utils.getHostname(this.uri);
+      if (this._hostname === "") {
+        this._hostname = null;
+      }
+    }
+
+    return this._hostname;
+  }
+
+  get host(): string {
+    if (this.match === UriMatchType.RegularExpression) {
+      return null;
+    }
+    if (this._host == null && this.uri != null) {
+      this._host = Utils.getHost(this.uri);
+      if (this._host === "") {
+        this._host = null;
+      }
+    }
+
+    return this._host;
+  }
+
+  get hostnameOrUri(): string {
+    return this.hostname != null ? this.hostname : this.uri;
+  }
+
+  get hostOrUri(): string {
+    return this.host != null ? this.host : this.uri;
+  }
+
+  get isWebsite(): boolean {
+    return (
+      this.uri != null &&
+      (this.uri.indexOf("http://") === 0 ||
+        this.uri.indexOf("https://") === 0 ||
+        (this.uri.indexOf("://") < 0 && !Utils.isNullOrWhitespace(Utils.getDomain(this.uri))))
+    );
+  }
+
+  get canLaunch(): boolean {
+    if (this._canLaunch != null) {
+      return this._canLaunch;
+    }
+    if (this.uri != null && this.match !== UriMatchType.RegularExpression) {
+      const uri = this.launchUri;
+      for (let i = 0; i < CanLaunchWhitelist.length; i++) {
+        if (uri.indexOf(CanLaunchWhitelist[i]) === 0) {
+          this._canLaunch = true;
+          return this._canLaunch;
+        }
+      }
+    }
+    this._canLaunch = false;
+    return this._canLaunch;
+  }
+
+  get launchUri(): string {
+    return this.uri.indexOf("://") < 0 && !Utils.isNullOrWhitespace(Utils.getDomain(this.uri))
+      ? "http://" + this.uri
+      : this.uri;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<LoginUriView>>): LoginUriView {
+    return Object.assign(new LoginUriView(), obj);
+  }
+}

libs/common/src/vault/models/view/login.view.spec.ts

@@ -0,0 +1,28 @@
+import { mockFromJson } from "../../../../spec/utils";
+
+import { LoginUriView } from "./login-uri.view";
+import { LoginView } from "./login.view";
+
+jest.mock("../../models/view/login-uri.view");
+
+describe("LoginView", () => {
+  beforeEach(() => {
+    (LoginUriView as any).mockClear();
+  });
+
+  it("fromJSON initializes nested objects", () => {
+    jest.spyOn(LoginUriView, "fromJSON").mockImplementation(mockFromJson);
+
+    const passwordRevisionDate = new Date();
+
+    const actual = LoginView.fromJSON({
+      passwordRevisionDate: passwordRevisionDate.toISOString(),
+      uris: ["uri1", "uri2", "uri3"] as any,
+    });
+
+    expect(actual).toMatchObject({
+      passwordRevisionDate: passwordRevisionDate,
+      uris: ["uri1_fromJSON", "uri2_fromJSON", "uri3_fromJSON"],
+    });
+  });
+});

libs/common/src/vault/models/view/login.view.ts

@@ -0,0 +1,76 @@
+import { Jsonify } from "type-fest";
+
+import { LoginLinkedId as LinkedId } from "../../../enums/linkedIdType";
+import { linkedFieldOption } from "../../../misc/linkedFieldOption.decorator";
+import { Utils } from "../../../misc/utils";
+import { Login } from "../domain/login";
+
+import { ItemView } from "./item.view";
+import { LoginUriView } from "./login-uri.view";
+
+export class LoginView extends ItemView {
+  @linkedFieldOption(LinkedId.Username)
+  username: string = null;
+  @linkedFieldOption(LinkedId.Password)
+  password: string = null;
+
+  passwordRevisionDate?: Date = null;
+  totp: string = null;
+  uris: LoginUriView[] = null;
+  autofillOnPageLoad: boolean = null;
+
+  constructor(l?: Login) {
+    super();
+    if (!l) {
+      return;
+    }
+
+    this.passwordRevisionDate = l.passwordRevisionDate;
+    this.autofillOnPageLoad = l.autofillOnPageLoad;
+  }
+
+  get uri(): string {
+    return this.hasUris ? this.uris[0].uri : null;
+  }
+
+  get maskedPassword(): string {
+    return this.password != null ? "••••••••" : null;
+  }
+
+  get subTitle(): string {
+    return this.username;
+  }
+
+  get canLaunch(): boolean {
+    return this.hasUris && this.uris.some((u) => u.canLaunch);
+  }
+
+  get hasTotp(): boolean {
+    return !Utils.isNullOrWhitespace(this.totp);
+  }
+
+  get launchUri(): string {
+    if (this.hasUris) {
+      const uri = this.uris.find((u) => u.canLaunch);
+      if (uri != null) {
+        return uri.launchUri;
+      }
+    }
+    return null;
+  }
+
+  get hasUris(): boolean {
+    return this.uris != null && this.uris.length > 0;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<LoginView>>): LoginView {
+    const passwordRevisionDate =
+      obj.passwordRevisionDate == null ? null : new Date(obj.passwordRevisionDate);
+    const uris = obj.uris?.map((uri: any) => LoginUriView.fromJSON(uri));
+
+    return Object.assign(new LoginView(), obj, {
+      passwordRevisionDate: passwordRevisionDate,
+      uris: uris,
+    });
+  }
+}

libs/common/src/vault/models/view/password-history.view.spec.ts

@@ -0,0 +1,13 @@
+import { PasswordHistoryView } from "./password-history.view";
+
+describe("PasswordHistoryView", () => {
+  it("fromJSON initializes nested objects", () => {
+    const lastUsedDate = new Date();
+
+    const actual = PasswordHistoryView.fromJSON({
+      lastUsedDate: lastUsedDate.toISOString(),
+    });
+
+    expect(actual.lastUsedDate).toEqual(lastUsedDate);
+  });
+});

libs/common/src/vault/models/view/password-history.view.ts

@@ -0,0 +1,25 @@
+import { Jsonify } from "type-fest";
+
+import { View } from "../../../models/view/view";
+import { Password } from "../domain/password";
+
+export class PasswordHistoryView implements View {
+  password: string = null;
+  lastUsedDate: Date = null;
+
+  constructor(ph?: Password) {
+    if (!ph) {
+      return;
+    }
+
+    this.lastUsedDate = ph.lastUsedDate;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<PasswordHistoryView>>): PasswordHistoryView {
+    const lastUsedDate = obj.lastUsedDate == null ? null : new Date(obj.lastUsedDate);
+
+    return Object.assign(new PasswordHistoryView(), obj, {
+      lastUsedDate: lastUsedDate,
+    });
+  }
+}

libs/common/src/vault/models/view/secure-note.view.ts

@@ -0,0 +1,27 @@
+import { Jsonify } from "type-fest";
+
+import { SecureNoteType } from "../../../enums/secureNoteType";
+import { SecureNote } from "../domain/secure-note";
+
+import { ItemView } from "./item.view";
+
+export class SecureNoteView extends ItemView {
+  type: SecureNoteType = null;
+
+  constructor(n?: SecureNote) {
+    super();
+    if (!n) {
+      return;
+    }
+
+    this.type = n.type;
+  }
+
+  get subTitle(): string {
+    return null;
+  }
+
+  static fromJSON(obj: Partial<Jsonify<SecureNoteView>>): SecureNoteView {
+    return Object.assign(new SecureNoteView(), obj);
+  }
+}