How to show "Login In failed.Please try again" message in angular when API returns the response?

Issue

I have simple login screen in Angular as:

When the username and password is entered, it successfully hits the /login URL and if it is correct it goes to the userdashboard or admindashboard and when username and password is incorrect it shows me /403 forbidden page.

The output in console comes like:

However I want to show "Login Failed Please enter correct Username and Password Message" but the API is returning the response in the form

@PostMapping(value="/login")
    public ResponseEntity<UserDTO> login(@RequestBody User user,HttpServletRequest request,HttpServletResponse response){
        try {
            Authentication authentication= authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(user.getEmail(), user.getPassword()));
            final JwtUser userDetails=(JwtUser) authentication.getPrincipal();
            System.out.println(userDetails.getAuthorities());
            SecurityContextHolder.getContext().setAuthentication(authentication);
            final String token=jwtTokenUtil.generateToken(userDetails);
            response.setHeader("Token",token);
            return new ResponseEntity<UserDTO>(new UserDTO(userDetails.getUser(), token),HttpStatus.OK);
        } catch(Exception e) {
            throw new UnauthorizedExcpetion(e.getMessage());
        }
    } 

If login is success it returns user object neither it returns the message "Bad Credentials".

And in my Angular I have tried to check the error condition and want to apply the message strategy but it is not printing in console.log() if the login is failed but if the login is success then response is printed in console.log().

loginUser(user:any){
    this.userService.loginUser(user).subscribe((response) => {
        console.log("test");
        if (response) {
            console.log(response.token);
            if (response.token) {
                localStorage.setItem('currentUser',JSON.stringify(response));
                if(response.user.role==='ADMIN') {
                    this.router.navigate(['/admindashboard']);
                } else {
                    this.router.navigate(['/userdashboard']);
                }
            } else {
                console.log(response.error.message);
            }    
        }
    })    
  }

userservice.ts

loginUser(user:any):Observable<any>{
    const headers=new HttpHeaders({'Access-Control-Allow-Origin':'*'});
    return this.http.post("http://localhost:8080/login",user,{headers:headers});
} 

Solution

The response that you are getting goes into the error block in the front end so declare a boolean variable as showErrormessage as false and write the following code in HTML:

  <div *ngIf="showErrorMessage">
    <h1>Invalid username and password Please try again</h1>
  </div>

And in ts file write this

//Declare this variable
showErrorMessage=false;

loginUser(user:any){
    showErrorMessage = false;
    this.userService.loginUser(user).subscribe(
        (response) => {
            console.log("test");
            if (response) {
                console.log(response.token);
                if (response.token) {
                    localStorage.setItem('currentUser', JSON.stringify(response));
                    if (response.user.role === 'ADMIN') {
                        this.router.navigate(['/admindashboard']);
                    } else {
                        this.router.navigate(['/userdashboard']);
                    }
                } else {
                    console.log("No Token");
                }
            }
        },
        (error) => {
            showErrorMessage = true;
        }
    )
}

Answered By - sayeed khan