ABANDONED: polymer-devise

NOTE: This project is incomplete and abandoned.

A Polymer element to interact with Devise authentication. Mimics the functionality of angular_devise.

Requirements

This service requires Devise to respond to JSON. To do that, simply add

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  respond_to :html, :json
  # ...
end

TODO: Figure out how to do the CSRF token stuff

Installing

TODO: Register in bower

bower install elliottsj/polymer-devise --save

Usage

Simple usage with no parameters provided:

<link rel="import" href="bower_components/polymer-devise/polymer-devise.html">
<polymer-element name="my-element">
  <template>
    <polymer-devise id="devise"></polymer-devise>
  </template>
  <script src="my-element.js"></script>
</polymer-element>

With optional parameters provided (default values shown):

<link rel="import" href="bower_components/polymer-devise/polymer-devise.html">
<polymer-element name="my-element">
  <template>
    <polymer-devise id="devise"
                    loginMethod="POST"
                    loginPath="/users/sign_in.json"
                    logoutMethod="DELETE"
                    logoutPath="/users/sign_out.json"
                    registerMethod="POST"
                    registerPath="/users.json"></polymer-devise>
  </template>
  <script src="my-element.js"></script>
</polymer-element>

With event handlers declared:

<link rel="import" href="bower_components/polymer-devise/polymer-devise.html">
<polymer-element name="my-element">
  <template>
    <polymer-devise id="devise"
                    on-devise-login="{{onLogin}}"
                    on-devise-new-session="{{onNewSession}}"
                    on-devise-logout="{{onLogout}}"
                    on-devise-new-registration="{{onNewRegistration}}"></polymer-devise>
  </template>
  <script src="my-element.js"></script>
</polymer-element>

currentUser()

// my-element.js
Polymer('my-element', {
  ready: function () {
    this.$.devise.currentUser().then(function (user) {
      // User was logged in, or Devise returned
      // previously authenticated session.
      console.log(user); // => {id: 1, ect: '...'}
    }, function(error) {
      // unauthenticated error
    });
  }
});

isAuthenticated()

// my-element.js
Polymer('my-element', {
  ready: function () {
    console.log(this.$.devise.isAuthenticated()); // => false
    
    // Log in user...
    
    console.log(this.$.devise.isAuthenticated()); // => true
  }
});

login(creds)

// my-element.js

var credentials = {
  email: 'user@domain.com',
  password: 'password1'
};

Polymer('my-element', {
  ready: function () {
    this.$.devise.login(credentials).then(function(user) {
      console.log(user); // => {id: 1, ect: '...'}
    }, function(error) {
      // Authentication failed...
    });
  },
  onLogin: function (event, currentUser, sender) {
    // after a login, a hard refresh, a new tab
  },
  onNewSession: function (event, currentUser, sender) {
    // user logged in by Auth.login({...})
  }
});

logout()

// my-element.js
Polymer('my-element', {
  ready: function () {
    // Log in user...
    // ...
    this.$.devise.logout().then(function(oldUser) {
      // alert(oldUser.name + "you're signed out now.");
    }, function(error) {
      // An error occurred logging out.
    });
  },
  onLogout: function (event, oldCurrentUser, sender) {
    // ...
  }
});

parse(response)

TODO: Figure out how this works w/ Polymer

// my-element.js
Polymer('my-element', {
  ready: function () {
    // Customize user parsing
    // NOTE: **MUST** return a truth-y expression
    AuthProvider.parse(function(response) {
        return response.data.user;
    });
  }
});

register(creds)

// my-element.js

var credentials = {
  email: 'user@domain.com',
  password: 'password1',
  password_confirmation: 'password1'
};

Polymer('my-element', {
  ready: function () {
    this.$.devise.register(credentials).then(function(registeredUser) {
      console.log(registeredUser); // => {id: 1, ect: '...'}
    }, function(error) {
      // Registration failed...
    });
  },
  onNewRegistration: function (event, user, sender) {
    // ...
  }
});

Development

Clone the repo and install bower components:

mkdir polymer/
cd polymer/
git clone git@github.com:elliottsj/polymer-devise.git
cd polymer-devise/
bower install

Viewing documentation

Start a local web server in the polymer/ directory that contains polymer-devise/

cd polymer/
python -m http.server

Then browse to http://localhost:8000/polymer-devise/

Running tests

Start a local web server in the polymer/ directory and open http://localhost:8000/polymer-devise/tests/runner.html:

cd polymer/
python -m http.server
open 'http://localhost:8000/polymer-devise/tests/runner.html'