diff --git a/apps/web/src/app/auth/settings/security/password-settings/password-settings.component.html b/apps/web/src/app/auth/settings/security/password-settings/password-settings.component.html
new file mode 100644
index 00000000000..f8b9d3c2504
--- /dev/null
+++ b/apps/web/src/app/auth/settings/security/password-settings/password-settings.component.html
@@ -0,0 +1,11 @@
+
+
+{{ "loggedOutWarning" | i18n }}
+
+
+
+
diff --git a/apps/web/src/app/auth/settings/security/password-settings/password-settings.component.ts b/apps/web/src/app/auth/settings/security/password-settings/password-settings.component.ts
new file mode 100644
index 00000000000..ccd7a27a3fb
--- /dev/null
+++ b/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 {}
diff --git a/apps/web/src/app/auth/settings/security/security-routing.module.ts b/apps/web/src/app/auth/settings/security/security-routing.module.ts
index 6ed21605184..f62f8f8e26d 100644
--- a/apps/web/src/app/auth/settings/security/security-routing.module.ts
+++ b/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,
diff --git a/apps/web/src/app/auth/settings/security/security.component.html b/apps/web/src/app/auth/settings/security/security.component.html
index 6bd7c1daf36..28b6855e949 100644
--- a/apps/web/src/app/auth/settings/security/security.component.html
+++ b/apps/web/src/app/auth/settings/security/security.component.html
@@ -1,7 +1,7 @@
- {{ "masterPassword" | i18n }}
+ {{ "masterPassword" | i18n }}
{{ "twoStepLogin" | i18n }}
{{ "devices" | i18n }}
diff --git a/libs/auth/src/angular/change-existing-password/change-existing-password.component.html b/libs/auth/src/angular/change-existing-password/change-existing-password.component.html
new file mode 100644
index 00000000000..389ffbd6b3e
--- /dev/null
+++ b/libs/auth/src/angular/change-existing-password/change-existing-password.component.html
@@ -0,0 +1,10 @@
+
+
diff --git a/libs/auth/src/angular/change-existing-password/change-existing-password.component.ts b/libs/auth/src/angular/change-existing-password/change-existing-password.component.ts
new file mode 100644
index 00000000000..1b37f25d407
--- /dev/null
+++ b/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$(),
+ );
+ }
+}
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index 91d34a34838..fd82a6d142e 100644
--- a/libs/auth/src/angular/index.ts
+++ b/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";