[PM-27663] Create VaultItemTransferModalComponent and confirmation dialogs (#17883)

* Created item transfer dialogs

* Added empty line

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

@@ -5937,5 +5937,53 @@
   },
   "upgrade": {
     "message": "Upgrade"
+  },
+  "leaveConfirmationDialogTitle": {
+    "message": "Are you sure you want to leave?"
+  },
+  "leaveConfirmationDialogContentOne": {
+    "message": "By declining, your personal items will stay in your account, but you'll lose access to shared items and organization features."
+  },
+  "leaveConfirmationDialogContentTwo": {
+    "message": "Contact your admin to regain access."
+  },
+  "leaveConfirmationDialogConfirmButton": {
+    "message": "Leave $ORGANIZATION$",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
+  "howToManageMyVault": {
+    "message": "How do I manage my vault?"
+  },
+  "transferItemsToOrganizationTitle": {
+    "message": "Transfer items to $ORGANIZATION$",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"  
+      }
+    }
+  },
+  "transferItemsToOrganizationContent": {
+    "message": "$ORGANIZATION$ is requiring all items to be owned by the organization for security and compliance. Click accept to transfer ownership of your items.",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"  
+      }
+    }
+  },
+  "acceptTransfer": {
+    "message": "Accept transfer"
+  },
+  "declineAndLeave": {
+    "message": "Decline and leave"
+  },
+  "whyAmISeeingThis": {
+    "message": "Why am I seeing this?"
   }
 }

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

@@ -4383,5 +4383,53 @@
   },
   "upgrade": {
     "message": "Upgrade"
+  },
+  "leaveConfirmationDialogTitle": {
+    "message": "Are you sure you want to leave?"
+  },
+  "leaveConfirmationDialogContentOne": {
+    "message": "By declining, your personal items will stay in your account, but you'll lose access to shared items and organization features."
+  },
+  "leaveConfirmationDialogContentTwo": {
+    "message": "Contact your admin to regain access."
+  },
+  "leaveConfirmationDialogConfirmButton": {
+    "message": "Leave $ORGANIZATION$",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
+   "howToManageMyVault": {
+    "message": "How do I manage my vault?"
+  },
+  "transferItemsToOrganizationTitle": {
+    "message": "Transfer items to $ORGANIZATION$",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"  
+      }
+    }
+  },
+  "transferItemsToOrganizationContent": {
+    "message": "$ORGANIZATION$ is requiring all items to be owned by the organization for security and compliance. Click accept to transfer ownership of your items.",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"  
+      }
+    }
+  },
+  "acceptTransfer": {
+    "message": "Accept transfer"
+  },
+  "declineAndLeave": {
+    "message": "Decline and leave"
+  },
+  "whyAmISeeingThis": {
+    "message": "Why am I seeing this?"
   }
 }

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

@@ -12287,5 +12287,53 @@
   },
   "sessionTimeoutSettingsSetUnlockMethodToChangeTimeoutAction": {
     "message": "Set an unlock method to change your timeout action"
+  },
+  "leaveConfirmationDialogTitle": {
+    "message": "Are you sure you want to leave?"
+  },
+  "leaveConfirmationDialogContentOne": {
+    "message": "By declining, your personal items will stay in your account, but you'll lose access to shared items and organization features."
+  },
+  "leaveConfirmationDialogContentTwo": {
+    "message": "Contact your admin to regain access."
+  },
+  "leaveConfirmationDialogConfirmButton": {
+    "message": "Leave $ORGANIZATION$",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
+   "howToManageMyVault": {
+    "message": "How do I manage my vault?"
+  },
+  "transferItemsToOrganizationTitle": {
+    "message": "Transfer items to $ORGANIZATION$",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"  
+      }
+    }
+  },
+  "transferItemsToOrganizationContent": {
+    "message": "$ORGANIZATION$ is requiring all items to be owned by the organization for security and compliance. Click accept to transfer ownership of your items.",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"  
+      }
+    }
+  },
+  "acceptTransfer": {
+    "message": "Accept transfer"
+  },
+  "declineAndLeave": {
+    "message": "Decline and leave"
+  },
+  "whyAmISeeingThis": {
+    "message": "Why am I seeing this?"
   }
 }

libs/vault/src/components/vault-items-transfer/index.ts

@@ -0,0 +1,13 @@
+export {
+  TransferItemsDialogComponent,
+  TransferItemsDialogParams,
+  TransferItemsDialogResult,
+  TransferItemsDialogResultType,
+} from "./transfer-items-dialog.component";
+
+export {
+  LeaveConfirmationDialogComponent,
+  LeaveConfirmationDialogParams,
+  LeaveConfirmationDialogResult,
+  LeaveConfirmationDialogResultType,
+} from "./leave-confirmation-dialog.component";

libs/vault/src/components/vault-items-transfer/leave-confirmation-dialog.component.html

@@ -0,0 +1,33 @@
+<bit-simple-dialog>
+  <i
+    bitDialogIcon
+    class="bwi bwi-exclamation-triangle tw-text-warning tw-text-3xl"
+    aria-hidden="true"
+  ></i>
+
+  <span bitDialogTitle>{{ "leaveConfirmationDialogTitle" | i18n }}</span>
+
+  <ng-container bitDialogContent>
+    <p bitTypography="body1">
+      {{ "leaveConfirmationDialogContentOne" | i18n }}
+    </p>
+    <p bitTypography="body1">
+      {{ "leaveConfirmationDialogContentTwo" | i18n }}
+    </p>
+  </ng-container>
+
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="dangerPrimary" (click)="confirmLeave()">
+      {{ "leaveConfirmationDialogConfirmButton" | i18n: organizationName }}
+    </button>
+
+    <button bitButton type="button" buttonType="secondary" (click)="goBack()">
+      {{ "goBack" | i18n }}
+    </button>
+
+    <a bitLink href="#" (click)="openLearnMore($event)" class="tw-w-full tw-text-center">
+      {{ "howToManageMyVault" | i18n }}
+      <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
+    </a>
+  </ng-container>
+</bit-simple-dialog>

libs/vault/src/components/vault-items-transfer/leave-confirmation-dialog.component.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
+import {
+  DIALOG_DATA,
+  DialogConfig,
+  DialogRef,
+  DialogService,
+  ButtonModule,
+  DialogModule,
+  LinkModule,
+  TypographyModule,
+} from "@bitwarden/components";
+
+export interface LeaveConfirmationDialogParams {
+  organizationName: string;
+}
+
+export const LeaveConfirmationDialogResult = Object.freeze({
+  /**
+   * User confirmed they want to leave the organization.
+   */
+  Confirmed: "confirmed",
+  /**
+   * User chose to go back instead of leaving the organization.
+   */
+  Back: "back",
+} as const);
+
+export type LeaveConfirmationDialogResultType = UnionOfValues<typeof LeaveConfirmationDialogResult>;
+
+@Component({
+  templateUrl: "./leave-confirmation-dialog.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ButtonModule, DialogModule, LinkModule, TypographyModule, JslibModule],
+})
+export class LeaveConfirmationDialogComponent {
+  private readonly params = inject<LeaveConfirmationDialogParams>(DIALOG_DATA);
+  private readonly dialogRef = inject(DialogRef<LeaveConfirmationDialogResultType>);
+  private readonly platformUtilsService = inject(PlatformUtilsService);
+
+  protected readonly organizationName = this.params.organizationName;
+
+  protected confirmLeave() {
+    this.dialogRef.close(LeaveConfirmationDialogResult.Confirmed);
+  }
+
+  protected goBack() {
+    this.dialogRef.close(LeaveConfirmationDialogResult.Back);
+  }
+
+  protected openLearnMore(e: Event) {
+    e.preventDefault();
+    this.platformUtilsService.launchUri("https://bitwarden.com/help/transfer-ownership/");
+  }
+
+  static open(dialogService: DialogService, config: DialogConfig<LeaveConfirmationDialogParams>) {
+    return dialogService.open<LeaveConfirmationDialogResultType>(LeaveConfirmationDialogComponent, {
+      ...config,
+    });
+  }
+}

libs/vault/src/components/vault-items-transfer/transfer-items-dialog.component.html

@@ -0,0 +1,22 @@
+<bit-simple-dialog hideIcon>
+  <span bitDialogTitle>{{ "transferItemsToOrganizationTitle" | i18n: organizationName }}</span>
+
+  <span bitDialogContent>
+    {{ "transferItemsToOrganizationContent" | i18n: organizationName }}
+  </span>
+
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="primary" (click)="acceptTransfer()">
+      {{ "acceptTransfer" | i18n }}
+    </button>
+
+    <button bitButton type="button" buttonType="secondary" (click)="decline()">
+      {{ "declineAndLeave" | i18n }}
+    </button>
+
+    <a bitLink href="#" (click)="openLearnMore($event)" class="tw-w-full tw-text-center">
+      {{ "whyAmISeeingThis" | i18n }}
+      <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
+    </a>
+  </ng-container>
+</bit-simple-dialog>

libs/vault/src/components/vault-items-transfer/transfer-items-dialog.component.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
+import {
+  DIALOG_DATA,
+  DialogConfig,
+  DialogRef,
+  DialogService,
+  ButtonModule,
+  DialogModule,
+  LinkModule,
+  TypographyModule,
+} from "@bitwarden/components";
+
+export interface TransferItemsDialogParams {
+  organizationName: string;
+}
+
+export const TransferItemsDialogResult = Object.freeze({
+  /**
+   * User accepted the transfer of items.
+   */
+  Accepted: "accepted",
+  /**
+   * User declined the transfer of items.
+   */
+  Declined: "declined",
+} as const);
+
+export type TransferItemsDialogResultType = UnionOfValues<typeof TransferItemsDialogResult>;
+
+@Component({
+  templateUrl: "./transfer-items-dialog.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ButtonModule, DialogModule, LinkModule, TypographyModule, JslibModule],
+})
+export class TransferItemsDialogComponent {
+  private readonly params = inject<TransferItemsDialogParams>(DIALOG_DATA);
+  private readonly dialogRef = inject(DialogRef<TransferItemsDialogResultType>);
+  private readonly platformUtilsService = inject(PlatformUtilsService);
+
+  protected readonly organizationName = this.params.organizationName;
+
+  protected acceptTransfer() {
+    this.dialogRef.close(TransferItemsDialogResult.Accepted);
+  }
+
+  protected decline() {
+    this.dialogRef.close(TransferItemsDialogResult.Declined);
+  }
+
+  protected openLearnMore(e: Event) {
+    e.preventDefault();
+    this.platformUtilsService.launchUri("https://bitwarden.com/help/transfer-ownership/");
+  }
+
+  static open(dialogService: DialogService, config: DialogConfig<TransferItemsDialogParams>) {
+    return dialogService.open<TransferItemsDialogResultType>(TransferItemsDialogComponent, {
+      ...config,
+    });
+  }
+}

libs/vault/src/index.ts

@@ -29,6 +29,7 @@ export * from "./components/add-edit-folder-dialog/add-edit-folder-dialog.compon
 export * from "./components/carousel";
 export * from "./components/new-cipher-menu/new-cipher-menu.component";
 export * from "./components/permit-cipher-details-popover/permit-cipher-details-popover.component";
+export * from "./components/vault-items-transfer";
 
 export { DefaultSshImportPromptService } from "./services/default-ssh-import-prompt.service";
 export { SshImportPromptService } from "./services/ssh-import-prompt.service";