Ember.js Authentication Test

by alexchetv

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div class='container' id='application'>
    <header>
        <h1>Ember Auth Test</h1>
        <p class="debug">authenticated: {{authenticated}}</p>
        {{view App.NavigationView}}
    </header>
    {{#if flashMessage}}
        <aside>
            <p class="flash">{{flashMessage}}</p>
        </aside>
    {{/if}}
    <article>
        {{outlet}}
    </article>
    </div>
    <footer><div id="footer"><a href="http://blog.deanbrundage.com" target="_blank">by Dean</a></div></footer>
</script>

<script type="text/x-handlebars" data-template-name="navigation">
    <nav><div class="container" id='navigation'>
        {{#if authenticated}}
            <a {{action toggleAuthentication}}>Log Out</a> |
            <a {{action goHome}}>Home</a> |
            <a {{action listNews}}>News</a>
        {{else}}
            <a {{action toggleAuthentication}}>Log In</a> |
            <a {{action beSneaky}}>Try Unauthorized</a>
        {{/if}}
    </div></nav>
</script>

<script type="text/x-handlebars" data-template-name="home">
    <div class="container" id='home'>
    <h2>Welcome home {{userName}}</h2>
    {{#if authenticated}}
        <h3>You have news!</h3>
    {{/if}}
    <p>Thanks for visiting</p>
</div>
</script>

<script type="text/x-handlebars" data-template-name="listNews">
    <div class="container" id='news'>
        <h2>Newsfeed</h2>
        {{#unless authenticated}}
            <p class="warning flash">You should only see this when "logged in."</p>
        {{/unless}}
        <ul class="newsfeed">
            {{#each newsItem in controller}}
                <li>{{newsItem.text}}</li>
            {{/each}}
        </ul>
    </div>
</script>

CSS

body { color: #5F5050; margin: 2em 1em;  }

h1 { margin: 0 0 0.2em 0; }

p { margin: 0.5em 0; }

a {
    cursor: pointer;
    text-decoration: underline;
}

.container {
}

.flash {
    border: double 3px #5fa;
    padding: 0.5em 1em;
}

.warning {
    border: double 3px #f00;
}

.debug {
    color: #555;
    font-size: 0.8em;
}

#footer {
    margin-top: 6em;
    text-align: right;
}

#footer a { color: #825;  }

JavaScript

App = Ember.Application.create();

/*
 * Routing
 */
App.Router = Ember.Router.extend({

    enableLogging: true,

    init: function() {
        this.set('authenticated', false);
        return this._super();
    },

    /* Actions */
    goHome: Ember.Route.transitionTo('home'),

    /* "Authentication" method - just toggle the state */
    toggleAuthentication: function() {
        var auth = this.get('authenticated');
        this.set('authenticated', !auth);
        if (auth) {
            this.transitionTo('root.home');
        } else {
            this.transitionTo('loggedIn.home');
        }
    },

    /* Logged out state tree */
    root: Ember.Route.extend({
        home: Ember.Route.extend({
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet(App.HomeView);
            }
        })
    }),

    /* Authenticated state tree */
    loggedIn: Ember.Route.extend({

    beSneaky: Ember.Route.transitionTo('loggedIn.news.list'),
    listNews: Ember.Route.transitionTo('loggedIn.news.list'),

        /* Enter checks user is authenticated */
        enter: function(manager, transition, async, resume) {
            console.log('logging in (authenticated ' + manager.get('authenticated') + ')');

            var appController = manager.get('applicationController');
            if (manager.get('authenticated')) {
                appController.setFlashMessage('Logged In');
                this._super();
            } else {
                appController.setFlashMessage('Unauthorized!');
                manager.transitionTo('root.home');
            }
        },

        /* Exit sets authenticated to false just to be sure */
        exit: function(manager, transition, async, resume) {
            manager.get('applicationController').setFlashMessage('Logged Out');
            manager.set('authenticated', false);
            this._super();
        },

        /* Sub-states */
        home:...