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 *ngIf="info" class="alert alert-danger">{{ info }}</div>
<h2>Register</h2>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email">E-Mail</label>
<input
type="text"
formControlName="email"
class="form-control"
[ngClass]="{
'is-invalid': submitted && registerForm.controls.email.errors
}"
/>
<div
*ngIf="submitted && registerForm.controls.email.errors"
class="invalid-feedback"
>
<div *ngIf="registerForm.controls.email.errors.required">
E-Mail is required
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
formControlName="password"
class="form-control"
[ngClass]="{
'is-invalid': submitted && registerForm.controls.password.errors
}"
/>
<div
*ngIf="submitted && registerForm.controls.password.errors"
class="invalid-feedback"
>
<div *ngIf="registerForm.controls.password.errors.required">
Password is required
</div>
<div *ngIf="registerForm.controls.password.errors.minlength">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">
<span
*ngIf="loading"
class="spinner-border spinner-border-sm mr-1"
></span>
Register
</button>
<a routerLink="/login" class="btn btn-link">Cancel</a>
</div>
</form>
<div class="container">
<div class="banner"></div>
<mat-card class="register-form">
<mat-card-header>
<h2>Register as a hood admin!</h2>
</mat-card-header>
<mat-card-content>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="input-container">
<mat-form-field appearance="fill">
<mat-label for="email">E-Mail</mat-label>
<input type="text" formControlName="email" matInput />
<mat-error
*ngIf="
registerForm.controls.email.errors &&
registerForm.controls.email.errors.required
"
>
E-Mail is required
</mat-error>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input
type="password"
formControlName="password"
matInput
[type]="'password'"
/>
<mat-error
*ngIf="
registerForm.controls.password.errors &&
registerForm.controls.password.errors.required
"
>
Password is required
</mat-error>
<mat-error
*ngIf="
registerForm.controls.password.errors &&
registerForm.controls.password.errors.minlength
"
>
Password requires minimal length 8
</mat-error>
</mat-form-field>
</div>
<div class="buttons">
<button
mat-raised-button
color="primary"
[disabled]="loading"
class="btn btn-primary"
>
<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 { first } from 'rxjs/operators';
import { Router, ActivatedRoute } from '@angular/router';
import { LoginService } from 'src/app/core/auth/login.service';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-register',
@ -13,23 +15,34 @@ export class RegisterComponent implements OnInit {
registerForm: FormGroup;
loading = false;
submitted = false;
error: string;
info: string;
constructor(
private readonly adminService: AdminService,
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 {
this.registerForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(6)]],
password: ['', [Validators.required, Validators.minLength(8)]],
});
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())
.subscribe(
(data) => {
this.info =
'Registration E-Mail has been sent. Please check your inbox.';
this.snackBar.open(
'Registration E-Mail has been sent. Please check your inbox.',
'Close',
{
duration: 2000,
}
);
this.loading = false;
},
(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;
}
);