Enhancement: support ESPHome widget authentication (#3846)

* Added cookie support for auth on ESPHome widget

* Lint

* Use credentialedProxyHandler instead

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/esphome.md

@@ -16,4 +16,5 @@ To group both `offline` and `unknown` devices together, users should use the `of
 widget:
   type: esphome
   url: http://esphome.host.or.ip:port
+  key: myesphomecookie # only if auth enabled, get the value from a request from the frontend e.g. `authenticated=myesphomecookie`
 ```

src/utils/proxy/handlers/credentialed.js

@@ -84,6 +84,10 @@ export default async function credentialedProxyHandler(req, res, map) {
         headers.Key = `${widget.key}`;
       } else if (widget.type === "myspeed") {
         headers.Password = `${widget.password}`;
+      } else if (widget.type === "esphome") {
+        if (widget.key) {
+          headers.Cookie = `authenticated=${widget.key}`;
+        }
       } else {
         headers["X-API-Key"] = `${widget.key}`;
       }

src/widgets/esphome/widget.js

@@ -1,8 +1,8 @@
-import genericProxyHandler from "utils/proxy/handlers/generic";
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
   api: "{url}/ping",
-  proxyHandler: genericProxyHandler,
+  proxyHandler: credentialedProxyHandler,
 };
 
 export default widget;