feat: Authentication on qBittorrent

[garretaserra]

Allow optional authentication on qBittorrent

Description

Currently the only way to add qBittorrent is to configure it so that Homer's IP bypasses authentication.
Instead we can easily authenticate with the API with a request and cookie based authentication. The only problem is that because of CSRF qBittorrent will only allow API requests from its own website. If CSRF is disabled you can authenticate correctly. In this conversation (which I have included in the docs so that if users whant to know what this is) its talked about how this is not oficially supported.

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• [x ] New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [x ] I've read & comply with the contributing guidelines
• [x ] I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
• [x ] I have made corresponding changes to the documentation (README.md).
• [ x] I've checked my modifications for any breaking changes, especially in the config.yml file

[netlify]

✅ Deploy Preview for homer-demo-content ready!

Name	Link
🔨 Latest commit	fe17ba8
🔍 Latest deploy log	https://app.netlify.com/sites/homer-demo-content/deploys/65207b728f70360008731662
😎 Deploy Preview	https://deploy-preview-709--homer-demo-content.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[caarlos0]

This seems like it'll do the authentication request, but will not use the resulting cookie in the following requests... so the issue remains:

[caarlos0]

diff --git a/src/components/services/qBittorrent.vue b/src/components/services/qBittorrent.vue
index fc48d74..4259b79 100644
--- a/src/components/services/qBittorrent.vue
+++ b/src/components/services/qBittorrent.vue
@@ -43,7 +43,7 @@ const displayRate = (rate) => {
   }
   return (
     Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(
-      rate || 0
+      rate || 0,
     ) + ` ${units[i]}/s`
   );
 };
@@ -83,7 +83,9 @@ export default {
   methods: {
     fetchCount: async function () {
       try {
-        const body = await this.fetch("/api/v2/torrents/info");
+        const body = await this.fetch("/api/v2/torrents/info", {
+          credentials: 'include'
+        });
         this.error = false;
         this.count = body.length;
       } catch (e) {
@@ -93,7 +95,9 @@ export default {
     },
     getRate: async function () {
       try {
-        const body = await this.fetch("/api/v2/transfer/info");
+        const body = await this.fetch("/api/v2/transfer/info", {
+          credentials: 'include'
+        });
         this.error = false;
         this.dl = body.dl_info_speed;
         this.ul = body.up_info_speed;

this fixes it for me (because both homer and qbittorrent are in the same domain, but different ports)... ideally I think we should use a cookiejar or something...