From 530c49f1b7f61d8ee4e1e77fea74a31a5a43ae5b Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Sat, 12 Dec 2020 00:21:06 +0100
Subject: [PATCH 1/2] SES-86 added Sign Up Component

---
 .../registration/registration.component.css   | 62 ++++++++++++++++++
 .../registration/registration.component.html  | 65 +++++++++++++++++++
 .../registration/registration.component.ts    | 17 ++++-
 .../components/sign-in/sign-in.component.css  |  9 ++-
 .../components/sign-in/sign-in.component.html |  1 +
 .../components/sign-in/sign-in.component.ts   |  2 -
 6 files changed, 151 insertions(+), 5 deletions(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
index e69de29..22820c6 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
@@ -0,0 +1,62 @@
+@import "../../../styles.css";
+mat-form-field {
+  color: #df7c0f;
+}
+
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+input {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.container {
+  margin: 5%;
+  display: flex;
+  flex-direction: column;
+}
+.container h1 {
+  margin-bottom: 1rem;
+}
+
+.form-container {
+  padding: 10px;
+  margin: 5px;
+}
+
+.primary-text {
+  height: 100px;
+  color: #df7c0f;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1%;
+  margin: 1%;
+}
+
+.header {
+  font-size: 20px;
+}
+
+@media (max-width: 768px) {
+  .container {
+    width: 350px;
+    padding-top: 30%;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 10%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
index e69de29..c178f41 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
@@ -0,0 +1,65 @@
+<div 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
+      placeholder="Username"
+      type="text"
+      required
+      name="username"
+      ngModel
+      #username="ngModel">
+      <mat-error *ngIf="username.invalid">Username is required</mat-error>
+      <mat-icon matSuffix>person</mat-icon>
+  </mat-form-field>
+  
+  <mat-form-field class="form-container">
+    <input
+      matInput
+      placeholder="Password"
+      type="password"
+      required
+      minlength="6"
+      name="password"
+      ngModel
+      #password="ngModel">
+      <mat-icon matSuffix>lock</mat-icon> 
+      <mat-error
+      *ngIf="password.errors && password.errors.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
+      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">
+        Confirm your password
+      </mat-error>
+      <mat-error
+        *ngIf="password.errors && password!==confirmPassword">
+        Please make sure your passwords match
+      </mat-error>
+  </mat-form-field>
+
+  <button
+    mat-raised-button
+    class="btn-primary form-container"
+    (click)="GoToLoginPage()">
+    <mat-icon matSuffix class="arrow-forward" (click)="onArrowForwardClick()">arrow_forward</mat-icon>
+  </button>
+</div>
+
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts
index ce4f498..1c4e64b 100644
--- 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 } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-registration',
@@ -8,11 +9,25 @@ import { Component } from '@angular/core';
 export class RegistrationComponent {
   isExpanded = false;
 
+  username = "";
+  password = "";
+  confirmPassword = "";
+
+  constructor(private router: Router, private cdRef:ChangeDetectorRef) {}
+
   collapse() {
     this.isExpanded = false;
   }
 
+  GoToLoginPage() {
+    this.router.navigate(['login'])
+  }
+
   toggle() {
     this.isExpanded = !this.isExpanded;
   }
+
+  ngAfterViewChecked(){
+    this.cdRef.detectChanges();
+  }
 }
diff --git 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
index 4ea546d..22820c6 100644
--- 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
@@ -42,16 +42,21 @@ input {
   padding: 1%;
   margin: 1%;
 }
+
+.header {
+  font-size: 20px;
+}
+
 @media (max-width: 768px) {
   .container {
     width: 350px;
-    padding-top: 50%;
+    padding-top: 30%;
   }
 }
 
 @media (min-width: 768px) {
   .container {
     width: 550px;
-    padding-top: 20%;
+    padding-top: 10%;
   }
 }
diff --git 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
index 303bc0f..20659b5 100644
--- 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,5 +1,6 @@
 <div 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
diff --git 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
index d4c960d..07ccaad 100644
--- 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
@@ -19,13 +19,11 @@ export class SignInComponent {
 
   onLoginButtonClick(){
     //TODO connect with backend and added router
-    console.log("Clicked Login");
   }
 
   onRegisterButtonClick(){
     this.router.navigate(['register'])
     //TODO connect with backend
-    console.log("Clicked Register");
   }
 
   onArrowBackClick(){
-- 
2.20.1


From 4ed509bd0a1a25f1546c9c15ad1e2aa35351feb4 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Sat, 12 Dec 2020 18:51:08 +0100
Subject: [PATCH 2/2] SES-86 added validator into sign in and sing up
 components, changed styles

---
 .../ClientApp/src/app/app.component.html      |   2 +-
 .../ClientApp/src/app/app.module.ts           |   3 +-
 .../registration/registration.component.css   |  17 ++-
 .../registration/registration.component.html  | 117 ++++++++----------
 .../registration/registration.component.ts    |  31 +++--
 .../select-role/select-role.component.css     |   4 +-
 .../components/sign-in/sign-in.component.css  |  17 ++-
 .../components/sign-in/sign-in.component.html |  95 +++++++-------
 .../components/sign-in/sign-in.component.ts   |  16 ++-
 9 files changed, 163 insertions(+), 139 deletions(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html
index d2e8ce1..a30a60d 100644
--- 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>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 19bfa46..aaf8fba 100644
--- 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,
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
index 22820c6..41aa481 100644
--- 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%;
   }
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
index c178f41..1f23ca5 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
@@ -1,65 +1,58 @@
-<div 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
-      placeholder="Username"
-      type="text"
-      required
-      name="username"
-      ngModel
-      #username="ngModel">
-      <mat-error *ngIf="username.invalid">Username is required</mat-error>
-      <mat-icon matSuffix>person</mat-icon>
-  </mat-form-field>
-  
-  <mat-form-field class="form-container">
-    <input
-      matInput
-      placeholder="Password"
-      type="password"
-      required
-      minlength="6"
-      name="password"
-      ngModel
-      #password="ngModel">
-      <mat-icon matSuffix>lock</mat-icon> 
-      <mat-error
-      *ngIf="password.errors && password.errors.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>
+  <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">
+          <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
-      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">
-        Confirm your password
-      </mat-error>
-      <mat-error
-        *ngIf="password.errors && password!==confirmPassword">
-        Please make sure your passwords match
-      </mat-error>
-  </mat-form-field>
+      <mat-form-field class="form-container">
+        <input 
+          matInput 
+          formControlName="password" 
+          required
+          placeholder="Password"
+          type="password"
+          name="password"/>
+        <mat-icon matSuffix>lock</mat-icon>
+        <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')">
+          Password is required
+        </mat-error>
+      </mat-form-field>
 
-  <button
-    mat-raised-button
-    class="btn-primary form-container"
-    (click)="GoToLoginPage()">
-    <mat-icon matSuffix class="arrow-forward" (click)="onArrowForwardClick()">arrow_forward</mat-icon>
-  </button>
-</div>
+      <mat-form-field class="form-container">
+        <input 
+          matInput 
+          formControlName="confirmPassword" 
+          required 
+          placeholder="Confirm Password"
+          type="password"
+          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 class="password-mismatch" *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('mismatch')">
+          Please make sure your passwords match
+        </mat-error>
+      </mat-form-field>
 
+      <button
+        mat-raised-button
+        class="btn-primary form-container"
+        (click)="GoToLoginPage()">
+        <mat-icon matSuffix class="arrow-forward">arrow_forward</mat-icon>
+      </button>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts
index 1c4e64b..160fd2c 100644
--- 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 };
+}
\ No newline at end of file
diff --git 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
index 946e5cb..9eaea08 100644
--- 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;
diff --git 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
index 22820c6..41aa481 100644
--- 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%;
   }
 }
diff --git 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
index 20659b5..efeb015 100644
--- 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,53 +1,50 @@
-<div 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
-      placeholder="Username"
-      type="text"
-      required
-      name="username"
-      ngModel
-      #username="ngModel">
-      <mat-error *ngIf="username.invalid">Username is required</mat-error>
-      <mat-icon matSuffix>person</mat-icon>
-  </mat-form-field>
+  <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
-      placeholder="Password"
-      type="password"
-      required
-      minlength="6"
-      name="password"
-      ngModel
-      #password="ngModel">
-      <mat-icon matSuffix>lock</mat-icon>
-      <mat-error
-        *ngIf="password.errors && password.errors.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="username" 
+          placeholder="Username"
+          type="text"
+          required
+          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>
 
-  <button
-    mat-raised-button
-    class="btn-primary form-container"
-    (click)="onLoginButtonClick()">
-    CONTINUE
-  </button>
+      <mat-form-field class="form-container">
+        <input 
+          matInput 
+          formControlName="password" 
+          required
+          placeholder="Password"
+          type="password"
+          name="password"/>
+        <mat-icon matSuffix>lock</mat-icon>
+        <mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.password?.hasError('required')">
+          Password is required
+        </mat-error>
+      </mat-form-field>
 
-  <div class="primary-text">Not a member?</div>
-  <button
-  mat-raised-button
-  class="btn-secondary form-container"
-  (click)="onRegisterButtonClick()">
-  REGISTER
-  </button>
-</div>
+      <button
+        mat-raised-button
+        class="btn-primary form-container"
+        (click)="onLoginButtonClick()">
+        CONTINUE
+      </button>
+
+      <div class="primary-text">Not a member?</div>
+      <button
+        mat-raised-button
+        class="btn-secondary form-container"
+        (click)="onRegisterButtonClick()">
+        REGISTER
+      </button>
+    </div>
+  </div>
 
diff --git 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
index 07ccaad..cb266c7 100644
--- 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) {}
+  constructor(private router: Router, private formBuilder: FormBuilder) {}
 
-  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
-- 
2.20.1