I am currently working on a login form component that includes the following:
login.component.ts
ngOnInit() {
this.authenticationService.loginAttempt
.subscribe(() => this.onSuccess(), err => this.onError(err));
}
login(credentials) {
this.authenticationService.attempt(credentials);
}
In my authentication service, I have the following setup:
authentication.service.ts
class AuthenticationService {
loginAttempt = new Observable<>();
credentials = new Subject<Credentials>();
constructor(private userService: UserService) {
this.loginAttempt = this.credentials
.flatMap(credentials => this.makeLoginRequest(credentials);
}
attempt(credentials: Credentials) {
this.credentials.next(credentials);
}
private makeLoginRequest(credentials) {
return this.userService.getTokens(credentials.email, credentials.password);
}
}
The issue I am encountering is that when a login attempt fails and triggers the onError function in the login.component, subsequent login attempts do not trigger the request due to the previous error. How can I handle errors in the login.component to display an error message while still allowing for retry attempts?
Edit:
This question recommends using retry or retryWhen. However, I am unsure how to implement this based on user interactions when clicking the login button again. What would be the best approach to achieve this?