JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset5 span2" id="login-container">
<h2>Admin Panel</h2>
<br>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input name="username" class="span12" id="username" type="text">
</div>
</div>
<label class="control-label" for="password">Password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-asterisk"></i></span>
<input name="password" class="span12" id="password" type="password">
</div>
</div>
</div>
<button id="login-btn" class="btn btn-inverse">Login</button>
<button id="forgot-password" class="btn">Forgot Password</button>
</div>
</div>
</div> <!-- /container -->
</body>
JavaScript
// Backbone Login Script
// Differs slightly, SAVE is used to authenticate the user as it sends a POST
// It will then return an json object with error either true or false + a message
// Login Model
var Login = Backbone.Model.extend({
initialize: function() {
console.log('Login Model Initialized');
this.bind('error', function(model, error) {
console.log("An error occurred see below.");
console.log(error);
});
},
defaults: {
username: null,
password: null
},
urlRoot: "/login"
});
// Login View
// Not much
var LoginView = Backbone.View.extend({
initialize: function () {
console.log('Login View Intialized');
this.el = $('#login-container');
},
// Setup the events (mainly the login)
events: {
// Login - function
"click #login-btn" : "checkLogin"
},
// Actually authorization function
checkLogin: function() {
console.log("Authorizing login details with server...");
}
});
// Get it all up and going
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});