Improve the workflow of cloudflared

package.json

@@ -83,7 +83,7 @@
         "jsonwebtoken": "~8.5.1",
         "jwt-decode": "^3.1.2",
         "limiter": "^2.1.0",
-        "node-cloudflared-tunnel": "~1.0.6",
+        "node-cloudflared-tunnel": "~1.0.7",
         "nodemailer": "~6.6.5",
         "notp": "~2.0.3",
         "password-hash": "~1.2.2",

server/server.js

@@ -133,7 +133,7 @@ const { statusPageSocketHandler } = require("./socket-handlers/status-page-socke
 const databaseSocketHandler = require("./socket-handlers/database-socket-handler");
 const TwoFA = require("./2fa");
 const StatusPage = require("./model/status_page");
-const { cloudflaredSocketHandler } = require("./socket-handlers/cloudflared-socket-handler");
+const { cloudflaredSocketHandler, autoStart: cloudflaredAutoStart } = require("./socket-handlers/cloudflared-socket-handler");
 
 app.use(express.json());
 
@@ -1406,6 +1406,9 @@ exports.entryPage = "dashboard";
 
     initBackgroundJobs(args);
 
+    // Start cloudflared at the end if configured
+    await cloudflaredAutoStart();
+
 })();
 
 async function updateMonitorNotification(monitorID, notificationIDList) {

server/socket-handlers/cloudflared-socket-handler.js

@@ -1,17 +1,13 @@
-const { checkLogin, setSetting, setting } = require("../util-server");
+const { checkLogin, setSetting, setting, doubleCheckPassword } = require("../util-server");
 const { CloudflaredTunnel } = require("node-cloudflared-tunnel");
 const { io } = require("../server");
 
 const prefix = "cloudflared_";
 const cloudflared = new CloudflaredTunnel();
 
-let isRunning;
-
 cloudflared.change = (running, message) => {
     io.to("cloudflared").emit(prefix + "running", running);
     io.to("cloudflared").emit(prefix + "message", message);
-    isRunning = running;
-
 };
 
 cloudflared.error = (errorMessage) => {
@@ -25,7 +21,7 @@ module.exports.cloudflaredSocketHandler = (socket) => {
             checkLogin(socket);
             socket.join("cloudflared");
             io.to(socket.userID).emit(prefix + "installed", cloudflared.checkInstalled());
-            io.to(socket.userID).emit(prefix + "running", isRunning);
+            io.to(socket.userID).emit(prefix + "running", cloudflared.running);
             io.to(socket.userID).emit(prefix + "token", await setting("cloudflaredTunnelToken"));
         } catch (error) { }
     });
@@ -62,11 +58,34 @@ module.exports.cloudflaredSocketHandler = (socket) => {
         } catch (error) { }
     });
 
-    socket.on(prefix + "stop", async () => {
+    socket.on(prefix + "stop", async (currentPassword, callback) => {
         try {
             checkLogin(socket);
+            await doubleCheckPassword(socket, currentPassword);
             cloudflared.stop();
+        } catch (error) {
+            callback({
+                ok: false,
+                msg: error.message,
+            });
+        }
+    });
+
+    socket.on(prefix + "removeToken", async () => {
+        try {
+            checkLogin(socket);
+            await setSetting("cloudflaredTunnelToken", "");
         } catch (error) { }
     });
 
 };
+
+module.exports.autoStart = async () => {
+    let token = await setting("cloudflaredTunnelToken");
+
+    if (token) {
+        console.log("Start cloudflared");
+        cloudflared.token = token;
+        cloudflared.start();
+    }
+};

src/components/settings/ReverseProxy.vue

@@ -19,7 +19,7 @@
                 {{ message }}
             </div>
 
-            <div class="mt-3">
+            <div v-if="errorMessage" class="mt-3">
                 Message:
                 <textarea v-model="errorMessage" class="form-control" readonly></textarea>
             </div>
@@ -37,8 +37,13 @@
                     id="cloudflareTunnelToken"
                     v-model="cloudflareTunnelToken"
                     autocomplete="one-time-code"
+                    :readonly="running"
                 />
                 <div class="form-text">
+                    <div v-if="cloudflareTunnelToken" class="mb-3">
+                        <span v-if="!running" class="remove-token" @click="removeToken">{{ $t("Remove Token") }}</span>
+                    </div>
+
                     Don't know how to get the token? Please read the guide:<br />
                     <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy-with-Cloudflare-Tunnel" target="_blank">
                         https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy-with-Cloudflare-Tunnel
@@ -46,15 +51,31 @@
                 </div>
             </div>
 
-            <!-- Save Button -->
             <div>
                 <button v-if="!running" class="btn btn-primary" type="submit" @click="start">
                     {{ $t("Start") }} cloudflared
                 </button>
 
-                <button v-if="running" class="btn btn-danger" type="submit" @click="stop">
+                <button v-if="running" class="btn btn-danger" type="submit" @click="$refs.confirmStop.show();">
                     {{ $t("Stop") }} cloudflared
                 </button>
+
+                <Confirm ref="confirmStop" btn-style="btn-danger" :yes-text="$t('Stop') + ' cloudflared'" :no-text="$t('Cancel')" @yes="stop">
+                    The current connection may be lost if you are connecting Cloudflare Tunnel. Are you sure want to stop it? Type your password to confirm it.
+
+                    <div class="mt-3">
+                        <label for="current-password2" class="form-label">
+                            {{ $t("Current Password") }}
+                        </label>
+                        <input
+                            id="current-password2"
+                            v-model="currentPassword"
+                            type="password"
+                            class="form-control"
+                            required
+                        />
+                    </div>
+                </Confirm>
             </div>
         </div>
 
@@ -68,14 +89,17 @@
 
 <script>
 import HiddenInput from "../../components/HiddenInput.vue";
+import Confirm from "../Confirm.vue";
 
 const prefix = "cloudflared_";
 
 export default {
     components: {
         HiddenInput,
+        Confirm
     },
     data() {
+        // See /src/mixins/socket.js
         return this.$root.cloudflared;
     },
     computed: {
@@ -84,7 +108,7 @@ export default {
     watch: {
 
     },
-    mounted() {
+    created() {
         this.$root.getSocket().emit(prefix + "join");
     },
     unmounted() {
@@ -95,17 +119,21 @@ export default {
             this.$root.getSocket().emit(prefix + "start", this.cloudflareTunnelToken);
         },
         stop() {
-            this.$root.getSocket().emit(prefix + "stop");
+            this.$root.getSocket().emit(prefix + "stop", this.currentPassword, (res) => {
+                this.$root.toastRes(res);
+            });
         },
+        removeToken() {
+            this.$root.getSocket().emit(prefix + "removeToken");
+            this.cloudflareTunnelToken = "";
+        }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.logo {
-    margin: 4em 1em;
-}
-.update-link {
-    font-size: 0.9em;
+.remove-token {
+    text-decoration: underline;
+    cursor: pointer;
 }
 </style>

src/mixins/socket.js

@@ -48,6 +48,7 @@ export default {
                 running: false,
                 message: "",
                 errorMessage: "",
+                currentPassword: "",
             }
         };
     },