systemist/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div id="app-container"></div>

  <script type="text/template" id="index-template">
    <h1>Hello <%= name %></h1>
    <p><button class="js-logout">Log Out</button></p>
  </script>

  <script type="text/template" id="login-template">
    <input type="email" class="js-email" placeholder="Email">
    <input type="password" class="js-password" placeholder="Password">
    <input type="submit">
    <p>Need to signup? <a href="#signup">Signup</a></p>
  </script>

  <script type="text/template" id="signup-template">
    <input type="text" class="js-name" placeholder="Name">
    <input type="email" class="js-email" placeholder="Email">
    <input type="password" class="js-password" placeholder="Password">
    <input type="submit">
    <p>Already have an account? <a href="#login">Login</a></p>
  </script>

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/underscore/underscore.js"></script>
  <script src="bower_components/backbone/backbone.js"></script>

  <script src="main.js"></script>

</body>
</html>

## main.js
(function(){
  'use strict';

  window.App = window.App || {};

  var User = Backbone.Model.extend({
    idAttribute: 'objectId',
    urlRoot: "https://api.parse.com/1/users",

    defaults: {
      name: ''
    }
  });

  var Session = Backbone.Model.extend({
    defaults: {
      token: ""
    },

    isLoggedIn: function(){
      return !!this.get('token');
    },

    initialize: function(){
      this.listenTo(this, 'change:token', this.setHeader);
      this.listenTo(App.vent, 'logout', this.logout);
    },

    login: function(email, password){
      var self = this;
      return $.ajax({
        url: "https://api.parse.com/1/login",
        data: {
          username: email,
          password: password
        }
      }).then(function(data){
        var userData = _.omit(data, 'sessionToken')
        self.set('currentUser', new User(userData));
        self.set('token', data.sessionToken);
        return data;
      }, function(jqXHR, textStatus, errorThrown){
        alert(jqXHR.responseJSON.error);
        return jqXHR;
      });
    },

    setHeader: function(){
      var token = this.get('token');
      $.ajaxSetup({
        headers: {
          "X-Parse-Session-Token": token
        }
      });
    },

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

  var IndexView = Backbone.View.extend({
    template: _.template( $('#index-template').text() ),

    events: {
      'click .js-logout': 'logout'
    },

    logout: function(){
      App.vent.trigger('logout');
    },

    render: function(){
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    }
  });


  var SignupView = Backbone.View.extend({
    tagName: 'form',
    template: _.template( $('#signup-template').text() ),
    render: function(){
      this.$el.html(this.template());
      return this;
    }
  });

  var LoginView = Backbone.View.extend({
    tagName: 'form',
    template: _.template( $('#login-template').text() ),

    events: {
      'submit': 'login'
    },

    login: function(e){
      e.preventDefault();
      var email = this.$('.js-email').val();
      var password = this.$('.js-password').val();
      this.model.login(email, password);
    },

    render: function(){
      this.$el.html(this.template());
      return this;
    }
  });

  var AppRouter = Backbone.Router.extend({
    routes: {
      '': 'index',
      'login': 'login',
      'signup': 'signup'
    },

    initialize: function(){
      this.session = new Session();
      this.listenTo(this.session, 'change:token', this.maybeIndex);
    },

    index: function(){
      if(this.session.isLoggedIn() ) {
        var user = this.session.get('currentUser');
        this.currentView = new IndexView({model: user});
        this.currentView.render();
        $('#app-container').html(this.currentView.el);
      } else {
        this.navigate('login', {trigger: true});
      }
    },

    login: function(){
      this.currentView = new LoginView({model: this.session});
      this.currentView.render();
      $('#app-container').html(this.currentView.el);
    },

    signup: function(){
      this.currentView = new SignupView();
      this.currentView.render();
      $('#app-container').html(this.currentView.el);
    },

    maybeIndex: function(){
      if(this.session.isLoggedIn()){
        this.navigate('', {trigger: true});
      } else {
        this.navigate('login', {trigger: true});
      }
    }
  });

  $.ajaxSetup({
    headers: {
      "X-Parse-Application-Id": "ZYQHOvrj5oPV8fGAN6M7x6m00ZNLtr5tpd3gzkFi",
      "X-Parse-REST-API-Key": "0BRysAUoHF2WsbkYZh1DOosJS3Oi1uS31KozIKUz"
    }
  });

  $(document).ready(function(){
    App.vent = _.extend({}, Backbone.Events);
    App.router = new AppRouter();
    Backbone.history.start();
  });

})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<div id="app-container"></div>

	<script type="text/template" id="index-template">
	<h1>Hello <%= name %></h1>
	<p><button class="js-logout">Log Out</button></p>
	</script>

	<script type="text/template" id="login-template">
	<input type="email" class="js-email" placeholder="Email">
	<input type="password" class="js-password" placeholder="Password">
	<input type="submit">
	<p>Need to signup? <a href="#signup">Signup</a></p>
	</script>

	<script type="text/template" id="signup-template">
	<input type="text" class="js-name" placeholder="Name">
	<input type="email" class="js-email" placeholder="Email">
	<input type="password" class="js-password" placeholder="Password">
	<input type="submit">
	<p>Already have an account? <a href="#login">Login</a></p>
	</script>

	<script src="bower_components/jquery/dist/jquery.js"></script>
	<script src="bower_components/underscore/underscore.js"></script>
	<script src="bower_components/backbone/backbone.js"></script>

	<script src="main.js"></script>

	</body>
	</html>
	(function(){
	'use strict';

	window.App = window.App \|\| {};

	var User = Backbone.Model.extend({
	idAttribute: 'objectId',
	urlRoot: "https://api.parse.com/1/users",

	defaults: {
	name: ''
	}
	});

	var Session = Backbone.Model.extend({
	defaults: {
	token: ""
	},

	isLoggedIn: function(){
	return !!this.get('token');
	},

	initialize: function(){
	this.listenTo(this, 'change:token', this.setHeader);
	this.listenTo(App.vent, 'logout', this.logout);
	},

	login: function(email, password){
	var self = this;
	return $.ajax({
	url: "https://api.parse.com/1/login",
	data: {
	username: email,
	password: password
	}
	}).then(function(data){
	var userData = _.omit(data, 'sessionToken')
	self.set('currentUser', new User(userData));
	self.set('token', data.sessionToken);
	return data;
	}, function(jqXHR, textStatus, errorThrown){
	alert(jqXHR.responseJSON.error);
	return jqXHR;
	});
	},

	setHeader: function(){
	var token = this.get('token');
	$.ajaxSetup({
	headers: {
	"X-Parse-Session-Token": token
	}
	});
	},

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

	var IndexView = Backbone.View.extend({
	template: _.template( $('#index-template').text() ),

	events: {
	'click .js-logout': 'logout'
	},

	logout: function(){
	App.vent.trigger('logout');
	},

	render: function(){
	this.$el.html(this.template(this.model.toJSON()));
	return this;
	}
	});


	var SignupView = Backbone.View.extend({
	tagName: 'form',
	template: _.template( $('#signup-template').text() ),
	render: function(){
	this.$el.html(this.template());
	return this;
	}
	});

	var LoginView = Backbone.View.extend({
	tagName: 'form',
	template: _.template( $('#login-template').text() ),

	events: {
	'submit': 'login'
	},

	login: function(e){
	e.preventDefault();
	var email = this.$('.js-email').val();
	var password = this.$('.js-password').val();
	this.model.login(email, password);
	},

	render: function(){
	this.$el.html(this.template());
	return this;
	}
	});

	var AppRouter = Backbone.Router.extend({
	routes: {
	'': 'index',
	'login': 'login',
	'signup': 'signup'
	},

	initialize: function(){
	this.session = new Session();
	this.listenTo(this.session, 'change:token', this.maybeIndex);
	},

	index: function(){
	if(this.session.isLoggedIn() ) {
	var user = this.session.get('currentUser');
	this.currentView = new IndexView({model: user});
	this.currentView.render();
	$('#app-container').html(this.currentView.el);
	} else {
	this.navigate('login', {trigger: true});
	}
	},

	login: function(){
	this.currentView = new LoginView({model: this.session});
	this.currentView.render();
	$('#app-container').html(this.currentView.el);
	},

	signup: function(){
	this.currentView = new SignupView();
	this.currentView.render();
	$('#app-container').html(this.currentView.el);
	},

	maybeIndex: function(){
	if(this.session.isLoggedIn()){
	this.navigate('', {trigger: true});
	} else {
	this.navigate('login', {trigger: true});
	}
	}
	});

	$.ajaxSetup({
	headers: {
	"X-Parse-Application-Id": "ZYQHOvrj5oPV8fGAN6M7x6m00ZNLtr5tpd3gzkFi",
	"X-Parse-REST-API-Key": "0BRysAUoHF2WsbkYZh1DOosJS3Oi1uS31KozIKUz"
	}
	});

	$(document).ready(function(){
	App.vent = _.extend({}, Backbone.Events);
	App.router = new AppRouter();
	Backbone.history.start();
	});

	})();