refactor(all)

npm/ng-packs/packages/core/src/lib/services/profile.service.ts

@@ -28,13 +28,13 @@ export class ProfileService {
     return this.rest.request<Profile.Response, Profile.Response>(request);
   }
 
-  changePassword(body: Profile.ChangePasswordRequest): Observable<null> {
+  changePassword(body: Profile.ChangePasswordRequest, throwErr: boolean = false): Observable<null> {
     const request: Rest.Request<Profile.ChangePasswordRequest> = {
       method: 'POST',
-      url: '/api/identity/my-profile/changePassword',
+      url: '/api/identity/my-profile/change-password',
       body,
     };
 
-    return this.rest.request<Profile.ChangePasswordRequest, null>(request);
+    return this.rest.request<Profile.ChangePasswordRequest, null>(request, { throwErr });
   }
 }

npm/ng-packs/packages/core/src/lib/states/profile.state.ts

@@ -40,6 +40,6 @@ export class ProfileState {
 
   @Action(ProfileChangePassword)
   changePassword(_, { payload }: ProfileChangePassword) {
-    return this.profileService.changePassword(payload);
+    return this.profileService.changePassword(payload, true);
   }
 }

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -77,8 +77,8 @@ export class UsersComponent implements OnInit {
         [
           Validators.required,
           Validators.maxLength(32),
-          Validators.minLength(6),
+          // Validators.minLength(6),
-          validatePassword(['small', 'capital', 'number', 'special']),
+          // validatePassword(['small', 'capital', 'number', 'special']),
         ],
       ],
       userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]],

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

@@ -11,8 +11,10 @@ import {
   ViewChild,
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { comparePasswords, validatePassword } from '@ngx-validate/core';
+import { comparePasswords, validatePassword, Validation } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
+import snq from 'snq';
+import { ToasterService } from '@abp/ng.theme.shared';
 
 const { minLength, required } = Validators;
 
@@ -41,14 +43,17 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   form: FormGroup;
 
-  constructor(private fb: FormBuilder, private store: Store) {}
+  constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
 
   ngOnInit(): void {
     this.form = this.fb.group(
       {
-        password: ['', [required, minLength(6), validatePassword(['small', 'capital', 'number', 'special'])]],
+        password: ['', [required /* minLength(6), validatePassword(['small', 'capital', 'number', 'special']) */]],
-        newPassword: ['', [required, minLength(6), validatePassword(['small', 'capital', 'number', 'special'])]],
+        newPassword: ['', [required /* minLength(6), validatePassword(['small', 'capital', 'number', 'special']) */]],
-        repeatNewPassword: ['', [required, minLength(6), validatePassword(['small', 'capital', 'number', 'special'])]],
+        repeatNewPassword: [
+          '',
+          [required /* minLength(6), validatePassword(['small', 'capital', 'number', 'special']) */],
+        ],
       },
       {
         validators: [comparePasswords(['newPassword', 'repeatNewPassword'])],
@@ -66,8 +71,16 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
           newPassword: this.form.get('newPassword').value,
         }),
       )
-      .subscribe(() => {
+      .subscribe({
-        this.visible = false;
+        next: () => {
+          this.visible = false;
+          this.form.reset();
+        },
+        error: err => {
+          this.toasterService.error(snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'), 'Error', {
+            life: 7000,
+          });
+        },
       });
   }
 

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts

@@ -57,6 +57,7 @@ export class ProfileComponent implements OnChanges {
 
     this.store.dispatch(new ProfileUpdate(this.form.value)).subscribe(() => {
       this.visible = false;
+      this.form.reset();
     });
   }
 

npm/ng-packs/packages/theme-shared/package.json

@@ -5,7 +5,7 @@
     "@abp/ng.core": "^0.8.0",
     "@angular/cdk": "^8.0.1",
     "@ng-bootstrap/ng-bootstrap": "^5.1.0",
-    "@ngx-validate/core": "^0.0.1",
+    "@ngx-validate/core": "^0.0.4",
     "bootstrap": "^4.3.1",
     "font-awesome": "^4.7.0",
     "ngx-perfect-scrollbar": "^8.0.0",

npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts

@@ -11,14 +11,14 @@ import { Component, Renderer2, ElementRef } from '@angular/core';
         <div class="col-md-12">
           <div class="error-template">
             <h1>
-              {{ title }}
+              {{ title | abpLocalization }}
             </h1>
             <div class="error-details">
-              {{ details }}
+              {{ details | abpLocalization }}
             </div>
             <div class="error-actions">
-              <a routerLink="/" class="btn btn-primary btn-md mt-2"
+              <a (click)="destroy()" routerLink="/" class="btn btn-primary btn-md mt-2"
-                ><span class="glyphicon glyphicon-home"></span> Take me home
+                ><span class="glyphicon glyphicon-home"></span> {{ '::Menu:Home' | abpLocalization }}
               </a>
             </div>
           </div>

npm/ng-packs/packages/theme-shared/src/lib/components/errors/validation-error.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-validate/core';
+
+@Component({
+  selector: 'abp-validation-error',
+  template: `
+    <div class="invalid-feedback" *ngFor="let error of abpErrors; trackBy: trackByFn">
+      {{ error.message | abpLocalization: error.interpoliteParams }}
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ValidationErrorComponent extends ErrorComponent {
+  get abpErrors(): Validation.Error[] & { interpoliteParams?: string[] } {
+    return this.validationErrors.map(error => {
+      if (!error.message) return error;
+
+      const index = error.message.indexOf('[');
+
+      if (index > -1) {
+        return {
+          ...error,
+          message: error.message.slice(0, index),
+          interpoliteParams: error.message.slice(index + 1, error.message.length - 1).split(','),
+        };
+      }
+
+      return error;
+    });
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -137,14 +137,16 @@ export class ModalComponent implements OnDestroy {
         this.close();
       });
 
-    if (!this.abpClose) return;
+    setTimeout(() => {
-
+      if (!this.abpClose) return;
-    fromEvent(this.abpClose.nativeElement, 'click')
+
-      .pipe(
+      fromEvent(this.abpClose.nativeElement, 'click')
-        takeUntil(this.destroy$),
+        .pipe(
-        filter(() => !!(this.closable && this.modalContent)),
+          takeUntil(this.destroy$),
-      )
+          filter(() => !!(this.closable && this.modalContent)),
-      .subscribe(() => this.close());
+        )
+        .subscribe(() => this.close());
+    }, 0);
 
     this.init.emit();
   }

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -14,6 +14,7 @@ import { ToastComponent } from './components/toast/toast.component';
 import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
 import { ButtonComponent } from './components/button/button.component';
+import { ValidationErrorComponent } from './components/errors/validation-error.component';
 
 export function appendScript(injector: Injector) {
   const fn = function() {
@@ -40,6 +41,16 @@ export function appendScript(injector: Injector) {
     NgbModalModule,
     NgxValidateCoreModule.forRoot({
       targetSelector: '.form-group',
+      blueprints: {
+        email: `AbpAccount::ThisFieldIsNotAValidEmailAddress.`,
+        max: `AbpAccount::ThisFieldMustBeAStringWithAMaximumLengthOf{1}[{{ max }}]`,
+        maxlength: `AbpAccount::ThisFieldMustBeAStringWithAMaximumLengthOf{1}[{{ requiredLength }}]`,
+        min: `AbpAccount::ThisFieldMustBeAStringWithAMinimumLengthOf{1}AndAMaximumLengthOf{0}[{{ min }},{{ max }}]`,
+        minlength: `AbpAccount::ThisFieldMustBeAStringWithAMinimumLengthOf{1}AndAMaximumLengthOf{0}[{{ min }},{{ max }}]`,
+        required: `AbpAccount::ThisFieldIsRequired.`,
+        passwordMismatch: `AbpIdentity::Identity.PasswordConfirmationFailed`,
+      },
+      errorTemplate: ValidationErrorComponent,
     }),
   ],
   declarations: [
@@ -49,9 +60,10 @@ export function appendScript(injector: Injector) {
     ModalComponent,
     ErrorComponent,
     LoaderBarComponent,
+    ValidationErrorComponent,
   ],
   exports: [NgbModalModule, ButtonComponent, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
-  entryComponents: [ErrorComponent],
+  entryComponents: [ErrorComponent, ValidationErrorComponent],
 })
 export class ThemeSharedModule {
   static forRoot(): ModuleWithProviders {

templates/app/angular/src/app/app-routing.module.ts

@@ -6,9 +6,8 @@ import { ABP } from '@abp/ng.core';
 import { TENANT_MANAGEMENT_ROUTES } from '@abp/ng.tenant-management';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/home', pathMatch: 'full' },
   {
-    path: 'home',
+    path: '',
     loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
     data: {
       routes: {