NOTE: This project is incomplete and abandoned.
A Polymer element to interact with Devise authentication. Mimics the functionality of angular_devise.
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
TODO: Register in bower
bower install elliottsj/polymer-devise --save
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>
// 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
});
}
});
// my-element.js
Polymer('my-element', {
ready: function () {
console.log(this.$.devise.isAuthenticated()); // => false
// Log in user...
console.log(this.$.devise.isAuthenticated()); // => true
}
});
// 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({...})
}
});
// 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) {
// ...
}
});
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;
});
}
});
// 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) {
// ...
}
});
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
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/
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'