Merge pull request #26 from WisdomSky/feature/update-ui

Update UI

.gitignore

@@ -5,4 +5,5 @@ app/backend/package-lock.json
 app/frontend/.vscode
 app/frontend/dist
 dev/config
+dev/.cloudflared
 .idea

Dockerfile

@@ -31,6 +31,7 @@ RUN if [ "$TARGETVARIANT" = "v7" ]; then \
     rm cloudflared.deb
 
 VOLUME /config
+VOLUME /root/.cloudflared
 
 COPY app/backend /var/app/backend
 COPY app/frontend /var/app/frontend

README.md

@@ -1,6 +1,6 @@
 # [Cloudflared-web](https://github.com/WisdomSky/Cloudflared-web)
 
-_Cloudflared-web is a docker image that packages both cloudflared cli and a no-frills Web UI for easy starting/stopping of cloudflare tunnel._
+_Cloudflared-web is a docker image that packages both cloudflared cli and a simple Web UI to easily start or stop remotely-managed Cloudflare tunnel._
 
 
 [![build](https://github.com/WisdomSky/Cloudflared-web/workflows/Build/badge.svg)](https://github.com/WisdomSky/Cloudflared-web/actions "Build Status")
@@ -20,7 +20,7 @@ _Cloudflared-web is a docker image that packages both cloudflared cli and a no-f
 
 #### Cons
 
-❌ Only supports Cloudflare Tunnel.
+❌ Only supports [Remotely-managed Tunnels](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/configure-tunnels/remote-management/).
 
 ❌ Can only update hostname policies through the [ZeroTrust](https://one.dash.cloudflare.com/) dashboard.
 

app/backend/app.js

@@ -4,16 +4,19 @@ const port = process.env.WEBUI_PORT;
 const path = require('path');
 const bodyParser = require('body-parser')
 const cors = require('cors');
-const fs = require('fs');
+const fs = require('node:fs');
 const basicAuth = require('express-basic-auth')
-
+const tmp = require('tmp');
 const { execSync } = require("node:child_process");
 
 const { CloudflaredTunnel } = require('./cloudflare-tunnel.js');
 const tunnel = new CloudflaredTunnel();
 
 const configpath = "/config/config.json";
 
+const cloudflaredconfigdir = "/root/.cloudflared";
+const cloudflaredconfigpath = `${cloudflaredconfigdir}/config.yml`;
+
 const viewpath = path.normalize(__dirname + '/../frontend/dist');
 
 app.use(bodyParser.json())
@@ -109,6 +112,41 @@ app.post('/token', (req, res) => {
 })
 
 
+app.get('/advanced/config/local', (req, res) => {
+
+  res.status(200).set('Content-Type', 'text/plain').send(fs.existsSync(cloudflaredconfigpath) ? fs.readFileSync(cloudflaredconfigpath) : '');
+
+})
+app.post('/advanced/config/local', (req, res) => {
+
+  const tmpobj = tmp.fileSync();
+
+  fs.writeFileSync(tmpobj.name, req.body.yaml);
+
+  try {
+
+    if (req.body.yaml.trim().length) {
+      execSync(`cloudflared --config ${tmpobj.name} tunnel ingress validate`);
+    }
+
+    if (!fs.existsSync(cloudflaredconfigdir)) {
+      fs.mkdirSync(cloudflaredconfigdir)
+    }
+
+    fs.writeFileSync(cloudflaredconfigpath, req.body.yaml);
+
+    tmpobj.removeCallback();
+    res.status(200).send('Changes saved into the config file.');
+
+  } catch (e) {
+    tmpobj.removeCallback();
+    res.status(400).send(e.message.split("\n").splice(1).join("\n"));
+  }
+
+
+})
+
+
 app.listen(port, () => {
   console.log(`WebUI running on port ${port}`);
   let config = getConfig();
@@ -147,6 +185,10 @@ function init(config, res) {
         additionalArgs.metrics = process.env.METRICS_PORT;
       }
 
+      if (fs.existsSync(cloudflaredconfigpath)) {
+        additionalArgs.configPath = cloudflaredconfigpath;
+      }
+
       tunnel.start(additionalArgs);
       if (res !== undefined) {
         res.status(200).send('Started');

app/backend/cloudflare-tunnel.js

@@ -93,6 +93,11 @@ class CloudflaredTunnel {
             "--no-autoupdate",
         ];
 
+        if (!!additionalArgs.configPath) {
+            args.push("--config");
+            args.push(additionalArgs.configPath);
+        }
+
         if (!!additionalArgs.metrics) {
             args.push("--metrics");
             args.push(`0.0.0.0:${additionalArgs.metrics}`);

app/backend/package.json

@@ -13,6 +13,7 @@
     "command-exists": "^1.2.9",
     "cors": "^2.8.5",
     "express": "^4.18.2",
-    "express-basic-auth": "^1.2.1"
+    "express-basic-auth": "^1.2.1",
+    "tmp": "^0.2.3"
   }
 }

app/frontend/README.md

@@ -1,18 +1,3 @@
-# Vue 3 + TypeScript + Vite
+# Cloudflared-web UI
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support For `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+See `package.json` for commands.

app/frontend/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

app/frontend/package.json

@@ -10,11 +10,25 @@
     "preview": "vite preview --host"
   },
   "dependencies": {
-    "vue": "^3.2.47"
+    "@vueuse/core": "^10.11.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.396.0",
+    "prismjs": "^1.29.0",
+    "radix-vue": "^1.8.5",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vue": "^3.2.47",
+    "vue-prism-editor": "^2.0.0-alpha.2",
+    "vue-sonner": "^1.1.3"
   },
   "devDependencies": {
+    "@types/node": "^20.14.8",
+    "@types/prismjs": "^1.26.4",
     "@vitejs/plugin-vue": "^4.1.0",
+    "autoprefixer": "^10.4.19",
     "sass": "^1.62.1",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.0.2",
     "vite": "^4.3.2",
     "vue-tsc": "^1.4.2"