SES-86 added Sign Up Component #25
@ -1,5 +1,5 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -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,
|
||||
|
@ -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()">
|
||||
s426134
commented
Error nie wyświetla się Error nie wyświetla się
|
||||
<mat-icon matSuffix class="arrow-forward">arrow_forward</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
@ -1,4 +1,6 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormGroup, ValidationErrors, ValidatorFn, Validators, FormBuilder } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-registration',
|
||||
@ -6,13 +8,37 @@ import { Component } from '@angular/core';
|
||||
styleUrls: ['./registration.component.css']
|
||||
})
|
||||
export class RegistrationComponent {
|
||||
constructor(private router: Router, private formBuilder: FormBuilder) {}
|
||||
|
||||
isExpanded = false;
|
||||
|
||||
public signUpFormGroup: FormGroup = this.formBuilder.group({
|
||||
newAccount: this.formBuilder.group({
|
||||
username: ['', [
|
||||
Validators.required]],
|
||||
password: ['', [
|
||||
Validators.required,
|
||||
]],
|
||||
confirmPassword: ['', [Validators.required, passwordMatchValidator]]
|
||||
})
|
||||
});
|
||||
|
||||
collapse() {
|
||||
this.isExpanded = false;
|
||||
}
|
||||
|
||||
GoToLoginPage() {
|
||||
this.router.navigate(['login'])
|
||||
}
|
||||
|
||||
toggle() {
|
||||
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) {
|
||||
.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;
|
||||
|
@ -42,16 +42,30 @@ input {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.header {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.container {
|
||||
width: 350px;
|
||||
padding-top: 50%;
|
||||
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: 20%;
|
||||
padding-top: 5%;
|
||||
}
|
||||
}
|
||||
|
@ -1,52 +1,50 @@
|
||||
<div class="container">
|
||||
<mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
|
||||
<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>
|
||||
<div [formGroup]="signInFormGroup" class="container">
|
||||
<div formGroupName="signIn" class="container">
|
||||
<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">
|
||||
<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
|
||||
formControlName="username"
|
||||
placeholder="Username"
|
||||
type="text"
|
||||
required
|
||||
name="username">
|
||||
<mat-error *ngIf="signInFormGroup?.get('signIn')?.controls?.username?.hasError('required')">
|
||||
Username is required
|
||||
</mat-error>
|
||||
<mat-icon matSuffix>person</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
class="btn-primary form-container"
|
||||
(click)="onLoginButtonClick()">
|
||||
CONTINUE
|
||||
</button>
|
||||
<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="signInFormGroup?.get('signIn')?.controls?.password?.hasError('required')">
|
||||
Password is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="primary-text">Not a member?</div>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="btn-secondary form-container"
|
||||
(click)="onRegisterButtonClick()">
|
||||
REGISTER
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="btn-primary form-container"
|
||||
(click)="onLoginButtonClick()">
|
||||
CONTINUE
|
||||
</button>
|
||||
|
||||
<div class="primary-text">Not a member?</div>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="btn-secondary form-container"
|
||||
(click)="onRegisterButtonClick()">
|
||||
REGISTER
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
@ -9,23 +10,24 @@ 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
|
||||
console.log("Clicked Login");
|
||||
}
|
||||
|
||||
onRegisterButtonClick(){
|
||||
this.router.navigate(['register'])
|
||||
//TODO connect with backend
|
||||
console.log("Clicked Register");
|
||||
}
|
||||
|
||||
onArrowBackClick(){
|
||||
|
Loading…
Reference in New Issue
Block a user
Error nie wyświetla się