Trouble loading ember-simple-auth with ember-cli - ember.js

I am trying to verify that the session object is available in my ember app. I've used ember-cli to generate the app and I've followed the ember-auth installation instructions. The instructions say "add the Ember CLI Addon to your project and Ember Simple Auth will setup itself".
npm install --save-dev ember-cli-simple-auth
Unfortunately when I am in my controller there is no session object.
I have also tried loading the initalizer in my app.js but I have yet to figure out how to access App.session from my controller. I think ember-cli has namespaced things differently.
//app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'ember-test', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'ember-test');
loadInitializers(App, 'simple-auth');
export default App;
//about.js
import Ember from 'ember';
export default Ember.Controller.extend({
derp: 'derpvalue',
actions: {
test : function(){
console.log("In test");
console.log(session);
console.log(App.session);
debugger;
}
}
});

Here are recent ember-cli-simple-auth setup instructions from the author
You shouldn't have to manually set up an initializer. And I can verify that the author's instructions should give you this.session in your controller.
Copying the author's instructions:
Installing Ember Simple Auth in an ember-cli project is really easy now. All you have to do is install the ember-cli addon from npm:
npm install --save-dev ember-cli-simple-auth
This will install Ember Simple Auth’s AMD distribution into the project, register the initializer so Ember Simple Auth automatically sets itself up and add itself as a dependency to the project’s package.json.
You can add a login route and login/logout links to verify it all actually works:
// app/router.js
…
Router.map(function() {
this.route('login');
});
…
// app/templates/application.hbs
…
{{#if session.isAuthenticated}}
<a {{ action 'invalidateSession' }}>Logout</a>
{{else}}
{{#link-to 'login'}}Login{{/link-to}}
{{/if}}
…
Also implement the ApplicationRouteMixin in the project’s application route:
// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin);
Setting up authentication
To actually give the user the option to login, we need to add an authentication package for Ember Simple Auth. Let’s assume you have an OAuth 2.0 compatible server running at http://localhost:3000. To use that, install the OAuth 2.0 extension library which again is as easy as installing the package from npm:
npm install --save-dev ember-cli-simple-auth-oauth2
Like the ember-cli-simple-auth package this will setup itself so that nothing else has to be done in order to use the OAuth 2.0 functionality.
The OAuth 2.0 authentication mechanism needs a login form, so let’s create that:
// app/templates/login.hbs
<form {{action 'authenticate' on='submit'}}>
<label for="identification">Login</label>
{{input id='identification' placeholder='Enter Login' value=identification}}
<label for="password">Password</label>
{{input id='password' placeholder='Enter Password' type='password' value=password}}
<button type="submit">Login</button>
</form>
Then implement the LoginControllerMixin in the login controller and make that use the OAuth 2.0 authenticator to perform the actual authentication:
// app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:oauth2-password-grant'
});
As the OAuth 2.0 authenticator would by default use the same domain and port to send the authentication requests to that the Ember.js is loaded from you need to configure it to use http://localhost:3000 instead:
// config/environment.js
if (environment === 'development') {
…
ENV['simple-auth-oauth2'] = {
serverTokenEndpoint: 'http://localhost:3000/token'
}
…
As ember-cli adds all configuration to the global ENV variable (e.g. in this case MyAuthAppENV) which Ember Simple Auth cannot use as it doesn’t know it’s name, you need to copy that to window.ENV so Ember Simple Auth can use it:
// app/initializers/simple-auth-config.js
export default {
name: 'simple-auth-config',
before: 'simple-auth',
initialize: function() {
window.ENV = MyAuthAppENV;
}
};
Ember Simple Auth is awesome!

Related

sendAction is not working for component in ember js

sendAction is not working for component. When using component inside view and sending action from component to view.
confirm-dailog.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
closeConfirmDialog:function(){
this.sendAction('onCancel');
}
}
})
confirm-dailog.hbs
<div class="dialog" id="dialog">
<div class="text">{{text}}</div>
<div class="button"{{action 'closeConfirmDialog'}}>Cancel</div>
</div>
modal.js
import Ember from 'ember';
export default Ember.View.extend({
layoutName: 'components/modal-box',
actions:
{
closeDialog:function()
{
console.log('called model closedialog')
},
}
})
modal-box.hbs
<div class="dialog" id="dialog">
{{yield}}
{{confirm-dialog onCancel="closeDialog" text="Would you like to close the modal"}}
</div>
when i am clicking on cancel button closeConfirmDialog action gets called and from there i am trying to send closeDialog action but its showing error Nothing handled the action 'closeDialog'
here i have added screenshot of ui
Ember : 1.8.1
Ember Data : 1.13.7
Handlebars : 1.3.0
jQuery : 1.11.1
Views are removed from Ember 2.0 API. http://emberjs.com/deprecations/v1.x/#toc_ember-view
I would encourage you to replace view with Component.
Moreover for your requirement ember-elsewhere addon or ember-modal-dialog would be most suitable.

how to bind Application controller property in another controller ember

i have search property in ApplicationController and its linked with input field of searching.
i want to access search field of ApplicationController in ProjectController. it should be sync.
i use following code but its not working.
/ app/controllers/projects/index.js (project Controller)
import Ember from 'ember';
export default Ember.Controller.extend({
needs: ['application'],
searchBinding: 'controllers.application.search'
});
/ app/controllers/application.js (Application Controller)
import Ember from 'ember';
export default Ember.Controller.extend({
search: ''
)}
application.hbs
{{input value = search}}
Ember needs is deprecated and is now used differently.
It works like this:
applicationController: Ember.inject.controller('application'),
mySearch: Ember.computed.alias('applicationController.search')
In your hbs template -
{{mySearch}}
 is in sync with applications property "search".
You can access any controller within controller by inject it.
import Ember from 'ember';
export default Ember.Controller.extend({
applicationController: Ember.inject.controller('application'),
searchProperty: Ember.computed.alias('applicationController.search'),
)};
Managing Dependences between Ember controllers
You can access controllers properties included with needs this way :
{{controllers.neededController.property}}
In you case try :
{{input value=controllers.application.search}}
See example here : http://jsfiddle.net/6Evrq/

authenticating with ember-simple-auth and torii custom authenticator

I'm getting different behaviours from session.isAuthenticated depending on how I access it. This is probably only a symptom of my real problem.
What happens:
click sign in button
window pops up, prompts for login
login, popup goes away
templates that rely on
session.isAuthenticated do not change display state (ie, continue
acting as if it is false or undefined)
if I console.log
this.get('session.isAuthenticated') I get true
When this was just torii everything was working, so I've messed up when adding ember-simple-auth somehow.
I get several "DEPRECATION: Using the injected 'container' is deprecated. Please use the 'getOwner' helper instead to access the owner of this object warnings but when it was just torii it worked fine with these warning so I assume they still aren't a problem.
templates/application.hbs
<header>
<nav class="nav-main">
{{#if session.isAuthenticated}}
<button {{action 'invalidateSession'}}>Sign out</button>
{{else}}
<button {{action 'authenticate'}}>Sign in</button>
{{/if}}
Auth: {{session.isAuthenticated}}<br>
<button {{action 'icanhaz'}}>test?</button>
</nav>
</header>
routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin, {
session: Ember.inject.service('session'),
actions: {
authenticate() {
this.get('session').authenticate('authenticator:torii', 'myprovider');
},
invalidateSession() {
this.get('session').invalidate();
},
icanhaz() {
console.log(this.get('session.isAuthenticated'));
}
}
});
adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
host: 'https://myprovider.herokuapp.com',
namespace: 'api/v2'
});
authenticators/torii.js
import Ember from 'ember';
import ToriiAuthenticator from 'ember-simple-auth/authenticators/torii';
export default ToriiAuthenticator.extend({
torii: Ember.inject.service(),
})
environment.js
module.exports = function(environment) {
var ENV = {
modulePrefix: 'my-app-prefix',
environment: environment,
baseURL: '/',
locationType: 'auto',
},
contentSecurityPolicy: {
'connect-src': "'self' myprovider.herokuapp.com",
},
torii: {
providers: {
'myprovider': {
apiKey: '6T7hlTUqfYMgcxkXPAOeNzVmC5L26bTYe9A8D5fc',
scope: 'read write',
redirectUri: 'http://localhost:4200'
}
}
}
};
};
You have to inject the session service's into all controllers/components that back templates you want to use the session in. As you're using the session in the application template you'd have to inject the session service in the application controller. Injecting it in the application route does not make it available in the template.

Ember-cli, Masonry, Isotope, Packery. How to use?

I need to use them in my ember-cli project.
How to start?
I writed in terminal:
bower install isotope --save
then in my ember-cli-build.js I added app.import ecc..., but then I don't know what to do.
Where to put my intialization script, like this:
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
If I put it in application.hbs it give to me an error and when i change route with {{#link-to}} it doesn't work anymore.
What to do?
In the web there aren't many resources about this.
You should create a component:
ember g component isotope-grid
Then, in component's didInsertElement hook you should call isotope on component's jQuery element:
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['grid'],
didInsertElement() {
this.$().isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
}
})
Then, instead of using <div class="grid"></div>, use:
{{#isotope-grid}}
... HTML goes here
{{/isotope-grid}}

How to programatically add component via controller action in ember 2.x

I am being faced with the same problem on
How to programatically add component via controller action
However since I am using ember cli, I am unable to do so.
Here is my source code
import Ember from "ember";
export default Ember.Component.extend({
actions : {
remove : function(){
this.remove();
},
add : function()
{
Ember.AuthorNameComponent.create().appendTo($('#authors'));
}
},
});
When I try to run this code, I get undefined error. Also name of component is author-name.
Any help, how can I create component via programmatically?
You need to import the component, then you don't need the Ember Global.
import AuthorNameComponent from '../components/author-name-component'
Another way is to have an array of items and base the list of AuthorNameComponent from that.
{{#each items as |item|}}
{{author-name name=item.name}}
{{/each}}