/jsbin.eQOZoGe.html

## jsbin.eQOZoGe.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
  <script src="http://builds.emberjs.com/canary/ember.prod.js"></script>

</head>
<body>
  <script type="text/x-handlebars">
    {{#if isLoggedIn}}
      <button {{action "logout"}}>Log Out</button>
    {{/if}}

    <h1>My Blog</h1>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="login">
    <form {{action "login" on="submit"}}>
      {{input type="text" value=username}}
      {{input type="password" value=password}}
      <button type="submit">Login</button>
    </form>
  </script>

  <script type="text/x-handlebars" id="posts">
    <p>Some posts here</p>
  </script>

  <script type="text/x-handlebars" id="about">
    <p>About the Author</p>
  </script>

</body>
</html>

## jsbin.eQOZoGe.js
App = Ember.Application.create();

App.Router.map(function() {
  this.resource('authenticated', { path: '/' }, function() {
    this.resource('posts');
    this.resource('about');
  });

  this.resource('login');
});

App.ApplicationController = Ember.Controller.extend({
  // used to show, or not show, the log out button
  isLoggedIn: false,

  // when a user enters the app unauthenticated, the transition
  // to where they are going is saved off so it can be retried
  // when they have logged in.
  savedTransition: null,

  login: function() {
    this.setProperties({ savedTransition: null, isLoggedIn: true });
  },

  logout: function() {
    this.set('isLoggedIn', true);
  }
});


App.ApplicationRoute = Ember.Route.extend({
  actions: {
    logout: function() {
      this.controllerFor('application').logout();
      delete localStorage.authToken;
      this.transitionTo('login');
    }
  }
});

App.AuthenticatedRoute = Ember.Route.extend({
  beforeModel: function(transition) {
    var applicationController = this.controllerFor('application');

    // or check a cookie, or other state
    if (!localStorage.authToken) {
      applicationController.set('savedTransition', transition);
      this.transitionTo('login');
    } else {
      this.controllerFor('application').login();
    }
  }
});


App.LoginRoute = Ember.Route.extend({
  actions: {
    login: function() {
      var loginController = this.controllerFor('login'),
          username = loginController.get('username'),
          password = loginController.get('password');

      // this would normally be done asynchronously
      if (username === 'tomdale' && password === 'zomg') {
        localStorage.authToken = "auth-token-here";

        var applicationController = this.controllerFor('application');
        var transition = applicationController.get('savedTransition');

        // set isLoggedIn so the UI shows the logout button
        applicationController.login();

        // if the user was going somewhere, send them along, otherwise
        // default to `/posts`
        if (transition) {
          transition.retry();
        } else {
          this.transitionTo('posts');
        }
      }
    }
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script src="http://builds.emberjs.com/canary/ember.prod.js"></script>

	</head>
	<body>
	<script type="text/x-handlebars">
	{{#if isLoggedIn}}
	<button {{action "logout"}}>Log Out</button>
	{{/if}}

	<h1>My Blog</h1>

	{{outlet}}
	</script>

	<script type="text/x-handlebars" id="login">
	<form {{action "login" on="submit"}}>
	{{input type="text" value=username}}
	{{input type="password" value=password}}
	<button type="submit">Login</button>
	</form>
	</script>

	<script type="text/x-handlebars" id="posts">
	<p>Some posts here</p>
	</script>

	<script type="text/x-handlebars" id="about">
	<p>About the Author</p>
	</script>

	</body>
	</html>
	App = Ember.Application.create();

	App.Router.map(function() {
	this.resource('authenticated', { path: '/' }, function() {
	this.resource('posts');
	this.resource('about');
	});

	this.resource('login');
	});

	App.ApplicationController = Ember.Controller.extend({
	// used to show, or not show, the log out button
	isLoggedIn: false,

	// when a user enters the app unauthenticated, the transition
	// to where they are going is saved off so it can be retried
	// when they have logged in.
	savedTransition: null,

	login: function() {
	this.setProperties({ savedTransition: null, isLoggedIn: true });
	},

	logout: function() {
	this.set('isLoggedIn', true);
	}
	});


	App.ApplicationRoute = Ember.Route.extend({
	actions: {
	logout: function() {
	this.controllerFor('application').logout();
	delete localStorage.authToken;
	this.transitionTo('login');
	}
	}
	});

	App.AuthenticatedRoute = Ember.Route.extend({
	beforeModel: function(transition) {
	var applicationController = this.controllerFor('application');

	// or check a cookie, or other state
	if (!localStorage.authToken) {
	applicationController.set('savedTransition', transition);
	this.transitionTo('login');
	} else {
	this.controllerFor('application').login();
	}
	}
	});


	App.LoginRoute = Ember.Route.extend({
	actions: {
	login: function() {
	var loginController = this.controllerFor('login'),
	username = loginController.get('username'),
	password = loginController.get('password');

	// this would normally be done asynchronously
	if (username === 'tomdale' && password === 'zomg') {
	localStorage.authToken = "auth-token-here";

	var applicationController = this.controllerFor('application');
	var transition = applicationController.get('savedTransition');

	// set isLoggedIn so the UI shows the logout button
	applicationController.login();

	// if the user was going somewhere, send them along, otherwise
	// default to `/posts`
	if (transition) {
	transition.retry();
	} else {
	this.transitionTo('posts');
	}
	}
	}
	}
	});