put cookie to API, checkbox UI

extension/background.js

@@ -78,6 +78,18 @@ async function getAccess() {
 }
 
 
+// check if cookie is valid
+async function getCookieState() {
+
+    const path = "api/cookie/";
+    let response = await sendGet(path)
+    console.log("cookie state: " + JSON.stringify(response));
+    
+    return response
+
+}
+
+
 // send ping to server, return response
 async function verifyConnection() {
 
@@ -135,10 +147,9 @@ async function subscribeLink(toSubscribe) {
 
 async function cookieStr(cookieLines) {
 
-    let cookieString = cookieLines.join("\n");
     const path = "api/cookie/";
     let payload = {
-        "cookie": cookieString
+        "cookie": cookieLines.join("\n")
     }
     let response = await sendData(path, payload, "PUT");
 
@@ -210,7 +221,12 @@ function handleMessage(request, sender, sendResponse) {
         response.then(message => {
             sendResponse(message)
         })
-    } else if (request.cookie) {
+    } else if (request.cookieState) {
+        let response = getCookieState();
+        response.then(message => {
+            sendResponse(message)
+        })
+    } else if (request.sendCookie) {
         console.log("backgound: " + JSON.stringify(request));
         let response = sendCookies();
         response.then(message => {

extension/index.html

@@ -30,9 +30,12 @@
             <button id="save-login">Save</button><span id="status-icon">&#9744;</span>
         </div>
         <hr>
-        <div class="cookie">
+        <p>Options:</p>
-            <button id="send-cookies">Send YouTube cookies</button>
+        <div class="options">
+            <input type="checkbox" id="sendCookies" name="sendCookies">
+            <span>Sync YouTube cookies</span><span id="sendCookiesStatus"></span>
         </div>
+        <hr>
         <div class="icons">
             <div>
                 <a href="https://www.reddit.com/r/TubeArchivist/" target="_blank">

extension/popup.js

@@ -42,7 +42,7 @@ document.getElementById("status-icon").addEventListener("click", function() {
 
 
 // send cookie
-document.getElementById("send-cookies").addEventListener("click", function() {
+document.getElementById("sendCookies").addEventListener("click", function() {
     sendCookie();
 })
 
@@ -51,14 +51,28 @@ function sendCookie() {
     console.log("popup send cookie");
 
     function handleResponse(message) {
-        console.log("handle cookie response: " + message);
+        console.log("handle cookie response: " + JSON.stringify(message));
+        let cookie_validated = message.cookie_validated;
+        document.getElementById("sendCookiesStatus").innerText = "validated: " + cookie_validated
     }
 
     function handleError(error) {
         console.log(`Error: ${error}`);
     }
 
-    let sending = browserType.runtime.sendMessage({"cookie": true});
+    let checked = document.getElementById("sendCookies").checked;
+    let toStore = {
+        "sendCookies": {
+            "checked": checked
+        }
+    };
+    browserType.storage.local.set(toStore, function() {
+        console.log("stored option: " + JSON.stringify(toStore));
+    })
+    if (checked === false) {
+        return
+    }
+    let sending = browserType.runtime.sendMessage({"sendCookie": true});
     sending.then(handleResponse, handleError);
 }
 
@@ -91,6 +105,27 @@ function addUrl(access) {
 }
 
 
+function setCookieState() {
+
+    function handleResponse(message) {
+        console.log(message);
+        document.getElementById("sendCookies").checked = message.cookie_enabled;
+        if (message.validated_str) {
+            document.getElementById("sendCookiesStatus").innerText = message.validated_str;
+        }
+    }
+
+    function handleError(error) {
+        console.log(`Error: ${error}`);
+    }
+
+    console.log("set cookie state");
+    let sending = browserType.runtime.sendMessage({"cookieState": true});
+    sending.then(handleResponse, handleError)
+    document.getElementById("sendCookies").checked = true;
+}
+
+
 // change status icon based on connection status
 function setStatusIcon(connected) {
 
@@ -184,6 +219,16 @@ document.addEventListener("DOMContentLoaded", async () => {
         addUrl(item.access);
     };
 
+    function setCookiesOptions(result) {
+        if (!result.sendCookies || result.sendCookies.checked === false) {
+            console.log("sync cookies not set");
+            return
+        }
+        console.log("set options: " + JSON.stringify(result));
+        setCookieState();
+
+    }
+    
     function onError(error) {
         console.log(`Error: ${error}`);
     };
@@ -192,6 +237,10 @@ document.addEventListener("DOMContentLoaded", async () => {
         onGot(result)
     });
 
+    browserType.storage.local.get("sendCookies", function(result) {
+        setCookiesOptions(result)
+    })
+
     browserType.storage.local.get("youtube", function(result) {
         if (result.youtube) {
             createButtons(result);

extension/style.css

@@ -43,15 +43,13 @@ hr {
 .login-form input {
     margin: 3px 0;
 }
-.submit,
+.submit {
-.cookie {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .submit button,
-.youtube-page button,
+.youtube-page button {
-.cookie button {
     margin: 10px;
     border-radius: 0;
     padding: 5px 13px;
@@ -66,6 +64,13 @@ hr {
     transform: scale(1.05);
     color: #00202f;
 }
+.options {
+    display: flex;
+    padding-bottom: 10px;
+}
+.options span {
+    margin-left: 10px;
+}
 .icons {
     display: flex;
     grid-template-columns: 1fr 1fr;