changing the login link based on auth

cmd/web/templates/base.layout.gohtml

@@ -32,9 +32,6 @@
                         <li class="nav-item">
                             <a class="nav-link active" aria-current="page" href="/">Home</a>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="/virtual-terminal">Virtual Terminal</a>
-                        </li>
                         <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle"
                                href="#"
@@ -50,13 +47,14 @@
                                 </li>
                             </ul>
                         </li>
-                        <li class="nav-item dropdown">
+                        <li id="vt-link" class="nav-item d-none">
-                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                            <a class="nav-link" href="/virtual-terminal">Virtual Terminal</a>
-                                <li class="nav-item">
-                                    <a href="/login" class="nav-link">Login</a>
-                                </li>
-                            </ul>
                         </li>
+                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                            <li id="login-link" class="nav-item d-none">
+                                <a href="/login" class="nav-link">Login</a>
+                            </li>
+                        </ul>
                     </ul>
                 </div>
             </div>
@@ -69,6 +67,7 @@
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
                 integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
                 crossorigin="anonymous"></script>
+        <script src="/static/js/base.js"></script>
         {{ block "js" . }}
         {{ end }}
     </body>

static/js/base.js

@@ -0,0 +1,19 @@
+let loginLink = document.getElementById("login-link");
+let vtLink = document.getElementById("vt-link");
+
+document.addEventListener("DOMContentLoaded", function () {
+    if (localStorage.getItem("token") !== null) {
+        loginLink.innerHTML = '<a href="#!" onclick="logout()" class="nav-link">Logout</a>';
+        vtLink.classList.remove('d-none');
+    } else {
+        loginLink.innerHTML = '<a href="/login" class="nav-link">Login</a>';
+    }
+    loginLink.classList.remove('d-none')
+});
+
+function logout() {
+    localStorage.removeItem("token");
+    localStorage.removeItem("token_expiry");
+    location.href = "/login";
+}
+

static/js/login.js

@@ -36,6 +36,7 @@ export function val(api) {
                 localStorage.setItem("token", response.authentication_token.token);
                 localStorage.setItem("token_expiry", response.authentication_token.expiry);
                 showSuccess("login-messages", "Login successful.")
+                location.href = "/";
             } else {
                 showError("login-messages", response.message)
             }