Angular 2 Instructions

[niklasp]

I can not get the examples run on angular 2 express.js can you post instructions how to?

[colinskow]

Study up on Angular 2 HTTP. It works a bit differently from Angular 1.5. I'm not familiar enough to provide instructions, but it should work. We do need an Angular2 client for SuperLogin.

[darksnow]

I've been learning Angular2 so I'm far from an expert but I got it working with Superlogin easily enough, it's just a REST API so no need for a specific library or anything too clever on the client side. My approach is to store the access keys on a successful login, and then use pouchDB in Angular2 to sync with the private user database provided with a successful login.

I've created an Angular service to access superlogin, while it's not feature complete there's little point in posting it in full, but I can present here some of the code inside my class so you can see how it works.

Please note that it's a work in progress so will not work if you just copy and paste it, try to understand what it does and integrate it into your own app.

  @Injectable()
  export class AuthService {
    private _currentAuth: any = null;

    /**
     * Retrieve tokens from localStorage is present
     */
    constructor(public http: HttpClient) {
      const auth = JSON.parse(localStorage.getItem(this._storageKey));

      if (auth) {
        if (auth.expires < Date.now()) {
          // If the stored credentials have expired, remove all trace
          this._cleanLocalStorage();
        } else {
          this._processLogin(auth);
        }
      }
    }

    /**
     * Helper function to abstract HTTP request
     */
    private _send(endPoint: string, payload: any = null, auth: boolean = true) {
      return this.http.post(this._url + endPoint, payload, {
        headers: auth ? this.getAccessHeader() : null,
        observe: 'body',
        responseType: 'json'
      })
      .do(res => {
        console.log(res);
      });
    }

    /**
     * Process login details returned from registration or login
     */
    private _processLogin(res) {
      console.log('Logged In');
      this._currentAuth = res;
      localStorage.setItem(this._storageKey, JSON.stringify(this._currentAuth));
      this._authState.next(true);
    }

    /**
     * Remove all stores of local authentication data
     */
    private _cleanLocalStorage() {
      console.log('Logged Out');
      this._currentAuth = null;
      localStorage.removeItem(this._storageKey);
      this._authState.next(false);
    }

    /**
     * Pass login crednetials to the API and if successful, store the access
     * token in localStorage for future use.
     */
    register(email: string, password: string, confirm: string) {
        return this._send('register', new HttpParams()
        .set('email', email)
        .set('password', password)
        .set('confirmPassword', confirm), false)
      .do(res => {
        this._processLogin(res);
      });
    }

    /**
     * Pass login crednetials to the API and if successful, store the access
     * token in localStorage for future use.
     */
    login(username: string, password: string) {
      return this._send('login', new HttpParams()
        .set('username', username)
        .set('password', password), false)
      .do(res => {
        this._processLogin(res);
      });
    }

    /**
     * Clear local authentication data and tell the server to do the same
     */
    logout() {
      console.log('Sending Logout');
      return this._send('logout-all')
      .do(res => {
        this._cleanLocalStorage();
      });
    }
  }

[micky2be]

take a look at https://github.com/micky2be/superlogin-client