[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/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,

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],

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>

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 {}

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"
   },