[PM-28264] Consolidate and update the UI for key connector migration/confirmation (#17642)

* Consolidate the RemovePasswordComponent

* Add getting confirmation details for confirm key connector

* Add missing message

apps/web/src/app/key-management/key-connector/remove-password.component.html

@@ -1,37 +0,0 @@
-<div *ngIf="loading" class="tw-text-center">
-  <i
-    class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-</div>
-
-<div *ngIf="!loading">
-  <p>{{ "removeMasterPasswordForOrganizationUserKeyConnector" | i18n }}</p>
-  <p class="tw-mb-0">{{ "organizationName" | i18n }}:</p>
-  <p class="tw-text-muted tw-mb-6">{{ organization.name }}</p>
-  <p class="tw-mb-0">{{ "keyConnectorDomain" | i18n }}:</p>
-  <p class="tw-text-muted tw-mb-6">{{ organization.keyConnectorUrl }}</p>
-
-  <button
-    bitButton
-    type="button"
-    buttonType="primary"
-    class="tw-w-full tw-mb-2"
-    [bitAction]="convert"
-    [block]="true"
-  >
-    {{ "removeMasterPassword" | i18n }}
-  </button>
-  <button
-    bitButton
-    type="button"
-    buttonType="secondary"
-    class="tw-w-full"
-    [bitAction]="leave"
-    [block]="true"
-  >
-    {{ "leaveOrganization" | i18n }}
-  </button>
-</div>

apps/web/src/app/key-management/key-connector/remove-password.component.ts

@@ -1,12 +0,0 @@
-import { Component } from "@angular/core";
-
-import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/key-management-ui";
-
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-@Component({
-  selector: "app-remove-password",
-  templateUrl: "remove-password.component.html",
-  standalone: false,
-})
-export class RemovePasswordComponent extends BaseRemovePasswordComponent {}

apps/web/src/app/oss-routing.module.ts

@@ -51,7 +51,7 @@ import {
 import { canAccessEmergencyAccess } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { AnonLayoutWrapperComponent, AnonLayoutWrapperData } from "@bitwarden/components";
-import { LockComponent } from "@bitwarden/key-management-ui";
+import { LockComponent, RemovePasswordComponent } from "@bitwarden/key-management-ui";
 import { premiumInterestRedirectGuard } from "@bitwarden/web-vault/app/vault/guards/premium-interest-redirect/premium-interest-redirect.guard";
 
 import { flagEnabled, Flags } from "../utils/flags";
@@ -80,7 +80,6 @@ import { RouteDataProperties } from "./core";
 import { ReportsModule } from "./dirt/reports";
 import { DataRecoveryComponent } from "./key-management/data-recovery/data-recovery.component";
 import { ConfirmKeyConnectorDomainComponent } from "./key-management/key-connector/confirm-key-connector-domain.component";
-import { RemovePasswordComponent } from "./key-management/key-connector/remove-password.component";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
 import { UserLayoutComponent } from "./layouts/user-layout.component";
 import { RequestSMAccessComponent } from "./secrets-manager/secrets-manager-landing/request-sm-access.component";
@@ -545,9 +544,9 @@ const routes: Routes = [
         canActivate: [authGuard],
         data: {
           pageTitle: {
-            key: "removeMasterPassword",
+            key: "verifyYourOrganization",
           },
-          titleId: "removeMasterPassword",
+          titleId: "verifyYourOrganization",
           pageIcon: LockIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
@@ -557,9 +556,9 @@ const routes: Routes = [
         canActivate: [],
         data: {
           pageTitle: {
-            key: "confirmKeyConnectorDomain",
+            key: "verifyYourOrganization",
           },
-          titleId: "confirmKeyConnectorDomain",
+          titleId: "verifyYourOrganization",
           pageIcon: DomainIcon,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },

apps/web/src/app/shared/loose-components.module.ts

@@ -7,7 +7,6 @@ import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.comp
 import { FreeBitwardenFamiliesComponent } from "../billing/members/free-bitwarden-families.component";
 import { SponsoredFamiliesComponent } from "../billing/settings/sponsored-families.component";
 import { SponsoringOrgRowComponent } from "../billing/settings/sponsoring-org-row.component";
-import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { HeaderModule } from "../layouts/header/header.module";
 import { OrganizationBadgeModule } from "../vault/individual-vault/organization-badge/organization-badge.module";
 import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
@@ -21,7 +20,6 @@ import { SharedModule } from "./shared.module";
   declarations: [
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
-    RemovePasswordComponent,
     SponsoredFamiliesComponent,
     FreeBitwardenFamiliesComponent,
     SponsoringOrgRowComponent,
@@ -31,7 +29,6 @@ import { SharedModule } from "./shared.module";
   exports: [
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
-    RemovePasswordComponent,
     SponsoredFamiliesComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,

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

@@ -7136,9 +7136,6 @@
   "invalidVerificationCode": {
     "message": "Invalid verification code"
   },
-  "removeMasterPasswordForOrganizationUserKeyConnector": {
-    "message": "A master password is no longer required for members of the following organization. Please confirm the domain below with your organization administrator."
-  },
   "keyConnectorDomain": {
     "message": "Key Connector domain"
   },
@@ -12247,6 +12244,45 @@
       }
     }
   },
+  "removeMasterPasswordForOrgUserKeyConnector":{
+    "message": "Your organization is no longer using master passwords to log into Bitwarden. To continue, verify the organization and domain."
+  },
+  "continueWithLogIn": {
+    "message": "Continue with log in"
+  },
+  "doNotContinue": {
+    "message": "Do not continue"
+  },
+  "domain": {
+    "message": "Domain"
+  },
+  "keyConnectorDomainTooltip": {
+    "message": "This domain will store your account encryption keys, so make sure you trust it. If you're not sure, check with your admin."
+  },
+  "verifyYourOrganization": {
+    "message": "Verify your organization to log in"
+  },
+  "organizationVerified":{
+    "message": "Organization verified"
+  },
+  "domainVerified":{
+    "message": "Domain verified"
+  },
+  "leaveOrganizationContent": {
+    "message": "If you don't verify your organization, your access to the organization will be revoked."
+  },
+  "leaveNow": {
+    "message": "Leave now"
+  },
+  "verifyYourDomainToLogin": {
+    "message": "Verify your domain to log in"
+  },
+  "verifyYourDomainDescription": {
+    "message": "To continue with log in, verify this domain."
+  },
+  "confirmKeyConnectorOrganizationUserDescription": {
+    "message": "To continue with log in, verify the organization and domain."
+  },
   "confirmNoSelectedCriticalApplicationsTitle": {
     "message": "No critical applications are selected"
   },