added Ngrok widget

src/utils/proxy/handlers/credentialed.js

@@ -39,9 +39,9 @@ export default async function credentialedProxyHandler(req, res, map) {
           headers.Authorization = `Bearer ${widget.key}`;
       } else if (widget.type === "proxmox") {
         headers.Authorization = `PVEAPIToken=${widget.username}=${widget.password}`;
-      } else if (widget.type === "proxmoxbackupserver") {
+      } else if (widget.type === "ngrok") {
-        delete headers["Content-Type"];
+        headers.Authorization = `Bearer ${widget.key}`;
-        headers.Authorization = `PBSAPIToken=${widget.username}:${widget.password}`;
+        headers["Ngrok-Version"] = 2;
       } else if (widget.type === "autobrr") {
         headers["X-API-Token"] = `${widget.key}`;
       } else if (widget.type === "tubearchivist") {

src/widgets/components.js

@@ -42,6 +42,7 @@ const components = {
   navidrome: dynamic(() => import("./navidrome/component")),
   nextcloud: dynamic(() => import("./nextcloud/component")),
   nextdns: dynamic(() => import("./nextdns/component")),
+  ngrok: dynamic(() => import("./ngrok/component")),
   npm: dynamic(() => import("./npm/component")),
   nzbget: dynamic(() => import("./nzbget/component")),
   octoprint: dynamic(() => import("./octoprint/component")),

src/widgets/ngrok/component.jsx

@@ -0,0 +1,50 @@
+import { useTranslation } from "next-i18next";
+
+import Container from "components/services/widget/container";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+
+function displayUrl(url , index){
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" key={index} className="flex flex-col pb-1 mx-1">
+      <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+        <span className="absolute left-2 text-xs mt-[2px]">{url}</span>
+      </div>
+    </a>
+  );
+}
+
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const { 
+    data: ngrokData, 
+    error: ngrokError 
+  } = useWidgetAPI(widget, "tunnels",{
+    refreshInterval: 30000,
+  });
+ 
+  if (ngrokError) {
+    return <Container error={ngrokError} />;
+  }
+
+  if (ngrokData){
+    if(ngrokData.tunnels.length === 0){
+      return (
+        <div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
+          <span className="absolute left-2 text-xs mt-[2px]">{t("No Active Tunnels")}</span>
+        </div>
+      );
+    }
+  
+  let runningTunnels = ngrokData.tunnels.length;
+  if(runningTunnels > 5) runningTunnels = 5;
+
+  return (
+    <div>
+      {ngrokData.tunnels.slice(0, runningTunnels).map((tunnel, index) => displayUrl(tunnel.public_url, index))}
+    </div>
+  );
+}
+}

src/widgets/ngrok/widget.js

@@ -0,0 +1,14 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "https://api.ngrok.com/{{endpoint}}",
+  proxyHandler: credentialedProxyHandler,
+
+  mapping: {
+    "tunnels": {
+      endpoint: "tunnels"
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -36,6 +36,7 @@ import mylar from "./mylar/widget";
 import navidrome from "./navidrome/widget";
 import nextcloud from "./nextcloud/widget";
 import nextdns from "./nextdns/widget";
+import ngrok from "./ngrok/widget"
 import npm from "./npm/widget";
 import nzbget from "./nzbget/widget";
 import octoprint from "./octoprint/widget";
@@ -115,6 +116,7 @@ const widgets = {
   navidrome,
   nextcloud,
   nextdns,
+  ngrok,
   npm,
   nzbget,
   octoprint,