Add duplicate check when adding a monitor

* Add socket to validate duplicated monitor
* Add validation of duplicate name or url when creating
* Add spanish and english translation for confirm component
* Closes: #378

server/server.js

@@ -556,6 +556,30 @@ exports.entryPage = "dashboard";
             }
         });
 
+        // Verify if monitor is duplicated
+        socket.on("isDuplicatedMonitor", async (monitor, callback) => {
+            try {
+                let monitorList = await sendMonitorList(socket);
+                for (let monitorId in monitorList) {
+                    if (monitorList[monitorId].name === monitor.name) {
+                        throw new Error("duplicatedMonitorNameWarning");
+                    }
+                    if (monitorList[monitorId].url === monitor.url) {
+                        throw new Error("duplicatedMonitorUrlWarning");
+                    }
+                }
+                callback({
+                    ok: true,
+                    msg: "No duplicate for this monitor"
+                });
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message
+                });
+            }
+        });
+
         // Edit a monitor
         socket.on("editMonitor", async (monitor, callback) => {
             try {

src/languages/en.js

@@ -26,6 +26,8 @@ export default {
     tokenValidSettingsMsg: "Token is valid! You can now save the 2FA settings.",
     confirmEnableTwoFAMsg: "Are you sure you want to enable 2FA?",
     confirmDisableTwoFAMsg: "Are you sure you want to disable 2FA?",
+    duplicatedMonitorUrlWarningKey: "The monitor's url is duplicated. Are you sure you want to add it?",
+    duplicatedMonitorNameWarningKey: "The monitor's name is duplicated. Are you sure you want to add it?",
     Settings: "Settings",
     Dashboard: "Dashboard",
     "New Update": "New Update",

src/languages/es-ES.js

@@ -15,6 +15,8 @@ export default {
     resoverserverDescription: "Cloudflare es el servidor por defecto, puedes cambiar el servidor de resolución en cualquier momento.",
     rrtypeDescription: "Selecciona el tipo de registro que quieres monitorizar",
     pauseMonitorMsg: "¿Seguro que quieres pausar?",
+    duplicatedMonitorUrlWarningKey: "La url del monitor se encuentra duplicada. ¿Deseas agregarlo?",
+    duplicatedMonitorNameWarningKey: "El nombre del monitor se encuentra duplicado. ¿Deseas agregarlo?",
     Settings: "Ajustes",
     Dashboard: "Panel",
     "New Update": "Nueva actualización",

src/mixins/socket.js

@@ -313,6 +313,10 @@ export default {
             socket.emit("add", monitor, callback);
         },
 
+        isDuplicatedMonitor(monitor, callback) {
+            socket.emit("isDuplicatedMonitor", monitor, callback);
+        },
+
         deleteMonitor(monitorID, callback) {
             socket.emit("deleteMonitor", monitorID, callback);
         },

src/pages/EditMonitor.vue

@@ -2,7 +2,7 @@
     <transition name="slide-fade" appear>
         <div>
             <h1 class="mb-3">{{ pageName }}</h1>
-            <form @submit.prevent="submit">
+            <form @submit.prevent="isDuplicatedMonitor">
                 <div class="shadow-box">
                     <div class="row">
                         <div class="col-md-6">
@@ -283,6 +283,12 @@
                     </div>
                 </div>
             </form>
+            <Confirm ref="duplicatedMonitorUrlWarning" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="submit">
+                {{ $t('duplicatedMonitorUrlWarningKey') }}
+            </Confirm>
+            <Confirm ref="duplicatedMonitorNameWarning" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="submit">
+                {{ $t('duplicatedMonitorNameWarningKey') }}
+            </Confirm>
 
             <NotificationDialog ref="notificationDialog" @added="addedNotification" />
         </div>
@@ -293,6 +299,7 @@
 import NotificationDialog from "../components/NotificationDialog.vue";
 import TagsManager from "../components/TagsManager.vue";
 import CopyableInput from "../components/CopyableInput.vue";
+import Confirm from "../components/Confirm.vue";
 
 import { useToast } from "vue-toastification";
 import VueMultiselect from "vue-multiselect";
@@ -306,6 +313,7 @@ export default {
         NotificationDialog,
         TagsManager,
         VueMultiselect,
+        Confirm,
     },
 
     data() {
@@ -483,6 +491,16 @@ export default {
             return true;
         },
 
+        isDuplicatedMonitor() {
+            this.$root.isDuplicatedMonitor(this.monitor, async (res) => {
+                if (res.ok) {
+                    this.submit();
+                } else {
+                    this.$refs[res.msg].show();
+                }
+            });
+        },
+
         async submit() {
             this.processing = true;