From c3b0c64c18f4a608b8c7ba42784a1d8d5fdf9821 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Mon, 19 Jun 2017 20:32:51 +0200 Subject: [PATCH] Confirm password and bugfixes with panels. --- .../pages/users/user-page.component.html | 24 ++++++++++++---- .../pages/users/user-page.component.ts | 12 +++++--- .../angular/control-errors.component.ts | 1 + .../app/framework/angular/panel.component.ts | 9 ++++-- .../app/framework/angular/validators.ts | 28 +++++++++++++++++++ .../framework/services/panel.service.spec.ts | 9 +++--- .../app/framework/services/panel.service.ts | 8 ++---- 7 files changed, 69 insertions(+), 22 deletions(-) diff --git a/src/Squidex/app/features/administration/pages/users/user-page.component.html b/src/Squidex/app/features/administration/pages/users/user-page.component.html index 3903086a9..3dbd6bc57 100644 --- a/src/Squidex/app/features/administration/pages/users/user-page.component.html +++ b/src/Squidex/app/features/administration/pages/users/user-page.component.html @@ -1,6 +1,8 @@
+ +
@@ -40,22 +42,32 @@ - +
- +
-
- +
+
+ + + + + +
+ +
+ - + - + +
diff --git a/src/Squidex/app/features/administration/pages/users/user-page.component.ts b/src/Squidex/app/features/administration/pages/users/user-page.component.ts index 4ee27c31e..98296948e 100644 --- a/src/Squidex/app/features/administration/pages/users/user-page.component.ts +++ b/src/Squidex/app/features/administration/pages/users/user-page.component.ts @@ -15,7 +15,8 @@ import { MessageBus, NotificationService, UserDto, - UserManagementService + UserManagementService, + ValidatorsEx } from 'shared'; import { UserCreated, UserUpdated } from './messages'; @@ -66,6 +67,7 @@ export class UserPageComponent extends ComponentBase implements OnInit { const enable = (message?: string) => { this.userForm.enable(); this.userForm.controls['password'].reset(); + this.userForm.controls['passwordConfirm'].reset(); this.userFormSubmitted = false; this.userFormError = message; }; @@ -75,7 +77,7 @@ export class UserPageComponent extends ComponentBase implements OnInit { }; if (this.isNewMode) { - this.userManagementService.postUser(requestDto) + this.userManagementService.postUser(requestDto) .subscribe(created => { this.messageBus.publish( new UserCreated( @@ -90,7 +92,7 @@ export class UserPageComponent extends ComponentBase implements OnInit { enable(error.displayMessage); }); } else { - this.userManagementService.putUser(this.userId, requestDto) + this.userManagementService.putUser(this.userId, requestDto) .subscribe(() => { this.messageBus.publish( new UserUpdated( @@ -132,9 +134,11 @@ export class UserPageComponent extends ComponentBase implements OnInit { if (user) { this.userForm.addControl('password', new FormControl('')); } else { - this.userForm.addControl('password', new FormControl(Validators.required)); + this.userForm.addControl('password', new FormControl('', Validators.required)); } + this.userForm.addControl('passwordConfirm', new FormControl('', ValidatorsEx.matchOther('password', 'Passwords must be the same.'))); + this.isCurrentUser = this.userId === this.currentUserId; } } diff --git a/src/Squidex/app/framework/angular/control-errors.component.ts b/src/Squidex/app/framework/angular/control-errors.component.ts index 001474b55..a1a6f09f1 100644 --- a/src/Squidex/app/framework/angular/control-errors.component.ts +++ b/src/Squidex/app/framework/angular/control-errors.component.ts @@ -18,6 +18,7 @@ const DEFAULT_ERRORS: { [key: string]: string } = { maxvalue: '{field} must be smaller than {maxValue}.', minlength: '{field} must have more than {requiredLength} characters.', maxlength: '{field} cannot have more than {requiredLength} characters.', + matchOther: '{message}', validdatetime: '{field} is not a valid date time', validnumber: '{field} is not a valid number.', validvalues: '{field} is not a valid value.' diff --git a/src/Squidex/app/framework/angular/panel.component.ts b/src/Squidex/app/framework/angular/panel.component.ts index 6a4600926..be1089b55 100644 --- a/src/Squidex/app/framework/angular/panel.component.ts +++ b/src/Squidex/app/framework/angular/panel.component.ts @@ -40,10 +40,13 @@ export class PanelComponent implements OnDestroy, AfterViewInit { } public ngOnDestroy() { - this.panels.pop(this.panel.nativeElement, this.renderer); + this.panels.pop(this.panel.nativeElement); + this.panels.render(this.renderer); } - public ngAfterViewInit() { - this.panels.push(this.panel.nativeElement, this.renderer); + this.panels.render(this.renderer); + } + public ngOnInit() { + this.panels.push(this.panel.nativeElement); } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/validators.ts b/src/Squidex/app/framework/angular/validators.ts index ef70f0539..a579289d1 100644 --- a/src/Squidex/app/framework/angular/validators.ts +++ b/src/Squidex/app/framework/angular/validators.ts @@ -49,6 +49,34 @@ export module ValidatorsEx { }; } + export function matchOther(otherControlName: string, message: string) { + let otherControl: AbstractControl = null; + + return (control: AbstractControl): { [key: string]: any } => { + if (!control.parent) { + return {}; + } + + if (otherControl === null) { + otherControl = control.parent.get(otherControlName) || undefined; + + if (!otherControl) { + throw new Error('matchOtherValidator(): other control is not found in parent group'); + } + + otherControl.valueChanges.subscribe(() => { + control.updateValueAndValidity({ onlySelf: true }); + }); + } + + if (otherControl && otherControl.value !== control.value) { + return { matchOther: { message } }; + } + + return {}; + }; + } + export function validDateTime() { return (control: AbstractControl): { [key: string]: any } => { const v: string = control.value; diff --git a/src/Squidex/app/framework/services/panel.service.spec.ts b/src/Squidex/app/framework/services/panel.service.spec.ts index 72794c5d7..27a8b66ba 100644 --- a/src/Squidex/app/framework/services/panel.service.spec.ts +++ b/src/Squidex/app/framework/services/panel.service.spec.ts @@ -56,13 +56,14 @@ describe('PanelService', () => { numPublished++; }); - panelService.push(element1, renderer); - panelService.push(element2, renderer); - panelService.push(element3, renderer); + panelService.push(element1); + panelService.push(element2); + panelService.push(element3); styles = []; - panelService.pop(element3, renderer); + panelService.pop(element3); + panelService.render(renderer); expect(styles).toEqual([ { element: element1, property: 'top', value: '0px' }, diff --git a/src/Squidex/app/framework/services/panel.service.ts b/src/Squidex/app/framework/services/panel.service.ts index f050ebcaa..15a0e3e4a 100644 --- a/src/Squidex/app/framework/services/panel.service.ts +++ b/src/Squidex/app/framework/services/panel.service.ts @@ -21,17 +21,15 @@ export class PanelService { return this.changed$; } - public push(element: any, renderer: Renderer) { + public push(element: any) { this.elements.push(element); - this.update(renderer); } - public pop(element: any, renderer: Renderer) { + public pop(element: any) { this.elements.splice(-1, 1); - this.update(renderer); } - private update(renderer: Renderer) { + public render(renderer: Renderer) { let currentPosition = 0; let currentLayer = this.elements.length * 10;