I read the following Devise + Rails + Ember implementation guide for user authentication and authorization.
Resources
I followed this guide: http://pivotallabs.com/playing-with-ember-js-and-devise/
QUESTIONS
The tutorial that I followed worked well with Ember-data 0.13, but no longer works with Ember-data 1.0 to login or register users. Now, when I click on the login button, I get a POST / user message with the following errors:
1) POST localhost:3000/users 422 (Unprocessable Entity)
2) Uncaught TypeError: Object.keys called by a non-object
3) If I am in the login form, I can create a user in the database. NOT GOOD!
In my login form, I have a login button that maps to the new_sessions controller. The action is as follows:<div class="button" {{action save}}><span class="btn-text">Login</span></div>
EDIT . I believe that the main source of the error occurs in user routes.
Consider the following old code using Ember 0.13:
/routes/users.js
App.UsersNewRoute = Ember.Route.extend({
model: function() {
return App.User.createRecord();
},
setupController: function(controller, model) {
controller.set('content', model);
}
});
App.SessionsNewRoute = Ember.Route.extend({
model: function() {
return App.Session.createRecord();
},
setupController: function(controller, model) {
controller.set('content', model);
}
});
In Ember-data 1.0, this route no longer uses setupController. You can read more here: http://blog.crowdint.com/2013/09/10/upgrading-your-old-ember-js-application.html
The code will look like
/routes/users.js
App.UsersNewRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('user');
}
});
App.SessionsNewRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('session');
}
});
SessionNewRoute cannot return the session by creating an entry in the repository.
CODE
Ember Initializer :
/initializer/currentUser.js
App.initializer({
name: 'currentUser',
initialize: function(container) {
var store = container.lookup('store:main');
var user = App.User.find('current');
container.lookup('controller:currentUser').set('content', user);
container.typeInjection('controller', 'currentUser', 'controller:currentUser');
}
});
Amber ROUTES
routes / users.js
App.UsersNewRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('user');
}
});
App.SessionsNewRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('user');
}
});
App.SessionsDestroyRoute = Ember.Route.extend({
enter: function() {
var controller = this.modelFor('currentUser');
controller.set('content', undefined);
App.Session.find('current').then(function(session) {
session.deleteRecord('user');
controller.store.commit();
});
this.transitionTo('index');
}
});
$(function() {
var token = $('meta[name="csrf-token"]').attr('content');
$.ajaxPrefilter(function(options, originalOptions, xhr) {
xhr.setRequestHeader('X-CSRF-Token', token);
});
});`
Rails Session CONTROLLER
Controllers / sessionscontroller.rb:
class SessionsController < ApplicationController
respond_to :json
def create
user = User.find_for_database_authentication(email: params[:session][:email])
if user && user.valid_password?(params[:session][:password])
sign_in user
render json: {
session: { id: user.id, email: user.email }
}, status: :created
else
render json: {
errors: {
email: "invalid email or password"
}
}, status: :unprocessable_entity
end
end
def show
user = User.find(params[:id])
end
def destroy
sign_out :user
render json: {}, status: :accepted
end
end
EMBER Session Controller
Controllers / sessions_new_controller.js
App.SessionsNewController = Ember.ObjectController.extend({
actions: {
save: function() {
var self = this;
this.content.save().then(function() {
var userJSON = self.content.getProperties();
userJSON.id = 'current';
var object = self.store.load(App.User, userJSON);
var user = App.User.find('current');
self.get('controllers.currentUser').set('content', user);
self.transitionToRoute('colonies');
});
},
cancel: function() {
this.content.deleteRecord('user');
this.transitionToRoute('colonies');
}
}
});
Ember CurrentUser Controller
/current_user_controller.js
App.CurrentUserController = Ember.ObjectController.extend({
isSignedIn: function() {
return this.get('content') && this.get('content').get('isLoaded');
}.property('content.isLoaded')
});
STORE
JavaScripts/store.js
App.Store = DS.Store.extend({
adapter: '_ams'
});
"_ams", . - , / usercontroller , !