Improve control panel panel switching behaviour by using the URL fragment (#2252)

management/templates/aliases.html

@@ -7,7 +7,7 @@
 
 <h3>Add a mail alias</h3>
 
-<p>Aliases are email forwarders. An alias can forward email to a <a href="#" onclick="return show_panel('users')">mail user</a> or to any email address.</p>
+<p>Aliases are email forwarders. An alias can forward email to a <a href="#users">mail user</a> or to any email address.</p>
 
 <p>To use an alias or any address besides your own login username in outbound mail, the sending user must be included as a permitted sender for the alias.</p>
 

management/templates/custom-dns.html

@@ -77,7 +77,7 @@
 
 <h3>Using a secondary nameserver</h3>
 
-<p>If your TLD requires you to have two separate nameservers, you can either set up <a href="#" onclick="return show_panel('external_dns')">external DNS</a> and ignore the DNS server on this box entirely, or use the DNS server on this box but add a secondary (aka &ldquo;slave&rdquo;) nameserver.</p>
+<p>If your TLD requires you to have two separate nameservers, you can either set up <a href="#external_dns">external DNS</a> and ignore the DNS server on this box entirely, or use the DNS server on this box but add a secondary (aka &ldquo;slave&rdquo;) nameserver.</p>
 <p>If you choose to use a secondary nameserver, you must find a secondary nameserver service provider. Your domain name registrar or virtual cloud provider may provide this service for you. Once you set up the secondary nameserver service, enter the hostname (not the IP address) of <em>their</em> secondary nameserver in the box below.</p>
 
 <form class="form-horizontal" role="form" onsubmit="do_set_secondary_dns(); return false;">

management/templates/index.html

@@ -11,9 +11,9 @@
 
         <link rel="stylesheet" href="/admin/assets/bootstrap/css/bootstrap.min.css">
         <style>
-	    body {
+            body {
-		overflow-y: scroll;
+              overflow-y: scroll;
-                padding-bottom: 20px;
+              padding-bottom: 20px;
             }
 
             p {
@@ -36,20 +36,20 @@
               margin-bottom: 13px;
               margin-top: 30px;
             }
-              .panel-heading h3 {
+            .panel-heading h3 {
-                border: none;
+              border: none;
-                padding: 0;
+              padding: 0;
-                margin: 0;
+              margin: 0;
-              }
+            }
 
             h4 {
               font-size: 110%;
               margin-bottom: 13px;
               margin-top: 18px;
             }
-              h4:first-child {
+            h4:first-child {
-                margin-top: 6px;
+              margin-top: 6px;
-              }
+            }
 
             .admin_panel {
               display: none;
@@ -59,10 +59,10 @@
               margin: 1.5em 0;
             }
 
-	    ol li {
+            ol li {
-	       margin-bottom: 1em;
+              margin-bottom: 1em;
-	    }
+            }
-          
+
             .if-logged-in { display: none; }
             .if-logged-in-admin { display: none; }
 
@@ -72,17 +72,17 @@
         html {
           filter: invert(100%) hue-rotate(180deg);
         }
-          
+
         /* Override Boostrap theme here to give more contrast. The black turns to white by the filter. */
         .form-control {
           color: black !important;
-        }          
+        }
 
         /* Revert the invert for the navbar */
         button, div.navbar {
           filter: invert(100%) hue-rotate(180deg);
         }
-          
+
         /* Revert the revert for the dropdowns */
         ul.dropdown-menu {
           filter: invert(100%) hue-rotate(180deg);
@@ -112,30 +112,30 @@
             <li class="dropdown if-logged-in-admin">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">System <b class="caret"></b></a>
               <ul class="dropdown-menu">
-                <li><a href="#system_status" onclick="return show_panel(this);">Status Checks</a></li>
+                <li><a href="#system_status">Status Checks</a></li>
-                <li><a href="#tls" onclick="return show_panel(this);">TLS (SSL) Certificates</a></li>
+                <li><a href="#tls">TLS (SSL) Certificates</a></li>
-                <li><a href="#system_backup" onclick="return show_panel(this);">Backup Status</a></li>
+                <li><a href="#system_backup">Backup Status</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Advanced Pages</li>
-                <li><a href="#custom_dns" onclick="return show_panel(this);">Custom DNS</a></li>
+                <li><a href="#custom_dns">Custom DNS</a></li>
-                <li><a href="#external_dns" onclick="return show_panel(this);">External DNS</a></li>
+                <li><a href="#external_dns">External DNS</a></li>
-                <li><a href="#munin" onclick="return show_panel(this);">Munin Monitoring</a></li>
+                <li><a href="#munin">Munin Monitoring</a></li>
               </ul>
             </li>
-            <li><a href="#mail-guide" onclick="return show_panel(this);" class="if-logged-in-not-admin">Mail</a></li>
+            <li><a href="#mail-guide" class="if-logged-in-not-admin">Mail</a></li>
             <li class="dropdown if-logged-in-admin">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mail &amp; Users <b class="caret"></b></a>
               <ul class="dropdown-menu">
-                <li><a href="#mail-guide" onclick="return show_panel(this);">Instructions</a></li>
+                <li><a href="#mail-guide">Instructions</a></li>
-                <li><a href="#users" onclick="return show_panel(this);">Users</a></li>
+                <li><a href="#users">Users</a></li>
-                <li><a href="#aliases" onclick="return show_panel(this);">Aliases</a></li>
+                <li><a href="#aliases">Aliases</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Your Account</li>
-                <li><a href="#mfa" onclick="return show_panel(this);">Two-Factor Authentication</a></li>
+                <li><a href="#mfa">Two-Factor Authentication</a></li>
               </ul>
             </li>
-            <li><a href="#sync_guide" onclick="return show_panel(this);" class="if-logged-in">Contacts/Calendar</a></li>
+            <li><a href="#sync_guide" class="if-logged-in">Contacts/Calendar</a></li>
-            <li><a href="#web" onclick="return show_panel(this);" class="if-logged-in-admin">Web</a></li>
+            <li><a href="#web" class="if-logged-in-admin">Web</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
             <li class="if-logged-in"><a href="#" onclick="do_logout(); return false;" style="color: white">Log out</a></li>
@@ -421,23 +421,25 @@ function do_logout() {
 }
 
 function show_panel(panelid) {
-  if (panelid.getAttribute)
+  if (panelid.getAttribute) {
     // we might be passed an HTMLElement <a>.
     panelid = panelid.getAttribute('href').substring(1);
+  }
 
   $('.admin_panel').hide();
   $('#panel_' + panelid).show();
-  if (typeof localStorage != 'undefined')
-    localStorage.setItem("miab-cp-lastpanel", panelid);
   if (window["show_" + panelid])
     window["show_" + panelid]();
 
   current_panel = panelid;
   switch_back_to_panel = null;
-
-  return false; // when called from onclick, cancel navigation
 }
 
+window.onhashchange = function() {
+  var panelid = window.location.hash.substring(1);
+  show_panel(panelid);
+};
+
 $(function() {
   // Recall saved user credentials.
   try {
@@ -452,8 +454,9 @@ $(function() {
   show_hide_menus();
 
   // Recall what the user was last looking at.
-  if (api_credentials != null && typeof localStorage != 'undefined' && localStorage.getItem("miab-cp-lastpanel")) {
+  if (api_credentials != null && window.location.hash) {
-    show_panel(localStorage.getItem("miab-cp-lastpanel"));
+    var panelid = window.location.hash.substring(1);
+    show_panel(panelid);
   } else if (api_credentials != null) {
     show_panel('welcome');
   } else {

management/templates/login.html

@@ -168,7 +168,18 @@ function do_login() {
       // Open the next panel the user wants to go to. Do this after the XHR response
       // is over so that we don't start a new XHR request while this one is finishing,
       // which confuses the loading indicator.
-      setTimeout(function() { show_panel(!switch_back_to_panel || switch_back_to_panel == "login" ? 'welcome' : switch_back_to_panel) }, 300);
+      setTimeout(function() {
+        if (window.location.hash) {
+          var panelid = window.location.hash.substring(1);
+          show_panel(panelid);
+        } else {
+          show_panel(
+            !switch_back_to_panel || switch_back_to_panel == "login"
+            ? 'welcome'
+            : switch_back_to_panel)
+        }
+      }, 300);
+
     }
   },
   undefined,

management/templates/mail-guide.html

@@ -36,7 +36,7 @@
 					<tr><th>Password:</th> <td>Your mail password.</td></tr>
 					</table>
 
-					<p>In addition to setting up your email, you&rsquo;ll also need to set up <a href="#sync_guide" onclick="return show_panel(this);">contacts and calendar synchronization</a> separately.</p>
+					<p>In addition to setting up your email, you&rsquo;ll also need to set up <a href="#sync_guide">contacts and calendar synchronization</a> separately.</p>
 
 					<p>As an alternative to IMAP you can also use the POP protocol: choose POP as the protocol, port 995, and SSL or TLS security in your mail client. The SMTP settings and usernames and passwords remain the same. However, we recommend you use IMAP instead.</p>
 

management/templates/sync-guide.html

@@ -17,14 +17,14 @@
 			<tr><th>Calendar</td> <td><a href="https://{{hostname}}/cloud/calendar">https://{{hostname}}/cloud/calendar</a></td></tr>
 			</table>
 
-			<p>Log in settings are the same as with <a href="#mail-guide" onclick="return show_panel(this);">mail</a>: your
+			<p>Log in settings are the same as with <a href="#mail-guide">mail</a>: your
 			complete email address and your mail password.</p>
 		</div>
 
 		<div class="col-sm-6">
 			<h4>On your mobile device</h4>
 
-			<p>If you set up your <a href="#mail-guide" onclick="return show_panel(this);">mail</a> using Exchange/ActiveSync,
+			<p>If you set up your <a href="#mail-guide">mail</a> using Exchange/ActiveSync,
 			your contacts and calendar may already appear on your device.</p>
 			<p>Otherwise, here are some apps that can synchronize your contacts and calendar to your Android phone.</p>
 

management/templates/users.html

@@ -31,9 +31,9 @@
 </form>
 <ul style="margin-top: 1em; padding-left: 1.5em; font-size: 90%;">
   <li>Passwords must be at least eight characters consisting of English letters and numbers only. For best results, <a href="#" onclick="return generate_random_password()">generate a random password</a>.</li>
-  <li>Use <a href="#" onclick="return show_panel('aliases')">aliases</a> to create email addresses that forward to existing accounts.</li>
+  <li>Use <a href="#aliases">aliases</a> to create email addresses that forward to existing accounts.</li>
   <li>Administrators get access to this control panel.</li>
-  <li>User accounts cannot contain any international (non-ASCII) characters, but <a href="#" onclick="return show_panel('aliases');">aliases</a> can.</li>
+  <li>User accounts cannot contain any international (non-ASCII) characters, but <a href="#aliases">aliases</a> can.</li>
 </ul>
 
 <h3>Existing mail users</h3>

management/templates/web.html

@@ -10,7 +10,7 @@
 <p>You can replace the default website with your own HTML pages and other static files. This control panel won&rsquo;t help you design a website, but once you have <tt>.html</tt> files you can upload them following these instructions:</p>
 
 <ol>
-<li>Ensure that any domains you are publishing a website for have no problems on the <a href="#system_status" onclick="return show_panel(this);">Status Checks</a> page.</li>
+<li>Ensure that any domains you are publishing a website for have no problems on the <a href="#system_status">Status Checks</a> page.</li>
 
 <li>On your personal computer, install an SSH file transfer program such as <a href="https://filezilla-project.org/">FileZilla</a> or <a href="http://linuxcommand.org/man_pages/scp1.html">scp</a>.</li>
 
@@ -32,7 +32,7 @@
         </tbody>
 </table>
 
-<p>To add a domain to this table, create a dummy <a href="#users" onclick="return show_panel(this);">mail user</a> or <a href="#aliases" onclick="return show_panel(this);">alias</a> on the domain first and see the <a href="https://mailinabox.email/guide.html#domain-name-configuration">setup guide</a> for adding nameserver records to the new domain at your registrar (but <i>not</i> glue records).</p>
+<p>To add a domain to this table, create a dummy <a href="#users">mail user</a> or <a href="#aliases">alias</a> on the domain first and see the <a href="https://mailinabox.email/guide.html#domain-name-configuration">setup guide</a> for adding nameserver records to the new domain at your registrar (but <i>not</i> glue records).</p>
 
 </ol>