Ember.js Authentication

by pangratz666

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/pangratz/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" >
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="login" >
    <p class="info">{{message}}</p>
    Login to view the admin area <br/>
    Email: {{view Ember.TextField valueBinding="email" }} <br/>
    Password: {{view Ember.TextField valueBinding="password" }} <br/>
    <button {{action login}} >Login</button>
</script>
<script type="text/x-handlebars" data-template-name="authenticating" >
    Communicating with server ...
</script>
<script type="text/x-handlebars" data-template-name="admin" >
    Hello admin!
</script>

CSS

.info {
    color: red;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    login: function() {
        // reset message
        this.set('message', null);

        // get data from login form
        var loginProps = this.getProperties('email', 'password');

        // simulate communication with server
        Ember.run.later(this, function() {
            if (loginProps.password === 'admin') {
                this.set('isAuthenticated', true);
                this.get('target').send('isAuthenticated');
            } else {
                this.set('message', 'Invalid username or password');
                this.set('isAuthenticated', false);
                this.get('target').send('isNotAuthenticated');
            }
        }, 1000);

        // inform target that authentication is in progress        
        this.get('target').send('authenticationInProgress');
    },
    logout: function() {
        this.set('isAuthenticated', false);
    }
});
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.LoginView = Ember.View.extend({
    templateName: 'login'
});
App.AdminView = Ember.View.extend({
    templateName: 'admin'
});
App.AuthenticatingView = Ember.View.extend({
    templateName: 'authenticating'
});

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            loggedOut: Ember.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('login');
                },
                login: function(router) {
                    router.get('applicationController').login();
                },
                authenticationInProgress: function(router) {
                    router.transitionTo('authenticating');
                }
            }),
            authenticating: Ember.State.extend({
                enter: function(router) {
 ...