[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
2025-12-19 09:43:23 +00:00 · 2025-12-10 15:24:20 -06:00
parent 93640e65e3
commit fe4895d97e
30 changed files with 496 additions and 206 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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"
  },
--- a/apps/browser/src/key-management/key-connector/remove-password.component.html
+++ b/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>
--- a/apps/browser/src/key-management/key-connector/remove-password.component.ts
+++ b/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 {}
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/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,
--- a/apps/browser/src/popup/app.module.ts
+++ b/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],
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -42,14 +42,17 @@ import {
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { AnonLayoutWrapperComponent, AnonLayoutWrapperData } from "@bitwarden/components";
-import { LockComponent, ConfirmKeyConnectorDomainComponent } from "@bitwarden/key-management-ui";
+import {
+  LockComponent,
+  ConfirmKeyConnectorDomainComponent,
+  RemovePasswordComponent,
+} from "@bitwarden/key-management-ui";

 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
 import { reactiveUnlockVaultGuard } from "../autofill/guards/reactive-vault-guard";
 import { Fido2CreateComponent } from "../autofill/modal/credentials/fido2-create.component";
 import { Fido2ExcludedCiphersComponent } from "../autofill/modal/credentials/fido2-excluded-ciphers.component";
 import { Fido2VaultComponent } from "../autofill/modal/credentials/fido2-vault.component";
-import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { VaultV2Component } from "../vault/app/vault/vault-v2.component";
 import { VaultComponent } from "../vault/app/vault-v3/vault.component";

@@ -117,11 +120,6 @@ const routes: Routes = [
    component: SendComponent,
    canActivate: [authGuard],
  },
-  {
-    path: "remove-password",
-    component: RemovePasswordComponent,
-    canActivate: [authGuard],
-  },
  {
    path: "fido2-assertion",
    component: Fido2VaultComponent,
@@ -327,13 +325,24 @@ const routes: Routes = [
          pageIcon: LockIcon,
        } satisfies AnonLayoutWrapperData,
      },
+      {
+        path: "remove-password",
+        component: RemovePasswordComponent,
+        canActivate: [authGuard],
+        data: {
+          pageTitle: {
+            key: "verifyYourOrganization",
+          },
+          pageIcon: LockIcon,
+        } satisfies RouteDataProperties & AnonLayoutWrapperData,
+      },
      {
        path: "confirm-key-connector-domain",
        component: ConfirmKeyConnectorDomainComponent,
        canActivate: [],
        data: {
          pageTitle: {
-            key: "confirmKeyConnectorDomain",
+            key: "verifyYourOrganization",
          },
          pageIcon: DomainIcon,
        } satisfies RouteDataProperties & AnonLayoutWrapperData,
--- a/apps/desktop/src/app/app.module.ts
+++ b/apps/desktop/src/app/app.module.ts
@@ -15,7 +15,6 @@ import { DeleteAccountComponent } from "../auth/delete-account.component";
 import { LoginModule } from "../auth/login/login.module";
 import { SshAgentService } from "../autofill/services/ssh-agent.service";
 import { PremiumComponent } from "../billing/app/accounts/premium.component";
-import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { VaultFilterModule } from "../vault/app/vault/vault-filter/vault-filter.module";
 import { VaultV2Component } from "../vault/app/vault/vault-v2.component";

@@ -50,7 +49,6 @@ import { SharedModule } from "./shared/shared.module";
    ColorPasswordCountPipe,
    HeaderComponent,
    PremiumComponent,
-    RemovePasswordComponent,
    SearchComponent,
  ],
  providers: [SshAgentService],
--- a/apps/desktop/src/key-management/key-connector/remove-password.component.html
+++ b/apps/desktop/src/key-management/key-connector/remove-password.component.html
@@ -1,20 +0,0 @@
-<div id="remove-password-page" *ngIf="!loading">
-  <div class="content">
-    <h1>{{ "removeMasterPassword" | i18n }}</h1>
-    <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>
-    <div class="buttons">
-      <button type="submit" class="btn primary block" [disabled]="action" (click)="convert()">
-        <b [hidden]="continuing">{{ "removeMasterPassword" | i18n }}</b>
-        <i class="bwi bwi-spinner bwi-spin" [hidden]="!continuing" aria-hidden="true"></i>
-      </button>
-      <button type="button" class="btn secondary block" [disabled]="action" (click)="leave()">
-        <b [hidden]="leaving">{{ "leaveOrganization" | i18n }}</b>
-        <i class="bwi bwi-spinner bwi-spin" [hidden]="!leaving" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-</div>
--- a/apps/desktop/src/key-management/key-connector/remove-password.component.ts
+++ b/apps/desktop/src/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 {}
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2637,9 +2637,6 @@
  "removedMasterPassword": {
    "message": "Master password removed"
  },
-  "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"
  },
@@ -4337,6 +4334,45 @@
  "upgradeToPremium": {
    "message": "Upgrade to Premium"
  },
+  "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"
  },
--- a/apps/web/src/app/key-management/key-connector/remove-password.component.html
+++ b/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>
--- a/apps/web/src/app/key-management/key-connector/remove-password.component.ts
+++ b/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 {}
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/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,
      },
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/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,
--- a/apps/web/src/locales/en/messages.json
+++ b/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"
  },