From ccdccbf81013266b3c5c902fc333895be6508913 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 5 Aug 2019 17:27:09 +0300 Subject: [PATCH] refactor(all) --- .../core/src/lib/services/profile.service.ts | 6 ++-- .../core/src/lib/states/profile.state.ts | 2 +- .../lib/components/users/users.component.ts | 4 +-- .../change-password.component.ts | 27 ++++++++++++---- .../components/profile/profile.component.ts | 1 + .../packages/theme-shared/package.json | 2 +- .../lib/components/errors/error.component.ts | 8 ++--- .../errors/validation-error.component.ts | 32 +++++++++++++++++++ .../lib/components/modal/modal.component.ts | 18 ++++++----- .../src/lib/theme-shared.module.ts | 14 +++++++- .../app/angular/src/app/app-routing.module.ts | 3 +- 11 files changed, 88 insertions(+), 29 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/errors/validation-error.component.ts diff --git a/npm/ng-packs/packages/core/src/lib/services/profile.service.ts b/npm/ng-packs/packages/core/src/lib/services/profile.service.ts index 44e1355768..48065619ff 100644 --- a/npm/ng-packs/packages/core/src/lib/services/profile.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/profile.service.ts @@ -28,13 +28,13 @@ export class ProfileService { return this.rest.request(request); } - changePassword(body: Profile.ChangePasswordRequest): Observable { + changePassword(body: Profile.ChangePasswordRequest, throwErr: boolean = false): Observable { const request: Rest.Request = { method: 'POST', - url: '/api/identity/my-profile/changePassword', + url: '/api/identity/my-profile/change-password', body, }; - return this.rest.request(request); + return this.rest.request(request, { throwErr }); } } diff --git a/npm/ng-packs/packages/core/src/lib/states/profile.state.ts b/npm/ng-packs/packages/core/src/lib/states/profile.state.ts index 7e5dcdda32..d162c19032 100644 --- a/npm/ng-packs/packages/core/src/lib/states/profile.state.ts +++ b/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); } } diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index 908a87454a..21b5e4b673 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/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), - validatePassword(['small', 'capital', 'number', 'special']), + // Validators.minLength(6), + // validatePassword(['small', 'capital', 'number', 'special']), ], ], userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]], diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts index db819492e3..fbc2619e00 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts +++ b/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'])]], - newPassword: ['', [required, minLength(6), validatePassword(['small', 'capital', 'number', 'special'])]], - repeatNewPassword: ['', [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']) */]], + 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(() => { - this.visible = false; + .subscribe({ + next: () => { + this.visible = false; + this.form.reset(); + }, + error: err => { + this.toasterService.error(snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'), 'Error', { + life: 7000, + }); + }, }); } diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts index bb264e35ef..030e239994 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts +++ b/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(); }); } diff --git a/npm/ng-packs/packages/theme-shared/package.json b/npm/ng-packs/packages/theme-shared/package.json index 9297939c66..c3f9eb5f69 100644 --- a/npm/ng-packs/packages/theme-shared/package.json +++ b/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", diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts index f532e8689d..708b48dc47 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/error.component.ts @@ -11,14 +11,14 @@ import { Component, Renderer2, ElementRef } from '@angular/core';

- {{ title }} + {{ title | abpLocalization }}

- {{ details }} + {{ details | abpLocalization }}
- Take me home + {{ '::Menu:Home' | abpLocalization }}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/errors/validation-error.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/errors/validation-error.component.ts new file mode 100644 index 0000000000..7590d74b91 --- /dev/null +++ b/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: ` +
+ {{ error.message | abpLocalization: error.interpoliteParams }} +
+ `, + 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; + }); + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts index 53eb6182f9..63a92ed075 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts +++ b/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; - - fromEvent(this.abpClose.nativeElement, 'click') - .pipe( - takeUntil(this.destroy$), - filter(() => !!(this.closable && this.modalContent)), - ) - .subscribe(() => this.close()); + setTimeout(() => { + if (!this.abpClose) return; + + fromEvent(this.abpClose.nativeElement, 'click') + .pipe( + takeUntil(this.destroy$), + filter(() => !!(this.closable && this.modalContent)), + ) + .subscribe(() => this.close()); + }, 0); this.init.emit(); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 1f7410677c..bf2b9e411a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/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 { diff --git a/templates/app/angular/src/app/app-routing.module.ts b/templates/app/angular/src/app/app-routing.module.ts index a495abb761..9890f33136 100644 --- a/templates/app/angular/src/app/app-routing.module.ts +++ b/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: {