s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-86 added validator into sign in and sing up components, changed styles

Browse Source
This commit is contained in:
Natalia Gawron 2020-12-12 18:51:08 +01:00
parent 530c49f1b7
commit 4ed509bd0a
9 changed files with 163 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html
View File

@ -1,5 +1,5 @@
<body> <body>
<div class="container"> <div>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</body> </body>

3
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -1,6 +1,6 @@
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { SelectRoleComponent } from './components/select-role/select-role.component'; import { SelectRoleComponent } from './components/select-role/select-role.component';
@ -29,6 +29,7 @@ import {
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule, HttpClientModule,
FormsModule, FormsModule,
ReactiveFormsModule,
appRoutingModule, appRoutingModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatInputModule, MatInputModule,

17
SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.css
View File

@ -47,16 +47,25 @@ input {
font-size: 20px; font-size: 20px;
} }
@media (max-width: 768px) { @media (max-width: 400px) {
.container { .container {
width: 350px; margin-left: 0%;
padding-top: 30%; width: 300px;
padding-top: 5%;
}
}
@media (min-width: 401px) {
.container {
margin-left: 1%;
width: 450px;
padding-top: 10%;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
width: 550px; width: 550px;
padding-top: 10%; padding-top: 5%;
} }
} }

117
SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html
View File

@ -1,65 +1,58 @@
<div class="container"> <div [formGroup]="signUpFormGroup" class="container">
<mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon> <div formGroupName="newAccount" class="container">
<div class="primary-text header">Create an Account</div> <mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
<mat-form-field class="form-container"> <div class="primary-text header">Create an Account</div>
<input
matInput <mat-form-field class="form-container">
placeholder="Username" <input
type="text" matInput
required formControlName="username"
name="username" placeholder="Username"
ngModel type="text"
#username="ngModel"> required
<mat-error *ngIf="username.invalid">Username is required</mat-error> name="username">
<mat-icon matSuffix>person</mat-icon> <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.username?.hasError('required')">
</mat-form-field> Username is required
</mat-error>
<mat-form-field class="form-container"> <mat-icon matSuffix>person</mat-icon>
<input </mat-form-field>
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"> <mat-form-field class="form-container">
<input <input
matInput matInput
placeholder="Confirm Password" formControlName="password"
type="password" required
required placeholder="Password"
name="confirmPassword" type="password"
ngModel name="password"/>
#password="ngModel"> <mat-icon matSuffix>lock</mat-icon>
<mat-icon matSuffix>lock</mat-icon> <mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')">
<mat-error Password is required
*ngIf="password.errors && password.errors.required"> </mat-error>
Confirm your password </mat-form-field>
</mat-error>
<mat-error
*ngIf="password.errors && password!==confirmPassword">
Please make sure your passwords match
</mat-error>
</mat-form-field>
<button <mat-form-field class="form-container">
mat-raised-button <input
class="btn-primary form-container" matInput
(click)="GoToLoginPage()"> formControlName="confirmPassword"
<mat-icon matSuffix class="arrow-forward" (click)="onArrowForwardClick()">arrow_forward</mat-icon> required
</button> placeholder="Confirm Password"
</div> type="password"
name="confirmPassword"/>
<mat-icon matSuffix >lock</mat-icon>
<mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('required')">
Confirm your password
</mat-error>
<mat-error class="password-mismatch" *ngIf="signUpFormGroup?.get('newAccount')?.controls?.confirmPassword?.hasError('mismatch')">
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">arrow_forward</mat-icon>
</button>
</div>
</div>

31
SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.ts
View File

@ -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'; import { Router } from '@angular/router';
@Component({ @Component({
@ -7,13 +8,20 @@ import { Router } from '@angular/router';
styleUrls: ['./registration.component.css'] styleUrls: ['./registration.component.css']
}) })
export class RegistrationComponent { export class RegistrationComponent {
constructor(private router: Router, private formBuilder: FormBuilder) {}
isExpanded = false; isExpanded = false;
username = ""; public signUpFormGroup: FormGroup = this.formBuilder.group({
password = ""; newAccount: this.formBuilder.group({
confirmPassword = ""; username: ['', [
Validators.required]],
constructor(private router: Router, private cdRef:ChangeDetectorRef) {} password: ['', [
Validators.required,
]],
confirmPassword: ['', [Validators.required, passwordMatchValidator]]
})
});
collapse() { collapse() {
this.isExpanded = false; this.isExpanded = false;
@ -26,8 +34,11 @@ export class RegistrationComponent {
toggle() { toggle() {
this.isExpanded = !this.isExpanded; 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 };
}

4
SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css
View File

@ -32,7 +32,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
padding-top: 70%; padding-top: 50%;
} }
.button { .button {
margin: 10px; margin: 10px;
@ -47,7 +47,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
padding-top: 20%; padding-top: 10%;
} }
.button { .button {
margin: 20px; margin: 20px;

17
SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css
View File

@ -47,16 +47,25 @@ input {
font-size: 20px; font-size: 20px;
} }
@media (max-width: 768px) { @media (max-width: 400px) {
.container { .container {
width: 350px; margin-left: 0%;
padding-top: 30%; width: 300px;
padding-top: 5%;
}
}
@media (min-width: 401px) {
.container {
margin-left: 1%;
width: 450px;
padding-top: 10%;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
width: 550px; width: 550px;
padding-top: 10%; padding-top: 5%;
} }
} }

95
SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
View File

@ -1,53 +1,50 @@
<div class="container"> <div [formGroup]="signInFormGroup" class="container">
<mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon> <div formGroupName="signIn" class="container">
<div class="primary-text header">Sign In</div> <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
<mat-form-field class="form-container"> <div class="primary-text header">Sign In</div>
<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"> <mat-form-field class="form-container">
<input <input
matInput matInput
placeholder="Password" formControlName="username"
type="password" placeholder="Username"
required type="text"
minlength="6" required
name="password" name="username">
ngModel <mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.username?.hasError('required')">
#password="ngModel"> Username is required
<mat-icon matSuffix>lock</mat-icon> </mat-error>
<mat-error <mat-icon matSuffix>person</mat-icon>
*ngIf="password.errors && password.errors.required"> </mat-form-field>
Password is required
</mat-error>
<mat-error
*ngIf="password.errors && password.errors.minlength">
Password must be of length 6
</mat-error>
</mat-form-field>
<button <mat-form-field class="form-container">
mat-raised-button <input
class="btn-primary form-container" matInput
(click)="onLoginButtonClick()"> formControlName="password"
CONTINUE required
</button> placeholder="Password"
type="password"
name="password"/>
<mat-icon matSuffix>lock</mat-icon>
<mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.password?.hasError('required')">
Password is required
</mat-error>
</mat-form-field>
<div class="primary-text">Not a member?</div> <button
<button mat-raised-button
mat-raised-button class="btn-primary form-container"
class="btn-secondary form-container" (click)="onLoginButtonClick()">
(click)="onRegisterButtonClick()"> CONTINUE
REGISTER </button>
</button>
</div> <div class="primary-text">Not a member?</div>
<button
mat-raised-button
class="btn-secondary form-container"
(click)="onRegisterButtonClick()">
REGISTER
</button>
</div>
</div>

16
SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
@ -9,13 +10,16 @@ import { Router } from '@angular/router';
export class SignInComponent { export class SignInComponent {
isExpanded = false; isExpanded = false;
username = ""; constructor(private router: Router, private formBuilder: FormBuilder) {}
password = "";
constructor(private router: Router) {}
ngOnInit(): void { public signInFormGroup: FormGroup = this.formBuilder.group({
} signIn: this.formBuilder.group({
username: ['', [
Validators.required]],
password: ['', [
Validators.required]]
})
});
onLoginButtonClick(){ onLoginButtonClick(){
//TODO connect with backend and added router //TODO connect with backend and added router