Enhancement: Add port_forwarded field to Gluetun widget (#2262)

docs/widgets/services/gluetun.md

@@ -9,7 +9,7 @@ Learn more about [Gluetun](https://github.com/qdm12/gluetun).
 
     Requires [HTTP control server options](https://github.com/qdm12/gluetun-wiki/blob/main/setup/advanced/control-server.md) to be enabled. By default this runs on port `8000`.
 
-Allowed fields: `["public_ip", "region", "country"]`.
+Allowed fields: `["public_ip", "region", "country", "port_forwarded"]`.
 
 To setup authentication, follow [the official Gluetun documentation](https://github.com/qdm12/gluetun-wiki/blob/main/setup/advanced/control-server.md#authentication). Note that to use the api key method, you must add the route `GET /v1/publicip/ip` to the `routes` array in your Gluetun config.toml.
 

public/locales/en/common.json

@@ -568,7 +568,8 @@
     "gluetun": {
         "public_ip": "Public IP",
         "region": "Region",
-        "country": "Country"
+        "country": "Country",
+        "port_forwarded": "Port Forwarded"
     },
     "hdhomerun": {
         "channels": "Channels",

src/widgets/gluetun/component.jsx

@@ -7,17 +7,19 @@ export default function Component({ service }) {
   const { widget } = service;
 
   const { data: gluetunData, error: gluetunError } = useWidgetAPI(widget, "ip");
+  const { data: portForwardedData, error: portForwardedError } = useWidgetAPI(widget, "port_forwarded");
 
-  if (gluetunError) {
+  if (gluetunError || portForwardedError) {
-    return <Container service={service} error={gluetunError} />;
+    return <Container service={service} error={gluetunError || portForwardedError} />;
   }
 
-  if (!gluetunData) {
+  if (!gluetunData || !portForwardedData) {
     return (
       <Container service={service}>
         <Block label="gluetun.public_ip" />
         <Block label="gluetun.region" />
         <Block label="gluetun.country" />
+        <Block label="gluetun.port_forwarded" />
       </Container>
     );
   }
@@ -27,6 +29,7 @@ export default function Component({ service }) {
       <Block label="gluetun.public_ip" value={gluetunData.public_ip} />
       <Block label="gluetun.region" value={gluetunData.region} />
       <Block label="gluetun.country" value={gluetunData.country} />
+      <Block label="gluetun.port_forwarded" value={portForwardedData.port} />
     </Container>
   );
 }

src/widgets/gluetun/widget.js

@@ -9,6 +9,10 @@ const widget = {
       endpoint: "publicip/ip",
       validate: ["public_ip", "country"],
     },
+    port_forwarded: {
+      endpoint: "openvpn/portforwarded",
+      validate: ["port"],
+    },
   },
 };