Simulation of a login functionality in Angular2, token based.

Backend services in Angular2.md

In this gist I show a simple setup for helping me build the frontend of a backend functionality before programming the latter. In this case it is the login functionality.

On the login page there are three buttons to allow me to login with different credentials, so that I can see what the server would tell me in each case. That will guide me to understand how I want to program the frontend.

A couple of seconds after clicking each button I'll get a response from the server.

1. the first button will cause an error response, which I show in a feedback field on the login page.
2. the second and third buttons will cause an OK response, which I store in the auth key of the local storage system.

login.component.html

<p>
  login works!
</p>

<button (click)="login('GrouchoMarx', '')">Login with wrong credentials</button>
<button (click)="login('GrouchoMarx', '123456')">Login as member</button>
<button (click)="login('CharlieChaplin', '567890')">Login as vip</button>

<p>
  {{feedback}}
</p>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { SessionService } from '../session.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  feedback = "Make your choice.";

  constructor(
    private sessionService: SessionService
  ) { }

  ngOnInit() {
  }

  login(username, password) {
    this.feedback = `Logging in as ${username} with password ${password || '(none)'}...`;

    this.sessionService
      .create({username, password})
      .subscribe(
        token => localStorage.setItem('auth', token),
        err => this.feedback = err
      );
  }
}

session.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class SessionService {

  constructor() { }

  create(credentials): Observable<string> {
    return new Observable(observer => {
      setTimeout(() => {
        if (credentials.password !== '') {
          observer.next(`${credentials.username}-1234567890`);
        } else {
          observer.error('wrong credentials');
        }
      }, 2000);
    });
  }
}

1. Notice how I avoid fields altogether at https://gist.github.com/aercolino/035e2931dba9308e375f94b8462010c1#file-login-component-html-L5-L7.

2. Notice how I simulate the backend behaviour right into the service at https://gist.github.com/aercolino/035e2931dba9308e375f94b8462010c1#file-session-service-ts-L12-L16. The wrapping timeout is important to have a relevant asynchronous simulation.

3. Notice how I take control of the login error at https://gist.github.com/aercolino/035e2931dba9308e375f94b8462010c1#file-login-component-ts-L27. The subscribe accepts 3 arguments. The first is for the OK path, the second for the error path, and the third for the completion.