update: account package for the latest upgrade (state management and html properties)

npm/ng-packs/packages/account/project.json

@@ -31,7 +31,7 @@
       "executor": "@nx/vitest:test",
       "outputs": ["{options.reportsDirectory}"],
       "options": {
-        "reportsDirectory": "../../coverage/packages/account"
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/account"
       }
     }
   }

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

@@ -1,4 +1,10 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" [validateOnSubmit]="true" class="abp-md-form">
+<form
+  [formGroup]="form"
+  (ngSubmit)="onSubmit()"
+  [mapErrorsFn]="mapErrorsFn"
+  [validateOnSubmit]="true"
+  class="abp-md-form"
+>
   @if (!hideCurrentPassword) {
     <div class="mb-3 form-group">
       <label for="current-password" class="form-label">{{
@@ -45,7 +51,7 @@
     iconClass="fa fa-check"
     buttonClass="btn btn-primary color-white"
     buttonType="submit"
-    [loading]="inProgress"
+    [loading]="inProgress()"
     [disabled]="form?.invalid"
     >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
   >

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

@@ -1,6 +1,6 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
 import { ButtonComponent, getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, Injector, OnInit, inject } from '@angular/core';
+import { Component, Injector, OnInit, inject, signal } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -40,7 +40,7 @@ export class ChangePasswordComponent
 
   form!: UntypedFormGroup;
 
-  inProgress?: boolean;
+  readonly inProgress = signal(false);
 
   hideCurrentPassword?: boolean;
 
@@ -81,13 +81,13 @@ export class ChangePasswordComponent
 
   onSubmit() {
     if (this.form.invalid) return;
-    this.inProgress = true;
+    this.inProgress.set(true);
     this.profileService
       .changePassword({
         ...(!this.hideCurrentPassword && { currentPassword: this.form.get('password')?.value }),
         newPassword: this.form.get('newPassword')?.value,
       })
-      .pipe(finalize(() => (this.inProgress = false)))
+      .pipe(finalize(() => this.inProgress.set(false)))
       .subscribe({
         next: () => {
           this.form.reset();

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

@@ -13,7 +13,7 @@
     <abp-button
       class="d-block"
       buttonClass="mt-2 mb-3 btn btn-primary btn-block"
-      [loading]="inProgress"
+      [loading]="inProgress()"
       buttonType="submit"
       [disabled]="form?.invalid"
     >

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 } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -29,7 +29,7 @@ export class ForgotPasswordComponent {
 
   form: UntypedFormGroup;
 
-  inProgress?: boolean;
+  readonly inProgress = signal(false);
 
   isEmailSent = false;
 
@@ -42,14 +42,14 @@ export class ForgotPasswordComponent {
   onSubmit() {
     if (this.form.invalid) return;
 
-    this.inProgress = true;
+    this.inProgress.set(true);
 
     this.accountService
       .sendPasswordResetCode({
         email: this.form.get('email')?.value,
         appName: 'Angular',
       })
-      .pipe(finalize(() => (this.inProgress = false)))
+      .pipe(finalize(() => this.inProgress.set(false)))
       .subscribe(() => {
         this.isEmailSent = true;
       });

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

@@ -7,7 +7,7 @@
     }}</a>
   </strong>
 }
-<form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
+<form [formGroup]="form" (ngSubmit)="onSubmit()" [validateOnSubmit]="true" class="mt-4">
   <div class="mb-3 form-group">
     <label for="login-input-user-name-or-email-address" class="form-label">{{
       'AbpAccount::UserNameOrEmailAddress' | abpLocalization
@@ -56,7 +56,7 @@
   </div>
 
   <abp-button
-    [loading]="inProgress"
+    [loading]="inProgress()"
     buttonType="submit"
     name="Action"
     buttonClass="btn-block btn-lg mt-3 btn btn-primary"

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

@@ -1,4 +1,4 @@
-import { Component, Injector, OnInit, inject } from '@angular/core';
+import { Component, Injector, OnInit, inject, signal } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -42,7 +42,7 @@ export class LoginComponent implements OnInit {
 
   form!: UntypedFormGroup;
 
-  inProgress?: boolean;
+  readonly inProgress = signal(false);
 
   isSelfRegistrationEnabled = true;
 
@@ -71,7 +71,7 @@ export class LoginComponent implements OnInit {
   onSubmit() {
     if (this.form.invalid) return;
 
-    this.inProgress = true;
+    this.inProgress.set(true);
 
     const { username, password, rememberMe } = this.form.value;
 
@@ -88,9 +88,9 @@ export class LoginComponent implements OnInit {
             '',
             { life: 7000 },
           );
-          return throwError(err);
+          return throwError(() => err);
         }),
-        finalize(() => (this.inProgress = false)),
+        finalize(() => this.inProgress.set(false)),
       )
       .subscribe();
   }

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

@@ -1,14 +1,14 @@
 @if (form) {
-  <form [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit class="abp-md-form">
+  <form [formGroup]="form" (ngSubmit)="submit()" [validateOnSubmit]="true" class="abp-md-form">
-    <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+    <abp-extensible-form [selectedRecord]="selected" />
-  
+
     <abp-button
       buttonType="submit"
       iconClass="fa fa-check"
       buttonClass="btn btn-primary color-white"
-      [loading]="inProgress"
+      [loading]="inProgress()"
-    >
-      {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
     >
+      {{ 'AbpIdentity::Save' | abpLocalization }}
+    </abp-button>
   </form>
 }

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

@@ -5,7 +5,7 @@ import {
   ConfirmationService,
   ToasterService,
 } from '@abp/ng.theme.shared';
-import { Component, inject, Injector, OnInit } from '@angular/core';
+import { Component, inject, Injector, OnInit, signal } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { finalize, filter } from 'rxjs/operators';
 import { Account } from '../../models/account';
@@ -61,7 +61,7 @@ export class PersonalSettingsComponent
 
   form!: UntypedFormGroup;
 
-  inProgress?: boolean;
+  readonly inProgress = signal(false);
 
   buildForm() {
     this.selected = this.manageProfileState.getProfile();
@@ -80,10 +80,10 @@ export class PersonalSettingsComponent
     if (this.form.invalid) return;
     const isLogOutConfirmMessageVisible = this.isLogoutConfirmMessageActive();
     const isRefreshTokenExists = this.authService.getRefreshToken();
-    this.inProgress = true;
+    this.inProgress.set(true);
     this.profileService
       .update(this.form.value)
-      .pipe(finalize(() => (this.inProgress = false)))
+      .pipe(finalize(() => this.inProgress.set(false)))
       .subscribe(profile => {
         this.manageProfileState.setProfile(profile);
         this.configState.refreshAppState();

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

@@ -6,12 +6,7 @@
   }}</a>
 </strong>
 @if (isSelfRegistrationEnabled) {
-  <form
+  <form [formGroup]="form" (ngSubmit)="onSubmit()" [validateOnSubmit]="true" class="mt-4">
-    [formGroup]="form"
-    (ngSubmit)="onSubmit()"
-    validateOnSubmit
-    class="mt-4"
-  >
     <div class="mb-3 form-group">
       <label for="input-user-name" class="form-label">{{
         'AbpAccount::UserName' | abpLocalization
@@ -47,7 +42,7 @@
       />
     </div>
     <abp-button
-      [loading]="inProgress"
+      [loading]="inProgress()"
       buttonType="submit"
       name="Action"
       buttonClass="btn-block btn-lg mt-3 btn btn-primary"

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

@@ -6,7 +6,7 @@ import {
   LocalizationPipe,
 } from '@abp/ng.core';
 import { ButtonComponent, getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, Injector, OnInit, inject } from '@angular/core';
+import { Component, Injector, OnInit, inject, signal } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -44,7 +44,7 @@ export class RegisterComponent implements OnInit {
 
   form!: UntypedFormGroup;
 
-  inProgress?: boolean;
+  readonly inProgress = signal(false);
 
   isSelfRegistrationEnabled = true;
 
@@ -84,7 +84,7 @@ export class RegisterComponent implements OnInit {
   onSubmit() {
     if (this.form.invalid) return;
 
-    this.inProgress = true;
+    this.inProgress.set(true);
 
     const newUser = {
       userName: this.form.get('username')?.value,
@@ -114,7 +114,7 @@ export class RegisterComponent implements OnInit {
 
           return throwError(err);
         }),
-        finalize(() => (this.inProgress = false)),
+        finalize(() => this.inProgress.set(false)),
       )
       .subscribe();
   }

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

@@ -1,7 +1,12 @@
 <h4>{{ 'AbpAccount::ResetPassword' | abpLocalization }}</h4>
 
 @if (!isPasswordReset) {
-  <form [formGroup]="form" [mapErrorsFn]="mapErrorsFn" (ngSubmit)="onSubmit()" validateOnSubmit>
+  <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">{{
@@ -28,7 +33,7 @@
     <abp-button
       buttonType="submit"
       buttonClass="me-2 btn btn-primary"
-      [loading]="inProgress"
+      [loading]="inProgress()"
       (click)="onSubmit()"
     >
       {{ 'AbpAccount::Submit' | abpLocalization }}

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

@@ -1,6 +1,6 @@
 import { AccountService } from '@abp/ng.account.core/proxy';
 import { ButtonComponent, getPasswordValidators } from '@abp/ng.theme.shared';
-import { Component, Injector, OnInit, inject } from '@angular/core';
+import { Component, Injector, OnInit, inject, signal } from '@angular/core';
 import {
   ReactiveFormsModule,
   UntypedFormBuilder,
@@ -34,7 +34,7 @@ export class ResetPasswordComponent implements OnInit {
 
   form!: UntypedFormGroup;
 
-  inProgress = false;
+  readonly inProgress = signal(false);
 
   isPasswordReset = false;
 
@@ -63,9 +63,9 @@ export class ResetPasswordComponent implements OnInit {
   }
 
   onSubmit() {
-    if (this.form.invalid || this.inProgress) return;
+    if (this.form.invalid || this.inProgress()) return;
 
-    this.inProgress = true;
+    this.inProgress.set(true);
 
     this.accountService
       .resetPassword({
@@ -73,7 +73,7 @@ export class ResetPasswordComponent implements OnInit {
         resetToken: this.form.get('resetToken')?.value,
         password: this.form.get('password')?.value,
       })
-      .pipe(finalize(() => (this.inProgress = false)))
+      .pipe(finalize(() => this.inProgress.set(false)))
       .subscribe(() => {
         this.isPasswordReset = true;
       });