Implementing new client design using Backbone.js.

www/js/test.js

@@ -0,0 +1,69 @@
+var Test = {};
+
+$(document).ready(function() {
+
+    Test.U = Backbone.Model.extend({
+        url: '/ts_api/users'
+    });
+
+    Test.UView = Backbone.View.extend({
+
+        el: $("#user"),
+        model: Test.U,
+
+        initialize: function() {
+            _.bindAll(this, 'render');
+            this.model.bind('change', this.render);
+            this.model.view = this;
+        },
+
+        render: function() {
+            var user = this.model.get('user');
+            this.$('.fullname').text(user.name);
+            this.$('.username').text(user.username);
+        }
+    });
+
+    Test.currentUser = new Test.U;
+    Test.userView = new Test.UView({model: Test.currentUser});
+
+    // wire the login dialog using jQuery UI
+    $("#login-dialog").dialog({
+        autoOpen: false,
+        height: 400,
+        width: 400,
+        modal: true,
+        buttons: { Login: function(){login()} }
+    });
+
+    $('#login-dialog').dialog('open');
+
+});
+
+function login() {
+    // lookup the login dialog elements
+    var name = $("#login-name");
+    var pwd = $("#login-password");
+
+    // call the API via AJAX
+    $.ajax({
+        url: "/ts_api/login",
+        processData: false,
+        data: JSON.stringify({username: name.val(), password: pwd.val()}),
+        type: "POST",
+
+        error: function(jqXHR, textStatus, error) {
+            // assuming bad credentials (possible server error or bad request,
+            // we should check that, FIXME
+            var tips = $(".validate-tips");
+            tips.text("Incorrect username/password combination.");
+            tips.addClass("ui-state-error");
+            tips.slideDown();
+        },
+
+        success: function(data, textStatus, jqXHR) {
+            $("#login-dialog").dialog('close');
+            Test.currentUser.set({id: name.val()}, {silent: true});
+            Test.currentUser.fetch();
+        }});
+}