Added confirm password

COS301-SE-2023 · Oct 26, 2023 · 8a1e298 · 8a1e298
1 parent 05882ee
commit 8a1e298
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/app/WhereIsThePower/src/app/shared/components/signup/signup.component.html b/app/WhereIsThePower/src/app/shared/components/signup/signup.component.html
@@ -50,6 +50,15 @@ <h3 class="ion-padding-start"><ion-text color="primary">Where Is the Power?</ion
       <ion-text color="danger" *ngIf="signupForm.get('password')!.hasError('minlength')" class="ion-padding-start">
         Password must be at least 8 characters
       </ion-text>
+
+      <ion-item>
+        <ion-label position="floating">Confirm Password</ion-label>
+        <ion-input type="password" formControlName="confirmPassword" aria-label="Confrim Password"></ion-input>
+      </ion-item>
+      <ion-text color="danger" *ngIf="signupForm.get('confirmPassword')!.hasError('matchingErr')" class="ion-padding-start">
+        Passwords do not match
+      </ion-text>
+
       <div class="ion-padding-top">
         <ion-button expand="block" type="submit" data-cy="btn-confirm-signup" class="ion-margin-top ion-margin-start">Signup</ion-button>
       </div>

diff --git a/app/WhereIsThePower/src/app/shared/components/signup/signup.component.ts b/app/WhereIsThePower/src/app/shared/components/signup/signup.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { ToastController } from '@ionic/angular';
 import { RegisterUser } from '../../models/register-user';
@@ -27,16 +27,28 @@ export class SignupComponent implements OnInit {
     lastName: ['', [Validators.required]],
     email: ['', [Validators.required, Validators.email]],
     password: ['', [Validators.required, Validators.minLength(8)]],
+    confirmPassword: ['', Validators.required],
   });
 
+
   constructor(
     private router: Router,
     private formBuilder: FormBuilder,
     private toastController: ToastController,
     private authService: AuthService,
     public modalController: ModalController,
     private loadingController: LoadingController
-  ) { }
+  ) {
+    this.signupForm.addValidators(
+      this.comparePasswordValidator(
+        this.signupForm.controls['password'],
+        this.signupForm.controls['confirmPassword']
+      )
+    );
+   }
+
+
+
 
 
   ngOnInit() { }
@@ -45,7 +57,24 @@ export class SignupComponent implements OnInit {
     this.modalController.dismiss();
   }
 
+
+  comparePasswordValidator(passwordOne: AbstractControl, passwordTwo: AbstractControl) {
+      return () => {
+      if (passwordOne.value !== passwordTwo.value) {
+        console.log("Passwords do not match")
+        return { match_error: 'matchingErr' };
+      }
+
+      return null;
+    };
+  }
+
   signup() {
+    if(this.signupForm.value.password !== this.signupForm.value.confirmPassword) {
+      this.failToast('Passwords do not match');
+      return;
+    }
+
     if (this.signupForm.valid) {
       this.newUser.firstName = this.signupForm.value.firstName;
       this.newUser.lastName = this.signupForm.value.lastName;