vines-services 0.1.0 → 0.1.1

data/web/javascripts/setup.js

@@ -0,0 +1,485 @@
+var SetupPage;
+var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+SetupPage = (function() {
+  var SERVICES, SYSTEMS, USERS;
+  SERVICES = 'http://getvines.com/protocol/services';
+  SYSTEMS = 'http://getvines.com/protocol/systems';
+  USERS = 'http://getvines.com/protocol/users';
+  function SetupPage(session) {
+    this.session = session;
+    this.api = new Api(this.session);
+    this.layout = null;
+    this.selected = null;
+    this.services = [];
+    this.users = [];
+  }
+  SetupPage.prototype.findSystem = function(name) {
+    return this.api.get(SYSTEMS, {
+      name: name
+    }, __bind(function(result) {
+      return this.drawSystemInfo(result);
+    }, this));
+  };
+  SetupPage.prototype.findServices = function() {
+    return this.api.get(SERVICES, {}, __bind(function(result) {
+      this.services = result.rows;
+      return this.drawServices();
+    }, this));
+  };
+  SetupPage.prototype.drawServices = function() {
+    var node, service, _i, _len, _ref;
+    if ($('#setup-page #services').length === 0) {
+      return;
+    }
+    $('#services').empty();
+    _ref = this.services;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      service = _ref[_i];
+      node = $("<li>\n  <input id='service-" + service.id + "' type='checkbox' value='" + service.id + "'/>\n  <label for='service-" + service.id + "'></label>\n</li>").appendTo('#services');
+      $('label', node).text(service.name);
+    }
+    if (this.selected) {
+      $('#services input[type="checkbox"]').val(this.selected.services);
+    }
+    if (this.selected && !this.api.user.permissions.services) {
+      return $('#services input[type="checkbox"]').prop('disabled', true);
+    }
+  };
+  SetupPage.prototype.findUsers = function() {
+    return this.api.get(USERS, {}, __bind(function(result) {
+      this.users = result.rows;
+      return this.drawUsers();
+    }, this));
+  };
+  SetupPage.prototype.drawUsers = function() {
+    var systems, user, _i, _len, _ref, _results;
+    if ($('#setup-page #users').length === 0) {
+      return;
+    }
+    $('#users').empty();
+    systems = $('#systems-nav').hasClass('selected');
+    _ref = this.users;
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      user = _ref[_i];
+      _results.push(user.system === systems ? this.userNode(user) : void 0);
+    }
+    return _results;
+  };
+  SetupPage.prototype.userNode = function(user) {
+    var name, node;
+    node = $("<li data-name=\"\" data-jid=\"" + user.jid + "\" id=\"" + user.jid + "\">\n  <span class=\"text\"></span>\n  <span class=\"jid\">" + user.jid + "</span>\n</li>").appendTo('#users');
+    name = this.userName(user);
+    $('.text', node).text(name);
+    node.attr('data-name', name);
+    node.click(__bind(function(event) {
+      return this.selectUser(event.currentTarget);
+    }, this));
+    return node;
+  };
+  SetupPage.prototype.userName = function(user) {
+    return user.name || user.jid.split('@')[0];
+  };
+  SetupPage.prototype.selectUser = function(node) {
+    var jid, name;
+    jid = $(node).attr('data-jid');
+    name = $(node).attr('data-name');
+    $('#users li').removeClass('selected');
+    $(node).addClass('selected');
+    $('#remove-user-msg').html("Are you sure you want to remove " + ("<strong>" + name + "</strong>?"));
+    $('#remove-user-form .buttons').fadeIn(200);
+    return this.api.get(USERS, {
+      jid: jid
+    }, __bind(function(result) {
+      this.selected = result;
+      if (result.system) {
+        return this.drawSystemEditor(result);
+      } else {
+        return this.drawUserEditor(result);
+      }
+    }, this));
+  };
+  SetupPage.prototype.removeUser = function() {
+    var selected;
+    this.toggleForm('#remove-user-form');
+    selected = $("#users li[data-jid='" + this.selected.jid + "']");
+    this.api.remove(USERS, this.selected.jid, __bind(function(result) {
+      return selected.fadeOut(200, __bind(function() {
+        var u;
+        this.users = (function() {
+          var _i, _len, _ref, _results;
+          _ref = this.users;
+          _results = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            u = _ref[_i];
+            if (u.jid !== this.selected.jid) {
+              _results.push(u);
+            }
+          }
+          return _results;
+        }).call(this);
+        selected.remove();
+        this.selected = null;
+        if ($('#users-nav').hasClass('selected')) {
+          return this.drawUserBlankSlate();
+        } else {
+          return this.drawSystemBlankSlate();
+        }
+      }, this));
+    }, this));
+    return false;
+  };
+  SetupPage.prototype.selectTask = function(event) {
+    this.selected = null;
+    $('#setup li').removeClass('selected secondary');
+    $(event.currentTarget).addClass('selected secondary');
+    switch ($(event.currentTarget).attr('id')) {
+      case 'users-nav':
+        $('#beta-header').text('Users');
+        this.drawUsers();
+        this.drawUserBlankSlate();
+        if (this.api.user.permissions.users) {
+          return $('#beta-controls div').show();
+        } else {
+          return $('#beta-controls div').hide();
+        }
+        break;
+      case 'systems-nav':
+        $('#beta-header').text('Systems');
+        this.drawUsers();
+        this.drawSystemBlankSlate();
+        if (this.api.user.permissions.systems) {
+          return $('#beta-controls div').show();
+        } else {
+          return $('#beta-controls div').hide();
+        }
+    }
+  };
+  SetupPage.prototype.toggleForm = function(form, fn) {
+    form = $(form);
+    $('form.overlay').each(function() {
+      if (this.id !== form.attr('id')) {
+        return $(this).hide();
+      }
+    });
+    if (form.is(':hidden')) {
+      if (fn) {
+        fn();
+      }
+      return form.fadeIn(100);
+    } else {
+      return form.fadeOut(100, function() {
+        form[0].reset();
+        if (fn) {
+          return fn();
+        }
+      });
+    }
+  };
+  SetupPage.prototype.validateUser = function() {
+    var node, password1, password2, valid;
+    $('#user-name-error').empty();
+    $('#password-error').empty();
+    valid = true;
+    node = $.trim($('#user-name').val());
+    password1 = $.trim($('#password1').val());
+    password2 = $.trim($('#password2').val());
+    if (this.selected) {
+      if (password2.length > 0 && password2.length < 8) {
+        $('#password-error').text('Password must be at least 8 characters.');
+        valid = false;
+      }
+      if (this.session.bareJid() !== this.selected.jid) {
+        if (password1 !== password2) {
+          $('#password-error').text('Passwords must match.');
+          valid = false;
+        }
+      }
+    } else {
+      if (node === '') {
+        $('#user-name-error').text('User name is required.');
+        valid = false;
+      }
+      if (node.match(/[\s"&'\/:<>@]/)) {
+        $('#user-name-error').text('User name contains forbidden characters.');
+        valid = false;
+      }
+      if (password1.length === 0 || password2.length === 0) {
+        $('#password-error').text('Password is required.');
+        valid = false;
+      }
+      if (password1 !== password2) {
+        $('#password-error').text('Passwords must match.');
+        valid = false;
+      }
+      if (password2.length < 8) {
+        $('#password-error').text('Password must be at least 8 characters.');
+        valid = false;
+      }
+    }
+    return valid;
+  };
+  SetupPage.prototype.saveUser = function() {
+    var user;
+    if (!this.validateUser()) {
+      return false;
+    }
+    user = {
+      jid: $('#jid').val(),
+      username: $('#user-name').val(),
+      name: $('#name').val(),
+      password1: $('#password1').val(),
+      password2: $('#password2').val(),
+      services: $('#services :checked').map(function() {
+        return $(this).val();
+      }).get(),
+      permissions: {
+        systems: $('#perm-systems').prop('checked'),
+        services: $('#perm-services').prop('checked'),
+        files: $('#perm-files').prop('checked'),
+        users: $('#perm-users').prop('checked')
+      }
+    };
+    this.api.save(USERS, user, __bind(function(result) {
+      var node;
+      new Notification('User saved successfully');
+      $('#jid').val(result.jid);
+      node = $("#users li[data-jid='" + result.jid + "']");
+      if (node.length === 0) {
+        this.users.push(result);
+        node = this.userNode(result);
+        return this.selectUser(node);
+      } else {
+        return $('.text', node).text(this.userName(result));
+      }
+    }, this));
+    return false;
+  };
+  SetupPage.prototype.validateSystem = function() {
+    var node, valid;
+    $('#user-name-error').empty();
+    valid = true;
+    node = $.trim($('#user-name').val());
+    if (!this.selected) {
+      if (node === '') {
+        $('#user-name-error').text('Hostname is required.');
+        valid = false;
+      }
+      if (node.match(/[\s"&'\/:<>@]/)) {
+        $('#user-name-error').text('Hostname contains forbidden characters.');
+        valid = false;
+      }
+    }
+    return valid;
+  };
+  SetupPage.prototype.saveSystem = function() {
+    var user;
+    if (!this.validateSystem()) {
+      return false;
+    }
+    user = {
+      jid: $('#jid').val(),
+      username: $('#user-name').val(),
+      password1: $('#password1').val(),
+      password2: $('#password1').val(),
+      system: true
+    };
+    this.api.save(USERS, user, __bind(function(result) {
+      var node;
+      new Notification('System saved successfully');
+      $('#jid').val(result.jid);
+      node = $("#users li[data-jid='" + result.jid + "']");
+      if (node.length === 0) {
+        this.users.push(result);
+        node = this.userNode(result);
+        return this.selectUser(node);
+      } else {
+        return $('.text', node).text(result.name);
+      }
+    }, this));
+    return false;
+  };
+  SetupPage.prototype.rand = function() {
+    return Math.floor(Math.random() * 16);
+  };
+  SetupPage.prototype.token = function() {
+    var i;
+    return ((function() {
+      var _results;
+      _results = [];
+      for (i = 0; i <= 127; i++) {
+        _results.push(this.rand().toString(16));
+      }
+      return _results;
+    }).call(this)).join('');
+  };
+  SetupPage.prototype.drawUserBlankSlate = function() {
+    var msg;
+    $('#charlie').empty();
+    msg = this.api.user.permissions.users ? 'Select a user account to update or add a new user.' : 'Select a user account to update.';
+    $("<form id=\"blank-slate\">\n  <p>" + msg + "</p>\n  <input type=\"submit\" id=\"blank-slate-add\" value=\"Add User\"/>\n</form>").appendTo('#charlie');
+    if (!this.api.user.permissions.users) {
+      $('#blank-slate-add').remove();
+    }
+    return $('#blank-slate').submit(__bind(function() {
+      this.drawUserEditor();
+      return false;
+    }, this));
+  };
+  SetupPage.prototype.drawSystemBlankSlate = function() {
+    $('#charlie').empty();
+    $("<form id=\"blank-slate\">\n  <p>\n    Systems need a user account before they can connect and\n    authenticate with the chat server.\n  </p>\n  <input type=\"submit\" id=\"blank-slate-add\" value=\"Add System\"/>\n</form>").appendTo('#charlie');
+    if (!this.api.user.permissions.systems) {
+      $('#blank-slate-add').remove();
+    }
+    return $('#blank-slate').submit(__bind(function() {
+      this.drawSystemEditor();
+      return false;
+    }, this));
+  };
+  SetupPage.prototype.draw = function() {
+    var fn;
+    if (!this.session.connected()) {
+      window.location.hash = '';
+      return;
+    }
+    $('body').attr('id', 'setup-page');
+    $('#container').hide().empty();
+    $("<div id=\"alpha\" class=\"sidebar column y-fill\">\n  <h2>Setup</h2>\n  <ul id=\"setup\" class=\"selectable scroll y-fill\">\n    <li id=\"users-nav\" class='selected secondary'>\n      <span class=\"text\">Users</span>\n    </li>\n    <li id=\"systems-nav\">\n      <span class=\"text\">Systems</span>\n    </li>\n  </ul>\n  <div id=\"alpha-controls\" class=\"controls\"></div>\n</div>\n<div id=\"beta\" class=\"sidebar column y-fill\">\n  <h2><span id=\"beta-header\">Users</span> <div id=\"search-users-icon\"></div></h2>\n  <div id=\"search-users-form\"></div>\n  <ul id=\"users\" class=\"selectable scroll y-fill\"></ul>\n  <form id=\"remove-user-form\" class=\"overlay\" style=\"display:none;\">\n    <h2>Remove User</h2>\n    <p id=\"remove-user-msg\">Select a user to delete.</p>\n    <fieldset class=\"buttons\" style=\"display:none;\">\n      <input id=\"remove-user-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"remove-user-ok\" type=\"submit\" value=\"Remove\"/>\n    </fieldset>\n  </form>\n  <div id=\"beta-controls\" class=\"controls\">\n    <div id=\"add-user\"></div>\n    <div id=\"remove-user\"></div>\n  </div>\n</div>\n<div id=\"charlie\" class=\"primary column x-fill y-fill\"></div>").appendTo('#container');
+    this.drawUserBlankSlate();
+    $('#setup li').click(__bind(function(event) {
+      return this.selectTask(event);
+    }, this));
+    this.findUsers();
+    this.findServices();
+    $('#container').show();
+    this.layout = this.resize();
+    new Button('#add-user', ICONS.plus);
+    new Button('#remove-user', ICONS.minus);
+    if (!this.api.user.permissions.users) {
+      $('#beta-controls div').hide();
+    }
+    if (!this.api.user.permissions.systems) {
+      $('#systems-nav').hide();
+    }
+    $('#add-user').click(__bind(function() {
+      if ($('#users-nav').hasClass('selected')) {
+        return this.drawUserEditor();
+      } else {
+        return this.drawSystemEditor();
+      }
+    }, this));
+    $('#remove-user').click(__bind(function() {
+      return this.toggleForm('#remove-user-form');
+    }, this));
+    $('#remove-user-cancel').click(__bind(function() {
+      return this.toggleForm('#remove-user-form');
+    }, this));
+    $('#remove-user-form').submit(__bind(function() {
+      return this.removeUser();
+    }, this));
+    fn = __bind(function() {
+      this.layout.resize();
+      return this.layout.resize();
+    }, this);
+    return new Filter({
+      list: '#users',
+      icon: '#search-users-icon',
+      form: '#search-users-form',
+      attrs: ['data-jid', 'data-name'],
+      open: fn,
+      close: fn
+    });
+  };
+  SetupPage.prototype.drawUserEditor = function(user) {
+    var name, _i, _len, _ref;
+    if (!user) {
+      this.selected = null;
+      $('#users li').removeClass('selected');
+    }
+    $('#charlie').empty();
+    $("<form id=\"editor-form\" class=\"sections y-fill scroll\">\n  <div>\n    <section>\n      <h2>User</h2>\n      <fieldset id=\"jid-fields\">\n        <input id=\"jid\" type=\"hidden\" value=\"\"/>\n        <label for=\"name\">Real Name</label>\n        <input id=\"name\" type=\"text\" maxlength=\"1024\"/>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Password</h2>\n      <fieldset>\n        <label id=\"password1-label\" for=\"password1\">Current Password</label>\n        <input id=\"password1\" type=\"password\" maxlength=\"1024\"/>\n        <label id=\"password2-label\" for=\"password2\">New Password</label>\n        <input id=\"password2\" type=\"password\" maxlength=\"1024\"/>\n        <p id=\"password-error\" class=\"error\"></p>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Permissions</h2>\n      <fieldset>\n        <label>Manage</label>\n        <ul id=\"permissions\">\n          <li>\n            <input id=\"perm-systems\" type=\"checkbox\" value=\"systems\"/>\n            <label for=\"perm-systems\">Systems</label>\n          </li>\n          <li>\n            <input id=\"perm-services\" type=\"checkbox\" value=\"services\"/>\n            <label for=\"perm-services\">Services</label>\n          </li>\n          <li>\n            <input id=\"perm-users\" type=\"checkbox\" value=\"users\"/>\n            <label for=\"perm-users\">Users</label>\n          </li>\n          <li>\n            <input id=\"perm-files\" type=\"checkbox\" value=\"files\"/>\n            <label for=\"perm-files\">Files</label>\n          </li>\n        </ul>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Services</h2>\n      <fieldset>\n        <label>Access To</label>\n        <ul id=\"services\" class=\"scroll\"></ul>\n      </fieldset>\n    </section>\n  </div>\n</form>\n<form id=\"editor-buttons\">\n  <input id=\"save\" type=\"submit\" value=\"Save\"/>\n</form>").appendTo('#charlie');
+    if (user) {
+      $("<label>Account Name</label>\n<p>" + user.jid + "</p>").prependTo('#jid-fields');
+      $('#name').focus();
+      if (this.session.bareJid() !== user.jid) {
+        $('#password1-label').text('Password');
+        $('#password2-label').text('Password Again');
+      }
+      $('#jid').val(user.jid);
+      $('#name').val(user.name);
+      $('#user-name').val(user.jid.split('@')[0]);
+      _ref = 'services systems files users'.split(' ');
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        name = _ref[_i];
+        if (user.permissions[name]) {
+          $("#perm-" + name).prop('checked', true);
+        }
+        if (this.session.bareJid() === user.jid) {
+          $("#perm-" + name).prop('disabled', true);
+        }
+      }
+    } else {
+      $("<label for=\"user-name\">User Name</label>\n<input id=\"user-name\" type=\"text\" maxlength=\"1023\"/>\n<p id=\"user-name-error\" class=\"error\"></p>").prependTo('#jid-fields');
+      $('#password1-label').text('Password');
+      $('#password2-label').text('Password Again');
+      $('#user-name').focus();
+    }
+    if (this.services.length > 0) {
+      this.drawServices();
+    }
+    this.layout.resize();
+    $('#editor-form').submit(__bind(function() {
+      return this.saveUser();
+    }, this));
+    return $('#editor-buttons').submit(__bind(function() {
+      return this.saveUser();
+    }, this));
+  };
+  SetupPage.prototype.drawSystemEditor = function(user) {
+    if (!user) {
+      this.selected = null;
+      $('#users li').removeClass('selected');
+    }
+    $('#charlie').empty();
+    $("<form id=\"editor-form\" class=\"sections y-fill scroll\">\n  <div>\n    <section>\n      <h2>System</h2>\n      <fieldset id=\"jid-fields\">\n        <input id=\"jid\" type=\"hidden\" value=\"\"/>\n        <label id=\"password1-label\" for=\"password1\">Authentication Token</label>\n        <div id=\"token-container\">\n          <input id=\"password1\" type=\"text\" readonly placeholder=\"Press Generate to create a new token\"/>\n          <input id=\"new-token\" type=\"button\" value=\"Generate\"/>\n        </div>\n      </fieldset>\n    </section>\n    <section id=\"info\">\n      <h2>Info</h2>\n      <fieldset>\n        <label>Platform</label>\n        <p id=\"info-platform\">-</p>\n        <label>Hostname</label>\n        <p id=\"info-fqdn\">-</p>\n        <label>IP Address</label>\n        <p id=\"info-ip\">-</p>\n        <label>MAC Address</label>\n        <p id=\"info-mac\">-</p>\n      </fieldset>\n    </section>\n  </div>\n</form>\n<form id=\"editor-buttons\">\n  <input id=\"save\" type=\"submit\" value=\"Save\"/>\n</form>").appendTo('#charlie');
+    $('#new-token').click(__bind(function() {
+      return $('#password1').val(this.token());
+    }, this));
+    if (user) {
+      this.findSystem(user.jid.split('@')[0]);
+    }
+    if (user) {
+      $("<label>Account Name</label>\n<p>" + user.jid + "</p>").prependTo('#jid-fields');
+      $('#jid').val(user.jid);
+      $('#user-name').val(user.jid.split('@')[0]);
+    } else {
+      $("<label for=\"user-name\">Hostname</label>\n<input id=\"user-name\" type=\"text\" maxlength=\"1023\"/>\n<p id=\"user-name-error\" class=\"error\"></p>").prependTo('#jid-fields');
+      $('#user-name').focus();
+      $('#password1').val(this.token());
+    }
+    this.layout.resize();
+    $('#editor-form').submit(__bind(function() {
+      return this.saveSystem();
+    }, this));
+    return $('#editor-buttons').submit(__bind(function() {
+      return this.saveSystem();
+    }, this));
+  };
+  SetupPage.prototype.drawSystemInfo = function(system) {
+    $('#info-platform').text(system.platform);
+    $('#info-fqdn').text(system.fqdn);
+    $('#info-ip').text(system.ipaddress);
+    return $('#info-mac').text(system.macaddress);
+  };
+  SetupPage.prototype.resize = function() {
+    var a, b, c;
+    a = $('#alpha');
+    b = $('#beta');
+    c = $('#charlie');
+    return new Layout(function() {
+      return c.css('left', a.outerWidth() + b.outerWidth());
+    });
+  };
+  return SetupPage;
+})();