diff options
Diffstat (limited to 'src/DevHive.Angular')
4 files changed, 40 insertions, 22 deletions
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-hint align="end">You must have at least one number</mat-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() { |