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%;
+  }
+}

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>
+

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();
+  }
 }

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%;
   }
 }

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

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(){