SES-86 added Sign Up Component

This commit is contained in:
Natalia Gawron 2020-12-12 00:21:06 +01:00
parent e6b632f8f6
commit 530c49f1b7
6 changed files with 151 additions and 5 deletions

View File

@ -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%;
}
}

View File

@ -0,0 +1,65 @@
<div class="container">
<mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
<div class="primary-text header">Create an Account</div>
<mat-form-field class="form-container">
<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">
<input
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">
<input
matInput
placeholder="Confirm Password"
type="password"
required
name="confirmPassword"
ngModel
#password="ngModel">
<mat-icon matSuffix>lock</mat-icon>
<mat-error
*ngIf="password.errors && password.errors.required">
Confirm your password
</mat-error>
<mat-error
*ngIf="password.errors && password!==confirmPassword">
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" (click)="onArrowForwardClick()">arrow_forward</mat-icon>
</button>
</div>

View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-registration', selector: 'app-registration',
@ -8,11 +9,25 @@ import { Component } from '@angular/core';
export class RegistrationComponent { export class RegistrationComponent {
isExpanded = false; isExpanded = false;
username = "";
password = "";
confirmPassword = "";
constructor(private router: Router, private cdRef:ChangeDetectorRef) {}
collapse() { collapse() {
this.isExpanded = false; this.isExpanded = false;
} }
GoToLoginPage() {
this.router.navigate(['login'])
}
toggle() { toggle() {
this.isExpanded = !this.isExpanded; this.isExpanded = !this.isExpanded;
} }
ngAfterViewChecked(){
this.cdRef.detectChanges();
}
} }

View File

@ -42,16 +42,21 @@ input {
padding: 1%; padding: 1%;
margin: 1%; margin: 1%;
} }
.header {
font-size: 20px;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
width: 350px; width: 350px;
padding-top: 50%; padding-top: 30%;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
width: 550px; width: 550px;
padding-top: 20%; padding-top: 10%;
} }
} }

View File

@ -1,5 +1,6 @@
<div class="container"> <div class="container">
<mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon> <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
<div class="primary-text header">Sign In</div>
<mat-form-field class="form-container"> <mat-form-field class="form-container">
<input <input
matInput matInput

View File

@ -19,13 +19,11 @@ export class SignInComponent {
onLoginButtonClick(){ onLoginButtonClick(){
//TODO connect with backend and added router //TODO connect with backend and added router
console.log("Clicked Login");
} }
onRegisterButtonClick(){ onRegisterButtonClick(){
this.router.navigate(['register']) this.router.navigate(['register'])
//TODO connect with backend //TODO connect with backend
console.log("Clicked Register");
} }
onArrowBackClick(){ onArrowBackClick(){