3 files changed, 107 insertions, 4 deletions
diff --git a/data/stuff/js/util.js b/data/stuff/js/util.js
new file mode 100644
index 0000000..a6826db
--- /dev/null
+++ b/data/stuff/js/util.js
@@ -0,0 +1,12 @@
+jQuery(function($) {
+  "use strict";
+
+  window.send = function(fn, args) {
+    return $.ajax({
+      url: "/api/" + fn,
+      method: 'POST',
+      dataType: 'json',
+      data: args,
+    });
+  };
+});
diff --git a/data/stuff/test.js b/data/stuff/test.js
deleted file mode 100644
index 461b854..0000000
--- a/data/stuff/test.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-function test() {
-  return true;
-}
diff --git a/data/stuff/test/auth.js b/data/stuff/test/auth.js
new file mode 100644
index 0000000..103be82
--- /dev/null
+++ b/data/stuff/test/auth.js
@@ -0,0 +1,95 @@
+jQuery(function($) {
+  "use strict";
+  var TEMPLATES = new LuigiTemplate.Cache({
+    user: [
+      "<a ",
+        "href='#' ",
+        "class='list-group-item %{css|h}' ",
+        "title='Set user to \"%{name|h}.\"' ",
+        "data-user_id='%{id|h}' ",
+      ">",
+        "<i class='fa fa-fw fa-spinner fa-spin hidden loading'></i>",
+        "<i class='fa fa-fw fa-user loading'></i>",
+
+        " ",
+
+        "%{name|h}",
+      "</a>",
+    ],
+
+    loading: [
+      "<span class='list-group-item disabled'>",
+        "<i class='fa fa-spinner fa-spin'></i>",
+        " ",
+        "Loading...",
+      "</span>",
+    ],
+
+    error: [
+      "<span class='list-group-item list-group-item-danger disabled'>",
+        "<i class='fa fa-exclamation-triangle'></i>",
+        " ",
+        "Error: %{responseText|h}",
+      "</span>",
+    ],
+  });
+
+  function reload() {
+    var btn = $('#reload'),
+        list = $('#users');
+
+    // show loading
+    btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
+    list.html(TEMPLATES.run('loading'));
+
+    send('test/get_users').always(function() {
+      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
+      list.html('');
+    }).fail(function(r) {
+      console.log('get_users failed: ' + r.responseText);
+      list.html(TEMPLATES.run('error', r));
+    }).done(function(r) {
+      list.html($.map(r.users, function(row) {
+        return TEMPLATES.run('user', $.extend({}, row, {
+          css: row.active ? 'active' : '',
+        }));
+      }).join(''));
+    });
+
+    // stop event
+    return false;
+  }
+
+  $('#users').on('click', 'a.list-group-item', function() {
+    var me = $(this);
+
+    // update highlight
+    var last = $('#users .active').removeClass('active');
+    me.addClass('active');
+
+    // show spinner
+    me.addClass('disabled').find('.loading').toggleClass('hidden');
+
+    send('test/set_user', {
+      user_id: me.data('user_id'),
+    }).always(function() {
+      // hide spinner
+      me.removeClass('disabled').find('.loading').toggleClass('hidden');
+    }).fail(function(r) {
+      alert('Error ' + r.responseText);
+      // restore old highlight
+      me.removeClass('active');
+      last.addClass('active');
+    }).done(function(r) {
+      // do nothing
+    });
+
+    // stop event
+    return false;
+  });
+
+  $('#reload').click(reload);
+
+  // load users
+  reload();
+});