From 6a24665e0b010811df7c1c58ea675503aa0f9237 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 15 Jan 2021 11:44:33 +0200
Subject: Added validation to password, improved how form data errors are
 shown, added form data errors to login

---
 .../src/app/components/login/login.component.html  |  8 ++++++++
 .../src/app/components/login/login.component.ts    | 24 ++++++++++++++--------
 .../components/register/register.component.html    | 22 ++++++++++----------
 .../app/components/register/register.component.ts  |  8 ++++++--
 4 files changed, 40 insertions(+), 22 deletions(-)

(limited to 'src/DevHive.Angular')

diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html
index c10a633..166799f 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.html
+++ b/src/DevHive.Angular/src/app/components/login/login.component.html
@@ -7,11 +7,19 @@
 		<div class="input-selection">
 			<input type="text" placeholder="Username" class="input-field" formControlName="username" required>
 			<label class="input-field-label">Username</label>
+
+			<div class="input-errors">
+				<label *ngIf="loginUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
+			</div>
 		</div>
 
 		<div class="input-selection">
 			<input type="password" placeholder="Password" class="input-field" formControlName="password" required>
 			<label class="input-field-label">Password</label>
+
+			<div class="input-errors">
+				<label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
+			</div>
 		</div>
 
 		<hr>
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
index 1c97297..b3698e2 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 
@@ -19,14 +19,12 @@ export class LoginComponent implements OnInit {
 
   ngOnInit(): void {
     this.loginUserFormGroup = this.fb.group({
-      username: ['', [
-        Validators.required,
-        Validators.minLength(3)
-      ]],
-      password: ['', [
-        Validators.required,
-        // Add password pattern
-      ]]
+      username: new FormControl('', [
+        Validators.required
+      ]),
+      password: new FormControl('', [
+        Validators.required
+      ])
     });
   }
 
@@ -50,4 +48,12 @@ export class LoginComponent implements OnInit {
   onRedirectRegister(): void {
     this.router.navigate(['/register']);
   }
+
+  get username() {
+    return this.loginUserFormGroup.get('username');
+  }
+
+  get password() {
+    return this.loginUserFormGroup.get('password');
+  }
 }
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
index ce098ff..130830d 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -11,8 +11,8 @@
 			<label class="input-field-label">First Name</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('firstName')?.hasError('required')" class="error">*This is required</label>
-				<label *ngIf="firstName?.invalid" class="error">*Minimum length of 3</label>
+				<label *ngIf="registerUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
 			</div>
 		</div>
 
@@ -21,8 +21,8 @@
 			<label class="input-field-label">Last Name</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('lastName')?.hasError('required')" class="error">*This is required</label>
-				<label *ngIf="lastName?.invalid" class="error">*Minimum length of 3</label>
+				<label *ngIf="registerUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
 			</div>
 		</div>
 
@@ -31,8 +31,8 @@
 			<label class="input-field-label">Username</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('username')?.hasError('required')" class="error">*This is required</label>
-				<label *ngIf="username?.invalid" class="error">*Minimum length of 3</label>
+				<label *ngIf="registerUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label>
 			</div>
 		</div>
 
@@ -41,8 +41,8 @@
 			<label class="input-field-label">Email</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('email')?.hasError('required')" class="error">*This is required</label>
-				<label *ngIf="email?.invalid" class="error">*Invalid email</label>
+				<label *ngIf="registerUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label>
 			</div>
 		</div>
 
@@ -51,9 +51,9 @@
 			<label class="input-field-label">Password</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('password')?.hasError('required')" class="error">*This is required</label>
-				<label *ngIf="password?.invalid" class="error">*Minimum length of 3</label>
-				<!-- <mat&#45;hint align="end">You must have at least one number</mat&#45;hint> -->
+				<label *ngIf="registerUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
+				<label *ngIf="registerUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+				<label *ngIf="registerUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
 			</div>
 		</div>
 
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts
index 3a59e32..7304589 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -37,7 +37,8 @@ export class RegisterComponent implements OnInit {
       ]),
       password: new FormControl('', [
         Validators.required,
-        // Add password pattern
+        Validators.minLength(3),
+        Validators.pattern('.*[0-9].*') // Check if password contains atleast one number
       ]),
     });
 
@@ -45,6 +46,8 @@ export class RegisterComponent implements OnInit {
   }
 
   async onSubmit(): Promise<void> {
+    // TODO: add a check for form data validity
+
     const response = await fetch('http://localhost:5000/api/User/register', {
       method: 'POST',
       body: JSON.stringify({
@@ -60,12 +63,13 @@ export class RegisterComponent implements OnInit {
     });
     const userCred: string = await response.json();
 
+    // TODO: don't redirect if there is an error response
     sessionStorage.setItem('UserCred', JSON.stringify(userCred));
     this.router.navigate(['/']);
   }
 
   onRedirectRegister(): void {
-    this.router.navigate(["/login"]);
+    this.router.navigate(['/login']);
   }
 
   get firstName() {
-- 
cgit v1.2.3