SES-86 added Sign Up Component #25
@ -1,5 +1,5 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -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,
|
||||||
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,58 @@
|
|||||||
|
<div [formGroup]="signUpFormGroup" class="container">
|
||||||
|
<div formGroupName="newAccount" 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
|
||||||
|
formControlName="username"
|
||||||
|
placeholder="Username"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
name="username">
|
||||||
|
<mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.username?.hasError('required')">
|
||||||
|
Username is required
|
||||||
|
</mat-error>
|
||||||
|
<mat-icon matSuffix>person</mat-icon>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field class="form-container">
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
formControlName="password"
|
||||||
|
required
|
||||||
|
placeholder="Password"
|
||||||
|
type="password"
|
||||||
|
name="password"/>
|
||||||
|
<mat-icon matSuffix>lock</mat-icon>
|
||||||
|
<mat-error *ngIf="signUpFormGroup?.get('newAccount')?.controls?.password?.hasError('required')">
|
||||||
|
Password is required
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field class="form-container">
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
formControlName="confirmPassword"
|
||||||
|
required
|
||||||
|
placeholder="Confirm Password"
|
||||||
|
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>
|
@ -1,4 +1,6 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { FormGroup, ValidationErrors, ValidatorFn, Validators, FormBuilder } from '@angular/forms';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-registration',
|
selector: 'app-registration',
|
||||||
@ -6,13 +8,37 @@ import { Component } from '@angular/core';
|
|||||||
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;
|
||||||
|
|
||||||
|
public signUpFormGroup: FormGroup = this.formBuilder.group({
|
||||||
|
newAccount: this.formBuilder.group({
|
||||||
|
username: ['', [
|
||||||
|
Validators.required]],
|
||||||
|
password: ['', [
|
||||||
|
Validators.required,
|
||||||
|
]],
|
||||||
|
confirmPassword: ['', [Validators.required, passwordMatchValidator]]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
collapse() {
|
collapse() {
|
||||||
this.isExpanded = false;
|
this.isExpanded = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
GoToLoginPage() {
|
||||||
|
this.router.navigate(['login'])
|
||||||
|
}
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
this.isExpanded = !this.isExpanded;
|
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 };
|
||||||
|
}
|
@ -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;
|
||||||
|
@ -42,16 +42,30 @@ input {
|
|||||||
padding: 1%;
|
padding: 1%;
|
||||||
margin: 1%;
|
margin: 1%;
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
|
||||||
|
.header {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
.container {
|
.container {
|
||||||
width: 350px;
|
margin-left: 0%;
|
||||||
padding-top: 50%;
|
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: 20%;
|
padding-top: 5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,37 +1,34 @@
|
|||||||
<div class="container">
|
<div [formGroup]="signInFormGroup" class="container">
|
||||||
|
<div formGroupName="signIn" 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
|
||||||
|
formControlName="username"
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
type="text"
|
type="text"
|
||||||
required
|
required
|
||||||
name="username"
|
name="username">
|
||||||
ngModel
|
<mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.username?.hasError('required')">
|
||||||
#username="ngModel">
|
Username is required
|
||||||
<mat-error *ngIf="username.invalid">Username is required</mat-error>
|
</mat-error>
|
||||||
<mat-icon matSuffix>person</mat-icon>
|
<mat-icon matSuffix>person</mat-icon>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field class="form-container">
|
<mat-form-field class="form-container">
|
||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
|
formControlName="password"
|
||||||
|
required
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
required
|
name="password"/>
|
||||||
minlength="6"
|
|
||||||
name="password"
|
|
||||||
ngModel
|
|
||||||
#password="ngModel">
|
|
||||||
<mat-icon matSuffix>lock</mat-icon>
|
<mat-icon matSuffix>lock</mat-icon>
|
||||||
<mat-error
|
<mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.password?.hasError('required')">
|
||||||
*ngIf="password.errors && password.errors.required">
|
|
||||||
Password is required
|
Password is required
|
||||||
</mat-error>
|
</mat-error>
|
||||||
<mat-error
|
|
||||||
*ngIf="password.errors && password.errors.minlength">
|
|
||||||
Password must be of length 6
|
|
||||||
</mat-error>
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
@ -49,4 +46,5 @@
|
|||||||
REGISTER
|
REGISTER
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@ -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,23 +10,24 @@ 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) {}
|
public signInFormGroup: FormGroup = this.formBuilder.group({
|
||||||
|
signIn: this.formBuilder.group({
|
||||||
ngOnInit(): void {
|
username: ['', [
|
||||||
}
|
Validators.required]],
|
||||||
|
password: ['', [
|
||||||
|
Validators.required]]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
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