Some improvements

src/components/MonitorList.vue

@@ -9,7 +9,9 @@
                 <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
                     <font-awesome-icon icon="times" />
                 </a>
-                <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
+                <form>
+                    <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" autocomplete="off" />
+                </form>
             </div>
         </div>
         <div class="monitor-list" :class="{ scrollbar: scrollbar }">

src/components/TwoFADialog.vue

@@ -19,6 +19,19 @@
                             </div>
                             <p v-if="showURI && twoFAStatus == false" class="text-break mt-2">{{ uri }}</p>
 
+                            <div v-if="!(uri && twoFAStatus == false)" class="mb-3">
+                                <label for="current-password" class="form-label">
+                                    {{ $t("Current Password") }}
+                                </label>
+                                <input
+                                    id="current-password"
+                                    v-model="currentPassword"
+                                    type="password"
+                                    class="form-control"
+                                    required
+                                />
+                            </div>
+
                             <button v-if="uri == null && twoFAStatus == false" class="btn btn-primary" type="button" @click="prepare2FA()">
                                 {{ $t("Enable 2FA") }}
                             </button>
@@ -59,11 +72,11 @@
 </template>
 
 <script lang="ts">
-import { Modal } from "bootstrap"
+import { Modal } from "bootstrap";
 import Confirm from "./Confirm.vue";
-import VueQrcode from "vue-qrcode"
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import VueQrcode from "vue-qrcode";
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
     components: {
@@ -73,35 +86,36 @@ export default {
     props: {},
     data() {
         return {
+            currentPassword: "",
             processing: false,
             uri: null,
             tokenValid: false,
             twoFAStatus: null,
             token: null,
             showURI: false,
-        }
+        };
     },
     mounted() {
-        this.modal = new Modal(this.$refs.modal)
+        this.modal = new Modal(this.$refs.modal);
         this.getStatus();
     },
     methods: {
         show() {
-            this.modal.show()
+            this.modal.show();
         },
 
         confirmEnableTwoFA() {
-            this.$refs.confirmEnableTwoFA.show()
+            this.$refs.confirmEnableTwoFA.show();
         },
 
         confirmDisableTwoFA() {
-            this.$refs.confirmDisableTwoFA.show()
+            this.$refs.confirmDisableTwoFA.show();
         },
 
         prepare2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("prepare2FA", (res) => {
+            this.$root.getSocket().emit("prepare2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
@@ -109,49 +123,51 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         save2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("save2FA", (res) => {
+            this.$root.getSocket().emit("save2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     this.getStatus();
+                    this.currentPassword = "";
                     this.modal.hide();
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         disable2FA() {
             this.processing = true;
 
-            this.$root.getSocket().emit("disable2FA", (res) => {
+            this.$root.getSocket().emit("disable2FA", this.currentPassword, (res) => {
                 this.processing = false;
 
                 if (res.ok) {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     this.getStatus();
+                    this.currentPassword = "";
                     this.modal.hide();
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         verifyToken() {
-            this.$root.getSocket().emit("verifyToken", this.token, (res) => {
+            this.$root.getSocket().emit("verifyToken", this.token, this.currentPassword, (res) => {
                 if (res.ok) {
                     this.tokenValid = res.valid;
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         getStatus() {
@@ -161,10 +177,10 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/components/settings/Security.vue

@@ -215,14 +215,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 +234,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 +323,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() {