Restructure, modularize and tidy the navigation buttons and menus (#805)

* Make admin and user bar menus pluggable

* Realign header block to stop is moving around

* Remove ref

* Use modular nav to disable ineligable options during initial install

* Dont offer tunnel menus options when no tunnel daemon installed.
This is for low-memory devices

* Simplify

* Improve messaging when running ram image

* Disable rather than hide vpn menu items on tiny memory devices

* Move menu navs

files/usr/lib/lua/aredn/html.lua

@@ -88,6 +88,67 @@ function html.msg_banner()
     html.print("</div>")
 end
 
+function html.navbar_user(selected, config_mode)
+    local order = {}
+    local navs = {}
+    if config_mode then
+        _G.config_mode = config_mode
+    end
+    for file in nixio.fs.dir("/usr/lib/lua/aredn/nav/user")
+    do
+        order[#order + 1] = file
+        navs[file] = require("aredn.nav.user." .. file:match("^(.*)%.lua$"))
+    end
+    table.sort(order)
+    html.print("<nobr>")
+    html.print("<a href='/help.html' target='_blank'>Help</a>")
+    html.print("&nbsp;&nbsp;<input type=button name=refresh value=Refresh title='Refresh this page' onclick='window.location.reload()'>")
+    for _, key in ipairs(order)
+    do
+        local nav = navs[key]
+        if type(nav) == "table" then
+            html.print("&nbsp;&nbsp;<button type=button onClick='window.location=\"" .. nav.href .. "\"' title='" .. (nav.hint or "") .. "' " .. (nav.enable == false and "disabled" or "") .. ">" .. nav.display .. "</button>")
+        end
+    end
+    html.print("&nbsp;&nbsp;<select name=\"css\" size=\"1\" onChange=\"form.submit()\" >")
+    html.print("<option>Select a theme</option>")
+    for file in nixio.fs.glob("/www/*.css")
+    do
+        if file ~= "/www/style.css" then
+            file = file:match("/www/(.*).css")
+            html.print("<option value=\"" .. file .. ".css\">" .. file .. "</option>")
+        end
+    end
+    html.print("</select>")
+    html.print("</nobr>")
+end
+
+function html.navbar_admin(selected)
+    local order = {}
+    local navs = {}
+    for file in nixio.fs.dir("/usr/lib/lua/aredn/nav/admin")
+    do
+        order[#order + 1] = file
+        navs[file] = require("aredn.nav.admin." .. file:match("^(.*)%.lua$"))
+    end
+    table.sort(order)
+    html.print("<table cellpadding=5 border=0 align=center width='" .. (#order * 120) .. "px'><tr><td colspan=100%><hr></td></tr><tr>")
+    local width = math.floor(100 / #order) .. "%"
+    for _, key in ipairs(order)
+    do
+        local nav = navs[key]
+        if type(nav) == "table" then
+            html.print("<td align=center width=" .. width .. (nav.href == selected and " class='navbar_select'" or "") .. ">")
+            if nav.enable == false then
+                html.print(nav.display .. "</td>")
+            else
+                html.print("<a href='" .. nav.href .. "'>" .. nav.display .. "</a></td>")
+            end
+        end
+    end
+    html.print("</tr><tr><td colspan=100%><hr></td></tr></table>")
+end
+
 function html.print(line)
     -- html output is defined in aredn.http
     -- this is a bit icky at the moment :-()

files/usr/lib/lua/aredn/nav/admin/10status.lua

@@ -0,0 +1 @@
+return { href = "status", display = "Node Status" }

files/usr/lib/lua/aredn/nav/admin/20setup.lua

@@ -0,0 +1 @@
+return { href = "setup", display = "Basic Setup" }

files/usr/lib/lua/aredn/nav/admin/30ports.lua

@@ -0,0 +1 @@
+return { href = "ports", display = "Port Forwarding,<br>DHCP, and Services" }

files/usr/lib/lua/aredn/nav/admin/40vpn.lua

@@ -0,0 +1 @@
+return { href = "vpn", display = "Tunnel<br>Server", enable = nixio.fs.stat("/usr/sbin/vtund") ~= nil }

files/usr/lib/lua/aredn/nav/admin/50vpnc.lua

@@ -0,0 +1 @@
+return { href = "vpnc", display = "Tunnel<br>Client", enable = nixio.fs.stat("/usr/sbin/vtund") ~= nil }

files/usr/lib/lua/aredn/nav/admin/60admin.lua

@@ -0,0 +1 @@
+return { href = "admin", display = "Administration" }

files/usr/lib/lua/aredn/nav/admin/70advancedconfig.lua

@@ -0,0 +1 @@
+return { href = "advancedconfig", display = "Advanced<br>Configuration" }

files/usr/lib/lua/aredn/nav/user/10mesh.lua

@@ -0,0 +1 @@
+return { href = "mesh", display = "Mesh Status", hint = "See what is on the mesh", enable = not config_mode }

files/usr/lib/lua/aredn/nav/user/20lqm.lua

@@ -0,0 +1,3 @@
+if uci.cursor():get("aredn", "@lqm[0]", "enable") == "1" then
+  return { href = "lqm", display = "Neighbor Status", hint = "See the link status to our neighbors", enable = not config_mode }
+end

files/usr/lib/lua/aredn/nav/user/30scan.lua

@@ -0,0 +1,3 @@
+if aredn.hardware.get_iface_name("wifi"):match("wlan(%d+)") then
+  return { href = "scan", display = "WiFi Scan", hint = "See what wireless networks are nearby", enable = not config_mode }
+end

files/usr/lib/lua/aredn/nav/user/40setup.lua

@@ -0,0 +1 @@
+return { href = "setup", display = "Setup", hint = "Configure this node", enable = not config_mode or config_mode ~= "ram" }

files/www/cgi-bin/admin

@@ -811,18 +811,10 @@ http_header()
 html.header(node .. " administration", true)
 html.print("<body><center>")
 html.alert_banner()
-html.print("<form method=post action=admin enctype='multipart/form-data'><table width=850><tr><td>")
+html.print("<form method=post action=admin enctype='multipart/form-data'>")
 -- nav
-html.print("<hr><table cellpadding=5 border=0 width=100%><tr>")
-html.print("<td align=center width=15%><a href='status'>Node Status</a></td>")
-html.print("<td align=center width=15%><a href='setup'>Basic Setup</a></td>")
-html.print("<td align=center width=15%><a href='ports'>Port Forwarding,<br>DHCP, and Services</a></td>")
-html.print("<td align=center width=15%><a href='vpn'>Tunnel<br>Server</a></td>")
-html.print("<td align=center width=15%><a href='vpnc'>Tunnel<br>Client</a></td>")
-html.print("<td align=center width=15% class=navbar_select><a href='admin'>Administration</a></td>")
-html.print("<td align=center width=15%><a href='advancedconfig'>Advanced<br>Configuration</a></td>")
-html.print("</tr></table><hr>")
-html.print("</td></tr>")
+html.navbar_admin("admin")
+html.print("<table width=850>")
 
 html.print("<tr><td align=center><a href='/help.html#admin' target='_blank'>Help</a>&nbsp;&nbsp;")
 html.print("<input type=submit name=button_reboot value=Reboot style='font-weight:bold' title='Immediately reboot this node'>")

files/www/cgi-bin/advancedconfig

@@ -850,21 +850,10 @@ function toggleDefault(fname, defval) {
 
 html.print("<body><center>")
 html.alert_banner();
-html.print("<div style='padding:5px;background-color:#FF0000;color:#FFFFFF;width:650px;'>")
-html.print("<strong>WARNING:</strong> Changing advanced settings can be harmful to the stability, security, and performance of this node and potentially the entire mesh network.<br><strong>You should only continue if you are sure of what you are doing.</strong></div>")
 html.print("<form method=post action=advancedconfig enctype='multipart/form-data'>")
 
 -- navbar
-html.print("<hr style='width:800px'>")
-html.print("<table cellpadding=5 border=0 width=840px><tr align=center>")
-html.print("<td width=14%><a href='status'>Node Status</a></td>")
-html.print("<td width=14%><a href='setup'>Basic Setup</a></td>")
-html.print("<td width=14%><a href='ports'>Port Forwarding,<br>DHCP, and Services</a></td>")
-html.print("<td width=14%><a href='vpn'>Tunnel<br>Server</a></td>")
-html.print("<td width=14%><a href='vpnc'>Tunnel<br>Client</a></td>")
-html.print("<td width=14%><a href='admin'>Administration</a></td>")
-html.print("<td width=14%><a href='advancedconfig'>Advanced<br>Configuration</a></td>")
-html.print("</tr></table><hr style='width:800px'>")
+html.navbar_admin("advancedconfig")
 
 -- help link and buttons table
 html.print("<table width=800px><tr align=center><td>")
@@ -873,6 +862,9 @@ html.print("&nbsp; &nbsp; <input type=submit name=button_reboot value=Reboot sty
 html.print("&nbsp; &nbsp; <input type=submit name=button_firstboot value='Reset to Firstboot' onclick=\"return confirm('All config settings and add-on packages will be lost back to first boot state. Continue?')\"  title='Reset this node to the initial/firstboot status and reboot.'>")
 html.print("</td></tr></table>")
 
+html.print("<div style='margin:10px;padding:5px;background-color:#FF0000;color:#FFFFFF;width:650px;'>")
+html.print("<strong>WARNING:</strong> Changing advanced settings can be harmful to the stability, security, and performance of this node and potentially the entire mesh network.<br><strong>You should only continue if you are sure of what you are doing.</strong></div>")
+
 -- messages table
 html.print("<table width=800px>")
 if nixio.fs.stat("/tmp/reboot-required") then

files/www/cgi-bin/ports

@@ -73,19 +73,6 @@ if os.getenv("REQUEST_METHOD") == "POST" then
     parms = request:formvalue()
 end
 
-function navbar()
-    html.print("<tr><td>")
-    html.print("<hr><table cellpadding=5 border=0 width=100%><tr>")
-    html.print("<td align=center width=15%><a href='status'>Node Status</a></td>")
-    html.print("<td align=center width=15%><a href='setup'>Basic Setup</a></td>")
-    html.print("<td align=center width=15% class=navbar_select><a href='ports'>Port Forwarding,<br>DHCP, and Services</a></td>")
-    html.print("<td align=center width=15%><a href='vpn'>Tunnel<br>Server</a></td>")
-    html.print("<td align=center width=15%><a href='vpnc'>Tunnel<br>Client</a></td>")
-    html.print("<td align=center width=15%><a href='admin'>Administration</a></td>")
-    html.print("<td align=center width=15%><a href='advancedconfig'>Advanced<br>Configuration</a></td>")
-    html.print("</tr></table><hr>")
-end
-
 function validate_service_name(name)
     if not name or name == "" or name:match("[:-\"|<>]") then
         return false
@@ -147,10 +134,10 @@ local macs = {}
 if config ~= "mesh" or nixio.fs.stat("/tmp/reboot-required") then
     http_header()
     html.header(node .. " setup", true)
-    html.print("<body><center><table width=820><tr><td>")
+    html.print("<body><center>")
     html.alert_banner()
-    navbar()
-    html.print("</td></tr><tr><td align=center><br><b>")
+    html.navbar_admin("ports")
+    html.print("<table width=820><tr><td align=center><br><b>")
     if config == "" then
         html.print("This page is not available until the configuration has been set.")
     else
@@ -852,10 +839,8 @@ html.header(node .. " setup", true)
 html.print("<body><center>")
 html.alert_banner()
 html.print("<form method=post action=/cgi-bin/ports enctype='multipart/form-data'>")
+html.navbar_admin("ports")
 html.print("<table width=820>")
-html.print("<tr><td>")
-navbar()
-html.print("</td></tr>")
 
 -- control buttons
 html.print([[<tr><td align=center>

files/www/cgi-bin/setup

@@ -961,19 +961,9 @@ html.print("<body><center>")
 html.alert_banner()
 
 html.print("<form onSubmit='doSubmit();' name='mainForm' method=post action=/cgi-bin/setup enctype='multipart/form-data'>\n")
-html.print("<table width=790>")
-html.print("<tr><td>")
 -- navbar
-html.print("<hr><table cellpadding=5 border=0 width=100%><tr>")
-html.print("<td align=center width=15%><a href='status'>Node Status</a></td>")
-html.print("<td align=center width=15% class=navbar_select><a href='setup'>Basic Setup</a></td>")
-html.print("<td align=center width=15%><a href='ports'>Port Forwarding,<br>DHCP, and Services</a></td>")
-html.print("<td align=center width=15%><a href='vpn'>Tunnel<br>Server</a></td>")
-html.print("<td align=center width=15%><a href='vpnc'>Tunnel<br>Client</a></td>")
-html.print("<td align=center width=15%><a href='admin'>Administration</a></td>")
-html.print("<td align=center width=15%><a href='advancedconfig'>Advanced<br>Configuration</a></td>")
-html.print("</tr></table><hr>")
-html.print("</td></tr>")
+html.navbar_admin("setup")
+html.print("<table width=790>")
 -- control buttons
 html.print([[<tr><td align=center>
 <a href='/help.html#setup' target='_blank'>Help</a>

files/www/cgi-bin/status

@@ -141,17 +141,6 @@ function get_wifi_signal(wifiif)
     end
 end
 
-function css_options()
-    html.print("<option>Select a theme</option>")
-    for file in nixio.fs.glob("/www/*.css")
-    do
-        if file ~= "/www/style.css" then
-            file = file:match("/www/(.*).css")
-            html.print("<option value=\"" .. file .. ".css\">" .. file .. "</option>")
-        end
-    end
-end
-
 -- helpers end
 
 local node = aredn_info.get_nvram("node")
@@ -264,48 +253,33 @@ if node_desc then
 end
 html.print("<hr>")
 
--- nav buttons
-html.print("<nobr>")
-html.print("<a href='/help.html' target='_blank'>Help</a>")
-html.print("&nbsp;&nbsp;")
-html.print("<input type=button name=refresh value=Refresh title='Refresh this page' onclick='window.location.reload()'>")
-if config == "mesh" then
-    html.print("&nbsp;&nbsp;")
-    html.print("<button type=button onClick='window.location=\"mesh\"' title='See what is on the mesh'>Mesh Status</button>")
-    if cursor:get("aredn", "@lqm[0]", "enable") == "1" then
-        html.print("&nbsp;&nbsp;")
-        html.print("<button type=button onClick='window.location=\"lqm\"' title='See the link status to our neighbors'>Neighbor Status</button>")
-    end
-    if not wifi_disabled then
-        html.print("&nbsp;&nbsp;")
-        html.print("<button type=button onClick='window.location=\"scan\"' title='See what wireless networks are nearby'>WiFi Scan</button>")
-    end
-end
-html.print("&nbsp;&nbsp;")
-html.print("<button type=button onClick='window.location=\"setup\"' title='Configure this node'>Setup</button>")
-html.print("&nbsp;&nbsp;")
-html.print("<select name=\"css\" size=\"1\" onChange=\"form.submit()\" >")
-css_options()
-html.print("</select>")
-html.print("</nobr>")
-
-html.print("<input type=hidden name=reload value=reload>")
-
+-- Work out what config mode we're in. We use this to better instruct the
+-- user about the next steps
+local config_mode = nil
 if config == "not set" then
-    html.print("<b><br><br>This node is not yet configured.<br>")
-    local overlay = false
+    config_mode = "ram"
     for line in io.lines("/proc/mounts")
     do
         if line:match("overlay") then
-            overlay = true
+            config_mode = "setup"
             break
         end
     end
-    if overlay then
+end
+
+-- nav buttons
+html.navbar_user("status", config_mode)
+
+html.print("<input type=hidden name=reload value=reload>")
+
+if config_mode then
+    html.print("<b><br><br>This node is not yet configured.<br>")
+    if config_mode == "setup" then
         html.print("Go to the <a href='setup'>setup page</a> and set your node name and password.<br>")
         html.print("Click Save Changes, <u>even if you didn't make any changes</u>, then the node will reboot.</b>")
     else
-        html.print("Go the the <a href='admin'>administration page</a> and upload new firmware.<br>")
+        html.print("<br><b>*** WARNING ***</b><p>AREDN is currently running a temporary image.<br>All configuration changes will be lost if you reboot.</p>")
+        html.print("Before doing anything else, please go<br>to the <a href='admin'>administration page</a> and upload firmware.<br>")
     end
     html.print("<br><br>")
     html.print("<div style='max-width:540px; text-align:left'>")

files/www/cgi-bin/vpn

@@ -86,19 +86,6 @@ function hide(inp)
     hidden[#hidden + 1] = inp
 end
 
-function navbar()
-    html.print("<tr><td>")
-    html.print("<hr><table cellpadding=5 border=0 width=100%><tr>")
-    html.print("<td align=center width=15%><a href='status'>Node Status</a></td>")
-    html.print("<td align=center width=15%><a href='setup'>Basic Setup</a></td>")
-    html.print("<td align=center width=15%><a href='ports'>Port Forwarding,<br>DHCP, and Services</a></td>")
-    html.print("<td align=center width=15% class=navbar_select><a href='vpn'>Tunnel<br>Server</a></td>")
-    html.print("<td align=center width=15%><a href='vpnc'>Tunnel<br>Client</a></td>")
-    html.print("<td align=center width=15%><a href='admin'>Administration</a></td>")
-    html.print("<td align=center width=15%><a href='advancedconfig'>Advanced<br>Configuration</a></td>")
-    html.print("</tr></table><hr>")
-end
-
 function get_active_tun()
     local tuns = {}
     local f = io.popen("ps -w | grep vtun | grep ' tun '")
@@ -176,9 +163,9 @@ if config == "" or nixio.fs.stat("/tmp/reboot-required") then
     html.header(node .. " setup", true);
     html.print("<body><center>")
     html.alert_banner()
+    html.navbar_admin("vpn")
     html.print("<table width=790><tr><td>")
-    navbar();
-    html.print("</td></tr><tr><td align=center><br>")
+    html.print("<tr><td align=center><br>")
     if config == "" then
         html.print("<b>This page is not available until the configuration has been set.</b>")
     else
@@ -377,12 +364,11 @@ html.header(node .. " setup", true)
 html.print("<body><center>")
 html.alert_banner()
 html.print("<form id=vpn method=post action=/cgi-bin/vpn enctype='multipart/form-data'>")
-html.print("<form method=post action=test>")
-html.print("<table width=790>")
 
 -- navigation bar
-navbar()
-html.print("</td></tr>")
+html.navbar_admin("vpn")
+
+html.print("<table width=790>")
 
 -- control buttons
 html.print("<tr><td align=center>")

files/www/cgi-bin/vpnc

@@ -90,19 +90,6 @@ function err2(msg)
     errors[#errors + 1] = msg
 end
 
-function navbar()
-    html.print("<tr><td>")
-    html.print("<hr><table cellpadding=5 border=0 width=100%><tr>")
-    html.print("<td align=center width=15%><a href='status'>Node Status</a></td>")
-    html.print("<td align=center width=15%><a href='setup'>Basic Setup</a></td>")
-    html.print("<td align=center width=15%><a href='ports'>Port Forwarding,<br>DHCP, and Services</a></td>")
-    html.print("<td align=center width=15%><a href='vpn'>Tunnel<br>Server</a></td>")
-    html.print("<td align=center width=15% class=navbar_select><a href='vpnc'>Tunnel<br>Client</a></td>")
-    html.print("<td align=center width=15%><a href='admin'>Administration</a></td>")
-    html.print("<td align=center width=15%><a href='advancedconfig'>Advanced<br>Configuration</a></td>")
-    html.print("</tr></table><hr>")
-end
-
 function get_active_tun()
     local tuns = {}
     local f = io.popen("ps -w | grep vtun | grep ' tun '")
@@ -160,9 +147,9 @@ if config == "" or nixio.fs.stat("/tmp/reboot-required") then
     html.header(node .. " setup", true);
     html.print("<body><center>")
     html.alert_banner()
+    html.navbar_admin("vpnc")
     html.print("<table width=790>")
-    navbar();
-    html.print("</td></tr><tr><td align=center><br>")
+    html.print("<tr><td align=center><br>")
     if config == "" then
         html.print("<b>This page is not available until the configuration has been set.</b>")
     else
@@ -353,15 +340,13 @@ html.header(node .. " setup", true)
 html.print("<body><center>")
 html.alert_banner()
 
-html.print("<form method=post action=/cgi-bin/vpnc enctype='multipart/form-data'><table width=790>")
+html.print("<form method=post action=/cgi-bin/vpnc enctype='multipart/form-data'>")
 
 -- nav bar
-html.print("<tr><td>")
-navbar()
-html.print("</td></tr>")
+html.navbar_admin("vpnc")
 
 -- control buttons
-html.print("<tr><td align=center>")
+html.print("<table width=790><tr><td align=center>")
 html.print("<a href='/help.html#tunnels' target='_blank'>Help</a>")
 html.print("&nbsp;&nbsp;&nbsp;")
 html.print("<input type=submit name=button_save value='Save Changes' title='Save and use these settings now (takes about 20 seconds)'>&nbsp;")