From 6d43d24552b605974ce41859b05e7a1e96b5fb64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20T=C3=B3th?= <totpet94@gmail.com>
Date: Sat, 13 May 2023 12:49:34 +0200
Subject: [PATCH] Improve control panel panel switching behaviour by using the
 URL fragment (#2252)

---
 management/templates/aliases.html    |  2 +-
 management/templates/custom-dns.html |  2 +-
 management/templates/index.html      | 79 +++++++++++++++-------------
 management/templates/login.html      | 13 ++++-
 management/templates/mail-guide.html |  2 +-
 management/templates/sync-guide.html |  4 +-
 management/templates/users.html      |  4 +-
 management/templates/web.html        |  4 +-
 8 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/management/templates/aliases.html b/management/templates/aliases.html
index c2a141f7..6c8b0376 100644
--- a/management/templates/aliases.html
+++ b/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>
 
diff --git a/management/templates/custom-dns.html b/management/templates/custom-dns.html
index c59624eb..e19bdddf 100644
--- a/management/templates/custom-dns.html
+++ b/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;">
diff --git a/management/templates/index.html b/management/templates/index.html
index 323789ca..3c6d449e 100644
--- a/management/templates/index.html
+++ b/management/templates/index.html
@@ -11,9 +11,9 @@
 
         <link rel="stylesheet" href="/admin/assets/bootstrap/css/bootstrap.min.css">
         <style>
-	    body {
-		overflow-y: scroll;
-                padding-bottom: 20px;
+            body {
+              overflow-y: scroll;
+              padding-bottom: 20px;
             }
 
             p {
@@ -36,20 +36,20 @@
               margin-bottom: 13px;
               margin-top: 30px;
             }
-              .panel-heading h3 {
-                border: none;
-                padding: 0;
-                margin: 0;
-              }
+            .panel-heading h3 {
+              border: none;
+              padding: 0;
+              margin: 0;
+            }
 
             h4 {
               font-size: 110%;
               margin-bottom: 13px;
               margin-top: 18px;
             }
-              h4:first-child {
-                margin-top: 6px;
-              }
+            h4:first-child {
+              margin-top: 6px;
+            }
 
             .admin_panel {
               display: none;
@@ -59,10 +59,10 @@
               margin: 1.5em 0;
             }
 
-	    ol li {
-	       margin-bottom: 1em;
-	    }
-          
+            ol li {
+              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="#tls" onclick="return show_panel(this);">TLS (SSL) Certificates</a></li>
-                <li><a href="#system_backup" onclick="return show_panel(this);">Backup Status</a></li>
+                <li><a href="#system_status">Status Checks</a></li>
+                <li><a href="#tls">TLS (SSL) Certificates</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="#external_dns" onclick="return show_panel(this);">External DNS</a></li>
-                <li><a href="#munin" onclick="return show_panel(this);">Munin Monitoring</a></li>
+                <li><a href="#custom_dns">Custom DNS</a></li>
+                <li><a href="#external_dns">External DNS</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="#users" onclick="return show_panel(this);">Users</a></li>
-                <li><a href="#aliases" onclick="return show_panel(this);">Aliases</a></li>
+                <li><a href="#mail-guide">Instructions</a></li>
+                <li><a href="#users">Users</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="#web" onclick="return show_panel(this);" class="if-logged-in-admin">Web</a></li>
+            <li><a href="#sync_guide" class="if-logged-in">Contacts/Calendar</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")) {
-    show_panel(localStorage.getItem("miab-cp-lastpanel"));
+  if (api_credentials != null && window.location.hash) {
+    var panelid = window.location.hash.substring(1);
+    show_panel(panelid);
   } else if (api_credentials != null) {
     show_panel('welcome');
   } else {
diff --git a/management/templates/login.html b/management/templates/login.html
index 421c8845..be8a435e 100644
--- a/management/templates/login.html
+++ b/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,
diff --git a/management/templates/mail-guide.html b/management/templates/mail-guide.html
index e3db9f0c..0ffadbdf 100644
--- a/management/templates/mail-guide.html
+++ b/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>
 
diff --git a/management/templates/sync-guide.html b/management/templates/sync-guide.html
index 4347d764..cafa5f0a 100644
--- a/management/templates/sync-guide.html
+++ b/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>
 
diff --git a/management/templates/users.html b/management/templates/users.html
index 2ad5ebdb..4924c7c8 100644
--- a/management/templates/users.html
+++ b/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>
diff --git a/management/templates/web.html b/management/templates/web.html
index 6a09ef0e..ed8c7d38 100644
--- a/management/templates/web.html
+++ b/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>