From e08a35b3de947aea493d2f9f6253c42a8776f90f Mon Sep 17 00:00:00 2001
From: Quentin <quentin.monmert@gmail.com>
Date: Sat, 11 Jan 2025 15:00:08 +0100
Subject: [PATCH] [Angular] Migrate to signal (password-strength-bar component)

---
 .../password-strength-bar.component.ts.ejs    | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/generators/angular/templates/src/main/webapp/app/account/password/password-strength-bar/password-strength-bar.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/account/password/password-strength-bar/password-strength-bar.component.ts.ejs
index 48adb649eae8..f25950c4568e 100644
--- a/generators/angular/templates/src/main/webapp/app/account/password/password-strength-bar/password-strength-bar.component.ts.ejs
+++ b/generators/angular/templates/src/main/webapp/app/account/password/password-strength-bar/password-strength-bar.component.ts.ejs
@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Component, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import { Component, ElementRef, Renderer2, effect, inject, input } from '@angular/core';
 
 import SharedModule from 'app/shared/shared.module';
 
@@ -27,11 +27,34 @@ import SharedModule from 'app/shared/shared.module';
   styleUrl: './password-strength-bar.component.scss',
 })
 export default class PasswordStrengthBarComponent {
+  passwordToCheck = input<string>('');
+
   colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
 
   private readonly renderer = inject(Renderer2);
   private readonly elementRef = inject(ElementRef);
 
+  constructor() {
+    effect(() => {
+      const password = this.passwordToCheck();
+      if (password) {
+        const c = this.getColor(this.measureStrength(password));
+        const element = this.elementRef.nativeElement;
+        if (element.className) {
+          this.renderer.removeClass(element, element.className);
+        }
+        const lis = element.getElementsByTagName('li');
+        for (let i = 0; i < lis.length; i++) {
+          if (i < c.idx) {
+            this.renderer.setStyle(lis[i], 'backgroundColor', c.color);
+          } else {
+            this.renderer.setStyle(lis[i], 'backgroundColor', '#DDD');
+          }
+        }
+      }
+    });
+  }
+
   measureStrength(p: string): number {
     let force = 0;
     const regex = /[$-/:-?{-~!"^_`[\]]/g; // "
@@ -72,23 +95,4 @@ export default class PasswordStrengthBarComponent {
     }
     return { idx: idx + 1, color: this.colors[idx] };
   }
-
-  @Input()
-  set passwordToCheck(password: string) {
-    if (password) {
-      const c = this.getColor(this.measureStrength(password));
-      const element = this.elementRef.nativeElement;
-      if (element.className) {
-        this.renderer.removeClass(element, element.className);
-      }
-      const lis = element.getElementsByTagName('li');
-      for (let i = 0; i < lis.length; i++) {
-        if (i < c.idx) {
-          this.renderer.setStyle(lis[i], 'backgroundColor', c.color);
-        } else {
-          this.renderer.setStyle(lis[i], 'backgroundColor', '#DDD');
-        }
-      }
-    }
-  }
 }