Проблема использования поддельного входа в API с Angular

Question

Я новичок в Angular, я просто пишу сервис, который проверяет вход в систему, но у меня нет кода стороны обслуживания, поэтому я нашел поддельный API для проверки входа, но я не знаю, почему он не работает.

Вот сайт поддельного API https://reqres.in/ вы можете найти API входа.

введите описание изображения здесь

Вот сервис, который я написал: -

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {
  constructor(private http: Http) {
  }

  login(credentials) { 
   return this.http.post('https://reqres.in/api/login', 
      JSON.stringify(credentials)).map(response=>{
        let result = response.json();
         if (result && result.token) {
           localStorage.setItem("token", result.token) ;
           return true;
         }
         else{
           return false;
         }
      });
  }


  isLoggedIn() { 
    return false;
  }
}

Вход в систему:

import { AuthService } from './../services/auth.service';
import { Component } from '@angular/core';
import { Router } from "@angular/router";

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  invalidLogin: boolean; 

  constructor(
    private router: Router, 
    private authService: AuthService) { }

  signIn(credentials) {
    this.authService.login(credentials)
      .subscribe(result => { 
        if (result)
          this.router.navigate(['/']);
        else  
          this.invalidLogin = true; 
      });
  }
}