Merge branch 'master' into ntfy-bearer-authorization

src/components/APIKeyDialog.vue

@@ -159,6 +159,16 @@ export default {
                 }
             });
         },
+
+        /** Clear Form inputs */
+        clearForm() {
+            this.key = {
+                name: "",
+                expires: this.minDate,
+                active: 1,
+            };
+            this.noExpire = false;
+        },
     }
 };
 </script>

src/components/CopyableInput.vue

@@ -13,6 +13,9 @@
             :disabled="disabled"
         >
 
+        <!-- A hidden textarea for copying text on non-https -->
+        <textarea ref="hiddenTextarea" style="position: fixed; left: -999999px; top: -999999px;"></textarea>
+
         <a class="btn btn-outline-primary" @click="copyToClipboard(model)">
             <font-awesome-icon :icon="icon" />
         </a>
@@ -111,24 +114,19 @@ export default {
             }, 3000);
 
             // navigator clipboard api needs a secure context (https)
+            // For http, use the text area method (else part)
             if (navigator.clipboard && window.isSecureContext) {
                 // navigator clipboard api method'
                 return navigator.clipboard.writeText(textToCopy);
             } else {
                 // text area method
-                let textArea = document.createElement("textarea");
+                let textArea = this.$refs.hiddenTextarea;
                 textArea.value = textToCopy;
-                // make the textarea out of viewport
-                textArea.style.position = "fixed";
-                textArea.style.left = "-999999px";
-                textArea.style.top = "-999999px";
-                document.body.appendChild(textArea);
                 textArea.focus();
                 textArea.select();
                 return new Promise((res, rej) => {
                     // here the magic happens
                     document.execCommand("copy") ? res() : rej();
-                    textArea.remove();
                 });
             }
         }

src/components/NotificationDialog.vue

@@ -129,6 +129,7 @@ export default {
                 "ntfy": "Ntfy",
                 "octopush": "Octopush",
                 "OneBot": "OneBot",
+                "Opsgenie": "Opsgenie",
                 "PagerDuty": "PagerDuty",
                 "pushbullet": "Pushbullet",
                 "PushByTechulus": "Push by Techulus",
@@ -143,6 +144,7 @@ export default {
                 "stackfield": "Stackfield",
                 "teams": "Microsoft Teams",
                 "telegram": "Telegram",
+                "twilio": "Twilio",
                 "Splunk": "Splunk",
                 "webhook": "Webhook",
                 "GoAlert": "GoAlert",

src/components/notifications/Opsgenie.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="mb-3">
+        <label for="opsgenie-region" class="form-label">{{ $t("Region") }}<span style="color: red;"><sup>*</sup></span></label>
+        <select id="opsgenie-region" v-model="$parent.notification.opsgenieRegion" class="form-select" required>
+            <option value="us">
+                US (Default)
+            </option>
+            <option value="eu">
+                EU
+            </option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <label for="opsgenie-apikey" class="form-label">{{ $t("API Key") }}<span style="color: red;"><sup>*</sup></span></label>
+        <HiddenInput id="opsgenie-apikey" v-model="$parent.notification.opsgenieApiKey" required="true" autocomplete="false"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="opsgenie-priority" class="form-label">{{ $t("Priority") }}</label>
+        <input id="opsgenie-priority" v-model="$parent.notification.opsgeniePriority" type="number" class="form-control" min="1" max="5" step="1">
+    </div>
+    <div class="form-text">
+        <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+        <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+            <a href="https://docs.opsgenie.com/docs/alert-api" target="_blank">https://docs.opsgenie.com/docs/alert-api</a>
+        </i18n-t>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Twilio.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="mb-3">
+        <label for="twilio-account-sid" class="form-label">{{ $t("Account SID") }}</label>
+        <input id="twilio-account-sid" v-model="$parent.notification.twilioAccountSID" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-auth-token" class="form-label">{{ $t("Auth Token") }}</label>
+        <input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-from-number" class="form-label">{{ $t("From Number") }}</label>
+        <input id="twilio-from-number" v-model="$parent.notification.twilioFromNumber" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-to-number" class="form-label">{{ $t("To Number") }}</label>
+        <input id="twilio-to-number" v-model="$parent.notification.twilioToNumber" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+            <a href="https://www.twilio.com/docs/sms" target="_blank">https://www.twilio.com/docs/sms</a>
+        </i18n-t>
+    </div>
+</template>

src/components/notifications/index.js

@@ -21,6 +21,7 @@ import Mattermost from "./Mattermost.vue";
 import Ntfy from "./Ntfy.vue";
 import Octopush from "./Octopush.vue";
 import OneBot from "./OneBot.vue";
+import Opsgenie from "./Opsgenie.vue";
 import PagerDuty from "./PagerDuty.vue";
 import PagerTree from "./PagerTree.vue";
 import PromoSMS from "./PromoSMS.vue";
@@ -41,6 +42,7 @@ import STMP from "./SMTP.vue";
 import Teams from "./Teams.vue";
 import TechulusPush from "./TechulusPush.vue";
 import Telegram from "./Telegram.vue";
+import Twilio from "./Twilio.vue";
 import Webhook from "./Webhook.vue";
 import WeCom from "./WeCom.vue";
 import GoAlert from "./GoAlert.vue";
@@ -76,6 +78,7 @@ const NotificationFormList = {
     "ntfy": Ntfy,
     "octopush": Octopush,
     "OneBot": OneBot,
+    "Opsgenie": Opsgenie,
     "PagerDuty": PagerDuty,
     "PagerTree": PagerTree,
     "promosms": PromoSMS,
@@ -95,6 +98,7 @@ const NotificationFormList = {
     "stackfield": Stackfield,
     "teams": Teams,
     "telegram": Telegram,
+    "twilio": Twilio,
     "Splunk": Splunk,
     "webhook": Webhook,
     "WeCom": WeCom,