topaLE
/
uptime-kuma
1
0
Fork 0
Code Issues 185 Pull Requests 26 Projects Releases 28 Wiki Activity
Browse Source

Merge pull request #451 from zsxeee/notification_form_i18n 

Notification form i18n
pull/589/head^2
Louis Lam 3 years ago
committed by GitHub
parent
3e1788983e 7f1edb49bc
commit
8c63536eb8
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 322 additions and 257 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 170
      package-lock.json
  2. 2
      package.json
  3. 56
      src/components/NotificationDialog.vue
  4. 27
      src/components/notifications/Apprise.vue
  5. 11
      src/components/notifications/Discord.vue
  6. 6
      src/components/notifications/Gotify.vue
  7. 22
      src/components/notifications/Line.vue
  8. 4
      src/components/notifications/LunaSea.vue
  9. 30
      src/components/notifications/Mattermost.vue
  10. 24
      src/components/notifications/Octopush.vue
  11. 10
      src/components/notifications/Pushbullet.vue
  12. 24
      src/components/notifications/Pushover.vue
  13. 8
      src/components/notifications/Pushy.vue
  14. 28
      src/components/notifications/RocketChat.vue
  15. 14
      src/components/notifications/SMTP.vue
  16. 14
      src/components/notifications/Signal.vue
  17. 28
      src/components/notifications/Slack.vue
  18. 9
      src/components/notifications/Teams.vue
  19. 16
      src/components/notifications/Telegram.vue
  20. 11
      src/components/notifications/Webhook.vue
  21. 2
      src/i18n.js
  22. 63
      src/languages/en.js

170
package-lock.json
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
}; };

Write Preview
Loading…
Cancel
Save