feat: Authentication on qBittorrent

docs/customservices.md

@@ -324,8 +324,7 @@ This service displays the global upload and download rates, as well as the numbe
 listed. The service communicates with the qBittorrent API interface which needs
 to be accessible from the browser. Please consult
 [the instructions](https://github.com/qbittorrent/qBittorrent/pull/12579)
-for setting up qBittorrent and make sure the correct CORS-settings are applied. Examples for various
-servers can be found at [enable-cors.org](https://enable-cors.org/server.html).
+for setting up qBittorrent and make sure the correct CORS-settings are applied, for example by setting the header: "`Access-Control-Allow-Origin: *`. Examples for various servers can be found at [enable-cors.org](https://enable-cors.org/server.html). qBittorrent [doesn't support](https://github.com/qbittorrent/qBittorrent/issues/17598#issuecomment-1225538387) authenticating from other websites. Nevertheless if you know what you are doing you can disable CSRF protection and it will work.
 
 ```yaml
 - name: "qBittorrent"
@@ -335,6 +334,10 @@ servers can be found at [enable-cors.org](https://enable-cors.org/server.html).
   rateInterval: 2000 # Interval for updating the download and upload rates.
   torrentInterval: 5000 # Interval for updating the torrent count.
   target: "_blank" # optional html a tag target attribute
+
+  # Optional authentication, requires disabling CSRF protection
+  username: "username"
+  password: "password"
 ```
 
 ## Copy to Clipboard

src/components/services/qBittorrent.vue

@@ -72,6 +72,11 @@ export default {
       setInterval(() => this.fetchCount(), torrentInterval);
     }
 
+    // authenticate if username and password are provided
+    if (this.item.username != undefined && this.item.password != undefined) {
+      this.authenticate(this.item.username, this.item.password);
+    }
+
     this.getRate();
     this.fetchCount();
   },
@@ -97,6 +102,22 @@ export default {
         console.error(e);
       }
     },
+    authenticate: async function (username, password) {
+      try {
+        const reqParams = {
+          username: username,
+          password: password,
+        };
+        const body = await this.fetch("/api/v2/auth/login", {
+          method: "POST",
+          body: new URLSearchParams(reqParams),
+        });
+        this.error = false;
+      } catch (e) {
+        this.error = true;
+        console.error(e);
+      }
+    },
   },
 };
 </script>