Confirm password and bugfixes with panels.

src/Squidex/app/features/administration/pages/users/user-page.component.html

@@ -1,6 +1,8 @@
 <sqx-title message="User Management"></sqx-title>
 
 <form [formGroup]="userForm" (ngSubmit)="save()">
+    <input style="display:none" type="password" name="foilautofill"/>
+
     <sqx-panel panelWidth="26rem">
         <div class="panel-header">
             <div class="panel-title-row">
@@ -40,22 +42,32 @@
 
                     <sqx-control-errors for="email" [submitted]="userFormSubmitted"></sqx-control-errors>
 
-                    <input type="email" class="form-control" id="email" maxlength="100" formControlName="email" />
+                    <input type="email" class="form-control" id="email" maxlength="100" formControlName="email" autocomplete="false"  />
                 </div>
                 <div class="form-group">
                     <label for="displayName">Display Name</label>
 
                     <sqx-control-errors for="displayName" [submitted]="userFormSubmitted"></sqx-control-errors>
 
-                    <input type="text" class="form-control" id="displayName" maxlength="100" formControlName="displayName" />
+                    <input type="text" class="form-control" id="displayName" maxlength="100" formControlName="displayName" autocomplete="false"  />
                 </div>
 
-                <div class="form-group form-group-password" *ngIf="!isCurrentUser">
-                    <label for="password">Password</label>
+                <div class="form-group form-group-password" [class.hidden]="isCurrentUser">
+                    <div class="form-group">
+                        <label for="password">Password</label>
+
+                        <sqx-control-errors for="password" [submitted]="userFormSubmitted"></sqx-control-errors>
+
+                        <input type="password" class="form-control" id="password" maxlength="100" formControlName="password" autocomplete="false" />
+                    </div>
+
+                    <div class="form-group">
+                        <label for="password">Confirm Password</label>
 
-                    <sqx-control-errors for="password" [submitted]="userFormSubmitted"></sqx-control-errors>
+                        <sqx-control-errors for="passwordConfirm" [submitted]="userFormSubmitted"></sqx-control-errors>
 
-                    <input type="password" class="form-control" id="password" maxlength="100" formControlName="password" />
+                        <input type="password" class="form-control" id="passwordConfirm" maxlength="100" formControlName="passwordConfirm" autocomplete="false" />
+                    </div>
                 </div>
             </div>
         </div>

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;
     }
 }

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.'

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);
     }
 }

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;

src/Squidex/app/framework/services/panel.service.spec.ts

@@ -56,13 +56,14 @@ describe('PanelService', () => {
             numPublished++;
         });
 
-        panelService.push(element1, <any>renderer);
-        panelService.push(element2, <any>renderer);
-        panelService.push(element3, <any>renderer);
+        panelService.push(element1);
+        panelService.push(element2);
+        panelService.push(element3);
 
         styles = [];
 
-        panelService.pop(element3, <any>renderer);
+        panelService.pop(element3);
+        panelService.render(<any>renderer);
 
         expect(styles).toEqual([
             { element: element1, property: 'top', value: '0px' },

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;