From 3445d5366af18f918a47eb89c7bb52606649fa02 Mon Sep 17 00:00:00 2001
From: SinTan1729 <sayantan.santra689@gmail.com>
Date: Wed, 29 May 2024 09:15:25 -0500
Subject: [PATCH] fix: Properly handle visibility of elements

---
 resources/index.html        |  4 ++--
 resources/static/script.js  | 10 ++++++----
 resources/static/styles.css |  1 -
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/resources/index.html b/resources/index.html
index 43e28c1..b62a349 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -48,7 +48,7 @@
         </form>
 
         <p id="loading-text">Loading links table...</p>
-        <table class="pure-table">
+        <table class="pure-table" hidden>
             <caption>Active links</caption>
             <br />
             <thead>
@@ -66,7 +66,7 @@
     </div>
 
     <div name="links-div">
-        <a id="admin-button" href="javascript:getLogin()">login</a>
+        <a id="admin-button" href="javascript:getLogin()" hidden>login</a>
         &nbsp;
         <a id="version-number" href="https://github.com/SinTan1729/chhoto-url" target="_blank" rel="noopener noreferrer"
             hidden>Source Code</a>
diff --git a/resources/static/script.js b/resources/static/script.js
index a7d996b..16e47fe 100644
--- a/resources/static/script.js
+++ b/resources/static/script.js
@@ -46,8 +46,9 @@ const refreshData = async () => {
         let errorMsg = await res.text();
         console.log(errorMsg);
         if (errorMsg == "Using public mode.") {
+            document.getElementById("admin-button").hidden = false;
             loading_text = document.getElementById("loading-text");
-            loading_text.style.display = "none";
+            loading_text.hidden = true;
             showVersion();
         } else {
             getLogin();
@@ -64,13 +65,14 @@ const displayData = async (data) => {
     admin_button = document.getElementById("admin-button");
     admin_button.innerText = "logout";
     admin_button.href = "javascript:logOut()";
+    admin_button.hidden = false;
 
     table_box = document.querySelector(".pure-table");
     loading_text = document.getElementById("loading-text");
 
     if (data.length == 0) {
-        table_box.style.visibility = "hidden";
-        loading_text.style.display = "block";
+        table_box.hidden = true;
+        loading_text.hidden = true;
         loading_text.innerHTML = "No active links.";
     }
     else {
@@ -80,7 +82,7 @@ const displayData = async (data) => {
             const shortUrlHeader = document.getElementById("short-url-header");
             shortUrlHeader.innerHTML = "Short URL<br>(right click and copy)";
         }
-        table_box.style.visibility = "visible";
+        table_box.hidden = false;
         table.innerHTML = ''; // Clear
         data.forEach(tr => table.appendChild(TR(tr, site)));
     }
diff --git a/resources/static/styles.css b/resources/static/styles.css
index 2ba0579..0130ac0 100644
--- a/resources/static/styles.css
+++ b/resources/static/styles.css
@@ -73,7 +73,6 @@ div[name="links-div"] {
 
 .pure-table {
     width: 98%;
-    visibility: hidden;
 }
 
 .pure-table caption {