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 e69de29..41aa481 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,71 @@ +@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: 400px) { + .container { + 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: 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 e69de29..1f23ca5 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,58 @@ +
+
+ arrow_back +
Create an Account
+ + + + + Username is required + + person + + + + + 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 ce4f498..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,6 @@ import { Component } from '@angular/core'; +import { FormGroup, ValidationErrors, ValidatorFn, Validators, FormBuilder } from '@angular/forms'; +import { Router } from '@angular/router'; @Component({ selector: 'app-registration', @@ -6,13 +8,37 @@ import { Component } from '@angular/core'; styleUrls: ['./registration.component.css'] }) export class RegistrationComponent { + constructor(private router: Router, private formBuilder: FormBuilder) {} + isExpanded = false; + public signUpFormGroup: FormGroup = this.formBuilder.group({ + newAccount: this.formBuilder.group({ + username: ['', [ + Validators.required]], + password: ['', [ + Validators.required, + ]], + confirmPassword: ['', [Validators.required, passwordMatchValidator]] + }) + }); + collapse() { this.isExpanded = false; } + GoToLoginPage() { + this.router.navigate(['login']) + } + toggle() { this.isExpanded = !this.isExpanded; } } + +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 4ea546d..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 @@ -42,16 +42,30 @@ input { padding: 1%; margin: 1%; } -@media (max-width: 768px) { + +.header { + font-size: 20px; +} + +@media (max-width: 400px) { .container { - width: 350px; - padding-top: 50%; + 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: 20%; + 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 303bc0f..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,52 +1,50 @@ -
- arrow_back - - - 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 d4c960d..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,23 +10,24 @@ 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 - console.log("Clicked Login"); } onRegisterButtonClick(){ this.router.navigate(['register']) //TODO connect with backend - console.log("Clicked Register"); } onArrowBackClick(){