Customizing Angular 9 Client Login Page
I have made updates to display a specific error message in the <h4> element on the login page instead of the generic message that is currently being shown.
Note: I have implemented the solution below.
<div class="navbar bg-info mb-1">
<a class="navbar-brand text-white">The ACTS Factory Authentication</a>
</div>
<!-- Specific error condition will be displayed here -->
<h4 *ngIf="showError" class="p-2 bg-danger text-white">
<!-- Invalid username or password! --> {{theError}}
</h4>
<form novalidate #authForm="ngForm" class="m-3" title="LoginForm">
<div class="form-group">
<label>Name:</label>
<input #name="ngModel" name="name" class="form-control"
[(ngModel)]="authService.name" required />
<div *ngIf="name.invalid" class="text-danger">
Please enter your user name
</div>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" #password="ngModel" name="password"
class="form-control" [(ngModel)]="authService.password" required />
<div *ngIf="password.invalid" class="text-danger">
Please enter your password
</div>
</div>
<div class="text-center pt-2">
<button type="button" class="btn btn-primary font-weight-bold" [disabled]="authForm.invalid"
(click)="login()">
Please Login
</button>
</div>
</form>
Improved Angular 9 Component Logic
This Angular client component now handles login requests more efficiently. It subscribes to the authentication service repository's Login() method and displays specific error messages based on responses received from the server.
Note: The code has been updated with the new solution.
import { Component } from "@angular/core";
import { AuthenticationService } from "./authentication.service";
import { HttpErrorResponse } from "@angular/common/http";
@Component({
templateUrl: "authentication.component.html"
})
export class AuthenticationComponent {
showError: boolean = false;
theError?: string = null;
constructor(public authService: AuthenticationService) { }
login() {
// Implementation details for subscribing and handling response
}
}
Updated Angular 9 Login Functionality
The login functionality in the client authentication service repository has been enhanced. Error messages are now captured and passed back to the client for display along with specific response status codes. Note: The code has been modified with the solution implementation.
// New property for capturing errors
theError: string = null;
login(): Observable<boolean> {
// Updated logic with error handling
)]
}
Refined ASP.NET Core MVC Account Controller
The ASP.NET Core MVC account controller now returns specific error conditions for failed logins, which are then displayed on the client side. The adjustments help improve the user experience and provide relevant feedback upon unsuccessful login attempts. Note: Check out the code enhancements for detailed insights.
Any suggestions or feedback would be highly appreciated. Thank you.
Original Error Condition Displayed in Client:
https://i.sstatic.net/65q5pd9B.jpg
Solution Preview with Specific Error Conditions on Status Code 203: