feat(Add) : Add Settings Toggle for Pause confirmation dialogue

src/components/PauseConfirm.vue

@@ -0,0 +1,102 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 id="exampleModalLabel" class="modal-title">
+                        {{ title || $t("Confirm") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <slot />
+                    <div class="form-check mt-3">
+                        <input
+                            id="doNotShowAgain"
+                            v-model="doNotShowAgain"
+                            class="form-check-input"
+                            type="checkbox"
+                        />
+                        <label class="form-check-label" for="doNotShowAgain">
+                            {{ $t("Do not show this again") }}
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn" :class="btnStyle" data-bs-dismiss="modal" @click="yes">
+                        {{ yesText }}
+                    </button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="no">
+                        {{ noText }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+
+export default {
+    props: {
+        /** Style of button */
+        btnStyle: {
+            type: String,
+            default: "btn-primary",
+        },
+        /** Text to use as yes */
+        yesText: {
+            type: String,
+            default: "Yes",
+        },
+        /** Text to use as no */
+        noText: {
+            type: String,
+            default: "No",
+        },
+        /** Title to show on modal. Defaults to translated version of "Confirm" */
+        title: {
+            type: String,
+            default: null,
+        }
+    },
+    emits: [ "yes", "no" ],
+    data() {
+        return {
+            modal: null,
+            doNotShowAgain: false,
+        };
+    },
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        /**
+         * Show the confirm dialog
+         * @returns {void}
+         */
+        show() {
+            this.doNotShowAgain = false;
+            this.modal.show();
+        },
+        /**
+         * @fires string "yes" Notify the parent when Yes is pressed
+         * @returns {void}
+         */
+        yes() {
+            if (this.doNotShowAgain) {
+                localStorage.setItem("uptime-kuma-pause-confirm-disabled", "true");
+            }
+            this.$emit("yes");
+        },
+        /**
+         * @fires string "no" Notify the parent when No is pressed
+         * @returns {void}
+         */
+        no() {
+            this.$emit("no");
+        }
+    },
+};
+</script>

src/lang/en.json

@@ -591,6 +591,8 @@
     "resolverserverDescription": "Cloudflare is the default server. You can change the resolver server anytime.",
     "rrtypeDescription": "Select the RR type you want to monitor",
     "pauseMonitorMsg": "Are you sure want to pause?",
+    "Do not show this again": "Do not show this again",
+    "Pause Monitors": "Pause Monitors",
     "enableDefaultNotificationDescription": "This notification will be enabled by default for new monitors. You can still disable the notification separately for each monitor.",
     "Clear All Events": "Clear All Events",
     "clearAllEventsMsg": "Are you sure want to delete all events?",

src/pages/Details.vue

@@ -425,14 +425,14 @@
                 </div>
             </div>
 
-            <Confirm
+            <PauseConfirm
                 ref="confirmPause"
                 :yes-text="$t('Yes')"
                 :no-text="$t('No')"
                 @yes="pauseMonitor"
             >
                 {{ $t("pauseMonitorMsg") }}
-            </Confirm>
+            </PauseConfirm>
 
             <Confirm
                 ref="confirmDelete"
@@ -472,6 +472,7 @@ import { defineAsyncComponent } from "vue";
 import { useToast } from "vue-toastification";
 const toast = useToast();
 import Confirm from "../components/Confirm.vue";
+import PauseConfirm from "../components/PauseConfirm.vue";
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
@@ -503,6 +504,7 @@ export default {
         Datetime,
         HeartbeatBar,
         Confirm,
+        PauseConfirm,
         Status,
         Pagination,
         PingChart,