profile validators

src/app/pages/profile/profile.component.html

@@ -1,7 +1,7 @@
 <div id="login-form">
   <h1>Profil aktualisieren</h1>
 
-  <mat-form-field (keyup.enter)="login()">
+  <mat-form-field class="currentPW" (keyup.enter)="login()">
     <mat-label>Aktuelles Passwort</mat-label>
     <input
       matInput
@@ -22,8 +22,7 @@
     </button>
   </mat-form-field>
 
-
-  <mat-form-field (keyup.enter)="login()">
+  <!--<mat-form-field (keyup.enter)="login()">
     <mat-label>E-Mail-Adresse eingeben</mat-label>
     <input matInput placeholder="fLotte@beispiel.de" [formControl]="email" />
     <mat-error *ngIf="email.hasError('required')">
@@ -32,17 +31,43 @@
     <mat-error *ngIf="email.hasError('email')">
       Bitte geben Sie eine valide E-Mail-Adresse ein.
     </mat-error>
-  </mat-form-field>
+  </mat-form-field>-->
 
-  <mat-form-field (keyup.enter)="login()">
-    <mat-label>Passwort eingeben</mat-label>
+  <mat-form-field (keyup.enter)="login()" (input)="onPasswordInput()">
+    <mat-label>Neues Passwort</mat-label>
     <input
       matInput
       [type]="hide ? 'password' : 'text'"
-      [formControl]="password"
+      [formControl]="passwordNew"
     />
-    <mat-error *ngIf="password.hasError('required')">
-      Bitte geben Sie Ihr Passwort ein.
+    <mat-error *ngIf="passwordNew.hasError('required')">
+      Bitte geben Sie Ihr neues Passwort ein.
+    </mat-error>
+    <mat-error *ngIf="passwordNew.hasError('minlength')">
+      Das Passwort muss mindestens aus {{minPw}} Zeichen bestehen
+    </mat-error>
+    <button
+      mat-icon-button
+      matSuffix
+      (click)="hide = !hide"
+      [attr.aria-label]="'Hide password'"
+      [attr.aria-pressed]="hide"
+    >
+      <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
+    </button>
+  </mat-form-field>
+  <mat-form-field (keyup.enter)="login()" (input)="onPasswordInput()">
+    <mat-label>Passwort wiederholen</mat-label>
+    <input
+      matInput
+      [type]="hide ? 'password' : 'text'"
+      [formControl]="passwordNew2"
+    />
+    <mat-error *ngIf="passwordNew2.hasError('required')">
+      Bitte wiederholen sie ihr Passwort
+    </mat-error>
+    <mat-error *ngIf="passwordNew2.invalid && !passwordNew2.hasError('required')">
+      Das Passwort stimmt nicht überein
     </mat-error>
     <button
       mat-icon-button
@@ -56,7 +81,7 @@
   </mat-form-field>
   <mat-progress-bar mode="indeterminate" id="loading-bar" *ngIf="loading"></mat-progress-bar>
   <button mat-stroked-button color="primary" (click)="login()">
-    Login
+    Profil aktualisieren
   </button>
   <mat-error class="login-error-message" *ngIf="errorOccurred">
     {{errorMessage}}

src/app/pages/profile/profile.component.scss

@@ -16,3 +16,12 @@
         margin-top: 0.5em;
     }
 }
+
+hr {
+    color: #7fc600;
+    width: 100%;
+}
+
+.currentPW {
+    margin-bottom: 3rem !important;
+}

src/app/pages/profile/profile.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService } from 'src/app/services/auth.service';
 import { BikesService } from '../../services/bikes.service';
@@ -10,8 +10,13 @@ import { BikesService } from '../../services/bikes.service';
   styleUrls: ['./profile.component.scss'],
 })
 export class ProfileComponent implements OnInit {
+
+  minPw: number = 8;
   email = new FormControl('', [Validators.required, Validators.email]);
   password = new FormControl('', [Validators.required]);
+  passwordNew = new FormControl('', [Validators.required,Validators.minLength(this.minPw)]);
+  passwordNew2 = new FormControl('', [Validators.required]);
+  pwGroup: FormGroup;
   hide = true;
   loading = false;
   errorOccurred = false;
@@ -19,10 +24,20 @@ export class ProfileComponent implements OnInit {
 
   returnUrl : string;
 
-  constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {}
+  constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute, private formBuilder : FormBuilder) {}
 
   ngOnInit(): void {
-    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/tableOverview';
+    this.pwGroup = this.formBuilder.group({
+      passwordNew: this.passwordNew,
+      passwordNew2: this.passwordNew2
+    }, {validator: passwordMatchValidator});
+  }
+
+  onPasswordInput() {
+    if (this.pwGroup.hasError('passwordMismatch'))
+      this.passwordNew2.setErrors([{'passwordMismatch': true}]);
+    else
+      this.passwordNew2.setErrors(null);
   }
 
   login() {
@@ -48,3 +63,10 @@ export class ProfileComponent implements OnInit {
       });
   }
 }
+
+export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
+  if (formGroup.get('passwordNew').value === formGroup.get('passwordNew2').value)
+    return null;
+  else
+    return {passwordMismatch: true};
+};