setup PasswordSettingsComponent and ChangeExistingPasswordComponent

apps/web/src/app/auth/settings/security/password-settings/password-settings.component.html

@@ -0,0 +1,11 @@
+<div class="tabbed-header">
+  <h1>{{ "changeMasterPassword" | i18n }}</h1>
+</div>
+
+<bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
+
+<div class="tw-max-w-md tw-mb-12">
+  <auth-change-existing-password></auth-change-existing-password>
+</div>
+
+<app-webauthn-login-settings></app-webauthn-login-settings>

apps/web/src/app/auth/settings/security/password-settings/password-settings.component.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+import { ChangeExistingPasswordComponent } from "@bitwarden/auth/angular";
+import { CalloutModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+import { WebauthnLoginSettingsModule } from "../../webauthn-login-settings";
+
+@Component({
+  standalone: true,
+  selector: "app-password-settings",
+  templateUrl: "password-settings.component.html",
+  imports: [CalloutModule, ChangeExistingPasswordComponent, I18nPipe, WebauthnLoginSettingsModule],
+})
+export class PasswordSettingsComponent {}

apps/web/src/app/auth/settings/security/security-routing.module.ts

@@ -5,6 +5,7 @@ import { ChangePasswordComponent } from "../change-password.component";
 import { TwoFactorSetupComponent } from "../two-factor/two-factor-setup.component";
 
 import { DeviceManagementComponent } from "./device-management.component";
+import { PasswordSettingsComponent } from "./password-settings/password-settings.component";
 import { SecurityKeysComponent } from "./security-keys.component";
 import { SecurityComponent } from "./security.component";
 
@@ -14,12 +15,18 @@ const routes: Routes = [
     component: SecurityComponent,
     data: { titleId: "security" },
     children: [
-      { path: "", pathMatch: "full", redirectTo: "change-password" },
+      // TODO-rr-bw: Feature Flag
+      { path: "", pathMatch: "full", redirectTo: "password" },
       {
         path: "change-password",
         component: ChangePasswordComponent,
         data: { titleId: "masterPassword" },
       },
+      {
+        path: "password",
+        component: PasswordSettingsComponent,
+        data: { titleId: "masterPassword" },
+      },
       {
         path: "two-factor",
         component: TwoFactorSetupComponent,

apps/web/src/app/auth/settings/security/security.component.html

@@ -1,7 +1,7 @@
 <app-header>
   <bit-tab-nav-bar slot="tabs">
     <ng-container *ngIf="showChangePassword">
-      <bit-tab-link route="change-password">{{ "masterPassword" | i18n }}</bit-tab-link>
+      <bit-tab-link route="password">{{ "masterPassword" | i18n }}</bit-tab-link>
     </ng-container>
     <bit-tab-link route="two-factor">{{ "twoStepLogin" | i18n }}</bit-tab-link>
     <bit-tab-link route="device-management">{{ "devices" | i18n }}</bit-tab-link>

libs/auth/src/angular/change-existing-password/change-existing-password.component.html

@@ -0,0 +1,10 @@
+<auth-input-password
+  [inputPasswordFlow]="
+    InputPasswordFlow.ChangeExistingPasswordAndOptionallyRotateAccountEncryptionKey
+  "
+  [email]="email"
+  [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
+  [inlineButtons]="true"
+  [primaryButtonText]="{ key: 'changeMasterPassword' }"
+>
+</auth-input-password>

libs/auth/src/angular/change-existing-password/change-existing-password.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from "@angular/core";
+import { firstValueFrom, map } from "rxjs";
+
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+
+import {
+  InputPasswordComponent,
+  InputPasswordFlow,
+} from "../input-password/input-password.component";
+
+@Component({
+  standalone: true,
+  selector: "auth-change-existing-password",
+  templateUrl: "change-existing-password.component.html",
+  imports: [InputPasswordComponent],
+})
+export class ChangeExistingPasswordComponent implements OnInit {
+  protected InputPasswordFlow = InputPasswordFlow;
+
+  protected email?: string;
+  protected masterPasswordPolicyOptions?: MasterPasswordPolicyOptions;
+
+  constructor(
+    private accountService: AccountService,
+    private policyService: PolicyService,
+  ) {}
+
+  async ngOnInit() {
+    this.email = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(map((a) => a?.email)),
+    );
+
+    this.masterPasswordPolicyOptions = await firstValueFrom(
+      this.policyService.masterPasswordPolicyOptions$(),
+    );
+  }
+}

libs/auth/src/angular/index.ts

@@ -8,6 +8,9 @@ export * from "./anon-layout/anon-layout-wrapper.component";
 export * from "./anon-layout/anon-layout-wrapper-data.service";
 export * from "./anon-layout/default-anon-layout-wrapper-data.service";
 
+// change existing password
+export * from "./change-existing-password/change-existing-password.component";
+
 // fingerprint dialog
 export * from "./fingerprint-dialog/fingerprint-dialog.component";