Merge branch 'master' of https://github.com/louislam/uptime-kuma into status-page-expiry

src/components/MonitorSettingDialog.vue

@@ -104,7 +104,7 @@ export default {
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword";
+                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
             }
             return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
         },

src/components/PluginItem.vue

@@ -1,102 +0,0 @@
-<template>
-    <div v-if="! (!plugin.installed && plugin.local)" class="plugin-item pt-4 pb-2">
-        <div class="info">
-            <h5>{{ plugin.fullName }}</h5>
-            <p class="description">
-                {{ plugin.description }}
-            </p>
-            <span class="version">{{ $t("Version") }}: {{ plugin.version }} <a v-if="plugin.repo" :href="plugin.repo" target="_blank">Repo</a></span>
-        </div>
-        <div class="buttons">
-            <button v-if="status === 'installing'" class="btn btn-primary" disabled>{{ $t("installing") }}</button>
-            <button v-else-if="status === 'uninstalling'" class="btn btn-danger" disabled>{{ $t("uninstalling") }}</button>
-            <button v-else-if="plugin.installed || status === 'installed'" class="btn btn-danger" @click="deleteConfirm">{{ $t("uninstall") }}</button>
-            <button v-else class="btn btn-primary" @click="install">{{ $t("install") }}</button>
-        </div>
-
-        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="uninstall">
-            {{ $t("confirmUninstallPlugin") }}
-        </Confirm>
-    </div>
-</template>
-
-<script>
-import Confirm from "./Confirm.vue";
-
-export default {
-    components: {
-        Confirm,
-    },
-    props: {
-        plugin: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            status: "",
-        };
-    },
-    methods: {
-        /**
-         * Show confirmation for deleting a tag
-         */
-        deleteConfirm() {
-            this.$refs.confirmDelete.show();
-        },
-
-        install() {
-            this.status = "installing";
-
-            this.$root.getSocket().emit("installPlugin", this.plugin.repo, this.plugin.name, (res) => {
-                if (res.ok) {
-                    this.status = "";
-                    // eslint-disable-next-line vue/no-mutating-props
-                    this.plugin.installed = true;
-                } else {
-                    this.$root.toastRes(res);
-                }
-            });
-        },
-
-        uninstall() {
-            this.status = "uninstalling";
-
-            this.$root.getSocket().emit("uninstallPlugin", this.plugin.name, (res) => {
-                if (res.ok) {
-                    this.status = "";
-                    // eslint-disable-next-line vue/no-mutating-props
-                    this.plugin.installed = false;
-                } else {
-                    this.$root.toastRes(res);
-                }
-            });
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../assets/vars.scss";
-
-.plugin-item {
-    display: flex;
-    justify-content: space-between;
-    align-content: center;
-    align-items: center;
-
-    .info {
-        margin-right: 10px;
-    }
-
-    .description {
-        font-size: 13px;
-        margin-bottom: 0;
-    }
-
-    .version {
-        font-size: 13px;
-    }
-}
-</style>

src/components/PublicGroupList.vue

@@ -155,7 +155,7 @@ export default {
             // We must check if there are any elements in monitorList to
             // prevent undefined errors if it hasn't been loaded yet
             if (this.$parent.editMode && ignoreSendUrl && Object.keys(this.$root.monitorList).length) {
-                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword";
+                return this.$root.monitorList[monitor.element.id].type === "http" || this.$root.monitorList[monitor.element.id].type === "keyword" || this.$root.monitorList[monitor.element.id].type === "json-query";
             }
             return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://" && !this.editMode;
         },

src/components/notifications/Twilio.vue

@@ -5,7 +5,18 @@
     </div>
 
     <div class="mb-3">
-        <label for="twilio-auth-token" class="form-label">{{ $t("Auth Token") }}</label>
+        <label for="twilio-apikey-token" class="form-label">{{ $t("Api Key (optional)") }}</label>
+        <input id="twilio-apikey-token" v-model="$parent.notification.twilioApiKey" type="text" class="form-control">
+        <div class="form-text">
+            <p>
+                The API key is optional but recommended. You can provide either Account SID and AuthToken
+                from the may TwilioConsole page or Account SID and the pair of Api Key and Api Key secret
+            </p>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-auth-token" class="form-label">{{ $t("Auth Token / Api Key Secret") }}</label>
         <input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
     </div>
 

src/components/notifications/Webhook.vue

@@ -12,61 +12,97 @@
     </div>
 
     <div class="mb-3">
-        <label for="webhook-content-type" class="form-label">{{
-            $t("Content Type")
+        <label for="webhook-request-body" class="form-label">{{
+            $t("Request Body")
         }}</label>
         <select
-            id="webhook-content-type"
+            id="webhook-request-body"
             v-model="$parent.notification.webhookContentType"
             class="form-select"
             required
         >
-            <option value="json">application/json</option>
-            <option value="form-data">multipart/form-data</option>
+            <option value="json">{{ $t("webhookBodyPresetOption", ["application/json"]) }}</option>
+            <option value="form-data">{{ $t("webhookBodyPresetOption", ["multipart/form-data"]) }}</option>
+            <option value="custom">{{ $t("webhookBodyCustomOption") }}</option>
         </select>
 
         <div class="form-text">
-            <p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
-            <i18n-t tag="p" keypath="webhookFormDataDesc">
-                <template #multipart>"multipart/form-data"</template>
-                <template #decodeFunction>
-                    <strong>json_decode($_POST['data'])</strong>
-                </template>
-            </i18n-t>
+            <div v-if="$parent.notification.webhookContentType == 'json'">
+                <p>{{ $t("webhookJsonDesc", ['"application/json"']) }}</p>
+            </div>
+            <div v-if="$parent.notification.webhookContentType == 'form-data'">
+                <i18n-t tag="p" keypath="webhookFormDataDesc">
+                    <template #multipart>multipart/form-data"</template>
+                    <template #decodeFunction>
+                        <strong>json_decode($_POST['data'])</strong>
+                    </template>
+                </i18n-t>
+            </div>
+            <div v-if="$parent.notification.webhookContentType == 'custom'">
+                <i18n-t tag="p" keypath="webhookCustomBodyDesc">
+                    <template #msg>
+                        <code>msg</code>
+                    </template>
+                    <template #heartbeat>
+                        <code>heartbeatJSON</code>
+                    </template>
+                    <template #monitor>
+                        <code>monitorJSON</code>
+                    </template>
+                </i18n-t>
+            </div>
         </div>
+
+        <textarea
+            v-if="$parent.notification.webhookContentType == 'custom'"
+            id="customBody"
+            v-model="$parent.notification.webhookCustomBody"
+            class="form-control"
+            :placeholder="customBodyPlaceholder"
+        ></textarea>
     </div>
 
     <div class="mb-3">
-        <i18n-t
-            tag="label"
-            class="form-label"
-            for="additionalHeaders"
-            keypath="webhookAdditionalHeadersTitle"
-        >
-        </i18n-t>
+        <div class="form-check form-switch">
+            <input v-model="showAdditionalHeadersField" class="form-check-input" type="checkbox">
+            <label class="form-check-label">{{ $t("webhookAdditionalHeadersTitle") }}</label>
+        </div>
+        <div class="form-text">
+            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
+        </div>
         <textarea
+            v-if="showAdditionalHeadersField"
             id="additionalHeaders"
             v-model="$parent.notification.webhookAdditionalHeaders"
             class="form-control"
             :placeholder="headersPlaceholder"
         ></textarea>
-        <div class="form-text">
-            <i18n-t tag="p" keypath="webhookAdditionalHeadersDesc"> </i18n-t>
-        </div>
     </div>
 </template>
 
 <script>
 export default {
+    data() {
+        return {
+            showAdditionalHeadersField: this.$parent.notification.webhookAdditionalHeaders != null,
+        };
+    },
     computed: {
         headersPlaceholder() {
             return this.$t("Example:", [
                 `
 {
-    "HeaderName": "HeaderValue"
+    "Authorization": "Authorization Token"
 }`,
             ]);
         },
+        customBodyPlaceholder() {
+            return `Example:
+{
+    "Title": "Uptime Kuma Alert - {{ monitorJSON['name'] }}",
+    "Body": "{{ msg }}"
+}`;
+        }
     },
 };
 </script>

src/components/settings/Plugins.vue

@@ -1,57 +0,0 @@
-<template>
-    <div>
-        <div class="mt-3">{{ remotePluginListMsg }}</div>
-        <PluginItem v-for="plugin in remotePluginList" :key="plugin.id" :plugin="plugin" />
-    </div>
-</template>
-
-<script>
-import PluginItem from "../PluginItem.vue";
-
-export default {
-    components: {
-        PluginItem
-    },
-
-    data() {
-        return {
-            remotePluginList: [],
-            remotePluginListMsg: "",
-        };
-    },
-
-    computed: {
-        pluginList() {
-            return this.$parent.$parent.$parent.pluginList;
-        },
-        settings() {
-            return this.$parent.$parent.$parent.settings;
-        },
-        saveSettings() {
-            return this.$parent.$parent.$parent.saveSettings;
-        },
-        settingsLoaded() {
-            return this.$parent.$parent.$parent.settingsLoaded;
-        },
-    },
-
-    async mounted() {
-        this.loadList();
-    },
-
-    methods: {
-        loadList() {
-            this.remotePluginListMsg = this.$t("Loading") + "...";
-
-            this.$root.getSocket().emit("getPluginList", (res) => {
-                if (res.ok) {
-                    this.remotePluginList = res.pluginList;
-                    this.remotePluginListMsg = "";
-                } else {
-                    this.remotePluginListMsg = this.$t("loadingError") + " " + res.msg;
-                }
-            });
-        }
-    },
-};
-</script>