[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/browser/src/_locales/en/messages.json

@@ -3252,9 +3252,6 @@
   "copyCustomFieldNameNotUnique": {
     "message": "No unique identifier found."
   },
-  "removeMasterPasswordForOrganizationUserKeyConnector": {
-    "message": "A master password is no longer required for members of the following organization. Please confirm the domain below with your organization administrator."
-  },
   "organizationName": {
     "message": "Organization name"
   },
@@ -5891,6 +5888,45 @@
   "cardNumberLabel": {
     "message": "Card number"
   },
+  "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."
+  },
   "sessionTimeoutSettingsAction": {
     "message": "Timeout action"
   },

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

@@ -1,51 +0,0 @@
-<popup-page>
-  <popup-header slot="header" pageTitle="{{ 'removeMasterPassword' | i18n }}">
-    <ng-container slot="end">
-      <app-pop-out></app-pop-out>
-    </ng-container>
-  </popup-header>
-
-  @if (loading) {
-    <div 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>
-  } @else {
-    <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
-      type="button"
-      bitButton
-      buttonType="primary"
-      block
-      (click)="convert()"
-      [disabled]="action"
-      class="tw-mb-2"
-    >
-      <i
-        class="bwi bwi-spinner bwi-spin"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-        *ngIf="continuing"
-      ></i>
-      {{ "removeMasterPassword" | i18n }}
-    </button>
-
-    <button type="button" bitButton block (click)="leave()" [disabled]="action">
-      <i
-        class="bwi bwi-spinner bwi-spin"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-        *ngIf="leaving"
-      ></i>
-      {{ "leaveOrganization" | i18n }}
-    </button>
-  }
-</popup-page>

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

@@ -1,14 +0,0 @@
-// FIXME (PM-22628): angular imports are forbidden in background
-// eslint-disable-next-line no-restricted-imports
-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/browser/src/popup/app-routing.module.ts

@@ -43,7 +43,11 @@ import {
   TwoFactorAuthGuard,
 } from "@bitwarden/auth/angular";
 import { AnonLayoutWrapperComponent, AnonLayoutWrapperData } from "@bitwarden/components";
-import { LockComponent, ConfirmKeyConnectorDomainComponent } from "@bitwarden/key-management-ui";
+import {
+  LockComponent,
+  ConfirmKeyConnectorDomainComponent,
+  RemovePasswordComponent,
+} from "@bitwarden/key-management-ui";
 
 import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
 import { AuthExtensionRoute } from "../auth/popup/constants/auth-extension-route.constant";
@@ -59,7 +63,6 @@ import { NotificationsSettingsComponent } from "../autofill/popup/settings/notif
 import { PremiumV2Component } from "../billing/popup/settings/premium-v2.component";
 import { PhishingWarning } from "../dirt/phishing-detection/popup/phishing-warning.component";
 import { ProtectedByComponent } from "../dirt/phishing-detection/popup/protected-by-component";
-import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import BrowserPopupUtils from "../platform/browser/browser-popup-utils";
 import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
 import { RouteCacheOptions } from "../platform/services/popup-view-cache-background.service";
@@ -188,9 +191,22 @@ const routes: Routes = [
   },
   {
     path: "remove-password",
-    component: RemovePasswordComponent,
+    component: ExtensionAnonLayoutWrapperComponent,
     canActivate: [authGuard],
     data: { elevation: 1 } satisfies RouteDataProperties,
+    children: [
+      {
+        path: "",
+        component: RemovePasswordComponent,
+        data: {
+          pageTitle: {
+            key: "verifyYourOrganization",
+          },
+          showBackButton: false,
+          pageIcon: LockIcon,
+        } satisfies ExtensionAnonLayoutWrapperData,
+      },
+    ],
   },
   {
     path: "view-cipher",
@@ -646,7 +662,7 @@ const routes: Routes = [
         component: ConfirmKeyConnectorDomainComponent,
         data: {
           pageTitle: {
-            key: "confirmKeyConnectorDomain",
+            key: "verifyYourOrganization",
           },
           showBackButton: true,
           pageIcon: DomainIcon,

apps/browser/src/popup/app.module.ts

@@ -28,7 +28,6 @@ import { CurrentAccountComponent } from "../auth/popup/account-switching/current
 import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
 import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
 import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
-import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { PopOutComponent } from "../platform/popup/components/pop-out.component";
 import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../platform/popup/layout/popup-header.component";
@@ -85,13 +84,7 @@ import "../platform/popup/locales";
     CalloutModule,
     LinkModule,
   ],
-  declarations: [
-    AppComponent,
-    ColorPasswordPipe,
-    ColorPasswordCountPipe,
-    TabsV2Component,
-    RemovePasswordComponent,
-  ],
+  declarations: [AppComponent, ColorPasswordPipe, ColorPasswordCountPipe, TabsV2Component],
   exports: [CalloutModule],
   providers: [CurrencyPipe, DatePipe],
   bootstrap: [AppComponent],