Adding errors to the login/register view

This commit is contained in:
Zoe Roux 2020-03-20 00:22:18 +01:00
parent 44605c4360
commit ccbda0fd74
2 changed files with 15 additions and 7 deletions

View File

@ -29,6 +29,11 @@
</mat-form-field> </mat-form-field>
<br/> <br/>
<mat-checkbox class="pl-3" [(ngModel)]="loginInformation.stayLoggedIn" name="rememberme">Stay logged in</mat-checkbox> <mat-checkbox class="pl-3" [(ngModel)]="loginInformation.stayLoggedIn" name="rememberme">Stay logged in</mat-checkbox>
<br/>
<br/>
<mat-error *ngFor="let item of this.loginErrors;">
{{item.description}}
</mat-error>
</mat-card-content> </mat-card-content>
<div fxFlexAlign="end" align="end" style="text-align: end"> <div fxFlexAlign="end" align="end" style="text-align: end">
<button mat-button type="submit" [disabled]="!loginForm.valid">Login</button> <button mat-button type="submit" [disabled]="!loginForm.valid">Login</button>
@ -38,7 +43,7 @@
<mat-tab label="Register"> <mat-tab label="Register">
<br/> <br/>
<form #signinForm="ngForm" (ngSubmit)="register()"> <form #signinForm="ngForm" (ngSubmit)="register()">
<mat-card-content> <mat-card-content>
<mat-form-field appearance="outline" class="w-75"> <mat-form-field appearance="outline" class="w-75">
<mat-label>Email</mat-label> <mat-label>Email</mat-label>
<input matInput name="signinEmail" #signinEmail="ngModel" [(ngModel)]="signinInformation.email" required email> <input matInput name="signinEmail" #signinEmail="ngModel" [(ngModel)]="signinInformation.email" required email>
@ -73,6 +78,10 @@
Error: {{signinPassword.getError("passwordError")["error"]}} Error: {{signinPassword.getError("passwordError")["error"]}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-error *ngFor="let item of this.registerErrors;">
{{item.description}}
</mat-error>
</mat-card-content> </mat-card-content>
<div fxFlexAlign="end" align="end" style="text-align: end"> <div fxFlexAlign="end" align="end" style="text-align: end">
<button mat-button type="submit" [disabled]="!signinForm.valid">Sigin</button> <button mat-button type="submit" [disabled]="!signinForm.valid">Sigin</button>

View File

@ -16,6 +16,9 @@ export class LoginComponent
signinInformation: {email: string, username: string, password: string} = {email: "", username: "", password: ""}; signinInformation: {email: string, username: string, password: string} = {email: "", username: "", password: ""};
hidePassword: boolean = true; hidePassword: boolean = true;
redirectURI: string; redirectURI: string;
loginErrors: [{code: string, description: string}];
registerErrors: [{code: string, description: string}];
constructor(private router: Router, private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar) constructor(private router: Router, private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar)
{ {
@ -29,14 +32,11 @@ export class LoginComponent
{ {
this.http.post("/api/account/login", this.loginInformation).pipe(catchError((error => this.http.post("/api/account/login", this.loginInformation).pipe(catchError((error =>
{ {
console.log(error.status + " - " + error.message); this.loginErrors = error.error;
this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
return EMPTY; return EMPTY;
}))).subscribe(() => }))).subscribe(() =>
{ {
window.location.href = this.redirectURI; window.location.href = this.redirectURI;
}, error => {
console.log("Login error: " + error);
}); });
} }
@ -50,8 +50,7 @@ export class LoginComponent
// @ts-ignore // @ts-ignore
this.http.post<string>("/api/account/register", this.signinInformation, {responseType: "text"}).pipe(catchError((error => this.http.post<string>("/api/account/register", this.signinInformation, {responseType: "text"}).pipe(catchError((error =>
{ {
console.log(error.status + " - " + error.message); this.registerErrors = JSON.parse(error.error);
this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
return EMPTY; return EMPTY;
}))).subscribe(otac => { this.useOTAC(otac); }); }))).subscribe(otac => { this.useOTAC(otac); });
} }