Add forwarded port display in GluetunStatus component

src/assets/locales/en.json

@@ -379,7 +379,8 @@
       "post-code": "Post Code",
       "location": "Location",
       "timezone": "Timezone",
-      "organization": "Organization"
+      "organization": "Organization",
+      "forwarded-port": "Forwarded Port"
     },
     "nextcloud": {
       "active": "active",

src/components/Widgets/GluetunStatus.vue

@@ -4,6 +4,10 @@
     <span class="lbl">{{ $t('widgets.gluetun-status.vpn-ip') }}</span>
     <span class="val">{{ public_ip }}</span>
   </div>
+  <div class="ip-row" v-if="forwarded_port">
+    <span class="lbl">{{ $t('widgets.gluetun-status.forwarded-port') }}</span>
+    <span class="val">{{ forwarded_port }}</span>
+  </div>
   <div class="ip-row" v-if="country">
     <span class="lbl">{{ $t('widgets.gluetun-status.country') }}</span>
     <span class="val">{{ country }}</span>
@@ -50,6 +54,7 @@ export default {
       organization: null,
       postal_code: null,
       timezone: null,
+      forwarded_port: null,
     };
   },
   computed: {
@@ -65,6 +70,12 @@ export default {
     /* Make GET request to Gluetun publicip API endpoint */
     fetchData() {
       this.makeRequest(`${this.hostname}/v1/publicip/ip`).then(this.processData);
+
+      this.makeRequest(`${this.hostname}/v1/portforward`)
+        .then(this.processPortData)
+        .catch(() => {
+          this.forwarded_port = null;
+        });
     },
     /* Assign data variables to the returned data */
     processData(ipInfo) {
@@ -78,6 +89,12 @@ export default {
       this.postal_code = fields.includes('postal_code') ? ipInfo.postal_code : null;
       this.timezone = fields.includes('timezone') ? ipInfo.timezone : null;
     },
+    processPortData(portInfo) {
+      const fields = this.visibleFields.split(',');
+      this.forwarded_port = fields.includes('forwarded_port')
+        ? portInfo.port
+        : null;
+    },
   },
 };
 </script>