feat(change-password-component): Change Password Update [18720] - Very close to complete.

apps/web/src/app/auth/core/services/login/web-login-component.service.ts

@@ -98,7 +98,7 @@ export class WebLoginComponentService
       const enforcedPasswordPolicyOptions = await firstValueFrom(
         this.accountService.activeAccount$.pipe(
           getUserId,
-          switchMap((userId) => this.policyService.masterPasswordPolicyOptions$(userId)),
+          switchMap((userId) => this.policyService.masterPasswordPolicyOptions$(userId, policies)),
         ),
       );
 

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

@@ -3,7 +3,6 @@
 </div>
 
 <div class="tw-max-w-lg tw-mb-12">
-  <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
   <auth-change-password [inputPasswordFlow]="inputPasswordFlow"></auth-change-password>
 </div>
 

apps/web/src/app/oss-routing.module.ts

@@ -10,6 +10,7 @@ import {
   unauthGuardFn,
   activeAuthGuard,
 } from "@bitwarden/angular/auth/guards";
+import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
 import {
   AnonLayoutWrapperComponent,
   AnonLayoutWrapperData,
@@ -38,7 +39,9 @@ import {
   TwoFactorAuthGuard,
   NewDeviceVerificationComponent,
   DeviceVerificationIcon,
+  ChangePasswordComponent,
 } from "@bitwarden/auth/angular";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { LockComponent } from "@bitwarden/key-management-ui";
 import { VaultIcons } from "@bitwarden/vault";
 
@@ -139,16 +142,54 @@ const routes: Routes = [
         canActivate: [unauthGuardFn()],
         data: { titleId: "deleteOrganization" },
       },
+      {
+        path: "",
+        component: AnonLayoutWrapperComponent,
+        children: [
+          {
+            path: "change-password",
+            children: [
+              {
+                path: "",
+                component: ChangePasswordComponent,
+              },
+            ],
+            data: {
+              pageIcon: LockIcon,
+              pageTitle: { key: "updateMasterPassword" },
+              hideFooter: true,
+              maxWidth: "lg",
+            } satisfies AnonLayoutWrapperData,
+          },
+        ],
+        data: { titleId: "updatePassword" } satisfies RouteDataProperties,
+      },
       {
         path: "update-temp-password",
         component: UpdateTempPasswordComponent,
-        canActivate: [authGuard],
+        canActivate: [
+          canAccessFeature(
+            FeatureFlag.PM16117_ChangeExistingPasswordRefactor,
+            true,
+            "/change-password",
+            false,
+          ),
+          authGuard,
+        ],
         data: { titleId: "updateTempPassword" } satisfies RouteDataProperties,
       },
       {
         path: "update-password",
         component: UpdatePasswordComponent,
-        canActivate: [authGuard],
+        canActivate: [
+          canAccessFeature(
+            FeatureFlag.PM16117_ChangeExistingPasswordRefactor,
+            true,
+            "/change-password",
+            false,
+          ),
+          authGuard,
+        ],
         data: { titleId: "updatePassword" } satisfies RouteDataProperties,
       },
       {

apps/web/src/locales/en/messages.json

@@ -1788,6 +1788,9 @@
   "loggedOutWarning": {
     "message": "Proceeding will log you out of your current session, requiring you to log back in. Active sessions on other devices may continue to remain active for up to one hour."
   },
+  "changePasswordWarning": {
+    "message": "After changing your password, you will need to log in with your new password. Active sessions on other devices will be logged out within one hour."
+  },
   "emailChanged": {
     "message": "Email saved"
   },