SES-86 added validator into sign in and sing up components, changed styles

2020-12-12 18:51:08 +01:00 · 2020-12-12 18:51:08 +01:00 · 4ed509bd0a
commit 4ed509bd0a
parent 530c49f1b7
9 changed files with 163 additions and 139 deletions
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html
@ -1,5 +1,5 @@
 <body>
-  <div class="container">
+  <div>
    <router-outlet></router-outlet>
  </div>
 </body>
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { SelectRoleComponent } from './components/select-role/select-role.component';
@ -29,6 +29,7 @@ import {
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
+    ReactiveFormsModule,
    appRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
@ -47,16 +47,25 @@ input {
  font-size: 20px;
 }

-@media (max-width: 768px) {
+@media (max-width: 400px) {
  .container {
-    width: 350px;
-    padding-top: 30%;
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
+@media (min-width: 401px) {
+  .container {
+    margin-left: 1%;
+    width: 450px;
+    padding-top: 10%;
  }
 }

@media (min-width: 768px) {
  .container {
    width: 550px;
-    padding-top: 10%;
+    padding-top: 5%;
  }
 }
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
@ -1,56 +1,49 @@
-<div class="container">
+  <div [formGroup]="signUpFormGroup" class="container">
+    <div formGroupName="newAccount" class="container">
      <mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
      <div class="primary-text header">Create an Account</div>
+      
      <mat-form-field class="form-container">
        <input
          matInput
+          formControlName="username" 
          placeholder="Username"
          type="text"
          required
-      name="username"
-      ngModel
-      #username="ngModel">
-      <mat-error *ngIf="username.invalid">Username is required</mat-error>
+          name="username">
+          <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.username?.hasError('required')">
+            Username is required
+          </mat-error>
          <mat-icon matSuffix>person</mat-icon>
      </mat-form-field>

      <mat-form-field class="form-container">
        <input 
          matInput 
+          formControlName="password" 
+          required
          placeholder="Password"
          type="password"
-      required
-      minlength="6"
-      name="password"
-      ngModel
-      #password="ngModel">
+          name="password"/>
        <mat-icon matSuffix>lock</mat-icon>
-      <mat-error
-      *ngIf="password.errors && password.errors.required">
+        <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')">
          Password is required
        </mat-error>
-    <mat-error
-      *ngIf="password.errors && password.errors.minlength">
-      Password must be of length 6
-    </mat-error> 
      </mat-form-field>

      <mat-form-field class="form-container">
        <input 
          matInput 
+          formControlName="confirmPassword" 
+          required 
          placeholder="Confirm Password"
          type="password"
-      required
-      name="confirmPassword"
-      ngModel
-      #password="ngModel">
-      <mat-icon matSuffix>lock</mat-icon>
-      <mat-error
-        *ngIf="password.errors && password.errors.required">
+          name="confirmPassword"/>
+        <mat-icon matSuffix >lock</mat-icon>
+        <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('required')">
          Confirm your password
        </mat-error>
-      <mat-error
-        *ngIf="password.errors && password!==confirmPassword">
+        <mat-error class="password-mismatch" *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('mismatch')">
          Please make sure your passwords match
        </mat-error>
      </mat-form-field>
@ -59,7 +52,7 @@
        mat-raised-button
        class="btn-primary form-container"
        (click)="GoToLoginPage()">
-    <mat-icon matSuffix class="arrow-forward" (click)="onArrowForwardClick()">arrow_forward</mat-icon>
+        <mat-icon matSuffix class="arrow-forward">arrow_forward</mat-icon>
      </button>
-</div>
-
+    </div>
+  </div>
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts
@ -1,4 +1,5 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
+import { Component } from '@angular/core';
+import { FormGroup, ValidationErrors, ValidatorFn, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';

@Component({
@ -7,13 +8,20 @@ import { Router } from '@angular/router';
  styleUrls: ['./registration.component.css']
 })
 export class RegistrationComponent {
+  constructor(private router: Router, private formBuilder: FormBuilder) {}
+
  isExpanded = false;

-  username = "";
-  password = "";
-  confirmPassword = "";
-
-  constructor(private router: Router, private cdRef:ChangeDetectorRef) {}
+  public signUpFormGroup: FormGroup = this.formBuilder.group({
+    newAccount: this.formBuilder.group({
+      username: ['', [
+        Validators.required]],
+      password: ['', [
+        Validators.required,
+      ]],
+      confirmPassword: ['', [Validators.required, passwordMatchValidator]]
+    })
+  });

  collapse() {
    this.isExpanded = false;
@ -26,8 +34,11 @@ export class RegistrationComponent {
  toggle() {
    this.isExpanded = !this.isExpanded;
  }
-
-  ngAfterViewChecked(){
-    this.cdRef.detectChanges();
-  }
+}
+
+export const passwordMatchValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
+  const parent = formGroup.parent as FormGroup;
+  if (!parent) return null;
+  return parent.get('password').value === parent.get('confirmPassword').value ?
+    null : { 'mismatch': true };
 }
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
@ -32,7 +32,7 @@

@media (max-width: 768px) {
  .container {
-    padding-top: 70%;
+    padding-top: 50%;
  }
  .button {
    margin: 10px;
@ -47,7 +47,7 @@

@media (min-width: 768px) {
  .container {
-    padding-top: 20%;
+    padding-top: 10%;
  }
  .button {
    margin: 20px;
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
@ -47,16 +47,25 @@ input {
  font-size: 20px;
 }

-@media (max-width: 768px) {
+@media (max-width: 400px) {
  .container {
-    width: 350px;
-    padding-top: 30%;
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
+@media (min-width: 401px) {
+  .container {
+    margin-left: 1%;
+    width: 450px;
+    padding-top: 10%;
  }
 }

@media (min-width: 768px) {
  .container {
    width: 550px;
-    padding-top: 10%;
+    padding-top: 5%;
  }
 }
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
@ -1,38 +1,34 @@
-<div class="container">
+  <div [formGroup]="signInFormGroup" class="container">
+    <div formGroupName="signIn" class="container">
    <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
    <div class="primary-text header">Sign In</div>
+
      <mat-form-field class="form-container">
        <input
          matInput
+          formControlName="username" 
          placeholder="Username"
          type="text"
          required
-      name="username"
-      ngModel
-      #username="ngModel">
-      <mat-error *ngIf="username.invalid">Username is required</mat-error>
+          name="username">
+          <mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.username?.hasError('required')">
+            Username is required
+          </mat-error>
          <mat-icon matSuffix>person</mat-icon>
      </mat-form-field>

      <mat-form-field class="form-container">
        <input 
          matInput 
+          formControlName="password" 
+          required
          placeholder="Password"
          type="password"
-      required
-      minlength="6"
-      name="password"
-      ngModel
-      #password="ngModel">
+          name="password"/>
        <mat-icon matSuffix>lock</mat-icon>
-      <mat-error
-        *ngIf="password.errors && password.errors.required">
+        <mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.password?.hasError('required')">
          Password is required
        </mat-error>
-      <mat-error
-        *ngIf="password.errors && password.errors.minlength">
-        Password must be of length 6
-      </mat-error>
      </mat-form-field>

      <button
@ -49,5 +45,6 @@
        (click)="onRegisterButtonClick()">
        REGISTER
      </button>
-</div>
+    </div>
+  </div>

--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts
@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';

@Component({
@ -9,13 +10,16 @@ import { Router } from '@angular/router';
 export class SignInComponent {
  isExpanded = false;

-  username = "";
-  password = "";
+  constructor(private router: Router, private formBuilder: FormBuilder) {}

-  constructor(private router: Router) {}
-
-  ngOnInit(): void {
-  }
+  public signInFormGroup: FormGroup = this.formBuilder.group({
+    signIn: this.formBuilder.group({
+      username: ['', [
+        Validators.required]],
+      password: ['', [
+        Validators.required]]
+    })
+  });

  onLoginButtonClick(){
    //TODO connect with backend and added router