SES-86 added Sign Up Component
This commit is contained in:
parent
e6b632f8f6
commit
530c49f1b7
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
@ -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>
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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(){
|
||||||
|
Loading…
Reference in New Issue
Block a user