sec: use jquery ui tabs for machines in security preferences

This will degrade gracefully and operate without javascript. The
previous interface of having to switch by submitting a form was
unpleasant.

Note that it makes little sense to have cron permissions on webservers
you can't login to, and we're down to just firewall and cron prefs
here. The page should probably be converted to just firewall rules,
and cron prefs handled in a separate support page (and both new pages
moved to Support).

diff --git a/secnormal.mlt b/secnormal.mlt
index 356c45b..a839e46 100644 (file)
--- a/secnormal.mlt
+++ b/secnormal.mlt
@@ -3,30 +3,50 @@ val uname = $"uname";
 val nodeNum = case $"nodeNum" of node => Web.stoi node;
 val nodeName = Init.nodeName nodeNum;
 val yourname = Init.getUserName ();
-
-val socks = Sec.socketPerms {node = nodeNum, uname = uname};
-val tpe = Sec.isTpe {node = nodeNum, uname = uname};
-val cron = Sec.cronAllowed {node = nodeNum, uname = uname};
 %>
-<table class="blanks">
-<form action="sec" method="post">
-<input type="hidden" name="uname" value="<% Web.html uname %>">
-<tr> <td>Machines:</td> <td><select name="node">
-<% foreach node in Init.listNodes () do %>
-       <option value="<% #id node %>"<% if nodeNum = #id node then %> selected<% end %>><% Web.html (#name node) %> (<% Web.html (#descr node) %>)</option>
-<% end %></select></td>
-<td><input type="submit" value="Switch"></td> </tr>
-</form>
+
+<script src="//code.jquery.com/jquery-1.10.2.js"></script>
+<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
+<script>
+$(function()
+  {
+      $("#secTabs").tabs();
+      /* Hide elements included to allow non-js clients to have a readable page */
+      $(".secTabGraceful").css("display", "none");
+  });
+</script>
+
 <form action="sec" method="post">
 <input type="hidden" name="node" value="<% nodeNum %>">
+<table class="blanks">
 <tr> <td>Your users:</td> <td><select name="uname">
 <% foreach name in (yourname :: Sec.findSubusers yourname) do %>
        <option value="<% name %>"<% if uname = name then %> selected<% end %>><% name %></option>
 <% end %></select></td>
 <td><input type="submit" value="Switch"></td> </tr>
-</form>
 </table>
+</form>
 
+<style type="text/css">
+@import url('//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');
+</style>
+
+<div id="secTabs" style="float: right;">
+<h2 class="secTabGraceful">Machines</h2>
+<ul>
+<% foreach node in Init.listNodes () do %>
+   <li><a href="#secTab-<% #id node %>"><% Web.html (#name node) %></a></li>
+<% end %>
+</ul>
+
+<% foreach node in Init.listNodes () do
+      val nodeNum = #id node;
+      val socks = Sec.socketPerms {node = nodeNum, uname = uname};
+      val tpe = Sec.isTpe {node = nodeNum, uname = uname};
+      val cron = Sec.cronAllowed {node = nodeNum, uname = uname}; %>
+<div id="secTab-<% #id node %>">
+<h2 class="secTabGraceful"><% Web.html (#name node) %></h2>
+<p><% Web.html (#descr node) %></p>
 <!--h3>Request socket permissions change</h3>
 
 <p>You need to request socket permissions before you are able to open any network connections. While you will be limited by firewall rules even then, any requests for firewall rules you enter in the "Reason" blank here <b>will be ignored</b>. Please use the separate form at the bottom of this page for that. There is no need to wait until a request for socket permissions has been granted before starting to request firewall rules.</p>
@@ -116,3 +136,8 @@ end%>
 <tr> <td><input type="submit" value="Request"></td> </tr>
 </table>
 </form>
+</div>
+<% end %>
+</div>
+
+