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 @@ -
- arrow_back -
Create an Account
- - - Username is required - person - - - - - lock - - Password is required - - - Password must be of length 6 - - +
+
+ arrow_back +
Create an Account
+ + + + + Username is required + + person + - - - lock - - Confirm your password - - - Please make sure your passwords match - - + + + lock + + Password is required + + - -
+ + + lock + + Confirm your password + + + Please make sure your passwords match + + + +
+
\ 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 -
Sign In
- - - Username is required - person - +
+
+ arrow_back +
Sign In
- - - 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