Add WebAPI/WebUI for managing cookies

Closes #21125.
PR #21340.

src/webui/www/private/download.html

@@ -44,14 +44,6 @@
                                 <input type="text" id="savepath" name="savepath" class="pathDirectory" style="width: 16em;">
                             </td>
                         </tr>
-                        <tr>
-                            <td>
-                                <label for="cookie">QBT_TR(Cookie:)QBT_TR[CONTEXT=HttpServer]</label>
-                            </td>
-                            <td>
-                                <input type="text" id="cookie" name="cookie" style="width: 16em;">
-                            </td>
-                        </tr>
                         <tr>
                             <td>
                                 <label for="rename">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>

src/webui/www/private/index.html

@@ -94,6 +94,7 @@
                         <ul>
                             <li><a id="preferencesLink"><img class="MyMenuIcon" src="images/configure.svg" alt="QBT_TR(Options...)QBT_TR[CONTEXT=MainWindow]" width="16" height="16">QBT_TR(Options...)QBT_TR[CONTEXT=MainWindow]</a></li>
                             <li><a id="registerMagnetHandlerLink"><img class="MyMenuIcon" src="images/torrent-magnet.svg" alt="QBT_TR(Register to handle magnet links...)QBT_TR[CONTEXT=HttpServer]" width="16" height="16">QBT_TR(Register to handle magnet links...)QBT_TR[CONTEXT=HttpServer]</a></li>
+                            <li><a id="manageCookiesLink"><img class="MyMenuIcon" src="images/browser-cookies.svg" alt="QBT_TR(Manage Cookies...)QBT_TR[CONTEXT=MainWindow]" width="16" height="16">QBT_TR(Manage Cookies...)QBT_TR[CONTEXT=MainWindow]</a></li>
                         </ul>
                     </li>
                     <li>

src/webui/www/private/scripts/mocha-init.js

@@ -239,6 +239,27 @@ const initializeWindows = function() {
         });
     });
 
+    addClickEvent("manageCookies", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const id = "cookiesPage";
+        new MochaUI.Window({
+            id: id,
+            title: "QBT_TR(Manage Cookies)QBT_TR[CONTEXT=CookiesDialog]",
+            loadMethod: "xhr",
+            contentURL: new URI("views/cookies.html").toString(),
+            maximizable: false,
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+            width: loadWindowWidth(id, 900),
+            height: loadWindowHeight(id, 400),
+            onResize: function() {
+                saveWindowSize(id);
+            }
+        });
+    });
+
     addClickEvent("upload", (e) => {
         e.preventDefault();
         e.stopPropagation();

src/webui/www/private/views/cookies.html

@@ -0,0 +1,191 @@
+<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">QBT_TR(Domain)QBT_TR[CONTEXT=CookiesDialog]</td>
+                <td class="path">QBT_TR(Path)QBT_TR[CONTEXT=CookiesDialog]</td>
+                <td class="name">QBT_TR(Name)QBT_TR[CONTEXT=CookiesDialog]</td>
+                <td class="value">QBT_TR(Value)QBT_TR[CONTEXT=CookiesDialog]</td>
+                <td class="expDate">QBT_TR(Expiration Date)QBT_TR[CONTEXT=CookiesDialog]</td>
+                <td class="actionColumn"></td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="invisible newRow">
+                <td class="domain"><input type="text" aria-label="QBT_TR(Domain)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
+                <td class="path"><input type="text" aria-label="QBT_TR(Path)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
+                <td class="name"><input type="text" aria-label="QBT_TR(Name)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
+                <td class="value"><input type="text" aria-label="QBT_TR(Value)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
+                <td class="expDate"><input type="datetime-local" aria-label="QBT_TR(Expiration Date)QBT_TR[CONTEXT=CookiesDialog]"></td>
+                <td><img class="removeCookie" src="images/list-remove.svg" alt="QBT_TR(Remove)QBT_TR[CONTEXT=CookiesDialog]"></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="QBT_TR(Add Cookie)QBT_TR[CONTEXT=CookiesDialog]"></td>
+            </tr>
+        </tfoot>
+    </table>
+
+    <div class="buttonContainer">
+        <button type="button" id="saveButton">QBT_TR(Save)QBT_TR[CONTEXT=HttpServer]</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>

src/webui/www/webui.qrc

@@ -25,6 +25,7 @@
         <file>private/images/application-rss.svg</file>
         <file>private/images/application-url.svg</file>
         <file>private/images/arrow-right.gif</file>
+        <file>private/images/browser-cookies.svg</file>
         <file>private/images/checked-completed.svg</file>
         <file>private/images/collapse.svg</file>
         <file>private/images/configure.svg</file>
@@ -424,6 +425,7 @@
         <file>private/views/aboutToolbar.html</file>
         <file>private/views/confirmdeletion.html</file>
         <file>private/views/confirmRecheck.html</file>
+        <file>private/views/cookies.html</file>
         <file>private/views/filters.html</file>
         <file>private/views/installsearchplugin.html</file>
         <file>private/views/log.html</file>