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 @@
-
+
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 @@
-
\ 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 @@
-
-
arrow_back
-
-
-
- Username is required
- person
-
+
+
+
arrow_back
+
-
-
- lock
-
- Password is required
-
-
- Password must be of length 6
-
-
+
+
+
+ Username is required
+
+ person
+
-
+
+
+ lock
+
+ Password is required
+
+
-
Not a member?
-
-
+
+
+
Not a member?
+
+
+
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