Cleanup HTML including removing DL/DT/DD, use tablesorter where possible, and use lowercase tags

5 files changed, 133 insertions, 76 deletions

diff --git a/openvpn-listcerts-html.lsp b/openvpn-listcerts-html.lsp
index e0043c0..74cc45c 100644
--- a/openvpn-listcerts-html.lsp
+++ b/openvpn-listcerts-html.lsp
@@ -2,40 +2,57 @@
 <% htmlviewfunctions = require("htmlviewfunctions") %>
 <% html = require("acf.html") %>
 
+<script type="text/javascript">
+	if (typeof jQuery == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery-latest.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	if (typeof $.tablesorter == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery.tablesorter.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("#list").tablesorter({widgets: ['zebra']});
+	});
+</script>
+
 <% htmlviewfunctions.displaycommandresults({"deletecert", "generatedhparams"}, session) %>
 <% htmlviewfunctions.displaycommandresults({"uploadcert"}, session, true) %>
 
-<H1><%= html.html_escape(view.label) %></H1>
-
-<DL>
-<TABLE>
-	<TR style="background:#eee;font-weight:bold;">
-	<TD style="padding-right:20px;white-space:nowrap;text-align:left;" class="header">Action</TD>
-	<TD style="white-space:nowrap;text-align:left;" class="header">Certificate</TD>
-	</TR>
+<h1><%= html.html_escape(view.label) %></h1>
+<table id="list" class="tablesorter"><thead>
+	<tr>
+		<th>Action</th>
+		<th>Certificate</th>
+	</tr>
+</thead><tbody>
 <% for i,cert in ipairs(view.value) do %>
-	<TR>
-		<TD style="padding-right:20px;white-space:nowrap;">
+	<tr>
+		<td>
 		<%= html.link{value=page_info.script..page_info.prefix..page_info.controller.."/deletecert?submit=true&cert="..cert.."&redir="..page_info.orig_action, label="Delete "} %>
 		<% if not string.find(cert, "%-key") then %>
 		<%= html.link{value=page_info.script..page_info.prefix..page_info.controller.."/viewcert?cert="..cert.."&redir="..page_info.orig_action, label="View "} %>
 		<% end %>
-		</TD>
-		<TD style="white-space:nowrap;"><%= html.html_escape(cert) %></TD>
-	</TR>
+		</td>
+		<td><%= html.html_escape(cert) %></td>
+	</tr>
 <% end %>
-</TABLE></DL>
+</tbody></table>
 
 <% if viewlibrary.dispatch_component and viewlibrary.check_permission("uploadcert") then
 	viewlibrary.dispatch_component("uploadcert")
 end %>
 
 <% if viewlibrary.check_permission("generatedhparams") then %>
-<H1>Diffie Hellman Parameters</H1>
-<DL>
+<h1>Diffie Hellman Parameters</h1>
 <form action="<%= html.html_escape(page_info.script .. page_info.prefix .. page_info.controller .. "/generatedhparams") %>">
-<DT>Generate Diffie Hellman parameters</DT>
-<DD><input class="submit" type="submit" name="submit" value="Generate"></DD>
+<div class='item'><p class='left'>Generate Diffie Hellman parameters</p>
+<div class='right'>
+<input class="submit" type="submit" name="submit" value="Generate">
+</div></div><!-- end .item -->
 </form>
-</DL>
 <% end %>
diff --git a/openvpn-statusinfo-html.lsp b/openvpn-statusinfo-html.lsp
index 2167893..ba9881e 100644
--- a/openvpn-statusinfo-html.lsp
+++ b/openvpn-statusinfo-html.lsp
@@ -1,32 +1,50 @@
-<% local view, viewlibrary = ... %>
+<% local view, viewlibrary, page_info, session = ... %>
 <% html = require("acf.html") %>
 
+<script type="text/javascript">
+	if (typeof jQuery == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery-latest.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	if (typeof $.tablesorter == 'undefined') {
+		document.write('<script type="text/javascript" src="<%= html.html_escape(page_info.wwwprefix) %>/js/jquery.tablesorter.js"><\/script>');
+	}
+</script>
+
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("#list").tablesorter({widgets: ['zebra']});
+	});
+</script>
+
 <% viewlibrary.dispatch_component("status") %>
 
 <% viewlibrary.dispatch_component("viewconfig") %>
 
 <h1>Status</h1>
 <h2>Connected clients</h2>
-
-<DL><TABLE>
-	<TR style="background:#eee;font-weight:bold;vertical-align:top;">
-		<TD WIDTH=140>Common Name<BR>Connected at</TD>
-		<TD WIDTH=130>Virtual Address</TD>
-		<TD WIDTH=130>Real Address</TD>
-		<TD>Bytes<BR>Received</TD>
-		<TD>Bytes<BR>Sent</TD>
-	</TR>		
+<table id="list" class="tablesorter"><thead>
+	<tr>
+		<th>Common Name<br/>Connected at</th>
+		<th>Virtual Address</th>
+		<th>Real Address</th>
+		<th>Bytes<br/>Received</th>
+		<th>Bytes<br/>Sent</th>
+	</tr>
+</thead><tbody>
 <% for i in ipairs(view.value) do %>
-	<TR>
-		<TD><%= html.html_escape(view.value[i].CN) %></TD>
-		<TD><%= html.html_escape(view.value[i].VIRTADDR) %></TD>
-		<TD><%= html.html_escape(view.value[i].REALADDR) %></TD>
-		<TD><%= html.html_escape(view.value[i].BYTESRCV) %></TD>
-		<TD><%= html.html_escape(view.value[i].BYTESSND) %></TD>
-	</TR>		
-	<TR>
-		<TD COLSPAN=5 style="border-bottom: 1px solid #ccc;"><%= html.html_escape(view.value[i].CONN) %></TD>
-	</TR>		
+	<tr>
+		<td><%= html.html_escape(view.value[i].CN) %></td>
+		<td><%= html.html_escape(view.value[i].VIRTADDR) %></td>
+		<td><%= html.html_escape(view.value[i].REALADDR) %></td>
+		<td><%= html.html_escape(view.value[i].BYTEsrcV) %></td>
+		<td><%= html.html_escape(view.value[i].BYTESSND) %></td>
+	</tr>		
+	<tr>
+		<td colspan=5><%= html.html_escape(view.value[i].CONN) %></td>
+	</tr>		
 <% end %>
 
-</TABLE></DL>
+</tbody></table>
diff --git a/openvpn-uploadcert-html.lsp b/openvpn-uploadcert-html.lsp
index 4f9d5ee..41048e4 100644
--- a/openvpn-uploadcert-html.lsp
+++ b/openvpn-uploadcert-html.lsp
@@ -2,7 +2,7 @@
 <% htmlviewfunctions = require("htmlviewfunctions") %>
 <% html = require("acf.html") %>
 
-<H1><%= html.html_escape(form.label) %></H1>
+<h1><%= html.html_escape(form.label) %></h1>
 <%
 	form.action = page_info.script .. page_info.prefix .. page_info.controller .. "/" .. page_info.action
 	form.enctype = "multipart/form-data"
diff --git a/openvpn-viewcert-html.lsp b/openvpn-viewcert-html.lsp
index 418a1aa..dcfb7d6 100644
--- a/openvpn-viewcert-html.lsp
+++ b/openvpn-viewcert-html.lsp
@@ -1,5 +1,5 @@
 <% local view, viewlibrary = ... %>
 <% html = require("acf.html") %>
 
-<H1>Certificate Details</H1>
+<h1>Certificate Details</h1>
 <pre><%= html.html_escape(view.value.value) %></pre>
diff --git a/openvpn-viewconfig-html.lsp b/openvpn-viewconfig-html.lsp
index 5b76598..cbb4ae0 100644
--- a/openvpn-viewconfig-html.lsp
+++ b/openvpn-viewconfig-html.lsp
@@ -6,72 +6,94 @@
 <h1><%= html.html_escape(format.cap_begin_word(view.value.type)) %> Config</h1>
 
 <h2><%= html.html_escape(format.cap_begin_word(view.value.type)) %> settings</h2>
-<dl>
-<dt>Mode</dt>
-<dd><%= html.html_escape(view.value.type) %></dd>
+<div class='item'><p class='left'>Mode</p>
+<div class='right'>
+<%= html.html_escape(view.value.type) %>
+</div></div><!-- end .item -->
 
-<dt>User device</dt>
-<dd><%= html.html_escape(view.value.dev) %></dd>
+<div class='item'><p class='left'>User device</p>
+<div class='right'>
+<%= html.html_escape(view.value.dev) %>
+</div></div><!-- end .item -->
 
 <% if view.value.type == "server" then %>
-<dt>Listens on</dt>
-<dd><%= html.html_escape(view.value["local"]) %>:<%= html.html_escape(view.value.port) %> (<%= html.html_escape(view.value.proto) %>)</dd>
+<div class='item'><p class='left'>Listens on</p>
+<div class='right'>
+<%= html.html_escape(view.value["local"]) %>:<%= html.html_escape(view.value.port) %> (<%= html.html_escape(view.value.proto) %>)
+</div></div><!-- end .item -->
 <% end %>
 
 <% if view.value.type == "client" then %>
-<dt>Remote server</dt>
-<dd><% if string.find(view.value.remote, "%s") then io.write(html.html_escape(string.gsub(view.value.remote, "%s+", ":"))) else io.write(html.html_escape(view.value.remote .. (view.value.rport or view.value.port or "1194"))) end %> (<%= html.html_escape(view.value.proto) %>)</dd>
+<div class='item'><p class='left'>Remote server</p>
+<div class='right'>
+<% if string.find(view.value.remote, "%s") then io.write(html.html_escape(string.gsub(view.value.remote, "%s+", ":"))) else io.write(html.html_escape(view.value.remote .. (view.value.rport or view.value.port or "1194"))) end %> (<%= html.html_escape(view.value.proto) %>)
+</div></div><!-- end .item -->
 <% end %>
 
-<dt>Logfile</dt>
-<dd><% if ( view.value.log ) then %><%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/logfile?name=" .. view.value.name, label=view.value.log } %><% else %>Syslog<% end %> (Verbosity level: <%= html.html_escape(view.value.verb) %>)</dd>
-</dl>
+<div class='item'><p class='left'>Logfile</p>
+<div class='right'>
+<% if ( view.value.log ) then %><%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/logfile?name=" .. view.value.name, label=view.value.log } %><% else %>Syslog<% end %> (Verbosity level: <%= html.html_escape(view.value.verb) %>)
+</div></div><!-- end .item -->
 
 <% if view.value.type == "server" then %>
 <h3>Connected clients status</h3>
-<dl>
-<dt>Last status was recorded</dt>
-<dd><%= html.html_escape(view.value.client_lastupdate) %> (This was <b><%= html.html_escape(view.value.client_lastdatechangediff) %></b> ago)</dd>
+<div class='item'><p class='left'>Last status was recorded</p>
+<div class='right'>
+<%= html.html_escape(view.value.client_lastupdate) %> (This was <b><%= html.html_escape(view.value.client_lastdatechangediff) %></b> ago)
+</div></div><!-- end .item -->
 
-<dt>Maximum clients</dt>
-<dd><%= html.html_escape(view.value["max-clients"]) %></dd>
+<div class='item'><p class='left'>Maximum clients</p>
+<div class='right'>
+<%= html.html_escape(view.value["max-clients"]) %>
+</div></div><!-- end .item -->
 
-<dt>Connected clients</dt>
-<dd><%= html.html_escape(view.value.client_count) %></dd>
-</dl>
+<div class='item'><p class='left'>Connected clients</p>
+<div class='right'>
+<%= html.html_escape(view.value.client_count) %>
+</div></div><!-- end .item -->
 <% end %>
 
 <% if view.value.dh or view.value.ca or view.value.cert or view.value.key or view.value.tls or view.value.crl then %>
 <h2>Certificate files</h2>
-<dl>
 <% if (view.value.dh) then %>
-<dt>DH</dt>
-<dd><%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/viewcert?cert=" .. view.value.dh, label=view.value.dh } %></dd>
+<div class='item'><p class='left'>DH</p>
+<div class='right'>
+<%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/viewcert?cert=" .. view.value.dh, label=view.value.dh } %>
+</div></div><!-- end .item -->
 <% end %>
 
 <% if (view.value.ca) then %>
-<dt>CA Certificate</dt>
-<dd><%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/viewcert?cert=" .. view.value.ca, label=view.value.ca } %></dd>
+<div class='item'><p class='left'>CA Certificate</p>
+<div class='right'>
+<%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/viewcert?cert=" .. view.value.ca, label=view.value.ca } %>
+</div></div><!-- end .item -->
 <% end %>
 
 <% if (view.value.cert) then %>
-<dt>Certificate</dt>
-<dd><%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/viewcert?cert=" .. view.value.cert, label=view.value.cert } %></dd>
+<div class='item'><p class='left'>Certificate</p>
+<div class='right'>
+<%= html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/viewcert?cert=" .. view.value.cert, label=view.value.cert } %>
+</div></div><!-- end .item -->
 <% end %>
 
 <% if (view.value.key) then %>
-<dt>Private Key</dt>
-<dd><%= html.html_escape(view.value.key) %></dd>
+<div class='item'><p class='left'>Private Key</p>
+<div class='right'>
+<%= html.html_escape(view.value.key) %>
+</div></div><!-- end .item -->
 <% end %>
 
 <% if (view.value.tls) then %>
-<dt>TLS Authentication</dt>
-<dd><%= html.html_escape(view.value.tls) %><% -- html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/pem_info?name=" .. view.value.tls  , label=view.value.tls } %></dd>
+<div class='item'><p class='left'>TLS Authentication</p>
+<div class='right'>
+<%= html.html_escape(view.value.tls) %><% -- html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/pem_info?name=" .. view.value.tls  , label=view.value.tls } %>
+</div></div><!-- end .item -->
 <% end %>
 
 <% if (view.value.crl) then %>
-<dt>CRL Verify File</dt>
-<dd><%= html.html_escape(view.value.crl) %><% -- html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/pem_info?name=" .. view.value.crl  , label=view.value.crl } %></dd>
+<div class='item'><p class='left'>CRL Verify File</p>
+<div class='right'>
+<%= html.html_escape(view.value.crl) %><% -- html.link{value = page_info.script .. page_info.prefix .. page_info.controller .. "/pem_info?name=" .. view.value.crl  , label=view.value.crl } %>
+</div></div><!-- end .item -->
 <% end %>
-</dl>
 <% end %>