From 530c49f1b7f61d8ee4e1e77fea74a31a5a43ae5b Mon Sep 17 00:00:00 2001 From: Natalia Gawron 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 @@ +
+ arrow_back +
Create an Account
+ + + Username is required + person + + + + + lock + + Password is required + + + Password must be of length 6 + + + + + + lock + + Confirm your password + + + Please make sure your passwords match + + + + +
+ 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 @@
arrow_back +
Sign In
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 @@ -
+
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