put cookie to API, checkbox UI

This commit is contained in:
simon 2022-06-25 20:15:19 +07:00
parent 65f6fe3257
commit 68fae9d6d4
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
4 changed files with 85 additions and 12 deletions

View File

@ -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 => {

View File

@ -30,9 +30,12 @@
<button id="save-login">Save</button><span id="status-icon">&#9744;</span>
</div>
<hr>
<div class="cookie">
<button id="send-cookies">Send YouTube cookies</button>
<p>Options:</p>
<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">

View File

@ -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) {
@ -183,6 +218,16 @@ document.addEventListener("DOMContentLoaded", async () => {
pingBackend();
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);

View File

@ -43,15 +43,13 @@ hr {
.login-form input {
margin: 3px 0;
}
.submit,
.cookie {
.submit {
display: flex;
align-items: center;
justify-content: center;
}
.submit button,
.youtube-page button,
.cookie button {
.youtube-page 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;