ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Finish register design

Browse source
This commit is contained in:
Cathy Hu 2020-08-27 12:07:55 +02:00
parent bc527f6d14
commit 4c9cf1aabe
3 changed files with 143 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
kibicara-frontend/src/app/auth/register/register.component.html
View file

@ -1,56 +1,67 @@
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <div class="container">
<div *ngIf="info" class="alert alert-danger">{{ info }}</div> <div class="banner"></div>
<h2>Register</h2> <mat-card class="register-form">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()"> <mat-card-header>
<div class="form-group"> <h2>Register as a hood admin!</h2>
<label for="email">E-Mail</label> </mat-card-header>
<input <mat-card-content>
type="text" <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
formControlName="email" <div class="input-container">
class="form-control" <mat-form-field appearance="fill">
[ngClass]="{ <mat-label for="email">E-Mail</mat-label>
'is-invalid': submitted && registerForm.controls.email.errors <input type="text" formControlName="email" matInput />
}" <mat-error
/> *ngIf="
<div registerForm.controls.email.errors &&
*ngIf="submitted && registerForm.controls.email.errors" registerForm.controls.email.errors.required
class="invalid-feedback" "
> >
<div *ngIf="registerForm.controls.email.errors.required"> E-Mail is required
E-Mail is required </mat-error>
</div> </mat-form-field>
</div>
</div> <mat-form-field appearance="fill">
<div class="form-group"> <mat-label>Password</mat-label>
<label for="password">Password</label> <input
<input type="password"
type="password" formControlName="password"
formControlName="password" matInput
class="form-control" [type]="'password'"
[ngClass]="{ />
'is-invalid': submitted && registerForm.controls.password.errors <mat-error
}" *ngIf="
/> registerForm.controls.password.errors &&
<div registerForm.controls.password.errors.required
*ngIf="submitted && registerForm.controls.password.errors" "
class="invalid-feedback" >
> Password is required
<div *ngIf="registerForm.controls.password.errors.required"> </mat-error>
Password is required <mat-error
</div> *ngIf="
<div *ngIf="registerForm.controls.password.errors.minlength"> registerForm.controls.password.errors &&
Password must be at least 6 characters registerForm.controls.password.errors.minlength
</div> "
</div> >
</div> Password requires minimal length 8
<div class="form-group"> </mat-error>
<button [disabled]="loading" class="btn btn-primary"> </mat-form-field>
<span </div>
*ngIf="loading" <div class="buttons">
class="spinner-border spinner-border-sm mr-1" <button
></span> mat-raised-button
Register color="primary"
</button> [disabled]="loading"
<a routerLink="/login" class="btn btn-link">Cancel</a> class="btn btn-primary"
</div> >
</form> <span
*ngIf="loading"
class="spinner-border spinner-border-sm mr-1"
></span>
Register
</button>
<a mat-button routerLink="/login" class="btn btn-link">Cancel</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>

43
kibicara-frontend/src/app/auth/register/register.component.scss
View file

@ -0,0 +1,43 @@
.input-container {
display: grid;
grid-template-rows: 1fr 1fr;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
margin-top: 3%;
}
.mat-card:not([class*="mat-elevation-z"]) {
box-shadow: none;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
margin-left: 10%;
margin-right: 10%;
margin-top: 5%;
@media (max-width: 600px) {
grid-template-columns: 1fr;
margin-top: 10%;
margin-left: 5%;
margin-right: 5%;
}
}
.banner {
background: url("../../../assets/hoods1.jpg");
background-size: 100%;
display: block;
width: 100%;
height: 100%;
}
.buttons {
margin-left: 20px;
}
.register-form {
margin-top: 10%;
margin-bottom: 10%;
}

42
kibicara-frontend/src/app/auth/register/register.component.ts
View file

@ -3,6 +3,8 @@ import { AdminService } from '../../core/api';
import { Validators, FormBuilder, FormGroup } from '@angular/forms'; import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { first } from 'rxjs/operators'; import { first } from 'rxjs/operators';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { LoginService } from 'src/app/core/auth/login.service';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({ @Component({
selector: 'app-register', selector: 'app-register',
@ -13,23 +15,34 @@ export class RegisterComponent implements OnInit {
registerForm: FormGroup; registerForm: FormGroup;
loading = false; loading = false;
submitted = false; submitted = false;
error: string;
info: string;
constructor( constructor(
private readonly adminService: AdminService, private readonly adminService: AdminService,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private route: ActivatedRoute private route: ActivatedRoute,
) {} private loginService: LoginService,
private router: Router,
private snackBar: MatSnackBar
) {
if (this.loginService.currentHoodAdminValue) {
this.router.navigate(['/dashboard']);
}
}
ngOnInit(): void { ngOnInit(): void {
this.registerForm = this.formBuilder.group({ this.registerForm = this.formBuilder.group({
email: ['', Validators.required], email: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(6)]], password: ['', [Validators.required, Validators.minLength(8)]],
}); });
if (this.route.snapshot.queryParams['error']) { if (this.route.snapshot.queryParams['error']) {
this.error = 'Invalid confirmation link. Try registering again'; this.snackBar.open(
'Invalid confirmation link. Try registering again',
'Close',
{
duration: 2000,
}
);
} }
} }
@ -44,12 +57,23 @@ export class RegisterComponent implements OnInit {
.pipe(first()) .pipe(first())
.subscribe( .subscribe(
(data) => { (data) => {
this.info = this.snackBar.open(
'Registration E-Mail has been sent. Please check your inbox.'; 'Registration E-Mail has been sent. Please check your inbox.',
'Close',
{
duration: 2000,
}
);
this.loading = false; this.loading = false;
}, },
(error) => { (error) => {
this.error = 'Registration failed! E-Mail exists or is not valid.'; this.snackBar.open(
'Registration failed! E-Mail exists or is not valid.',
'Close',
{
duration: 2000,
}
);
this.loading = false; this.loading = false;
} }
); );