Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-16 19:24:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #451 from zsxeee/notification_form_i18n

Browse Source 
Notification form i18n
This commit is contained in:
Louis Lam 2021-10-07 14:13:08 +08:00 committed by GitHub
commit 8c63536eb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 322 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
package-lock.json generated
View File

@ -48,7 +48,7 @@
"vue-chart-3": "~0.5.8", "vue-chart-3": "~0.5.8",
"vue-confirm-dialog": "~1.0.2", "vue-confirm-dialog": "~1.0.2",
"vue-contenteditable": "~3.0.4", "vue-contenteditable": "~3.0.4",
"vue-i18n": "~9.1.8", "vue-i18n": "~9.1.9",
"vue-image-crop-upload": "~3.0.3", "vue-image-crop-upload": "~3.0.3",
"vue-multiselect": "~3.0.0-alpha.2", "vue-multiselect": "~3.0.0-alpha.2",
"vue-qrcode": "~1.0.0", "vue-qrcode": "~1.0.0",
@ -844,39 +844,39 @@
"dev": true "dev": true
}, },
"node_modules/@intlify/core-base": { "node_modules/@intlify/core-base": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.9.tgz",
"integrity": "sha512-k+q6nUOD9HPTMr8AKEn4d/EgoNSCMVuc/dG97tFXrifT4+QbxoLNRjXovyC60rb4q+7D/cGF+5R6Tjby4t5gng==", "integrity": "sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==",
"dependencies": { "dependencies": {
"@intlify/devtools-if": "9.1.8", "@intlify/devtools-if": "9.1.9",
"@intlify/message-compiler": "9.1.8", "@intlify/message-compiler": "9.1.9",
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/runtime": "9.1.8", "@intlify/runtime": "9.1.9",
"@intlify/shared": "9.1.8", "@intlify/shared": "9.1.9",
"@intlify/vue-devtools": "9.1.8" "@intlify/vue-devtools": "9.1.9"
}, },
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@intlify/devtools-if": { "node_modules/@intlify/devtools-if": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.9.tgz",
"integrity": "sha512-17REiNoQ5dWnYECbKgkMHtX8GnNCkMNxfImXrJNnUhSH3GitheNkYn0o14AZmZWk7Fw/1IOdV5v7K0QVnYx5fw==", "integrity": "sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==",
"dependencies": { "dependencies": {
"@intlify/shared": "9.1.8" "@intlify/shared": "9.1.9"
}, },
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@intlify/message-compiler": { "node_modules/@intlify/message-compiler": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.9.tgz",
"integrity": "sha512-x/vfvHqz2v/ngE0slaD/QnJORHzrlKt6p6TdoY+/1zBQ/TOH+6BlkdtrSIrSfwJfP+3Qe6C8uw6yJknQ6cpabA==", "integrity": "sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==",
"dependencies": { "dependencies": {
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/shared": "9.1.8", "@intlify/shared": "9.1.9",
"source-map": "0.6.1" "source-map": "0.6.1"
}, },
"engines": { "engines": {
@ -884,42 +884,42 @@
} }
}, },
"node_modules/@intlify/message-resolver": { "node_modules/@intlify/message-resolver": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.9.tgz",
"integrity": "sha512-4tHBo5U2/oDG85tNv9z8bS/5ThMw+wADPLyBVOLplUqw8Q+N5tkrTL23Pa8hg5Ekd2crvyIxFHFwt1gbT8TT6w==", "integrity": "sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==",
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@intlify/runtime": { "node_modules/@intlify/runtime": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.9.tgz",
"integrity": "sha512-Q9WvSjRFhxxCen5cj3jOZEKAYlXjYZ+wZbTEfBQhDtcBwrS7xd9tyFos4ZRNNvF7G0H0sNDzXmSdZkoCpoU0iA==", "integrity": "sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==",
"dependencies": { "dependencies": {
"@intlify/message-compiler": "9.1.8", "@intlify/message-compiler": "9.1.9",
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/shared": "9.1.8" "@intlify/shared": "9.1.9"
}, },
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@intlify/shared": { "node_modules/@intlify/shared": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.9.tgz",
"integrity": "sha512-o9nksOx3yIMDNvYzcPv87NR+U62ka775/Ufjl3U2g4NsMORN8+VacbVJ/oAF6CYfzZALpArBBZdk5jafzcLkvw==", "integrity": "sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==",
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@intlify/vue-devtools": { "node_modules/@intlify/vue-devtools": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.9.tgz",
"integrity": "sha512-SypF7tpWFxIQzKrqv6O8JIk5xrU53E0/xNVR5LFCHLIDIKe62uMTrzXvjW5zoYcJjRTZ87BZLXEM1n2CaLSBsg==", "integrity": "sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==",
"dependencies": { "dependencies": {
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/runtime": "9.1.8", "@intlify/runtime": "9.1.9",
"@intlify/shared": "9.1.8" "@intlify/shared": "9.1.9"
}, },
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
@ -10207,13 +10207,13 @@
} }
}, },
"node_modules/vue-i18n": { "node_modules/vue-i18n": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.8.tgz", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.9.tgz",
"integrity": "sha512-Gmjkt/4ZQtKyCLTjJNGVp+w/dhMpuwuPtgW/Xm9DY0ppSwHRgqMRR6GspnCIYWBxQjzsTT8tIWLPc3SUfKifLA==", "integrity": "sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==",
"dependencies": { "dependencies": {
"@intlify/core-base": "9.1.8", "@intlify/core-base": "9.1.9",
"@intlify/shared": "9.1.8", "@intlify/shared": "9.1.9",
"@intlify/vue-devtools": "9.1.8", "@intlify/vue-devtools": "9.1.9",
"@vue/devtools-api": "^6.0.0-beta.7" "@vue/devtools-api": "^6.0.0-beta.7"
}, },
"engines": { "engines": {
@ -11229,64 +11229,64 @@
"dev": true "dev": true
}, },
"@intlify/core-base": { "@intlify/core-base": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.9.tgz",
"integrity": "sha512-k+q6nUOD9HPTMr8AKEn4d/EgoNSCMVuc/dG97tFXrifT4+QbxoLNRjXovyC60rb4q+7D/cGF+5R6Tjby4t5gng==", "integrity": "sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==",
"requires": { "requires": {
"@intlify/devtools-if": "9.1.8", "@intlify/devtools-if": "9.1.9",
"@intlify/message-compiler": "9.1.8", "@intlify/message-compiler": "9.1.9",
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/runtime": "9.1.8", "@intlify/runtime": "9.1.9",
"@intlify/shared": "9.1.8", "@intlify/shared": "9.1.9",
"@intlify/vue-devtools": "9.1.8" "@intlify/vue-devtools": "9.1.9"
} }
}, },
"@intlify/devtools-if": { "@intlify/devtools-if": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.9.tgz",
"integrity": "sha512-17REiNoQ5dWnYECbKgkMHtX8GnNCkMNxfImXrJNnUhSH3GitheNkYn0o14AZmZWk7Fw/1IOdV5v7K0QVnYx5fw==", "integrity": "sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==",
"requires": { "requires": {
"@intlify/shared": "9.1.8" "@intlify/shared": "9.1.9"
} }
}, },
"@intlify/message-compiler": { "@intlify/message-compiler": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.9.tgz",
"integrity": "sha512-x/vfvHqz2v/ngE0slaD/QnJORHzrlKt6p6TdoY+/1zBQ/TOH+6BlkdtrSIrSfwJfP+3Qe6C8uw6yJknQ6cpabA==", "integrity": "sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==",
"requires": { "requires": {
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/shared": "9.1.8", "@intlify/shared": "9.1.9",
"source-map": "0.6.1" "source-map": "0.6.1"
} }
}, },
"@intlify/message-resolver": { "@intlify/message-resolver": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.9.tgz",
"integrity": "sha512-4tHBo5U2/oDG85tNv9z8bS/5ThMw+wADPLyBVOLplUqw8Q+N5tkrTL23Pa8hg5Ekd2crvyIxFHFwt1gbT8TT6w==" "integrity": "sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA=="
}, },
"@intlify/runtime": { "@intlify/runtime": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.9.tgz",
"integrity": "sha512-Q9WvSjRFhxxCen5cj3jOZEKAYlXjYZ+wZbTEfBQhDtcBwrS7xd9tyFos4ZRNNvF7G0H0sNDzXmSdZkoCpoU0iA==", "integrity": "sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==",
"requires": { "requires": {
"@intlify/message-compiler": "9.1.8", "@intlify/message-compiler": "9.1.9",
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/shared": "9.1.8" "@intlify/shared": "9.1.9"
} }
}, },
"@intlify/shared": { "@intlify/shared": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.9.tgz",
"integrity": "sha512-o9nksOx3yIMDNvYzcPv87NR+U62ka775/Ufjl3U2g4NsMORN8+VacbVJ/oAF6CYfzZALpArBBZdk5jafzcLkvw==" "integrity": "sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw=="
}, },
"@intlify/vue-devtools": { "@intlify/vue-devtools": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.8.tgz", "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.9.tgz",
"integrity": "sha512-SypF7tpWFxIQzKrqv6O8JIk5xrU53E0/xNVR5LFCHLIDIKe62uMTrzXvjW5zoYcJjRTZ87BZLXEM1n2CaLSBsg==", "integrity": "sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==",
"requires": { "requires": {
"@intlify/message-resolver": "9.1.8", "@intlify/message-resolver": "9.1.9",
"@intlify/runtime": "9.1.8", "@intlify/runtime": "9.1.9",
"@intlify/shared": "9.1.8" "@intlify/shared": "9.1.9"
} }
}, },
"@istanbuljs/load-nyc-config": { "@istanbuljs/load-nyc-config": {
@ -18469,13 +18469,13 @@
} }
}, },
"vue-i18n": { "vue-i18n": {
"version": "9.1.8", "version": "9.1.9",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.8.tgz", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.9.tgz",
"integrity": "sha512-Gmjkt/4ZQtKyCLTjJNGVp+w/dhMpuwuPtgW/Xm9DY0ppSwHRgqMRR6GspnCIYWBxQjzsTT8tIWLPc3SUfKifLA==", "integrity": "sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==",
"requires": { "requires": {
"@intlify/core-base": "9.1.8", "@intlify/core-base": "9.1.9",
"@intlify/shared": "9.1.8", "@intlify/shared": "9.1.9",
"@intlify/vue-devtools": "9.1.8", "@intlify/vue-devtools": "9.1.9",
"@vue/devtools-api": "^6.0.0-beta.7" "@vue/devtools-api": "^6.0.0-beta.7"
} }
}, },

2
package.json
View File

@ -87,7 +87,7 @@
"vue-chart-3": "~0.5.8", "vue-chart-3": "~0.5.8",
"vue-confirm-dialog": "~1.0.2", "vue-confirm-dialog": "~1.0.2",
"vue-contenteditable": "~3.0.4", "vue-contenteditable": "~3.0.4",
"vue-i18n": "~9.1.8", "vue-i18n": "~9.1.9",
"vue-image-crop-upload": "~3.0.3", "vue-image-crop-upload": "~3.0.3",
"vue-multiselect": "~3.0.0-alpha.2", "vue-multiselect": "~3.0.0-alpha.2",
"vue-qrcode": "~1.0.0", "vue-qrcode": "~1.0.0",

56
src/components/NotificationDialog.vue
View File

@ -68,11 +68,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Modal } from "bootstrap" import { Modal } from "bootstrap";
import { ucfirst } from "../util.ts" import { ucfirst } from "../util.ts";
import Confirm from "./Confirm.vue"; import Confirm from "./Confirm.vue";
import NotificationFormList from "./notifications" import NotificationFormList from "./notifications";
export default { export default {
components: { components: {
@ -93,41 +93,40 @@ export default {
isDefault: false, isDefault: false,
// Do not set default value here, please scroll to show() // Do not set default value here, please scroll to show()
} }
} };
}, },
computed: { computed: {
currentForm() { currentForm() {
if (!this.notification.type) { if (!this.notification.type) {
return null return null;
} }
return NotificationFormList[this.notification.type] return NotificationFormList[this.notification.type];
} }
}, },
watch: { watch: {
"notification.type"(to, from) { "notification.type"(to, from) {
let oldName; let oldName;
if (from) { if (from) {
oldName = `My ${ucfirst(from)} Alert (1)`; oldName = this.getUniqueDefaultName(from);
} else { } else {
oldName = ""; oldName = "";
} }
if (! this.notification.name || this.notification.name === oldName) { if (! this.notification.name || this.notification.name === oldName) {
this.notification.name = `My ${ucfirst(to)} Alert (1)` this.notification.name = this.getUniqueDefaultName(to);
} }
}, },
}, },
mounted() { mounted() {
this.modal = new Modal(this.$refs.modal) this.modal = new Modal(this.$refs.modal);
}, },
methods: { methods: {
deleteConfirm() { deleteConfirm() {
this.modal.hide(); this.modal.hide();
this.$refs.confirmDelete.show() this.$refs.confirmDelete.show();
}, },
show(notificationID) { show(notificationID) {
@ -146,19 +145,19 @@ export default {
name: "", name: "",
type: null, type: null,
isDefault: false, isDefault: false,
} };
// Set Default value here // Set Default value here
this.notification.type = this.notificationTypes[0]; this.notification.type = this.notificationTypes[0];
} }
this.modal.show() this.modal.show();
}, },
submit() { submit() {
this.processing = true; this.processing = true;
this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => { this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => {
this.$root.toastRes(res) this.$root.toastRes(res);
this.processing = false; this.processing = false;
if (res.ok) { if (res.ok) {
@ -170,30 +169,45 @@ export default {
} }
} }
}) });
}, },
test() { test() {
this.processing = true; this.processing = true;
this.$root.getSocket().emit("testNotification", this.notification, (res) => { this.$root.getSocket().emit("testNotification", this.notification, (res) => {
this.$root.toastRes(res) this.$root.toastRes(res);
this.processing = false; this.processing = false;
}) });
}, },
deleteNotification() { deleteNotification() {
this.processing = true; this.processing = true;
this.$root.getSocket().emit("deleteNotification", this.id, (res) => { this.$root.getSocket().emit("deleteNotification", this.id, (res) => {
this.$root.toastRes(res) this.$root.toastRes(res);
this.processing = false; this.processing = false;
if (res.ok) { if (res.ok) {
this.modal.hide() this.modal.hide();
} }
}) });
},
}, },
/**
* @param {keyof NotificationFormList} notificationKey
* @return {string}
*/
getUniqueDefaultName(notificationKey) {
let index = 1;
let name = "";
do {
name = this.$t("defaultNotificationName", {
notification: this.$t(notificationKey).replace(/\(.+\)/, "").trim(),
number: index++
});
} while (this.$root.notificationList.find(it => it.name === name));
return name;
} }
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

27
src/components/notifications/Apprise.vue
View File

@ -1,20 +1,21 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="apprise-url" class="form-label">Apprise URL</label> <label for="apprise-url" class="form-label">{{ $t("Apprise URL") }}</label>
<input id="apprise-url" v-model="$parent.notification.appriseURL" type="text" class="form-control" required> <input id="apprise-url" v-model="$parent.notification.appriseURL" type="text" class="form-control" required>
<div class="form-text"> <div class="form-text">
<p>Example: twilio://AccountSid:AuthToken@FromPhoneNo</p> <p>{{ $t("Example:", ["twilio://AccountSid:AuthToken@FromPhoneNo"]) }}</p>
<p> <i18n-t tag="p" keypath="Read more:">
Read more: <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a> <a href="https://github.com/caronc/apprise/wiki#notification-services" target="_blank">https://github.com/caronc/apprise/wiki#notification-services</a>
</p> </i18n-t>
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<p> <i18n-t tag="p" keypath="Status:">
Status: <span v-if="appriseInstalled" class="text-primary">{{ $t("appriseInstalled") }}</span>
<span v-if="appriseInstalled" class="text-primary">Apprise is installed</span> <i18n-t v-else tag="span" keypath="appriseNotInstalled" class="text-danger">
<span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise" target="_blank">Read more</a></span> <a href="https://github.com/caronc/apprise" target="_blank">{{ $t("Read more") }}</a>
</p> </i18n-t>
</i18n-t>
</div> </div>
</template> </template>
@ -23,12 +24,12 @@ export default {
data() { data() {
return { return {
appriseInstalled: false appriseInstalled: false
} };
}, },
mounted() { mounted() {
this.$root.getSocket().emit("checkApprise", (installed) => { this.$root.getSocket().emit("checkApprise", (installed) => {
this.appriseInstalled = installed; this.appriseInstalled = installed;
}) });
}, },
} };
</script> </script>

11
src/components/notifications/Discord.vue
View File

@ -1,20 +1,19 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="discord-webhook-url" class="form-label">Discord Webhook URL</label> <label for="discord-webhook-url" class="form-label">{{ $t("Discord Webhook URL") }}</label>
<input id="discord-webhook-url" v-model="$parent.notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false"> <input id="discord-webhook-url" v-model="$parent.notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
<div class="form-text"> <div class="form-text">
You can get this by going to Server Settings -> Integrations -> Create Webhook {{ $t("wayToGetDiscordURL") }}
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="discord-username" class="form-label">Bot Display Name</label> <label for="discord-username" class="form-label">{{ $t("Bot Display Name") }}</label>
<input id="discord-username" v-model="$parent.notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName"> <input id="discord-username" v-model="$parent.notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="discord-prefix-message" class="form-label">Prefix Custom Message</label> <label for="discord-prefix-message" class="form-label">{{ $t("Prefix Custom Message") }}</label>
<input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" placeholder="Hello @everyone is..."> <input id="discord-prefix-message" v-model="$parent.notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" :placeholder="$t('Hello @everyone is...')">
</div> </div>
</template> </template>

6
src/components/notifications/Gotify.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="gotify-application-token" class="form-label">Application Token</label> <label for="gotify-application-token" class="form-label">{{ $t("Application Token") }}</label>
<HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="gotify-server-url" class="form-label">Server URL</label> <label for="gotify-server-url" class="form-label">{{ $t("Server URL") }}</label>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required> <input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required>
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="gotify-priority" class="form-label">Priority</label> <label for="gotify-priority" class="form-label">{{ $t("Priority") }}</label>
<input id="gotify-priority" v-model="$parent.notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1"> <input id="gotify-priority" v-model="$parent.notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1">
</div> </div>
</template> </template>

22
src/components/notifications/Line.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="line-channel-access-token" class="form-label">Channel access token</label> <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token") }}</label>
<HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
</div> </div>
<div class="form-text"> <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
Line Developers Console - <b>Basic Settings</b> <b>{{ $t("Basic Settings") }}</b>
</div> </i18n-t>
<div class="mb-3" style="margin-top: 12px;"> <div class="mb-3" style="margin-top: 12px;">
<label for="line-user-id" class="form-label">User ID</label> <label for="line-user-id" class="form-label">User ID</label>
<input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required> <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
</div> </div>
<div class="form-text"> <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
Line Developers Console - <b>Messaging API</b> <b>{{ $t("Messaging API") }}</b>
</div> </i18n-t>
<div class="form-text" style="margin-top: 8px;"> <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
First access the <a href="https://developers.line.biz/console/" target="_blank">Line Developers Console</a>, create a provider and channel (Messaging API), then you can get the channel access token and user id from the above mentioned menu items. <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
</div> </i18n-t>
</template> </template>
<script> <script>
@ -25,5 +25,5 @@ export default {
components: { components: {
HiddenInput, HiddenInput,
}, },
} };
</script> </script>

4
src/components/notifications/LunaSea.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color: red;"><sup>*</sup></span></label> <label for="lunasea-device" class="form-label">{{ $t("LunaSea Device ID") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control" required> <input id="lunasea-device" v-model="$parent.notification.lunaseaDevice" type="text" class="form-control" required>
<div class="form-text"> <div class="form-text">
<p><span style="color: red;"><sup>*</sup></span>Required</p> <p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
</div> </div>
</div> </div>
</template> </template>

30
src/components/notifications/Mattermost.vue
View File

@ -1,32 +1,32 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="mattermost-webhook-url" class="form-label">Webhook URL<span style="color:red;"><sup>*</sup></span></label> <label for="mattermost-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color:red;"><sup>*</sup></span></label>
<input id="mattermost-webhook-url" v-model="$parent.notification.mattermostWebhookUrl" type="text" class="form-control" required> <input id="mattermost-webhook-url" v-model="$parent.notification.mattermostWebhookUrl" type="text" class="form-control" required>
<label for="mattermost-username" class="form-label">Username</label> <label for="mattermost-username" class="form-label">{{ $t("Username") }}</label>
<input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control"> <input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control">
<label for="mattermost-iconurl" class="form-label">Icon URL</label> <label for="mattermost-iconurl" class="form-label">{{ $t("Icon URL") }}</label>
<input id="mattermost-iconurl" v-model="$parent.notification.mattermosticonurl" type="text" class="form-control"> <input id="mattermost-iconurl" v-model="$parent.notification.mattermosticonurl" type="text" class="form-control">
<label for="mattermost-iconemo" class="form-label">Icon Emoji</label> <label for="mattermost-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
<input id="mattermost-iconemo" v-model="$parent.notification.mattermosticonemo" type="text" class="form-control"> <input id="mattermost-iconemo" v-model="$parent.notification.mattermosticonemo" type="text" class="form-control">
<label for="mattermost-channel" class="form-label">Channel Name</label> <label for="mattermost-channel" class="form-label">{{ $t("Channel Name") }}</label>
<input id="mattermost-channel-name" v-model="$parent.notification.mattermostchannel" type="text" class="form-control"> <input id="mattermost-channel-name" v-model="$parent.notification.mattermostchannel" type="text" class="form-control">
<div class="form-text"> <div class="form-text">
<span style="color:red;"><sup>*</sup></span>Required <span style="color:red;"><sup>*</sup></span>{{ $t("Required") }}
<i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
<a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
</i18n-t>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
More info about webhooks on: <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a> {{ $t("aboutMattermostChannelName") }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
You can override the default channel that webhook posts to by entering the channel name into "Channel Name" field. This needs to be enabled in Mattermost webhook settings. Ex: #other-channel {{ $t("aboutKumaURL") }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
If you leave the Uptime Kuma URL field blank, it will default to the Project Github page. {{ $t("aboutIconURL") }}
</p>
<p style="margin-top: 8px;">
You can provide a link to a picture in "Icon URL" to override the default profile picture. Will not be used if Icon Emoji is set.
</p>
<p style="margin-top: 8px;">
Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a> Note: emoji takes preference over Icon URL.
</p> </p>
<i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
<a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
</i18n-t>
</div> </div>
</div> </div>
</template> </template>

24
src/components/notifications/Octopush.vue
View File

@ -6,27 +6,27 @@
<input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required> <input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="octopush-type-sms" class="form-label">SMS Type</label> <label for="octopush-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
<select id="octopush-type-sms" v-model="$parent.notification.octopushSMSType" class="form-select"> <select id="octopush-type-sms" v-model="$parent.notification.octopushSMSType" class="form-select">
<option value="sms_premium">Premium (Fast - recommended for alerting)</option> <option value="sms_premium">{{ $t("octopushTypePremium") }}</option>
<option value="sms_low_cost">Low Cost (Slow, sometimes blocked by operator)</option> <option value="sms_low_cost">{{ $t("octopushTypeLowCost") }}</option>
</select> </select>
<div class="form-text"> <i18n-t tag="div" keypath="Check octopush prices" class="form-text">
Check octopush prices <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>. <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>
</div> </i18n-t>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="octopush-phone-number" class="form-label">Phone number (intl format, eg : +33612345678) </label> <label for="octopush-phone-number" class="form-label">{{ $t("octopushPhoneNumber") }}</label>
<input id="octopush-phone-number" v-model="$parent.notification.octopushPhoneNumber" type="text" class="form-control" required> <input id="octopush-phone-number" v-model="$parent.notification.octopushPhoneNumber" type="text" class="form-control" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="octopush-sender-name" class="form-label">SMS Sender Name : 3-11 alphanumeric characters and space (a-zA-Z0-9)</label> <label for="octopush-sender-name" class="form-label">{{ $t("octopushSMSSender") }}</label>
<input id="octopush-sender-name" v-model="$parent.notification.octopushSenderName" type="text" minlength="3" maxlength="11" class="form-control"> <input id="octopush-sender-name" v-model="$parent.notification.octopushSenderName" type="text" minlength="3" maxlength="11" class="form-control">
</div> </div>
<p style="margin-top: 8px;"> <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
More info on: <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a> <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
</p> </i18n-t>
</template> </template>
<script> <script>
@ -36,5 +36,5 @@ export default {
components: { components: {
HiddenInput, HiddenInput,
}, },
} };
</script> </script>

10
src/components/notifications/Pushbullet.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="pushbullet-access-token" class="form-label">Access Token</label> <label for="pushbullet-access-token" class="form-label">{{ $t("Access Token") }}</label>
<HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
</div> </div>
<p style="margin-top: 8px;"> <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
More info on: <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a> <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
</p> </i18n-t>
</template> </template>
<script> <script>
@ -16,5 +16,5 @@ export default {
components: { components: {
HiddenInput, HiddenInput,
}, },
} };
</script> </script>

24
src/components/notifications/Pushover.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="pushover-user" class="form-label">User Key<span style="color: red;"><sup>*</sup></span></label> <label for="pushover-user" class="form-label">{{ $t("User Key") }}<span style="color: red;"><sup>*</sup></span></label>
<HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="one-time-code"></HiddenInput>
<label for="pushover-app-token" class="form-label">Application Token<span style="color: red;"><sup>*</sup></span></label> <label for="pushover-app-token" class="form-label">{{ $t("Application Token") }}<span style="color: red;"><sup>*</sup></span></label>
<HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput>
<label for="pushover-device" class="form-label">Device</label> <label for="pushover-device" class="form-label">{{ $t("Device") }}</label>
<input id="pushover-device" v-model="$parent.notification.pushoverdevice" type="text" class="form-control"> <input id="pushover-device" v-model="$parent.notification.pushoverdevice" type="text" class="form-control">
<label for="pushover-device" class="form-label">Message Title</label> <label for="pushover-device" class="form-label">{{ $t("Message Title") }}</label>
<input id="pushover-title" v-model="$parent.notification.pushovertitle" type="text" class="form-control"> <input id="pushover-title" v-model="$parent.notification.pushovertitle" type="text" class="form-control">
<label for="pushover-priority" class="form-label">Priority</label> <label for="pushover-priority" class="form-label">{{ $t("Priority") }}</label>
<select id="pushover-priority" v-model="$parent.notification.pushoverpriority" class="form-select"> <select id="pushover-priority" v-model="$parent.notification.pushoverpriority" class="form-select">
<option>-2</option> <option>-2</option>
<option>-1</option> <option>-1</option>
@ -16,7 +16,7 @@
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
</select> </select>
<label for="pushover-sound" class="form-label">Notification Sound</label> <label for="pushover-sound" class="form-label">{{ $t("Notification Sound") }}</label>
<select id="pushover-sound" v-model="$parent.notification.pushoversounds" class="form-select"> <select id="pushover-sound" v-model="$parent.notification.pushoversounds" class="form-select">
<option>pushover</option> <option>pushover</option>
<option>bike</option> <option>bike</option>
@ -42,15 +42,15 @@
<option>none</option> <option>none</option>
</select> </select>
<div class="form-text"> <div class="form-text">
<span style="color: red;"><sup>*</sup></span>Required <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
</i18n-t>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a> {{ $t("pushoverDesc1") }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour. {{ $t("pushoverDesc2") }}
</p>
<p style="margin-top: 8px;">
If you want to send notifications to different devices, fill out Device field.
</p> </p>
</div> </div>
</div> </div>

8
src/components/notifications/Pushy.vue
View File

@ -10,9 +10,9 @@
<HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
</div> </div>
</div> </div>
<p style="margin-top: 8px;"> <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a> <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
</p> </i18n-t>
</template> </template>
<script> <script>
@ -22,5 +22,5 @@ export default {
components: { components: {
HiddenInput, HiddenInput,
}, },
} };
</script> </script>

28
src/components/notifications/RocketChat.vue
View File

@ -1,29 +1,29 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="rocket-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label> <label for="rocket-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="rocket-webhook-url" v-model="$parent.notification.rocketwebhookURL" type="text" class="form-control" required> <input id="rocket-webhook-url" v-model="$parent.notification.rocketwebhookURL" type="text" class="form-control" required>
<label for="rocket-username" class="form-label">Username</label> <label for="rocket-username" class="form-label">{{ $t("Username") }}</label>
<input id="rocket-username" v-model="$parent.notification.rocketusername" type="text" class="form-control"> <input id="rocket-username" v-model="$parent.notification.rocketusername" type="text" class="form-control">
<label for="rocket-iconemo" class="form-label">Icon Emoji</label> <label for="rocket-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
<input id="rocket-iconemo" v-model="$parent.notification.rocketiconemo" type="text" class="form-control"> <input id="rocket-iconemo" v-model="$parent.notification.rocketiconemo" type="text" class="form-control">
<label for="rocket-channel" class="form-label">Channel Name</label> <label for="rocket-channel" class="form-label">{{ $t("Channel Name") }}</label>
<input id="rocket-channel-name" v-model="$parent.notification.rocketchannel" type="text" class="form-control"> <input id="rocket-channel-name" v-model="$parent.notification.rocketchannel" type="text" class="form-control">
<label for="rocket-button-url" class="form-label">Uptime Kuma URL</label> <label for="rocket-button-url" class="form-label">{{ $t("Uptime Kuma URL") }}</label>
<input id="rocket-button" v-model="$parent.notification.rocketbutton" type="text" class="form-control"> <input id="rocket-button" v-model="$parent.notification.rocketbutton" type="text" class="form-control">
<div class="form-text"> <div class="form-text">
<span style="color: red;"><sup>*</sup></span>Required <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
<i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
<a href="https://docs.rocket.chat/guides/administration/administration/integrations" target="_blank">https://api.slack.com/messaging/webhooks</a>
</i18n-t>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
More info about webhooks on: <a href="https://docs.rocket.chat/guides/administration/administration/integrations" target="_blank">https://api.slack.com/messaging/webhooks</a> {{ $t("aboutChannelName", [$t("rocket.chat")]) }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
Enter the channel name on Rocket.chat Channel Name field if you want to bypass the webhook channel. Ex: #other-channel {{ $t("aboutKumaURL") }}
</p>
<p style="margin-top: 8px;">
If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
</p>
<p style="margin-top: 8px;">
Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
</p> </p>
<i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
<a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
</i18n-t>
</div> </div>
</div> </div>
</template> </template>

14
src/components/notifications/SMTP.vue
View File

@ -12,8 +12,8 @@
<div class="mb-3"> <div class="mb-3">
<label for="secure" class="form-label">Secure</label> <label for="secure" class="form-label">Secure</label>
<select id="secure" v-model="$parent.notification.smtpSecure" class="form-select"> <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
<option :value="false">None / STARTTLS (25, 587)</option> <option :value="false">{{ $t("secureOptionNone") }}</option>
<option :value="true">TLS (465)</option> <option :value="true">{{ $t("secureOptionTLS") }}</option>
</select> </select>
</div> </div>
@ -21,7 +21,7 @@
<div class="form-check"> <div class="form-check">
<input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value=""> <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
<label class="form-check-label" for="ignore-tls-error"> <label class="form-check-label" for="ignore-tls-error">
Ignore TLS Error {{ $t("Ignore TLS Error") }}
</label> </label>
</div> </div>
</div> </div>
@ -37,24 +37,24 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="from-email" class="form-label">From Email</label> <label for="from-email" class="form-label">{{ $t("From Email") }}</label>
<input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;"> <input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;">
<div class="form-text"> <div class="form-text">
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="to-email" class="form-label">To Email</label> <label for="to-email" class="form-label">{{ $t("To Email") }}</label>
<input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient"> <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="to-cc" class="form-label">CC</label> <label for="to-cc" class="form-label">{{ $t("smtpCC") }}</label>
<input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient"> <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="to-bcc" class="form-label">BCC</label> <label for="to-bcc" class="form-label">{{ $t("smtpBCC") }}</label>
<input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient"> <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
</div> </div>
</template> </template>

14
src/components/notifications/Signal.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="signal-url" class="form-label">Post URL</label> <label for="signal-url" class="form-label">{{ $t("Post URL") }}</label>
<input id="signal-url" v-model="$parent.notification.signalURL" type="url" pattern="https?://.+" class="form-control" required> <input id="signal-url" v-model="$parent.notification.signalURL" type="url" pattern="https?://.+" class="form-control" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="signal-number" class="form-label">Number</label> <label for="signal-number" class="form-label">{{ $t("Number") }}</label>
<input id="signal-number" v-model="$parent.notification.signalNumber" type="text" class="form-control" required> <input id="signal-number" v-model="$parent.notification.signalNumber" type="text" class="form-control" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="signal-recipients" class="form-label">Recipients</label> <label for="signal-recipients" class="form-label">{{ $t("Recipients") }}</label>
<input id="signal-recipients" v-model="$parent.notification.signalRecipients" type="text" class="form-control" required> <input id="signal-recipients" v-model="$parent.notification.signalRecipients" type="text" class="form-control" required>
<div class="form-text"> <div class="form-text">
You need to have a signal client with REST API. <p style="margin-top: 8px;">
{{ $t("needSignalAPI") }}
</p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
You can check this url to view how to setup one: {{ $t("wayToCheckSignalURL") }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
@ -25,7 +27,7 @@
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
IMPORTANT: You cannot mix groups and numbers in recipients! {{ $t("signalImportant") }}
</p> </p>
</div> </div>
</div> </div>

28
src/components/notifications/Slack.vue
View File

@ -1,29 +1,29 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="slack-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label> <label for="slack-webhook-url" class="form-label">{{ $t("Webhook URL") }}<span style="color: red;"><sup>*</sup></span></label>
<input id="slack-webhook-url" v-model="$parent.notification.slackwebhookURL" type="text" class="form-control" required> <input id="slack-webhook-url" v-model="$parent.notification.slackwebhookURL" type="text" class="form-control" required>
<label for="slack-username" class="form-label">Username</label> <label for="slack-username" class="form-label">{{ $t("Username") }}</label>
<input id="slack-username" v-model="$parent.notification.slackusername" type="text" class="form-control"> <input id="slack-username" v-model="$parent.notification.slackusername" type="text" class="form-control">
<label for="slack-iconemo" class="form-label">Icon Emoji</label> <label for="slack-iconemo" class="form-label">{{ $t("Icon Emoji") }}</label>
<input id="slack-iconemo" v-model="$parent.notification.slackiconemo" type="text" class="form-control"> <input id="slack-iconemo" v-model="$parent.notification.slackiconemo" type="text" class="form-control">
<label for="slack-channel" class="form-label">Channel Name</label> <label for="slack-channel" class="form-label">{{ $t("Channel Name") }}</label>
<input id="slack-channel-name" v-model="$parent.notification.slackchannel" type="text" class="form-control"> <input id="slack-channel-name" v-model="$parent.notification.slackchannel" type="text" class="form-control">
<label for="slack-button-url" class="form-label">Uptime Kuma URL</label> <label for="slack-button-url" class="form-label">{{ $t("Uptime Kuma URL") }}</label>
<input id="slack-button" v-model="$parent.notification.slackbutton" type="text" class="form-control"> <input id="slack-button" v-model="$parent.notification.slackbutton" type="text" class="form-control">
<div class="form-text"> <div class="form-text">
<span style="color: red;"><sup>*</sup></span>Required <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
<i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
<a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a>
</i18n-t>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
More info about webhooks on: <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a> {{ $t("aboutChannelName", [$t("slack")]) }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
Enter the channel name on Slack Channel Name field if you want to bypass the webhook channel. Ex: #other-channel {{ $t("aboutKumaURL") }}
</p>
<p style="margin-top: 8px;">
If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.
</p>
<p style="margin-top: 8px;">
Emoji cheat sheet: <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
</p> </p>
<i18n-t tag="p" keypath="emojiCheatSheet" style="margin-top: 8px;">
<a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
</i18n-t>
</div> </div>
</div> </div>
</template> </template>

9
src/components/notifications/Teams.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="teams-webhookurl" class="form-label">Webhook URL</label> <label for="teams-webhookurl" class="form-label">{{ $t("Webhook URL") }}</label>
<input <input
id="teams-webhookurl" id="teams-webhookurl"
v-model="$parent.notification.webhookUrl" v-model="$parent.notification.webhookUrl"
@ -8,12 +8,11 @@
class="form-control" class="form-control"
required required
/> />
<div class="form-text"> <i18n-t tag="div" keypath="wayToGetTeamsURL" class="form-text">
You can learn how to create a webhook url
<a <a
href="https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook" href="https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook"
target="_blank" target="_blank"
>here</a>. >{{ $t("here") }}</a>
</div> </i18n-t>
</div> </div>
</template> </template>

16
src/components/notifications/Telegram.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="telegram-bot-token" class="form-label">Bot Token</label> <label for="telegram-bot-token" class="form-label">{{ $t("Bot Token") }}</label>
<HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput> <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
<div class="form-text"> <div class="form-text">
You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>. {{ $t("You can get a token from") }} <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="telegram-chat-id" class="form-label">Chat ID</label> <label for="telegram-chat-id" class="form-label">{{ $t("Chat ID") }}</label>
<div class="input-group mb-3"> <div class="input-group mb-3">
<input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required> <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
@ -18,10 +18,10 @@
</div> </div>
<div class="form-text"> <div class="form-text">
Support Direct Chat / Group / Channel's Chat ID {{ $t("supportTelegramChatID") }}
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
You can get your chat id by sending message to the bot and go to this url to view the chat_id: {{ $t("wayToGetTelegramChatID") }}
</p> </p>
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
@ -49,7 +49,7 @@ export default {
}, },
computed: { computed: {
telegramGetUpdatesURL() { telegramGetUpdatesURL() {
let token = "<YOUR BOT TOKEN HERE>" let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`
if (this.$parent.notification.telegramBotToken) { if (this.$parent.notification.telegramBotToken) {
token = this.$parent.notification.telegramBotToken; token = this.$parent.notification.telegramBotToken;
@ -71,11 +71,11 @@ export default {
} else if (update.message) { } else if (update.message) {
this.notification.telegramChatID = update.message.chat.id; this.notification.telegramChatID = update.message.chat.id;
} else { } else {
throw new Error("Chat ID is not found, please send a message to this bot first") throw new Error(this.$t("chatIDNotFound"))
} }
} else { } else {
throw new Error("Chat ID is not found, please send a message to this bot first") throw new Error(this.$t("chatIDNotFound"))
} }
} catch (error) { } catch (error) {

11
src/components/notifications/Webhook.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="mb-3"> <div class="mb-3">
<label for="webhook-url" class="form-label">Post URL</label> <label for="webhook-url" class="form-label">{{ $t("Post URL") }}</label>
<input id="webhook-url" v-model="$parent.notification.webhookURL" type="url" pattern="https?://.+" class="form-control" required> <input id="webhook-url" v-model="$parent.notification.webhookURL" type="url" pattern="https?://.+" class="form-control" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="webhook-content-type" class="form-label">Content Type</label> <label for="webhook-content-type" class="form-label">{{ $t("Content Type") }}</label>
<select id="webhook-content-type" v-model="$parent.notification.webhookContentType" class="form-select" required> <select id="webhook-content-type" v-model="$parent.notification.webhookContentType" class="form-select" required>
<option value="json"> <option value="json">
application/json application/json
@ -17,7 +17,12 @@
<div class="form-text"> <div class="form-text">
<p>"application/json" is good for any modern http servers such as express.js</p> <p>"application/json" is good for any modern http servers such as express.js</p>
<p>"multipart/form-data" is good for PHP, you just need to parse the json by <strong>json_decode($_POST['data'])</strong></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> </div>
</div> </div>
</template> </template>

2
src/i18n.js
View File

@ -1,4 +1,4 @@
import { createI18n } from "vue-i18n"; import { createI18n } from "vue-i18n/index";
import bgBG from "./languages/bg-BG"; import bgBG from "./languages/bg-BG";
import daDK from "./languages/da-DK"; import daDK from "./languages/da-DK";
import deDE from "./languages/de-DE"; import deDE from "./languages/de-DE";

63
src/languages/en.js
View File

@ -178,14 +178,59 @@ export default {
"Add a monitor": "Add a monitor", "Add a monitor": "Add a monitor",
"Edit Status Page": "Edit Status Page", "Edit Status Page": "Edit Status Page",
"Go to Dashboard": "Go to Dashboard", "Go to Dashboard": "Go to Dashboard",
telegram: "Telegram", "Status Page": "Status Page",
webhook: "Webhook", // Start notification form
smtp: "Email (SMTP)", defaultNotificationName: "My {notification} Alert ({number})",
discord: "Discord", here: "here",
teams: "Microsoft Teams", "Required": "Required",
signal: "Signal", "telegram": "Telegram",
gotify: "Gotify", "Bot Token": "Bot Token",
slack: "Slack", "You can get a token from": "You can get a token from",
"Chat ID": "Chat ID",
supportTelegramChatID: "Support Direct Chat / Group / Channel's Chat ID",
wayToGetTelegramChatID: "You can get your chat id by sending message to the bot and go to this url to view the chat_id:",
"YOUR BOT TOKEN HERE": "YOUR BOT TOKEN HERE",
chatIDNotFound: "Chat ID is not found, please send a message to this bot first",
"webhook": "Webhook",
"Post URL": "Post URL",
"Content Type": "Content Type",
webhookJsonDesc: "{0} is good for any modern http servers such as express.js",
webhookFormDataDesc: "{multipart} is good for PHP, you just need to parse the json by {decodeFunction}",
"smtp": "Email (SMTP)",
secureOptionNone: "None / STARTTLS (25, 587)",
secureOptionTLS: "TLS (465)",
"Ignore TLS Error": "Ignore TLS Error",
"From Email": "From Email",
"To Email": "To Email",
smtpCC: "CC",
smtpBCC: "BCC",
"discord": "Discord",
"Discord Webhook URL": "Discord Webhook URL",
wayToGetDiscordURL: "You can get this by going to Server Settings -> Integrations -> Create Webhook",
"Bot Display Name": "Bot Display Name",
"Prefix Custom Message": "Prefix Custom Message",
"Hello @everyone is...": "Hello {'@'}everyone is...",
"teams": "Microsoft Teams",
"Webhook URL": "Webhook URL",
wayToGetTeamsURL: "You can learn how to create a webhook url {0}.",
"signal": "Signal",
"Number": "Number",
"Recipients": "Recipients",
needSignalAPI: "You need to have a signal client with REST API.",
wayToCheckSignalURL: "You can check this url to view how to setup one:",
signalImportant: "IMPORTANT: You cannot mix groups and numbers in recipients!",
"gotify": "Gotify",
"Application Token": "Application Token",
"Server URL": "Server URL",
"Priority": "Priority",
"slack": "Slack",
"Icon Emoji": "Icon Emoji",
"Channel Name": "Channel Name",
"Uptime Kuma URL": "Uptime Kuma URL",
aboutWebhooks: "More info about webhooks on: {0}",
aboutChannelName: "Enter the channel name on {0} Channel Name field if you want to bypass the webhook channel. Ex: #other-channel",
aboutKumaURL: "If you leave the Uptime Kuma URL field blank, it will default to the Project Github page.",
emojiCheatSheet: "Emoji cheat sheet: {0}",
"rocket.chat": "Rocket.chat", "rocket.chat": "Rocket.chat",
pushover: "Pushover", pushover: "Pushover",
pushy: "Pushy", pushy: "Pushy",
@ -195,5 +240,5 @@ export default {
pushbullet: "Pushbullet", pushbullet: "Pushbullet",
line: "Line Messenger", line: "Line Messenger",
mattermost: "Mattermost", mattermost: "Mattermost",
"Status Page": "Status Page", // End notification form
}; };