Add validation to register account form

devdanielsun · Feb 3, 2024 · b3867b0 · b3867b0
1 parent 01acdc7
commit b3867b0
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 21 deletions.
diff --git a/pollor.client/src/app/user-register/user-register.component.css b/pollor.client/src/app/user-register/user-register.component.css
@@ -0,0 +1,4 @@
+.card {
+  max-width: 600px;
+  margin: 0 auto;
+}
diff --git a/pollor.client/src/app/user-register/user-register.component.html b/pollor.client/src/app/user-register/user-register.component.html
@@ -1,26 +1,78 @@
 <div class="card">
-  <h5 class="card-header p-3">Register Account for POLLOR</h5>
+  <h5 class="card-header p-3">Register your account for POLLOR</h5>
   <div class="card-body p-4">
-    <form [formGroup]="registerForm" (ngSubmit)="registerForm.valid && sendRegister()" class="container card-text">
+    <form [formGroup]="registerForm" (ngSubmit)="registerForm.valid && sendRegister()" class="container card-text" novalidate>
       <br />
+
+      <!-- Emailaddress -->
       <div class="form-group form-floating mb-3">
         <input formControlName="emailaddress" type="email" placeholder="Emailaddress" class="form-control" id="floatingEmailInput">
         <label for="floatingEmailInput">Emailaddress</label>
+        <!-- Emailaddress validation -->
+        <div *ngIf="getEmailaddress.invalid && (getEmailaddress.dirty || getEmailaddress.touched)" class="alert alert-danger">
+          <div *ngIf="getEmailaddress.errors?.required">
+            Emailaddress is required.
+          </div>
+          <div *ngIf="getEmailaddress.errors?.pattern">
+            Should be an emailaddress
+          </div>
+        </div>
       </div>
+
+      <!-- Username -->
       <div class="form-group form-floating mb-3">
-        <input formControlName="username" type="text" placeholder="Username" class="form-control" id="floatingInput">
-        <label for="floatingInput">Username</label>
+        <input formControlName="username" type="text" placeholder="Username" class="form-control" id="floatingUsernameInput">
+        <label for="floatingUsernameInput">Username</label>
+        <!-- Username validation -->
+        <div *ngIf="getUsername.invalid && (getUsername.dirty || getUsername.touched)" class="alert alert-danger">
+          <div *ngIf="getUsername.errors?.required">
+            Username is required.
+          </div>
+          <div *ngIf="getUsername.errors?.minlength">
+            Minimal length should be 4.
+          </div>
+        </div>
       </div>
-      <div class="form-group form-floating mb-3">
-        <input formControlName="password" type="password" placeholder="Password" class="form-control" id="floatingPassword">
-        <label for="floatingPassword">Password</label>
+
+      <!-- Password -->
+      <div class="input-group has-validation mb-3">
+        <div class="form-group form-floating">
+          <input formControlName="password" type="password" placeholder="Password" class="form-control" id="floatingPassword">
+          <label for="floatingPassword">Password</label>
+          <!-- Password validation -->
+          <div *ngIf="getPassword.invalid && (getPassword.dirty || getPassword.touched)" class="alert alert-danger">
+            <div *ngIf="getPassword.errors?.required">
+              Password is required.
+            </div>
+            <div *ngIf="getPassword.errors?.minlength">
+              Minimal length should be 8.
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="form-group form-floating mb-3">
-        <input formControlName="confirmPassword" type="password" placeholder="Confirm Password" class="form-control" id="floatingConfirmPassword">
-        <label for="floatingConfirmPassword">Confirm Password</label>
+
+      <!-- Confirm Password -->
+      <div class="input-group has-validation mb-3">
+        <div class="form-group form-floating">
+          <input formControlName="confirmPassword" type="password" placeholder="Password" class="form-control" id="floatingConfirmPassword">
+          <label for="floatingConfirmPassword">Password</label>
+          <!-- Confirm Password validation -->
+          <div *ngIf="getConfirmPassword.invalid && (getConfirmPassword.dirty || getConfirmPassword.touched)" class="alert alert-danger">
+            <div *ngIf="getConfirmPassword.errors?.required">
+              Password is required.
+            </div>
+            <div *ngIf="getConfirmPassword.errors?.minlength">
+              Minimal length should be 8.
+            </div>
+            <div *ngIf="getConfirmPassword.errors?.confirmedValidator">
+              Passwords don't match.
+            </div>
+          </div>
+        </div>
       </div>
+
       <br />
-      <div *ngIf="!loading">
+      <div *ngIf="!loading && registerForm.status == 'VALID'">
         <input type="submit" value="Register Account" class="btn btn-primary" />
       </div>
       <div *ngIf="loading">
@@ -29,6 +81,13 @@ <h5 class="card-header p-3">Register Account for POLLOR</h5>
           Loading...
         </button>
       </div>
+      <div *ngIf="registerForm.status != 'VALID'">
+        <button class="btn btn-primary" type="button" disabled>
+          <span class="" role="status" aria-hidden="true"></span>
+          Register Account
+        </button>
+      </div>
+
     </form>
     {{ registerError }}
   </div>

diff --git a/pollor.client/src/app/user-register/user-register.component.ts b/pollor.client/src/app/user-register/user-register.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs/operators';
 import { AlertMessage } from '../alert-message/alert-message';
@@ -14,17 +14,20 @@ export class UserRegisterComponent {
   registerError: string = '';
   loading: boolean = false;
   registerForm: FormGroup;
+  regexEmail = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
 
   constructor(
-    private formBuilder: FormBuilder,
+    private fb: FormBuilder,
     private authService: AuthService,
-    private router: Router
-  ) {
-    this.registerForm = formBuilder.group({
-      emailaddress: ["", Validators.required],
-      username: ["", Validators.required],
-      password: ["", Validators.required],
-      confirmPassword: ["", Validators.required]
+    private router: Router) {
+    this.registerForm = this.fb.group({
+      emailaddress: new FormControl(null, [Validators.required, Validators.pattern(this.regexEmail)]),
+      username: new FormControl(null, [Validators.required, Validators.minLength(4)]),
+      password: new FormControl(null, [Validators.required, Validators.minLength(8)]),
+      confirmPassword: new FormControl(null, [Validators.required, Validators.minLength(8)])
+    },
+    {
+      validator: this.ConfirmedValidator('password', 'confirmPassword'),
     });
 
     const token = localStorage.getItem('token');
@@ -36,6 +39,11 @@ export class UserRegisterComponent {
     }
   }
 
+  get getEmailaddress(): AbstractControl  { return this.registerForm.get('emailaddress')!; }
+  get getUsername(): AbstractControl { return this.registerForm.get('username')!; }
+  get getPassword(): AbstractControl  { return this.registerForm.get('password')!; }
+  get getConfirmPassword(): AbstractControl  { return this.registerForm.get('confirmPassword')!; }
+
   sendRegister(): void {
     if (this.registerForm.valid) {
       this.loading = true; // Start the loading spinner
@@ -93,4 +101,22 @@ export class UserRegisterComponent {
     this.router.navigate([dashboardRoute]);
     console.log(`${role} dashboard route`);
   }
+
+  ConfirmedValidator(controlName: string, matchingControlName: string) {
+    return (formGroup: FormGroup) => {
+      const control = formGroup.controls[controlName];
+      const matchingControl = formGroup.controls[matchingControlName];
+      if (
+        matchingControl.errors &&
+        !matchingControl.errors.confirmedValidator
+      ) {
+        return;
+      }
+      if (control.value !== matchingControl.value) {
+        matchingControl.setErrors({ confirmedValidator: true });
+      } else {
+        matchingControl.setErrors(null);
+      }
+    };
+  }
 }
diff --git a/pollor.client/tsconfig.json b/pollor.client/tsconfig.json
@@ -6,7 +6,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,