mirror of
https://github.com/Carve/qbittorrent-webui-cjratliff.com.git
synced 2025-02-28 23:50:57 +01:00
192 lines
6.5 KiB
HTML
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>
|