From a38fae3051b7815b2a68a4fa1b092d583d102ef3 Mon Sep 17 00:00:00 2001
From: Isaac Ivins <iivins@livefront.com>
Date: Tue, 3 Feb 2026 12:14:00 -0500
Subject: [PATCH] uptated to use Signals and onPush, tests wip

---
 .../src/auth/delete-account.component.html    |  4 +-
 .../src/auth/delete-account.component.ts      | 43 ++++++++-----------
 libs/common/src/enums/feature-flag.enum.ts    |  9 ++++
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/apps/desktop/src/auth/delete-account.component.html b/apps/desktop/src/auth/delete-account.component.html
index f8cc671af82..33bc7f4c92d 100644
--- a/apps/desktop/src/auth/delete-account.component.html
+++ b/apps/desktop/src/auth/delete-account.component.html
@@ -6,11 +6,11 @@
       <bit-callout type="warning" title="{{ 'warning' | i18n }}">
         {{ "deleteAccountWarning" | i18n }}
       </bit-callout>
-      @if (migrationMilestone4) {
+      @if (migrationMilestone4()) {
         <app-user-verification-form-input
           formControlName="verification"
           verificationType="server"
-          [invalidSecret]="invalidSecret"
+          [invalidSecret]="invalidSecret()"
         ></app-user-verification-form-input>
       } @else {
         <!-- Temporary border styles. TODO: Remove when app-user-verification is migrated to the CL. -->
diff --git a/apps/desktop/src/auth/delete-account.component.ts b/apps/desktop/src/auth/delete-account.component.ts
index 82db661c909..e449fb390b2 100644
--- a/apps/desktop/src/auth/delete-account.component.ts
+++ b/apps/desktop/src/auth/delete-account.component.ts
@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
 import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -22,11 +23,10 @@ import {
 
 import { UserVerificationComponent } from "../app/components/user-verification.component";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-delete-account",
   templateUrl: "delete-account.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     JslibModule,
     UserVerificationFormInputComponent,
@@ -38,7 +38,13 @@ import { UserVerificationComponent } from "../app/components/user-verification.c
     ReactiveFormsModule,
   ],
 })
-export class DeleteAccountComponent implements OnInit {
+export class DeleteAccountComponent {
+  private i18nService = inject(I18nService);
+  private formBuilder = inject(FormBuilder);
+  private accountApiService = inject(AccountApiService);
+  private toastService = inject(ToastService);
+  private configService = inject(ConfigService);
+
   deleteForm = this.formBuilder.group({
     verification: undefined as VerificationWithSecret | undefined,
   });
@@ -47,26 +53,15 @@ export class DeleteAccountComponent implements OnInit {
    * Tracks whether the verification failed due to invalid credentials.
    * Used to show inline error messages in the verification component.
    */
-  protected invalidSecret = false;
+  protected readonly invalidSecret = signal(false);
 
   /**
    * Feature flag for UI Migration Milestone 4
    */
-  protected migrationMilestone4 = false;
-
-  constructor(
-    private i18nService: I18nService,
-    private formBuilder: FormBuilder,
-    private accountApiService: AccountApiService,
-    private toastService: ToastService,
-    private configService: ConfigService,
-  ) {}
-
-  async ngOnInit() {
-    this.migrationMilestone4 = await this.configService.getFeatureFlag(
-      FeatureFlag.DesktopUiMigrationMilestone4,
-    );
-  }
+  protected readonly migrationMilestone4 = toSignal(
+    this.configService.getFeatureFlag$(FeatureFlag.DesktopUiMigrationMilestone4),
+    { initialValue: false },
+  );
 
   static open(dialogService: DialogService): DialogRef<DeleteAccountComponent> {
     return dialogService.open(DeleteAccountComponent);
@@ -78,8 +73,8 @@ export class DeleteAccountComponent implements OnInit {
 
   submit = async () => {
     try {
-      if (this.migrationMilestone4) {
-        this.invalidSecret = false;
+      if (this.migrationMilestone4()) {
+        this.invalidSecret.set(false);
       }
       const verification = this.deleteForm.get("verification").value;
       await this.accountApiService.deleteAccount(verification);
@@ -89,8 +84,8 @@ export class DeleteAccountComponent implements OnInit {
         message: this.i18nService.t("accountDeletedDesc"),
       });
     } catch {
-      if (this.migrationMilestone4) {
-        this.invalidSecret = true;
+      if (this.migrationMilestone4()) {
+        this.invalidSecret.set(true);
         this.toastService.showToast({
           variant: "error",
           title: this.i18nService.t("errorOccurred"),
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index e9fd1628ff9..82c8aabf4bf 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -196,6 +196,15 @@ export function getFeatureFlagValue<Flag extends FeatureFlag>(
   serverConfig: ServerConfig | null,
   flag: Flag,
 ) {
+  if (
+    flag === FeatureFlag.DesktopUiMigrationMilestone1 ||
+    flag === FeatureFlag.DesktopUiMigrationMilestone2 ||
+    flag === FeatureFlag.DesktopUiMigrationMilestone3 ||
+    flag === FeatureFlag.DesktopUiMigrationMilestone4
+  ) {
+    // Desktop milestone flags are only read from the server config during desktop app runtime.
+    return true;
+  }
   if (serverConfig?.featureStates == null || serverConfig.featureStates[flag] == null) {
     return DefaultFeatureFlagValue[flag];
   }