[PM-21774] Adjust icon and tooltip for protected Sends on the Sends l… (#18293)

* [PM-21774] Adjust icon and tooltip for protected Sends on the Sends list page

* [PM-21774] Update Sent table UI stories

* [PM-21774] Fix Send table UI story

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

@@ -12626,5 +12626,8 @@
   },
   "youHavePremium": {
     "message": "You have Premium"
+  },
+  "emailProtected": {
+    "message": "Email protected"
   }
 }

libs/common/src/tools/send/models/data/send.data.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { AuthType } from "../../types/auth-type";
 import { SendType } from "../../types/send-type";
 import { SendResponse } from "../response/send.response";
 
@@ -10,6 +11,7 @@ export class SendData {
   id: string;
   accessId: string;
   type: SendType;
+  authType: AuthType;
   name: string;
   notes: string;
   file: SendFileData;
@@ -33,6 +35,7 @@ export class SendData {
     this.id = response.id;
     this.accessId = response.accessId;
     this.type = response.type;
+    this.authType = response.authType;
     this.name = response.name;
     this.notes = response.notes;
     this.key = response.key;

libs/common/src/tools/send/models/domain/send.spec.ts

@@ -11,6 +11,7 @@ import { EncryptService } from "../../../../key-management/crypto/abstractions/e
 import { SymmetricCryptoKey } from "../../../../platform/models/domain/symmetric-crypto-key";
 import { ContainerService } from "../../../../platform/services/container.service";
 import { UserKey } from "../../../../types/key";
+import { AuthType } from "../../types/auth-type";
 import { SendType } from "../../types/send-type";
 import { SendData } from "../data/send.data";
 
@@ -25,6 +26,7 @@ describe("Send", () => {
       id: "id",
       accessId: "accessId",
       type: SendType.Text,
+      authType: AuthType.None,
       name: "encName",
       notes: "encNotes",
       text: {
@@ -55,6 +57,7 @@ describe("Send", () => {
       id: null,
       accessId: null,
       type: undefined,
+      authType: undefined,
       name: null,
       notes: null,
       text: undefined,
@@ -78,6 +81,7 @@ describe("Send", () => {
       id: "id",
       accessId: "accessId",
       type: SendType.Text,
+      authType: AuthType.None,
       name: { encryptedString: "encName", encryptionType: 0 },
       notes: { encryptedString: "encNotes", encryptionType: 0 },
       text: {
@@ -107,6 +111,7 @@ describe("Send", () => {
     send.id = "id";
     send.accessId = "accessId";
     send.type = SendType.Text;
+    send.authType = AuthType.None;
     send.name = mockEnc("name");
     send.notes = mockEnc("notes");
     send.text = text;
@@ -145,6 +150,7 @@ describe("Send", () => {
       name: "name",
       notes: "notes",
       type: 0,
+      authType: 2,
       key: expect.anything(),
       cryptoKey: "cryptoKey",
       file: expect.anything(),

libs/common/src/tools/send/models/domain/send.ts

@@ -8,6 +8,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { EncString } from "../../../../key-management/crypto/models/enc-string";
 import { Utils } from "../../../../platform/misc/utils";
 import Domain from "../../../../platform/models/domain/domain-base";
+import { AuthType } from "../../types/auth-type";
 import { SendType } from "../../types/send-type";
 import { SendData } from "../data/send.data";
 import { SendView } from "../view/send.view";
@@ -19,6 +20,7 @@ export class Send extends Domain {
   id: string;
   accessId: string;
   type: SendType;
+  authType: AuthType;
   name: EncString;
   notes: EncString;
   file: SendFile;
@@ -54,6 +56,7 @@ export class Send extends Domain {
     );
 
     this.type = obj.type;
+    this.authType = obj.authType;
     this.maxAccessCount = obj.maxAccessCount;
     this.accessCount = obj.accessCount;
     this.password = obj.password;

libs/common/src/tools/send/models/response/send.response.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { BaseResponse } from "../../../../models/response/base.response";
+import { AuthType } from "../../types/auth-type";
 import { SendType } from "../../types/send-type";
 import { SendFileApi } from "../api/send-file.api";
 import { SendTextApi } from "../api/send-text.api";
@@ -9,6 +10,7 @@ export class SendResponse extends BaseResponse {
   id: string;
   accessId: string;
   type: SendType;
+  authType: AuthType;
   name: string;
   notes: string;
   file: SendFileApi;
@@ -29,6 +31,7 @@ export class SendResponse extends BaseResponse {
     this.id = this.getResponseProperty("Id");
     this.accessId = this.getResponseProperty("AccessId");
     this.type = this.getResponseProperty("Type");
+    this.authType = this.getResponseProperty("AuthType");
     this.name = this.getResponseProperty("Name");
     this.notes = this.getResponseProperty("Notes");
     this.key = this.getResponseProperty("Key");

libs/common/src/tools/send/models/view/send.view.ts

@@ -4,6 +4,7 @@ import { View } from "../../../../models/view/view";
 import { Utils } from "../../../../platform/misc/utils";
 import { SymmetricCryptoKey } from "../../../../platform/models/domain/symmetric-crypto-key";
 import { DeepJsonify } from "../../../../types/deep-jsonify";
+import { AuthType } from "../../types/auth-type";
 import { SendType } from "../../types/send-type";
 import { Send } from "../domain/send";
 
@@ -18,6 +19,7 @@ export class SendView implements View {
   key: Uint8Array;
   cryptoKey: SymmetricCryptoKey;
   type: SendType = null;
+  authType: AuthType = null;
   text = new SendTextView();
   file = new SendFileView();
   maxAccessCount?: number = null;
@@ -38,6 +40,7 @@ export class SendView implements View {
     this.id = s.id;
     this.accessId = s.accessId;
     this.type = s.type;
+    this.authType = s.authType;
     this.maxAccessCount = s.maxAccessCount;
     this.accessCount = s.accessCount;
     this.revisionDate = s.revisionDate;

libs/common/src/tools/send/types/auth-type.ts

@@ -0,0 +1,12 @@
+/** An type of auth necessary to access a Send */
+export const AuthType = Object.freeze({
+  /** Send requires email OTP verification */
+  Email: 0,
+  /** Send requires a password */
+  Password: 1,
+  /** Send requires no auth */
+  None: 2,
+} as const);
+
+/** An type of auth necessary to access a Send */
+export type AuthType = (typeof AuthType)[keyof typeof AuthType];

libs/tools/send/send-ui/src/send-table/send-table.component.html

@@ -33,14 +33,16 @@
               ></i>
               <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
             }
-            @if (s.password) {
+            @if (s.authType !== authType.None) {
+              @let titleKey =
+                s.authType === authType.Email ? "emailProtected" : "passwordProtected";
               <i
-                class="bwi bwi-key"
+                class="bwi bwi-lock"
                 appStopProp
-                title="{{ 'password' | i18n }}"
+                title="{{ titleKey | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="tw-sr-only">{{ "password" | i18n }}</span>
+              <span class="tw-sr-only">{{ titleKey | i18n }}</span>
             }
             @if (s.maxAccessCountReached) {
               <i

libs/tools/send/send-ui/src/send-table/send-table.component.stories.ts

@@ -2,6 +2,7 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { AuthType } from "@bitwarden/common/tools/send/types/auth-type";
 import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { TableDataSource, I18nMockService } from "@bitwarden/components";
 
@@ -13,6 +14,7 @@ function createMockSend(id: number, overrides: Partial<SendView> = {}): SendView
   send.id = `send-${id}`;
   send.name = "My Send";
   send.type = SendType.Text;
+  send.authType = AuthType.None;
   send.deletionDate = new Date("2030-01-01T12:00:00Z");
   send.password = null as any;
 
@@ -34,21 +36,29 @@ dataSource.data = [
   createMockSend(2, {
     name: "Password Protected Send",
     type: SendType.Text,
+    authType: AuthType.Password,
     password: "123",
   }),
   createMockSend(3, {
+    name: "Email Protected Send",
+    type: SendType.Text,
+    authType: AuthType.Email,
+    emails: ["ckent@dailyplanet.com"],
+  }),
+  createMockSend(4, {
     name: "Disabled Send",
     type: SendType.Text,
     disabled: true,
   }),
-  createMockSend(4, {
+  createMockSend(5, {
     name: "Expired Send",
     type: SendType.File,
     expirationDate: new Date("2025-12-01T00:00:00Z"),
   }),
-  createMockSend(5, {
+  createMockSend(6, {
     name: "Max Access Reached",
     type: SendType.Text,
+    authType: AuthType.Password,
     maxAccessCount: 5,
     accessCount: 5,
     password: "123",
@@ -69,7 +79,8 @@ export default {
               deletionDate: "Deletion Date",
               options: "Options",
               disabled: "Disabled",
-              password: "Password",
+              passwordProtected: "Password protected",
+              emailProtected: "Email protected",
               maxAccessCountReached: "Max access count reached",
               expired: "Expired",
               pendingDeletion: "Pending deletion",

libs/tools/send/send-ui/src/send-table/send-table.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, input, output } from "@angular/core
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { AuthType } from "@bitwarden/common/tools/send/types/auth-type";
 import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import {
   BadgeModule,
@@ -37,6 +38,7 @@ import {
 })
 export class SendTableComponent {
   protected readonly sendType = SendType;
+  protected readonly authType = AuthType;
 
   /**
    * The data source containing the Send items to display in the table.