Within my angular 7 application, there is a sign in component that triggers the sign in function within the authentication service. This function initiates an HTTP post request and then subscribes to the response. My goal is to have both the auth service function and component function subscribe to it so that if incorrect credentials are entered, the component can notify the user and display a loading spinner while waiting for the request to complete.
Sign in component:
onSignIn() {
if (this.signinForm.invalid) {
return;
}
this.failedSignIn = null;
this.isLoading = true;
this.authService.signin(this.signinForm.value.email, this.signinForm.value.password);
this.isLoading = false;
}
Sign in function in Auth service:
signin(email: string, password: string) {
const signinData = {email: email, password: password};
this.http.post<{userEmail: string, userId: string, token: string, refreshToken: string, expiresIn: number, userType: string }>(URL + 'signin', signinData).subscribe(response => {
// Additional operations here
});
}
Ultimately, my desired approach is:
onSignIn() {
if (this.signinForm.invalid) {
return;
}
this.failedSignIn = null;
this.isLoading = true;
this.authService.signin(this.signinForm.value.email, this.signinForm.value.password).subscribe(res => {
this.isLoading = false;
this.isAuth = res.isAuth;
});
}