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>
@ -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

@ -17,6 +17,9 @@ export class LoginComponent
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)
{ {
if (this.route.snapshot.queryParams["ReturnUrl"]) if (this.route.snapshot.queryParams["ReturnUrl"])
@ -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); });
} }