angular-stormpath

Stormpath Angular 2 SDK

Angular 2 Components for integrating with Stormpath's API

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

Angular 2 SDK for Stormpath's API. If you're looking for AngularJS support, please see stormpath-sdk-angularjs.

Installation

Install through npm:

npm install --save angular-stormpath

Then use it in your app like so:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Account, Stormpath } from 'angular-stormpath';

@Component({
  selector: 'app-root',
  template: `<div *ngIf="(user$ | async)" class="row text-center">
       <h2 class="">
         Welcome, ({{ ( user$ | async ).fullName }}).
       </h2>
       <hr/>
       <h4>What would you like to do?</h4>

       <ul class="nav nav-pills nav-stacked text-centered">
         <li role="presentation" (click)="logout()"><a href="#">Logout</a></li>
       </ul>
     </div>

     <sp-authport></sp-authport>`,
  providers: [Stormpath]
})
export class AppComponent {
  private user$: Observable<Account | boolean>;
  private loggedIn$: Observable<boolean>;
  private login: boolean;
  private register: boolean;

  constructor(public stormpath: Stormpath) {}

  ngOnInit() {
    this.login = true;
    this.register = false;
    this.user$ = this.stormpath.user$;
    this.loggedIn$ = this.user$.map(user => !!user);
  }

  showLogin() {
    this.login = !(this.register = false);
  }

  showRegister() {
    this.register = !(this.login = false);
  }

  logout() {
    this.stormpath.logout();
  }
}

You may also find it useful to view the demo source.

Configuration

To override the endpoint prefix or URIs for the various endpoints, you can modify the defaults in StormpathConfiguration.

For example, to override the endpoint prefix and /me URI in demo.module.ts, change it to the following:

let spConfig: StormpathConfiguration = new StormpathConfiguration();
spConfig.endpointPrefix = 'http://api.mycompany.com';
spConfig.meUri = '/account';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, StormpathModule],
  bootstrap: [AppComponent],
  providers: [{
    provide: StormpathConfiguration, useValue: spConfig
  }]
})
export class DemoModule {
}

To override templates, you can use the customTemplate attribute on a component. Below is a simple example:

<template #loginform>
  <div *ngIf="error" class="alert alert-danger">{{error}}</div>
  <form>
      <label>Email</label>
      <input name="login" type="text" [(ngModel)]="loginFormModel.login">
      <label for="passwordField">Password</label>
      <input id="passwordField" type="password" [(ngModel)]="loginFormModel.password">
      <button (click)="login()">Login</button>
  </form>
</template>

<template #authport>
  ...
  <login-form [customTemplate]="loginform"></login-form>
</template>

<sp-authport [customTemplate]="authport"></sp-authport>

Below is a list of direct links to each component's HTML. You can use these as a starting point for your customizations.

• authport.component.html
• email-verification.component.html
• forgot-password.component.html
• login.component.html
• register.component.html
• resend-email-verification.component.html
• reset-password-component.component.html

Usage without a module bundler

<script src="node_modules/dist/umd/stormpath-sdk-angular/stormpath-sdk-angular.js"></script>
<script>
    // everything is exported Stormpath namespace
</script>

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here: https://docs.stormpath.com/angular/api

Development

Prepare your environment

• Install Node.js and NPM (should come with)
• Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

• Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

For more information, see generator-angular2-module. It was used to create this project.

License

Apache-2.0 © Stormpath

Changelog

0.0.3 (2016-12-02)

Features

• Add support for overridding templates (bc4e6b0)

<a name="0.0.2"></a>