Merge branch 'master' into feature/request-with-http-proxy

# Conflicts:
#	package-lock.json
#	package.json
#	server/database.js
#	src/languages/en.js
#	src/mixins/socket.js

src/components/settings/About.vue

@@ -4,14 +4,39 @@
             <object class="my-4" width="200" height="200" data="/icon.svg" />
             <div class="fs-4 fw-bold">Uptime Kuma</div>
             <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
-            <div class="my-1 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+
+            <div class="my-3 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
+
+            <div class="mt-1">
+                <div class="form-check">
+                    <label><input v-model="settings.checkUpdate" type="checkbox" @change="saveSettings()" /> Show update if available</label>
+                </div>
+
+                <div class="form-check">
+                    <label><input v-model="settings.checkBeta" type="checkbox" :disabled="!settings.checkUpdate" @change="saveSettings()" /> Also check beta release</label>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
 
+    watch: {
+
+    }
 };
 </script>
 

src/components/settings/General.vue

@@ -62,31 +62,31 @@
 
                 <div class="form-check">
                     <input
-                        id="entryPageYes"
+                        id="entryPageDashboard"
                         v-model="settings.entryPage"
                         class="form-check-input"
                         type="radio"
-                        name="statusPage"
+                        name="entryPage"
                         value="dashboard"
                         required
                     />
-                    <label class="form-check-label" for="entryPageYes">
+                    <label class="form-check-label" for="entryPageDashboard">
                         {{ $t("Dashboard") }}
                     </label>
                 </div>
 
-                <div class="form-check">
+                <div v-for="statusPage in $root.statusPageList" :key="statusPage.id" class="form-check">
                     <input
-                        id="entryPageNo"
+                        :id="'status-page-' + statusPage.id"
                         v-model="settings.entryPage"
                         class="form-check-input"
                         type="radio"
-                        name="statusPage"
-                        value="statusPage"
+                        name="entryPage"
+                        :value="'statusPage-' + statusPage.slug"
                         required
                     />
-                    <label class="form-check-label" for="entryPageNo">
-                        {{ $t("Status Page") }}
+                    <label class="form-check-label" :for="'status-page-' + statusPage.id">
+                        {{ $t("Status Page") }} - {{ statusPage.title }}
                     </label>
                 </div>
             </div>

src/components/settings/ReverseProxy.vue

@@ -0,0 +1,139 @@
+<template>
+    <div>
+        <h4 class="mt-4">Cloudflare Tunnel</h4>
+
+        <div class="my-3">
+            <div>
+                cloudflared:
+                <span v-if="installed === true" class="text-primary">{{ $t("Installed") }}</span>
+                <span v-else-if="installed === false" class="text-danger">{{ $t("Not installed") }}</span>
+            </div>
+
+            <div>
+                {{ $t("Status") }}:
+                <span v-if="running" class="text-primary">{{ $t("Running") }}</span>
+                <span v-else-if="!running" class="text-danger">{{ $t("Not running") }}</span>
+            </div>
+
+            <div v-if="false">
+                {{ message }}
+            </div>
+
+            <div v-if="errorMessage" class="mt-3">
+                Message:
+                <textarea v-model="errorMessage" class="form-control" readonly></textarea>
+            </div>
+
+            <p v-if="installed === false">(Download cloudflared from <a href="https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/">Cloudflare Website</a>)</p>
+        </div>
+
+        <!-- If installed show token input -->
+        <div v-if="installed" class="mb-2">
+            <div class="mb-4">
+                <label class="form-label" for="cloudflareTunnelToken">
+                    Cloudflare Tunnel {{ $t("Token") }}
+                </label>
+                <HiddenInput
+                    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
+                    </a>
+                </div>
+            </div>
+
+            <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="$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 currently connecting via Cloudflare Tunnel. Are you sure want to stop it? Type your current 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>
+
+        <h4 class="mt-4">Other Software</h4>
+        <div>
+            For example: nginx, Apache and Traefik. <br />
+            Please read <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy</a>.
+        </div>
+    </div>
+</template>
+
+<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: {
+
+    },
+    watch: {
+
+    },
+    created() {
+        this.$root.getSocket().emit(prefix + "join");
+    },
+    unmounted() {
+        this.$root.getSocket().emit(prefix + "leave");
+    },
+    methods: {
+        start() {
+            this.$root.getSocket().emit(prefix + "start", this.cloudflareTunnelToken);
+        },
+        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>
+.remove-token {
+    text-decoration: underline;
+    cursor: pointer;
+}
+</style>

src/components/settings/Security.vue

@@ -192,6 +192,12 @@
                 <p>Пожалуйста, используйте с осторожностью.</p>
             </template>
 
+            <template v-else-if="$i18n.locale === 'uk-UA' ">
+                <p>Ви впевнені, що бажаєте <strong>вимкнути авторизацію</strong>?</p>
+                <p>Це підходить для <strong>тих, у кого встановлена інша авторизація</strong> пееред відкриттям Uptime Kuma, наприклад Cloudflare Access.</p>
+                <p>Будь ласка, використовуйте з обережністю.</p>
+            </template>
+
             <template v-else-if="$i18n.locale === 'fa' ">
                 <p>آیا مطمئن هستید که میخواهید <strong>احراز هویت را غیر فعال کنید</strong>?</p>
                 <p>این ویژگی برای کسانی است که <strong> لایه امنیتی شخص ثالث دیگر بر روی این آدرس فعال کرده‌اند</strong>، مانند Cloudflare Access.</p>
@@ -215,14 +221,14 @@
                 <p>Dette er for <strong>de som har tredjepartsautorisering</strong> foran Uptime Kuma, for eksempel Cloudflare Access.</p>
                 <p>Vennligst vær forsiktig.</p>
             </template>
-            
+
             <template v-else-if="$i18n.locale === 'cs-CZ' ">
                 <p>Opravdu chcete <strong>deaktivovat autentifikaci</strong>?</p>
                 <p>Tato možnost je určena pro případy, kdy <strong>máte autentifikaci zajištěnou třetí stranou</strong> ještě před přístupem do Uptime Kuma, například prostřednictvím Cloudflare Access.</p>
                 <p>Používejte ji prosím s rozmyslem.</p>
             </template>
 
-			<template v-else-if="$i18n.locale === 'vi-VN' ">
+            <template v-else-if="$i18n.locale === 'vi-VN' ">
                 <p>Bạn có muốn <strong>TẮT XÁC THỰC</strong> không?</p>
                 <p>Điều này rất nguy hiểm<strong>BẤT KỲ AI</strong> cũng có thể truy cập và cướp quyền điều khiển.</p>
                 <p>Vui lòng <strong>cẩn thận</strong>.</p>
@@ -234,6 +240,19 @@
                 <p>It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Uptime Kuma such as Cloudflare Access, Authelia or other authentication mechanisms.</p>
                 <p>Please use this option carefully!</p>
             </template>
+
+            <div class="mb-3">
+                <label for="current-password2" class="form-label">
+                    {{ $t("Current Password") }}
+                </label>
+                <input
+                    id="current-password2"
+                    v-model="password.currentPassword"
+                    type="password"
+                    class="form-control"
+                    required
+                />
+            </div>
         </Confirm>
     </div>
 </template>
@@ -310,7 +329,12 @@ export default {
 
         disableAuth() {
             this.settings.disableAuth = true;
-            this.saveSettings();
+
+            // Need current password to disable auth
+            // Set it to empty if done
+            this.saveSettings(() => {
+                this.password.currentPassword = "";
+            }, this.password.currentPassword);
         },
 
         enableAuth() {