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>