7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-09 13:14:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into DeeJayPee_master

Browse Source
This commit is contained in:
LouisLam
2021-10-08 01:27:06 +08:00
parent 044c78aa2d 7907c07034
commit 5b4af550fb
68 changed files with 1622 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/HeartbeatBar.vue
View File

@@ -38,7 +38,7 @@ export default {
beatMargin: 4,
move: false,
maxBeat: -1,
};
}
},
computed: {
@@ -69,12 +69,12 @@ export default {
if (start < 0) {
// Add empty placeholder
for (let i = start; i < 0; i++) {
placeholders.push(0);
placeholders.push(0)
}
start = 0;
}
return placeholders.concat(this.beatList.slice(start));
return placeholders.concat(this.beatList.slice(start))
},
wrapStyle() {
@@ -84,7 +84,7 @@ export default {
return {
padding: `${topBottom}px ${leftRight}px`,
width: "100%",
};
}
},
barStyle() {
@@ -94,12 +94,12 @@ export default {
return {
transition: "all ease-in-out 0.25s",
transform: `translateX(${width}px)`,
};
}
}
return {
transform: "translateX(0)",
};
}
},
@@ -109,7 +109,7 @@ export default {
height: this.beatHeight + "px",
margin: this.beatMargin + "px",
"--hover-scale": this.hoverScale,
};
}
},
},
@@ -120,7 +120,7 @@ export default {
setTimeout(() => {
this.move = false;
}, 300);
}, 300)
},
deep: true,
},
@@ -162,7 +162,7 @@ export default {
methods: {
resize() {
if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
}
},
@@ -170,7 +170,7 @@ export default {
return `${this.$root.datetime(beat.time)} - ${beat.msg}`;
}
},
};
}
</script>
<style lang="scss" scoped>
@@ -183,9 +183,6 @@ export default {
}
.hp-bar-big {
display: flex;
justify-content: flex-end;
.beat {
display: inline-block;
background-color: $primary;

17
src/components/MonitorList.vue
View File

@@ -3,10 +3,10 @@
<div class="list-header">
<div class="placeholder"></div>
<div class="search-wrapper">
<a v-if="!searchText" class="search-icon">
<a v-if="searchText == ''" class="search-icon">
<font-awesome-icon icon="search" />
</a>
<a v-if="searchText" class="search-icon" @click="clearSearchText">
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
</a>
<input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
@@ -19,21 +19,21 @@
<router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
<div class="row">
<div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar === 'bottom' || $root.userHeartbeatBar === 'none' }">
<div class="col-9 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
<div class="info">
<Uptime :monitor="item" type="24" :pill="true" />
<span class="ms-1">{{ item.name }}</span>
{{ item.name }}
</div>
<div class="tags">
<Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
<div v-show="$root.userHeartbeatBar === 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4 small-padding">
<div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
</div>
<div v-if="$root.userHeartbeatBar === 'bottom'" class="row">
<div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
<div class="col-12">
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
@@ -47,6 +47,7 @@
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Uptime from "../components/Uptime.vue";
import Tag from "../components/Tag.vue";
import { getMonitorRelativeURL } from "../util.ts";
export default {
components: {
@@ -95,7 +96,7 @@ export default {
// Simple filter by search text
// finds monitor name, tag name or tag value
if (this.searchText) {
if (this.searchText != "") {
const loweredSearchText = this.searchText.toLowerCase();
result = result.filter(monitor => {
return monitor.name.toLowerCase().includes(loweredSearchText)
@@ -109,7 +110,7 @@ export default {
},
methods: {
monitorURL(id) {
return "/dashboard/" + id;
return getMonitorRelativeURL(id);
},
clearSearchText() {
this.searchText = "";

56
src/components/NotificationDialog.vue
View File

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

20
src/components/TagsManager.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<h4 class="mb-3">{{ $t("Tags") }}</h4>
<div class="mb-3 p-1">
<h4 class="mt-5 mb-3">{{ $t("Tags") }}</h4>
<div v-if="selectedTags.length > 0" class="mb-2 p-1">
<tag
v-for="item in selectedTags"
:key="item.id"
@@ -124,8 +124,8 @@
import { Modal } from "bootstrap";
import VueMultiselect from "vue-multiselect";
import Tag from "../components/Tag.vue";
import { useToast } from "vue-toastification"
const toast = useToast()
import { useToast } from "vue-toastification";
const toast = useToast();
export default {
components: {
@@ -186,7 +186,7 @@ export default {
color: "#7C3AED" },
{ name: this.$t("Pink"),
color: "#DB2777" },
]
];
},
validateDraftTag() {
let nameInvalid = false;
@@ -227,7 +227,7 @@ export default {
invalid,
nameInvalid,
valueInvalid,
}
};
},
},
mounted() {
@@ -243,7 +243,7 @@ export default {
if (res.ok) {
this.existingTags = res.tags;
} else {
toast.error(res.msg)
toast.error(res.msg);
}
});
},
@@ -277,7 +277,7 @@ export default {
name: this.newDraftTag.select.name,
value: this.newDraftTag.value,
new: true,
})
});
}
} else {
// Add new Tag
@@ -286,7 +286,7 @@ export default {
name: this.newDraftTag.name.trim(),
value: this.newDraftTag.value,
new: true,
})
});
}
this.clearDraftTag();
},
@@ -348,7 +348,7 @@ export default {
if (tag.name == newTag.name && tag.color == newTag.color) {
tag.id = newTagResult.id;
}
})
});
} else {
tagId = newTag.id;
}

16
src/components/Uptime.vue
View File

@@ -22,33 +22,33 @@ export default {
return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
}
return this.$t("notAvailableShort");
return this.$t("notAvailableShort")
},
color() {
if (this.lastHeartBeat.status === 0) {
return "danger";
return "danger"
}
if (this.lastHeartBeat.status === 1) {
return "primary";
return "primary"
}
if (this.lastHeartBeat.status === 2) {
return "warning";
return "warning"
}
return "secondary";
return "secondary"
},
lastHeartBeat() {
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
return this.$root.lastHeartbeatList[this.monitor.id];
return this.$root.lastHeartbeatList[this.monitor.id]
}
return {
status: -1,
};
}
},
className() {
@@ -59,7 +59,7 @@ export default {
return "";
},
},
};
}
</script>
<style>

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

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

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

@@ -1,20 +1,19 @@
<template>
<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">
<div class="form-text">
You can get this by going to Server Settings -> Integrations -> Create Webhook
{{ $t("wayToGetDiscordURL") }}
</div>
</div>
<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">
</div>
<div class="mb-3">
<label for="discord-prefix-message" class="form-label">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...">
<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="$t('Hello @everyone is...')">
</div>
</template>

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

@@ -1,17 +1,17 @@
<template>
<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>
</div>
<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">
<input id="gotify-server-url" v-model="$parent.notification.gotifyserverurl" type="text" class="form-control" required>
</div>
</div>
<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">
</div>
</template>

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

@@ -1,21 +1,21 @@
<template>
<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>
</div>
<div class="form-text">
Line Developers Console - <b>Basic Settings</b>
</div>
<i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
<b>{{ $t("Basic Settings") }}</b>
</i18n-t>
<div class="mb-3" style="margin-top: 12px;">
<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>
</div>
<div class="form-text">
Line Developers Console - <b>Messaging API</b>
</div>
<div 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.
</div>
<i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
<b>{{ $t("Messaging API") }}</b>
</i18n-t>
<i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
<a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
</i18n-t>
</template>
<script>
@@ -25,5 +25,5 @@ export default {
components: {
HiddenInput,
},
}
};
</script>

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

@@ -1,9 +1,9 @@
<template>
<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>
<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>
</template>

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

@@ -1,32 +1,32 @@
<template>
<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>
<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">
<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">
<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">
<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">
<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;">
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 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 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;">
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.
{{ $t("aboutIconURL") }}
</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>
</template>

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

@@ -16,27 +16,27 @@
<input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required>
</div>
<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">
<option value="sms_premium">Premium (Fast - recommended for alerting)</option>
<option value="sms_low_cost">Low Cost (Slow, sometimes blocked by operator)</option>
<option value="sms_premium">{{ $t("octopushTypePremium") }}</option>
<option value="sms_low_cost">{{ $t("octopushTypeLowCost") }}</option>
</select>
<div class="form-text">
Check octopush prices <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>.
</div>
<i18n-t tag="div" keypath="Check octopush prices" class="form-text">
<a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>
</i18n-t>
</div>
<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>
</div>
<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">
</div>
<p 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>
</p>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
</i18n-t>
</template>
<script>
@@ -46,5 +46,5 @@ export default {
components: {
HiddenInput,
},
}
};
</script>

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

@@ -1,12 +1,12 @@
<template>
<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>
</div>
<p style="margin-top: 8px;">
More info on: <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
</p>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
</i18n-t>
</template>
<script>
@@ -16,5 +16,5 @@ export default {
components: {
HiddenInput,
},
}
};
</script>

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

@@ -1,14 +1,14 @@
<template>
<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>
<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>
<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">
<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">
<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">
<option>-2</option>
<option>-1</option>
@@ -16,7 +16,7 @@
<option>1</option>
<option>2</option>
</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">
<option>pushover</option>
<option>bike</option>
@@ -42,15 +42,15 @@
<option>none</option>
</select>
<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;">
More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
{{ $t("pushoverDesc1") }}
</p>
<p style="margin-top: 8px;">
Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour.
</p>
<p style="margin-top: 8px;">
If you want to send notifications to different devices, fill out Device field.
{{ $t("pushoverDesc2") }}
</p>
</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>
</div>
</div>
<p 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>
</p>
<i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
<a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
</i18n-t>
</template>
<script>
@@ -22,5 +22,5 @@ export default {
components: {
HiddenInput,
},
}
};
</script>

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

@@ -1,29 +1,27 @@
<template>
<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>
<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">
<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">
<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">
<label for="rocket-button-url" class="form-label">Uptime Kuma URL</label>
<input id="rocket-button" v-model="$parent.notification.rocketbutton" type="text" class="form-control">
<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;">
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 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
</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>
{{ $t("aboutKumaURL") }}
</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>
</template>

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

@@ -12,8 +12,8 @@
<div class="mb-3">
<label for="secure" class="form-label">Secure</label>
<select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
<option :value="false">None / STARTTLS (25, 587)</option>
<option :value="true">TLS (465)</option>
<option :value="false">{{ $t("secureOptionNone") }}</option>
<option :value="true">{{ $t("secureOptionTLS") }}</option>
</select>
</div>
@@ -21,7 +21,7 @@
<div class="form-check">
<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">
Ignore TLS Error
{{ $t("Ignore TLS Error") }}
</label>
</div>
</div>
@@ -37,24 +37,24 @@
</div>
<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;">
<div class="form-text">
</div>
</div>
<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">
</div>
<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">
</div>
<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">
</div>
</template>

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

@@ -1,23 +1,25 @@
<template>
<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>
</div>
<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>
</div>
<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>
<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;">
You can check this url to view how to setup one:
{{ $t("wayToCheckSignalURL") }}
</p>
<p style="margin-top: 8px;">
@@ -25,7 +27,7 @@
</p>
<p style="margin-top: 8px;">
IMPORTANT: You cannot mix groups and numbers in recipients!
{{ $t("signalImportant") }}
</p>
</div>
</div>

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

@@ -1,29 +1,28 @@
<template>
<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>
<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">
<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">
<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">
<label for="slack-button-url" class="form-label">Uptime Kuma URL</label>
<input id="slack-button" v-model="$parent.notification.slackbutton" type="text" class="form-control">
<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;">
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 style="margin-top: 8px;">
Enter the channel name on Slack Channel Name field if you want to bypass the webhook channel. Ex: #other-channel
</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>
{{ $t("aboutKumaURL") }}
</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>
</template>

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

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

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

@@ -1,14 +1,14 @@
<template>
<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>
<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 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">
<input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
@@ -18,10 +18,10 @@
</div>
<div class="form-text">
Support Direct Chat / Group / Channel's Chat ID
{{ $t("supportTelegramChatID") }}
<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 style="margin-top: 8px;">
@@ -49,7 +49,7 @@ export default {
},
computed: {
telegramGetUpdatesURL() {
let token = "<YOUR BOT TOKEN HERE>"
let token = `<${this.$t("YOUR BOT TOKEN HERE")}>`
if (this.$parent.notification.telegramBotToken) {
token = this.$parent.notification.telegramBotToken;
@@ -71,11 +71,11 @@ export default {
} else if (update.message) {
this.notification.telegramChatID = update.message.chat.id;
} else {
throw new Error("Chat ID is not found, please send a message to this bot first")
throw new Error(this.$t("chatIDNotFound"))
}
} 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) {

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

@@ -1,11 +1,11 @@
<template>
<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>
</div>
<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>
<option value="json">
application/json
@@ -17,7 +17,12 @@
<div class="form-text">
<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>
</template>