From 7eddf8b55af10cfd557eebd658e9e002adb6cfc3 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Wed, 19 Mar 2025 13:07:56 -0700
Subject: [PATCH] setup PasswordSettingsComponent and
 ChangeExistingPasswordComponent

---
 .../password-settings.component.html          | 11 ++++++
 .../password-settings.component.ts            | 15 +++++++
 .../security/security-routing.module.ts       |  9 ++++-
 .../settings/security/security.component.html |  2 +-
 .../change-existing-password.component.html   | 10 +++++
 .../change-existing-password.component.ts     | 39 +++++++++++++++++++
 libs/auth/src/angular/index.ts                |  3 ++
 7 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/app/auth/settings/security/password-settings/password-settings.component.html
 create mode 100644 apps/web/src/app/auth/settings/security/password-settings/password-settings.component.ts
 create mode 100644 libs/auth/src/angular/change-existing-password/change-existing-password.component.html
 create mode 100644 libs/auth/src/angular/change-existing-password/change-existing-password.component.ts

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 @@
+<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>
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 @@
 <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>
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 @@
+<auth-input-password
+  [inputPasswordFlow]="
+    InputPasswordFlow.ChangeExistingPasswordAndOptionallyRotateAccountEncryptionKey
+  "
+  [email]="email"
+  [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
+  [inlineButtons]="true"
+  [primaryButtonText]="{ key: 'changeMasterPassword' }"
+>
+</auth-input-password>
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";