192 lines
6.5 KiB
HTML

<style>
#manageCookiesContainer {
margin: 10px;
.buttonContainer {
text-align: center;
margin-top: 1em;
}
}
#manageCookiesTable {
tbody {
td input {
width: 140px;
}
td.expDate input {
width: 190px;
}
}
thead td {
width: 150px;
.expDate {
width: 200px;
}
.actionColumn {
width: 30px;
}
}
.removeCookie,
.addCookie {
height: 16px;
width: 16px;
padding-left: 10px;
vertical-align: middle;
cursor: pointer;
}
}
</style>
<div id="manageCookiesContainer">
<table id="manageCookiesTable">
<thead>
<tr>
<td class="domain">Domain</td>
<td class="path">Path</td>
<td class="name">Name</td>
<td class="value">Value</td>
<td class="expDate">Expiration Date</td>
<td class="actionColumn"></td>
</tr>
</thead>
<tbody>
<tr class="invisible newRow">
<td class="domain"><input type="text" aria-label="Domain" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
<td class="path"><input type="text" aria-label="Path" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
<td class="name"><input type="text" aria-label="Name" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
<td class="value"><input type="text" aria-label="Value" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
<td class="expDate"><input type="datetime-local" aria-label="Expiration Date"></td>
<td><img class="removeCookie" src="images/list-remove.svg" alt="Remove"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><img class="addCookie" src="images/list-add.svg" alt="Add Cookie"></td>
</tr>
</tfoot>
</table>
<div class="buttonContainer">
<button type="button" id="saveButton">Save</button>
</div>
</div>
<script>
"use strict";
window.qBittorrent ??= {};
window.qBittorrent.ManageCookies ??= (() => {
const exports = () => {
return {
setup: setup
};
};
const addCookie = function() {
const newRow = document.querySelector("#manageCookiesTable tr.newRow").cloneNode(true);
newRow.querySelector(".removeCookie").addEventListener("click", (event) => {
deleteCookie(event.target);
});
newRow.classList.remove("invisible");
document.querySelector("#manageCookiesTable tbody").append(newRow);
return newRow;
};
const deleteCookie = function(element) {
element.closest("tr").destroy();
};
const save = function() {
const rows = [...document.querySelectorAll("#manageCookiesTable tbody tr")].filter(e => !e.hasClass("invisible"));
const cookies = rows.map(row => {
const expDateValue = row.querySelector("td.expDate input").valueAsNumber;
// remove ms from string
const expDate = Number.isInteger(expDateValue) ? Number(String(expDateValue).slice(0, -3)) : 0;
return {
domain: row.querySelector("td.domain input").value,
path: row.querySelector("td.path input").value,
name: row.querySelector("td.name input").value,
value: row.querySelector("td.value input").value,
expirationDate: expDate,
};
});
new Request({
url: "api/v2/app/setCookies",
method: "post",
noCache: true,
data: {
cookies: JSON.stringify(cookies)
},
onFailure: (response) => {
let error = "Unable to save cookies";
if (response?.responseText)
error += `: ${response.responseText}`;
alert(error);
},
onSuccess: (response) => {
window.qBittorrent.Client.closeWindow("cookiesPage");
}
}).send();
};
const loadCookies = function() {
new Request.JSON({
url: "api/v2/app/cookies",
method: "get",
onFailure: (response) => {
let error = "Unable to load cookies";
if (response?.responseText)
error += `: ${response.responseText}`;
alert(error);
},
onSuccess: (response) => {
for (const cookie of response) {
const row = addCookie();
row.querySelector("td.domain input").value = cookie.domain;
row.querySelector("td.path input").value = cookie.path;
row.querySelector("td.name input").value = cookie.name;
row.querySelector("td.value input").value = cookie.value;
if (cookie.expirationDate > 0) {
// remove seconds + milliseconds, if any, to ensure seconds aren't displayed in input field
const date = new Date(cookie.expirationDate * 1000);
date.setSeconds(0);
date.setMilliseconds(0);
row.querySelector("td.expDate input").valueAsNumber = date.getTime();
}
}
}
}).send();
};
const setup = function() {
loadCookies();
document.querySelector(".addCookie").addEventListener("click", (event) => {
addCookie();
});
document.querySelector("#saveButton").addEventListener("click", (event) => {
save();
});
};
return exports();
})();
Object.freeze(window.qBittorrent.ManageCookies);
window.qBittorrent.ManageCookies.setup();
</script>