add connection status icon

extension/index.html

@@ -25,6 +25,9 @@
         #download {
             text-align: center
         }
+        #status-icon {
+            font-size: 1.5em;
+        }
         .login-form {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -33,9 +36,14 @@
         .login-form input {
             margin: 3px 0;
         }
-        .submit button {
-            margin: 10px auto 15px auto;
-            display: block;
+        .submit {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .submit button,
+        .youtube-page button {
+            margin: 10px;
             border-radius: 0;
             padding: 5px 13px;
             border: none;
@@ -43,7 +51,8 @@
             background-color: #259485;
             color: #ffffff;
         }
-        .submit button:hover {
+        .submit button:hover,
+        .youtube-page button:hover {
             background-color: #97d4c8;
             transform: scale(1.05);
             color: #00202f;
@@ -62,7 +71,7 @@
     <div class="container">
         <img src="/images/logo.svg" alt="ta-logo">
         <hr>
-        <div id="download"></div>
+        <div class="youtube-page" id="download"></div>
         <form class="login-form">
             <label for="url">Tube Archivist Url:</label>
             <input type="text" id="url" name="url">
@@ -72,7 +81,7 @@
             <input type="password" id="api-key" name="api-key">
         </form>
         <div class="submit">
-            <button onclick="storeLogin()" id="save-login">Save</button>
+            <button onclick="storeLogin()" id="save-login">Save</button><span id="status-icon"></span>
         </div>
         <div class="icons">
             <div>

extension/popup.js

@@ -36,6 +36,21 @@ document.getElementById("save-login").addEventListener("click", function () {
     });
 })
 
+
+function setStatusIcon(connected) {
+
+    let statusIcon = document.getElementById("status-icon")
+    if (connected == true) {
+        console.log("connected");
+    } else {
+        console.log("not connected");
+        statusIcon.innerHTML = "☒";
+        statusIcon.style.color = "red";
+    }
+
+}
+
+
 // fill in form
 document.addEventListener("DOMContentLoaded", async () => {
 
@@ -44,6 +59,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     function onGot(item) {
         if (!item.access) {
             console.log("no access details found");
+            setStatusIcon(false);
             return
         }
         console.log(item.access);