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

   1 <style>
   2     #manageCookiesContainer {
   3         margin: 10px;
   4
   5         .buttonContainer {
   6             text-align: center;
   7             margin-top: 1em;
   8         }
   9     }
  10
  11     #manageCookiesTable {
  12         tbody {
  13             td input {
  14                 width: 140px;
  15             }
  16
  17             td.expDate input {
  18                 width: 190px;
  19             }
  20         }
  21
  22         thead td {
  23             width: 150px;
  24
  25             .expDate {
  26                 width: 200px;
  27             }
  28
  29             .actionColumn {
  30                 width: 30px;
  31             }
  32         }
  33
  34         .removeCookie,
  35         .addCookie {
  36             height: 16px;
  37             width: 16px;
  38             margin-left: 5px;
  39             vertical-align: middle;
  40             cursor: pointer;
  41         }
  42     }
  43
  44 </style>
  45
  46 <div id="manageCookiesContainer">
  47     <table id="manageCookiesTable">
  48         <thead>
  49             <tr>
  50                 <td class="domain">QBT_TR(Domain)QBT_TR[CONTEXT=CookiesDialog]</td>
  51                 <td class="path">QBT_TR(Path)QBT_TR[CONTEXT=CookiesDialog]</td>
  52                 <td class="name">QBT_TR(Name)QBT_TR[CONTEXT=CookiesDialog]</td>
  53                 <td class="value">QBT_TR(Value)QBT_TR[CONTEXT=CookiesDialog]</td>
  54                 <td class="expDate">QBT_TR(Expiration Date)QBT_TR[CONTEXT=CookiesDialog]</td>
  55                 <td class="actionColumn"></td>
  56             </tr>
  57         </thead>
  58         <tbody>
  59             <tr class="invisible newRow">
  60                 <td class="domain"><input type="text" aria-label="QBT_TR(Domain)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
  61                 <td class="path"><input type="text" aria-label="QBT_TR(Path)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
  62                 <td class="name"><input type="text" aria-label="QBT_TR(Name)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
  63                 <td class="value"><input type="text" aria-label="QBT_TR(Value)QBT_TR[CONTEXT=CookiesDialog]" autocomplete="off" autocorrect="off" autocapitalize="none"></td>
  64                 <td class="expDate"><input type="datetime-local" aria-label="QBT_TR(Expiration Date)QBT_TR[CONTEXT=CookiesDialog]"></td>
  65                 <td><img class="removeCookie" src="images/list-remove.svg" alt="QBT_TR(Remove)QBT_TR[CONTEXT=CookiesDialog]"></td>
  66             </tr>
  67         </tbody>
  68         <tfoot>
  69             <tr>
  70                 <td></td>
  71                 <td></td>
  72                 <td></td>
  73                 <td></td>
  74                 <td></td>
  75                 <td><img class="addCookie" src="images/list-add.svg" alt="QBT_TR(Add Cookie)QBT_TR[CONTEXT=CookiesDialog]"></td>
  76             </tr>
  77         </tfoot>
  78     </table>
  79
  80     <div class="buttonContainer">
  81         <button type="button" id="saveButton">QBT_TR(Save)QBT_TR[CONTEXT=HttpServer]</button>
  82     </div>
  83 </div>
  84
  85 <script>
  86     "use strict";
  87
  88     window.qBittorrent ??= {};
  89     window.qBittorrent.ManageCookies ??= (() => {
  90         const exports = () => {
  91             return {
  92                 setup: setup
  93             };
  94         };
  95
  96         const addCookie = () => {
  97             const newRow = document.querySelector("#manageCookiesTable tr.newRow").cloneNode(true);
  98             newRow.querySelector(".removeCookie").addEventListener("click", (event) => {
  99                 deleteCookie(event.target);
 100             });
 101             newRow.classList.remove("invisible");
 102             document.querySelector("#manageCookiesTable tbody").append(newRow);
 103             return newRow;
 104         };
 105
 106         const deleteCookie = (element) => {
 107             element.closest("tr").destroy();
 108         };
 109
 110         const save = () => {
 111             const rows = [...document.querySelectorAll("#manageCookiesTable tbody tr")].filter(e => !e.hasClass("invisible"));
 112             const cookies = rows.map(row => {
 113                 const expDateValue = row.querySelector("td.expDate input").valueAsNumber;
 114                 // remove ms from string
 115                 const expDate = Number.isInteger(expDateValue) ? Number(String(expDateValue).slice(0, -3)) : 0;
 116
 117                 return {
 118                     domain: row.querySelector("td.domain input").value,
 119                     path: row.querySelector("td.path input").value,
 120                     name: row.querySelector("td.name input").value,
 121                     value: row.querySelector("td.value input").value,
 122                     expirationDate: expDate,
 123                 };
 124             });
 125
 126             new Request({
 127                 url: "api/v2/app/setCookies",
 128                 method: "post",
 129                 noCache: true,
 130                 data: {
 131                     cookies: JSON.stringify(cookies)
 132                 },
 133                 onFailure: (response) => {
 134                     let error = "Unable to save cookies";
 135                     if (response?.responseText)
 136                         error += `: ${response.responseText}`;
 137                     alert(error);
 138                 },
 139                 onSuccess: (response) => {
 140                     window.qBittorrent.Client.closeWindow("cookiesPage");
 141                 }
 142             }).send();
 143         };
 144
 145         const loadCookies = () => {
 146             new Request.JSON({
 147                 url: "api/v2/app/cookies",
 148                 method: "get",
 149                 onFailure: (response) => {
 150                     let error = "Unable to load cookies";
 151                     if (response?.responseText)
 152                         error += `: ${response.responseText}`;
 153                     alert(error);
 154                 },
 155                 onSuccess: (response) => {
 156                     for (const cookie of response) {
 157                         const row = addCookie();
 158                         row.querySelector("td.domain input").value = cookie.domain;
 159                         row.querySelector("td.path input").value = cookie.path;
 160                         row.querySelector("td.name input").value = cookie.name;
 161                         row.querySelector("td.value input").value = cookie.value;
 162                         if (cookie.expirationDate > 0) {
 163                             // remove seconds + milliseconds, if any, to ensure seconds aren't displayed in input field
 164                             const date = new Date(cookie.expirationDate * 1000);
 165                             date.setSeconds(0);
 166                             date.setMilliseconds(0);
 167                             row.querySelector("td.expDate input").valueAsNumber = date.getTime();
 168                         }
 169                     }
 170                 }
 171             }).send();
 172         };
 173
 174         const setup = () => {
 175             loadCookies();
 176
 177             document.querySelector(".addCookie").addEventListener("click", (event) => {
 178                 addCookie();
 179             });
 180
 181             document.querySelector("#saveButton").addEventListener("click", (event) => {
 182                 save();
 183             });
 184         };
 185
 186         return exports();
 187     })();
 188     Object.freeze(window.qBittorrent.ManageCookies);
 189
 190     window.qBittorrent.ManageCookies.setup();
 191 </script>