update: some upgrade enhancements for the account

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -5,13 +5,13 @@
   [validateOnSubmit]="true"
   class="abp-md-form"
 >
-  @if (!hideCurrentPassword) {
+  @if (!hideCurrentPassword()) {
     <div class="mb-3 form-group">
       <label for="current-password" class="form-label">{{
         'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
-      }}</label
-      ><span> * </span
-      ><input
+      }}</label>
+      <span> * </span>
+      <input
         type="password"
         id="current-password"
         class="form-control"
@@ -24,9 +24,9 @@
   <div class="mb-3 form-group">
     <label for="new-password" class="form-label">{{
       'AbpIdentity::DisplayName:NewPassword' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input
+    }}</label>
+    <span> * </span>
+    <input
       type="password"
       id="new-password"
       class="form-control"
@@ -37,9 +37,9 @@
   <div class="mb-3 form-group">
     <label for="confirm-new-password" class="form-label">{{
       'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input
+    }}</label>
+    <span> * </span>
+    <input
       type="password"
       id="confirm-new-password"
       class="form-control"
@@ -53,6 +53,7 @@
     buttonType="submit"
     [loading]="inProgress()"
     [disabled]="form?.invalid"
-    >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
   >
+    {{ 'AbpIdentity::Save' | abpLocalization }}
+  </abp-button>
 </form>

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts

@@ -1,6 +1,13 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
 import { ButtonComponent, getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, Injector, OnInit, inject, signal } from '@angular/core';
+import {
+  Component,
+  Injector,
+  OnInit,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -18,6 +25,7 @@ const { required } = Validators;
 const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-change-password-form',
   templateUrl: './change-password.component.html',
   exportAs: 'abpChangePasswordForm',
@@ -41,8 +49,7 @@ export class ChangePasswordComponent
   form!: UntypedFormGroup;
 
   readonly inProgress = signal(false);
-
-  hideCurrentPassword?: boolean;
+  readonly hideCurrentPassword = signal(false);
 
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
     if (PASSWORD_FIELDS.indexOf(String(control?.name)) < 0) return errors;
@@ -51,7 +58,7 @@ export class ChangePasswordComponent
   };
 
   ngOnInit(): void {
-    this.hideCurrentPassword = !this.manageProfileState.getProfile()?.hasPassword;
+    this.hideCurrentPassword.set(!this.manageProfileState.getProfile()?.hasPassword);
 
     const passwordValidations = getPasswordValidators(this.injector);
 
@@ -76,7 +83,7 @@ export class ChangePasswordComponent
       },
     );
 
-    if (this.hideCurrentPassword) this.form.removeControl('password');
+    if (this.hideCurrentPassword()) this.form.removeControl('password');
   }
 
   onSubmit() {
@@ -84,7 +91,7 @@ export class ChangePasswordComponent
     this.inProgress.set(true);
     this.profileService
       .changePassword({
-        ...(!this.hideCurrentPassword && { currentPassword: this.form.get('password')?.value }),
+        ...(!this.hideCurrentPassword() && { currentPassword: this.form.get('password')?.value }),
         newPassword: this.form.get('newPassword')?.value,
       })
       .pipe(finalize(() => this.inProgress.set(false)))
@@ -95,8 +102,8 @@ export class ChangePasswordComponent
             life: 5000,
           });
 
-          if (this.hideCurrentPassword) {
-            this.hideCurrentPassword = false;
+          if (this.hideCurrentPassword()) {
+            this.hideCurrentPassword.set(false);
             this.form.addControl('password', new UntypedFormControl('', [required]));
           }
         },

npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html

@@ -1,13 +1,13 @@
 <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
 
-@if (!isEmailSent) {
+@if (!isEmailSent()) {
   <form [formGroup]="form" (ngSubmit)="onSubmit()" [validateOnSubmit]="true">
     <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
     <div class="mb-3 form-group">
       <label for="input-email-address" class="form-label">{{
         'AbpAccount::EmailAddress' | abpLocalization
-      }}</label
-      ><span> * </span>
+      }}</label>
+      <span> * </span>
       <input type="email" id="input-email-address" class="form-control" formControlName="email" />
     </div>
     <abp-button
@@ -19,10 +19,10 @@
     >
       {{ 'AbpAccount::Submit' | abpLocalization }}
     </abp-button>
-    <a routerLink="/account/login"
-      ><i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i
-      >{{ 'AbpAccount::Login' | abpLocalization }}</a
-    >
+    <a routerLink="/account/login">
+      <i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i>
+      {{ 'AbpAccount::Login' | abpLocalization }}
+    </a>
   </form>
 } @else {
   <p>

npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { AccountService } from '@abp/ng.account.core/proxy';
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject, signal, ChangeDetectionStrategy } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -13,6 +13,7 @@ import { RouterLink } from '@angular/router';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-forgot-password',
   templateUrl: 'forgot-password.component.html',
   imports: [
@@ -30,8 +31,7 @@ export class ForgotPasswordComponent {
   form: UntypedFormGroup;
 
   readonly inProgress = signal(false);
-
-  isEmailSent = false;
+  readonly isEmailSent = signal(false);
 
   constructor() {
     this.form = this.fb.group({
@@ -51,7 +51,7 @@ export class ForgotPasswordComponent {
       })
       .pipe(finalize(() => this.inProgress.set(false)))
       .subscribe(() => {
-        this.isEmailSent = true;
+        this.isEmailSent.set(true);
       });
   }
 }

npm/ng-packs/packages/account/src/lib/components/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, Injector, OnInit, inject, signal } from '@angular/core';
+import { Component, Injector, OnInit, inject, signal, ChangeDetectionStrategy } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -22,6 +22,7 @@ import { getRedirectUrl } from '../../utils';
 const { maxLength, required } = Validators;
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-login',
   templateUrl: './login.component.html',
   imports: [

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html

@@ -1,51 +1,65 @@
 <div id="AbpContentToolbar"></div>
-<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)?.userName">
+<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!profile()?.userName">
   <div class="card-body">
     <div class="row">
       <div class="col-12 col-md-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-          @if (!hideChangePasswordTab && (profile$ | async)) {
-          <li class="nav-item" (click)="selectedTab = 0">
-            <a class="nav-link" [class.active]="selectedTab === 0" role="tab" href="javascript:void(0)">{{
-              'AbpUi::ChangePassword' | abpLocalization }}</a>
-          </li>
+          @if (!hideChangePasswordTab() && profile()) {
+            <li class="nav-item" (click)="selectedTab.set(0)">
+              <a
+                class="nav-link"
+                [class.active]="selectedTab() === 0"
+                role="tab"
+                href="javascript:void(0)"
+                >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
+              >
+            </li>
           }
-          <li class="nav-item mb-2" (click)="selectedTab = 1">
-            <a class="nav-link" [class.active]="selectedTab === 1" role="tab" href="javascript:void(0)">{{
-              'AbpAccount::PersonalSettings' | abpLocalization }}</a>
+          <li class="nav-item mb-2" (click)="selectedTab.set(1)">
+            <a
+              class="nav-link"
+              [class.active]="selectedTab() === 1"
+              role="tab"
+              href="javascript:void(0)"
+              >{{ 'AbpAccount::PersonalSettings' | abpLocalization }}</a
+            >
           </li>
         </ul>
       </div>
-      @if (profile$ | async) {
-      <div class="col-12 col-md-9">
-        @if (selectedTab === 0) {
-        <div class="tab-content fade-in">
-          <div class="tab-pane active" role="tabpanel">
-            <h4>
-              {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
-              <hr />
-            </h4>
-            <abp-change-password-form *abpReplaceableTemplate="{
-                    componentKey: changePasswordKey
-                  }"></abp-change-password-form>
-          </div>
-        </div>
-        }
-        @if (selectedTab === 1) {
-        <div class="tab-content fade-in">
-          <div class="tab-pane active" role="tabpanel">
-            <h4>
-              {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
-              <hr />
-            </h4>
-            <abp-personal-settings-form *abpReplaceableTemplate="{
-                    componentKey: personalSettingsKey
-                  }"></abp-personal-settings-form>
-          </div>
+      @if (profile()) {
+        <div class="col-12 col-md-9">
+          @if (selectedTab() === 0) {
+            <div class="tab-content fade-in">
+              <div class="tab-pane active" role="tabpanel">
+                <h4>
+                  {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+                  <hr />
+                </h4>
+                <abp-change-password-form
+                  *abpReplaceableTemplate="{
+                    componentKey: changePasswordKey,
+                  }"
+                />
+              </div>
+            </div>
+          }
+          @if (selectedTab() === 1) {
+            <div class="tab-content fade-in">
+              <div class="tab-pane active" role="tabpanel">
+                <h4>
+                  {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+                  <hr />
+                </h4>
+                <abp-personal-settings-form
+                  *abpReplaceableTemplate="{
+                    componentKey: personalSettingsKey,
+                  }"
+                />
+              </div>
+            </div>
+          }
         </div>
-        }
-      </div>
       }
     </div>
   </div>
-</div>
+</div>

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts

@@ -1,15 +1,16 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
 import { LoadingDirective } from '@abp/ng.theme.shared';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, signal, ChangeDetectionStrategy } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
-import { AsyncPipe } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
 import { PersonalSettingsComponent } from '../personal-settings/personal-settings.component';
 import { ChangePasswordComponent } from '../change-password/change-password.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
   styles: [
@@ -33,35 +34,33 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
     `,
   ],
   imports: [
-    AsyncPipe,
     ReactiveFormsModule,
     PersonalSettingsComponent,
     ChangePasswordComponent,
     LocalizationPipe,
     ReplaceableTemplateDirective,
-    LoadingDirective
+    LoadingDirective,
   ],
 })
 export class ManageProfileComponent implements OnInit {
   protected profileService = inject(ProfileService);
   protected manageProfileState = inject(ManageProfileStateService);
 
-  selectedTab = 0;
+  readonly selectedTab = signal(0);
+  readonly hideChangePasswordTab = signal(false);
+
+  readonly profile = toSignal(this.manageProfileState.getProfile$());
 
   changePasswordKey = eAccountComponents.ChangePassword;
 
   personalSettingsKey = eAccountComponents.PersonalSettings;
 
-  profile$ = this.manageProfileState.getProfile$();
-
-  hideChangePasswordTab?: boolean;
-
   ngOnInit() {
     this.profileService.get().subscribe(profile => {
       this.manageProfileState.setProfile(profile);
       if (profile.isExternal) {
-        this.hideChangePasswordTab = true;
-        this.selectedTab = 1;
+        this.hideChangePasswordTab.set(true);
+        this.selectedTab.set(1);
       }
     });
   }

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import {
   EXTENSIONS_FORM_PROP,
   FormProp,
@@ -8,6 +8,7 @@ import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { LocalizationPipe } from '@abp/ng.core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-personal-settings-half-row',
   template: ` <div class="w-50 d-inline">
     <label [attr.for]="name" class="form-label">{{ displayName | abpLocalization }} </label>

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts

@@ -5,8 +5,16 @@ import {
   ConfirmationService,
   ToasterService,
 } from '@abp/ng.theme.shared';
-import { Component, inject, Injector, OnInit, signal } from '@angular/core';
+import {
+  Component,
+  inject,
+  Injector,
+  OnInit,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { finalize, filter } from 'rxjs/operators';
 import { Account } from '../../models/account';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
@@ -19,9 +27,9 @@ import {
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
 import { eAccountComponents } from '../../enums';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-personal-settings-form',
   templateUrl: './personal-settings.component.html',
   exportAs: 'abpPersonalSettingsForm',

npm/ng-packs/packages/account/src/lib/components/register/register.component.ts

@@ -6,7 +6,14 @@ import {
   LocalizationPipe,
 } from '@abp/ng.core';
 import { ButtonComponent, getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, Injector, OnInit, inject, signal } from '@angular/core';
+import {
+  Component,
+  Injector,
+  OnInit,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -23,6 +30,7 @@ import { RouterLink } from '@angular/router';
 const { maxLength, required, email } = Validators;
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-register',
   templateUrl: './register.component.html',
   imports: [

npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.html

@@ -1,44 +1,51 @@
 <h4>{{ 'AbpAccount::ResetPassword' | abpLocalization }}</h4>
 
-@if (!isPasswordReset) {
-  <form
-    [formGroup]="form"
-    [mapErrorsFn]="mapErrorsFn"
-    (ngSubmit)="onSubmit()"
-    [validateOnSubmit]="true"
-  >
-    <p>{{ 'AbpAccount::ResetPassword_Information' | abpLocalization }}</p>
-    <div class="mb-3 form-group">
-      <label for="input-password" class="form-label">{{
-        'AbpAccount::Password' | abpLocalization
-      }}</label
-      ><span> * </span>
-      <input type="password" id="input-password" class="form-control" formControlName="password" />
-    </div>
-    <div class="mb-3 form-group">
-      <label for="input-confirm-password" class="form-label">{{
-        'AbpAccount::ConfirmPassword' | abpLocalization
-      }}</label
-      ><span> * </span>
-      <input
-        type="password"
-        id="input-confirm-password"
-        class="form-control"
-        formControlName="confirmPassword"
-      />
-    </div>
-    <button class="me-2 btn btn-outline-primary" type="button" routerLink="/account/login">
-      {{ 'AbpAccount::Cancel' | abpLocalization }}
-    </button>
-    <abp-button
-      buttonType="submit"
-      buttonClass="me-2 btn btn-primary"
-      [loading]="inProgress()"
-      (click)="onSubmit()"
+@if (!isPasswordReset()) {
+  @if (form) {
+    <form
+      [formGroup]="form"
+      [mapErrorsFn]="mapErrorsFn"
+      (ngSubmit)="onSubmit()"
+      [validateOnSubmit]="true"
     >
-      {{ 'AbpAccount::Submit' | abpLocalization }}
-    </abp-button>
-  </form>
+      <p>{{ 'AbpAccount::ResetPassword_Information' | abpLocalization }}</p>
+      <div class="mb-3 form-group">
+        <label for="input-password" class="form-label">{{
+          'AbpAccount::Password' | abpLocalization
+        }}</label>
+        <span> * </span>
+        <input
+          type="password"
+          id="input-password"
+          class="form-control"
+          formControlName="password"
+        />
+      </div>
+      <div class="mb-3 form-group">
+        <label for="input-confirm-password" class="form-label">{{
+          'AbpAccount::ConfirmPassword' | abpLocalization
+        }}</label>
+        <span> * </span>
+        <input
+          type="password"
+          id="input-confirm-password"
+          class="form-control"
+          formControlName="confirmPassword"
+        />
+      </div>
+      <button class="me-2 btn btn-outline-primary" type="button" routerLink="/account/login">
+        {{ 'AbpAccount::Cancel' | abpLocalization }}
+      </button>
+      <abp-button
+        buttonType="submit"
+        buttonClass="me-2 btn btn-primary"
+        [loading]="inProgress()"
+        (click)="onSubmit()"
+      >
+        {{ 'AbpAccount::Submit' | abpLocalization }}
+      </abp-button>
+    </form>
+  }
 } @else {
   <p>
     {{ 'AbpAccount::YourPasswordIsSuccessfullyReset' | abpLocalization }}

npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.ts

@@ -1,6 +1,14 @@
 import { AccountService } from '@abp/ng.account.core/proxy';
 import { ButtonComponent, getPasswordValidators } from '@abp/ng.theme.shared';
-import { Component, Injector, OnInit, inject, signal } from '@angular/core';
+import {
+  Component,
+  effect,
+  Injector,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -15,6 +23,7 @@ import { LocalizationPipe } from '@abp/ng.core';
 const PASSWORD_FIELDS = ['password', 'confirmPassword'];
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-reset-password',
   templateUrl: './reset-password.component.html',
   imports: [
@@ -25,18 +34,19 @@ const PASSWORD_FIELDS = ['password', 'confirmPassword'];
     ButtonComponent,
   ],
 })
-export class ResetPasswordComponent implements OnInit {
+export class ResetPasswordComponent {
   private fb = inject(UntypedFormBuilder);
   private accountService = inject(AccountService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private injector = inject(Injector);
 
+  private readonly queryParams = toSignal(this.route.queryParams);
+
   form!: UntypedFormGroup;
 
   readonly inProgress = signal(false);
-
-  isPasswordReset = false;
+  readonly isPasswordReset = signal(false);
 
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
     if (PASSWORD_FIELDS.indexOf(String(control?.name)) < 0) return errors;
@@ -44,9 +54,16 @@ export class ResetPasswordComponent implements OnInit {
     return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
   };
 
-  ngOnInit(): void {
-    this.route.queryParams.subscribe(({ userId, resetToken }) => {
-      if (!userId || !resetToken) this.router.navigateByUrl('/account/login');
+  constructor() {
+    effect(() => {
+      const params = this.queryParams();
+      if (!params) return;
+
+      const { userId, resetToken } = params;
+      if (!userId || !resetToken) {
+        void this.router.navigateByUrl('/account/login');
+        return;
+      }
 
       this.form = this.fb.group(
         {
@@ -75,7 +92,7 @@ export class ResetPasswordComponent implements OnInit {
       })
       .pipe(finalize(() => this.inProgress.set(false)))
       .subscribe(() => {
-        this.isPasswordReset = true;
+        this.isPasswordReset.set(true);
       });
   }
 }