mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-20 21:24:44 -05:00
Merge pull request #427 from zsxeee/notification_component
chore(NotificationDialog): Convert notification form to separate component
This commit is contained in:
Louis Lam
GitHub
commit
55cb497301
@ -13,23 +13,7 @@
|
|||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
|
<label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
|
||||||
<select id="notification-type" v-model="notification.type" class="form-select">
|
<select id="notification-type" v-model="notification.type" class="form-select">
|
||||||
<option value="telegram">Telegram</option>
|
<option v-for="type in notificationTypes" :key="type" :value="type">{{ $t(type) }}</option>
|
||||||
<option value="webhook">Webhook</option>
|
|
||||||
<option value="smtp">{{ $t("Email") }} (SMTP)</option>
|
|
||||||
<option value="discord">Discord</option>
|
|
||||||
<option value="teams">Microsoft Teams</option>
|
|
||||||
<option value="signal">Signal</option>
|
|
||||||
<option value="gotify">Gotify</option>
|
|
||||||
<option value="slack">Slack</option>
|
|
||||||
<option value="rocket.chat">Rocket.chat</option>
|
|
||||||
<option value="pushover">Pushover</option>
|
|
||||||
<option value="pushy">Pushy</option>
|
|
||||||
<option value="octopush">Octopush</option>
|
|
||||||
<option value="lunasea">LunaSea</option>
|
|
||||||
<option value="apprise">Apprise (Support 50+ Notification services)</option>
|
|
||||||
<option value="pushbullet">Pushbullet</option>
|
|
||||||
<option value="line">Line Messenger</option>
|
|
||||||
<option value="mattermost">Mattermost</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -38,370 +22,8 @@
|
|||||||
<input id="notification-name" v-model="notification.name" type="text" class="form-control" required>
|
<input id="notification-name" v-model="notification.name" type="text" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Telegram v-if="notification.type === 'telegram'" />
|
<!-- form body -->
|
||||||
|
<component :is="currentForm" />
|
||||||
<!-- TODO: Convert all into vue components, but not an easy task. -->
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'webhook'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="webhook-url" class="form-label">Post URL</label>
|
|
||||||
<input id="webhook-url" v-model="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>
|
|
||||||
<select id="webhook-content-type" v-model="notification.webhookContentType" class="form-select" required>
|
|
||||||
<option value="json">
|
|
||||||
application/json
|
|
||||||
</option>
|
|
||||||
<option value="form-data">
|
|
||||||
multipart/form-data
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<SMTP v-if="notification.type === 'smtp'" />
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'discord'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
|
|
||||||
<input id="discord-webhook-url" v-model="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
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="discord-username" class="form-label">Bot Display Name</label>
|
|
||||||
<input id="discord-username" v-model="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="notification.discordPrefixMessage" type="text" class="form-control" autocomplete="false" placeholder="Hello @everyone is...">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'signal'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="signal-url" class="form-label">Post URL</label>
|
|
||||||
<input id="signal-url" v-model="notification.signalURL" type="url" pattern="https?://.+" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="signal-number" class="form-label">Number</label>
|
|
||||||
<input id="signal-number" v-model="notification.signalNumber" type="text" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="signal-recipients" class="form-label">Recipients</label>
|
|
||||||
<input id="signal-recipients" v-model="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;">
|
|
||||||
You can check this url to view how to setup one:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p style="margin-top: 8px;">
|
|
||||||
<a href="https://github.com/bbernhard/signal-cli-rest-api" target="_blank">https://github.com/bbernhard/signal-cli-rest-api</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p style="margin-top: 8px;">
|
|
||||||
IMPORTANT: You cannot mix groups and numbers in recipients!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'gotify'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="gotify-application-token" class="form-label">Application Token</label>
|
|
||||||
<HiddenInput id="gotify-application-token" v-model="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>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input id="gotify-server-url" v-model="notification.gotifyserverurl" type="text" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="gotify-priority" class="form-label">Priority</label>
|
|
||||||
<input id="gotify-priority" v-model="notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'slack'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="slack-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
|
|
||||||
<input id="slack-webhook-url" v-model="notification.slackwebhookURL" type="text" class="form-control" required>
|
|
||||||
<label for="slack-username" class="form-label">Username</label>
|
|
||||||
<input id="slack-username" v-model="notification.slackusername" type="text" class="form-control">
|
|
||||||
<label for="slack-iconemo" class="form-label">Icon Emoji</label>
|
|
||||||
<input id="slack-iconemo" v-model="notification.slackiconemo" type="text" class="form-control">
|
|
||||||
<label for="slack-channel" class="form-label">Channel Name</label>
|
|
||||||
<input id="slack-channel-name" v-model="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="notification.slackbutton" type="text" class="form-control">
|
|
||||||
<div class="form-text">
|
|
||||||
<span style="color: red;"><sup>*</sup></span>Required
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'rocket.chat'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="rocket-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
|
|
||||||
<input id="rocket-webhook-url" v-model="notification.rocketwebhookURL" type="text" class="form-control" required>
|
|
||||||
<label for="rocket-username" class="form-label">Username</label>
|
|
||||||
<input id="rocket-username" v-model="notification.rocketusername" type="text" class="form-control">
|
|
||||||
<label for="rocket-iconemo" class="form-label">Icon Emoji</label>
|
|
||||||
<input id="rocket-iconemo" v-model="notification.rocketiconemo" type="text" class="form-control">
|
|
||||||
<label for="rocket-channel" class="form-label">Channel Name</label>
|
|
||||||
<input id="rocket-channel-name" v-model="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="notification.rocketbutton" type="text" class="form-control">
|
|
||||||
<div class="form-text">
|
|
||||||
<span style="color: red;"><sup>*</sup></span>Required
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'mattermost'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="mattermost-webhook-url" class="form-label">Webhook URL<span style="color:red;"><sup>*</sup></span></label>
|
|
||||||
<input id="mattermost-webhook-url" v-model="notification.mattermostWebhookUrl" type="text" class="form-control" required>
|
|
||||||
<label for="mattermost-username" class="form-label">Username</label>
|
|
||||||
<input id="mattermost-username" v-model="notification.mattermostusername" type="text" class="form-control">
|
|
||||||
<label for="mattermost-iconurl" class="form-label">Icon URL</label>
|
|
||||||
<input id="mattermost-iconurl" v-model="notification.mattermosticonurl" type="text" class="form-control">
|
|
||||||
<label for="mattermost-iconemo" class="form-label">Icon Emoji</label>
|
|
||||||
<input id="mattermost-iconemo" v-model="notification.mattermosticonemo" type="text" class="form-control">
|
|
||||||
<label for="mattermost-channel" class="form-label">Channel Name</label>
|
|
||||||
<input id="mattermost-channel-name" v-model="notification.mattermostchannel" type="text" class="form-control">
|
|
||||||
<div class="form-text">
|
|
||||||
<span style="color:red;"><sup>*</sup></span>Required
|
|
||||||
<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>
|
|
||||||
</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
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'pushy'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="pushy-app-token" class="form-label">API_KEY</label>
|
|
||||||
<HiddenInput id="pushy-app-token" v-model="notification.pushyAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="pushy-user-key" class="form-label">USER_TOKEN</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<HiddenInput id="pushy-user-key" v-model="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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'octopush'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="octopush-key" class="form-label">API KEY</label>
|
|
||||||
<HiddenInput id="octopush-key" v-model="notification.octopushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
|
|
||||||
<label for="octopush-login" class="form-label">API LOGIN</label>
|
|
||||||
<input id="octopush-login" v-model="notification.octopushLogin" type="text" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="octopush-type-sms" class="form-label">SMS Type</label>
|
|
||||||
<select id="octopush-type-sms" v-model="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>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="octopush-phone-number" class="form-label">Phone number (intl format, eg : +33612345678) </label>
|
|
||||||
<input id="octopush-phone-number" v-model="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>
|
|
||||||
<input id="octopush-sender-name" v-model="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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'pushover'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="pushover-user" class="form-label">User Key<span style="color: red;"><sup>*</sup></span></label>
|
|
||||||
<HiddenInput id="pushover-user" v-model="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>
|
|
||||||
<HiddenInput id="pushover-app-token" v-model="notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput>
|
|
||||||
<label for="pushover-device" class="form-label">Device</label>
|
|
||||||
<input id="pushover-device" v-model="notification.pushoverdevice" type="text" class="form-control">
|
|
||||||
<label for="pushover-device" class="form-label">Message Title</label>
|
|
||||||
<input id="pushover-title" v-model="notification.pushovertitle" type="text" class="form-control">
|
|
||||||
<label for="pushover-priority" class="form-label">Priority</label>
|
|
||||||
<select id="pushover-priority" v-model="notification.pushoverpriority" class="form-select">
|
|
||||||
<option>-2</option>
|
|
||||||
<option>-1</option>
|
|
||||||
<option>0</option>
|
|
||||||
<option>1</option>
|
|
||||||
<option>2</option>
|
|
||||||
</select>
|
|
||||||
<label for="pushover-sound" class="form-label">Notification Sound</label>
|
|
||||||
<select id="pushover-sound" v-model="notification.pushoversounds" class="form-select">
|
|
||||||
<option>pushover</option>
|
|
||||||
<option>bike</option>
|
|
||||||
<option>bugle</option>
|
|
||||||
<option>cashregister</option>
|
|
||||||
<option>classical</option>
|
|
||||||
<option>cosmic</option>
|
|
||||||
<option>falling</option>
|
|
||||||
<option>gamelan</option>
|
|
||||||
<option>incoming</option>
|
|
||||||
<option>intermission</option>
|
|
||||||
<option>mechanical</option>
|
|
||||||
<option>pianobar</option>
|
|
||||||
<option>siren</option>
|
|
||||||
<option>spacealarm</option>
|
|
||||||
<option>tugboat</option>
|
|
||||||
<option>alien</option>
|
|
||||||
<option>climb</option>
|
|
||||||
<option>persistent</option>
|
|
||||||
<option>echo</option>
|
|
||||||
<option>updown</option>
|
|
||||||
<option>vibrate</option>
|
|
||||||
<option>none</option>
|
|
||||||
</select>
|
|
||||||
<div class="form-text">
|
|
||||||
<span style="color: red;"><sup>*</sup></span>Required
|
|
||||||
<p style="margin-top: 8px;">
|
|
||||||
More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
|
|
||||||
</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'apprise'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="apprise-url" class="form-label">Apprise URL</label>
|
|
||||||
<input id="apprise-url" v-model="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>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'lunasea'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color: red;"><sup>*</sup></span></label>
|
|
||||||
<input id="lunasea-device" v-model="notification.lunaseaDevice" type="text" class="form-control" required>
|
|
||||||
<div class="form-text">
|
|
||||||
<p><span style="color: red;"><sup>*</sup></span>Required</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'pushbullet'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="pushbullet-access-token" class="form-label">Access Token</label>
|
|
||||||
<HiddenInput id="pushbullet-access-token" v-model="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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="notification.type === 'line'">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="line-channel-access-token" class="form-label">Channel access token</label>
|
|
||||||
<HiddenInput id="line-channel-access-token" v-model="notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
|
|
||||||
</div>
|
|
||||||
<div class="form-text">
|
|
||||||
Line Developers Console - <b>Basic Settings</b>
|
|
||||||
</div>
|
|
||||||
<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="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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- DEPRECATED! Please create vue component in "./src/components/notifications/{notification name}.vue" -->
|
|
||||||
|
|
||||||
<Teams v-if="notification.type === 'teams'" />
|
|
||||||
|
|
||||||
<div class="mb-3 mt-4">
|
<div class="mb-3 mt-4">
|
||||||
<hr class="dropdown-divider mb-4">
|
<hr class="dropdown-divider mb-4">
|
||||||
@ -450,18 +72,11 @@ 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 HiddenInput from "./HiddenInput.vue";
|
import NotificationFormList from "./notifications"
|
||||||
import Telegram from "./notifications/Telegram.vue";
|
|
||||||
import Teams from "./notifications/Teams.vue";
|
|
||||||
import SMTP from "./notifications/SMTP.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Confirm,
|
Confirm,
|
||||||
HiddenInput,
|
|
||||||
Telegram,
|
|
||||||
Teams,
|
|
||||||
SMTP,
|
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
emits: ["added"],
|
emits: ["added"],
|
||||||
@ -470,13 +85,23 @@ export default {
|
|||||||
model: null,
|
model: null,
|
||||||
processing: false,
|
processing: false,
|
||||||
id: null,
|
id: null,
|
||||||
|
notificationTypes: Object.keys(NotificationFormList),
|
||||||
notification: {
|
notification: {
|
||||||
name: "",
|
name: "",
|
||||||
|
/** @type { null | keyof NotificationFormList } */
|
||||||
type: null,
|
type: null,
|
||||||
isDefault: false,
|
isDefault: false,
|
||||||
// Do not set default value here, please scroll to show()
|
// Do not set default value here, please scroll to show()
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
appriseInstalled: false,
|
|
||||||
|
computed: {
|
||||||
|
currentForm() {
|
||||||
|
if (!this.notification.type) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
return NotificationFormList[this.notification.type]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -497,10 +122,6 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.modal = new Modal(this.$refs.modal)
|
this.modal = new Modal(this.$refs.modal)
|
||||||
|
|
||||||
this.$root.getSocket().emit("checkApprise", (installed) => {
|
|
||||||
this.appriseInstalled = installed;
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
@ -528,9 +149,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Set Default value here
|
// Set Default value here
|
||||||
this.notification.type = "telegram";
|
this.notification.type = this.notificationTypes[0];
|
||||||
this.notification.gotifyPriority = 8;
|
|
||||||
this.notification.smtpSecure = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.modal.show()
|
this.modal.show()
|
||||||
|
|||||||
34
src/components/notifications/Apprise.vue
Normal file
34
src/components/notifications/Apprise.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="apprise-url" class="form-label">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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
appriseInstalled: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$root.getSocket().emit("checkApprise", (installed) => {
|
||||||
|
this.appriseInstalled = installed;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
20
src/components/notifications/Discord.vue
Normal file
20
src/components/notifications/Discord.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="discord-webhook-url" class="form-label">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
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="discord-username" class="form-label">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...">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
32
src/components/notifications/Gotify.vue
Normal file
32
src/components/notifications/Gotify.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="gotify-application-token" class="form-label">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>
|
||||||
|
<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>
|
||||||
|
<input id="gotify-priority" v-model="$parent.notification.gotifyPriority" type="number" class="form-control" required min="0" max="10" step="1">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HiddenInput from "../HiddenInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HiddenInput,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (typeof this.$parent.notification.gotifyPriority === "undefined") {
|
||||||
|
this.$parent.notification.gotifyPriority = 8;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
29
src/components/notifications/Line.vue
Normal file
29
src/components/notifications/Line.vue
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="line-channel-access-token" class="form-label">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>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HiddenInput from "../HiddenInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HiddenInput,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
9
src/components/notifications/LunaSea.vue
Normal file
9
src/components/notifications/LunaSea.vue
Normal file
@ -0,0 +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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
32
src/components/notifications/Mattermost.vue
Normal file
32
src/components/notifications/Mattermost.vue
Normal file
@ -0,0 +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>
|
||||||
|
<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>
|
||||||
|
<input id="mattermost-username" v-model="$parent.notification.mattermostusername" type="text" class="form-control">
|
||||||
|
<label for="mattermost-iconurl" class="form-label">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>
|
||||||
|
<input id="mattermost-iconemo" v-model="$parent.notification.mattermosticonemo" type="text" class="form-control">
|
||||||
|
<label for="mattermost-channel" class="form-label">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
|
||||||
|
<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>
|
||||||
|
</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
|
||||||
|
</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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
40
src/components/notifications/Octopush.vue
Normal file
40
src/components/notifications/Octopush.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="octopush-key" class="form-label">API KEY</label>
|
||||||
|
<HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
|
||||||
|
<label for="octopush-login" class="form-label">API LOGIN</label>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="octopush-phone-number" class="form-label">Phone number (intl format, eg : +33612345678) </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>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HiddenInput from "../HiddenInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HiddenInput,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
20
src/components/notifications/Pushbullet.vue
Normal file
20
src/components/notifications/Pushbullet.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="pushbullet-access-token" class="form-label">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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HiddenInput from "../HiddenInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HiddenInput,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
67
src/components/notifications/Pushover.vue
Normal file
67
src/components/notifications/Pushover.vue
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="pushover-user" class="form-label">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>
|
||||||
|
<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>
|
||||||
|
<input id="pushover-device" v-model="$parent.notification.pushoverdevice" type="text" class="form-control">
|
||||||
|
<label for="pushover-device" class="form-label">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>
|
||||||
|
<select id="pushover-priority" v-model="$parent.notification.pushoverpriority" class="form-select">
|
||||||
|
<option>-2</option>
|
||||||
|
<option>-1</option>
|
||||||
|
<option>0</option>
|
||||||
|
<option>1</option>
|
||||||
|
<option>2</option>
|
||||||
|
</select>
|
||||||
|
<label for="pushover-sound" class="form-label">Notification Sound</label>
|
||||||
|
<select id="pushover-sound" v-model="$parent.notification.pushoversounds" class="form-select">
|
||||||
|
<option>pushover</option>
|
||||||
|
<option>bike</option>
|
||||||
|
<option>bugle</option>
|
||||||
|
<option>cashregister</option>
|
||||||
|
<option>classical</option>
|
||||||
|
<option>cosmic</option>
|
||||||
|
<option>falling</option>
|
||||||
|
<option>gamelan</option>
|
||||||
|
<option>incoming</option>
|
||||||
|
<option>intermission</option>
|
||||||
|
<option>mechanical</option>
|
||||||
|
<option>pianobar</option>
|
||||||
|
<option>siren</option>
|
||||||
|
<option>spacealarm</option>
|
||||||
|
<option>tugboat</option>
|
||||||
|
<option>alien</option>
|
||||||
|
<option>climb</option>
|
||||||
|
<option>persistent</option>
|
||||||
|
<option>echo</option>
|
||||||
|
<option>updown</option>
|
||||||
|
<option>vibrate</option>
|
||||||
|
<option>none</option>
|
||||||
|
</select>
|
||||||
|
<div class="form-text">
|
||||||
|
<span style="color: red;"><sup>*</sup></span>Required
|
||||||
|
<p style="margin-top: 8px;">
|
||||||
|
More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
|
||||||
|
</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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HiddenInput from "../HiddenInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HiddenInput,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
26
src/components/notifications/Pushy.vue
Normal file
26
src/components/notifications/Pushy.vue
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="pushy-app-token" class="form-label">API_KEY</label>
|
||||||
|
<HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="pushy-user-key" class="form-label">USER_TOKEN</label>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HiddenInput from "../HiddenInput.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
HiddenInput,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
29
src/components/notifications/RocketChat.vue
Normal file
29
src/components/notifications/RocketChat.vue
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="rocket-webhook-url" class="form-label">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>
|
||||||
|
<input id="rocket-username" v-model="$parent.notification.rocketusername" type="text" class="form-control">
|
||||||
|
<label for="rocket-iconemo" class="form-label">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>
|
||||||
|
<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
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -66,9 +66,9 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
HiddenInput,
|
HiddenInput,
|
||||||
},
|
},
|
||||||
data() {
|
mounted() {
|
||||||
return {
|
if (typeof this.$parent.notification.smtpSecure === "undefined") {
|
||||||
name: "smtp",
|
this.$parent.notification.smtpSecure = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
32
src/components/notifications/Signal.vue
Normal file
32
src/components/notifications/Signal.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="signal-url" class="form-label">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>
|
||||||
|
<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>
|
||||||
|
<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;">
|
||||||
|
You can check this url to view how to setup one:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p style="margin-top: 8px;">
|
||||||
|
<a href="https://github.com/bbernhard/signal-cli-rest-api" target="_blank">https://github.com/bbernhard/signal-cli-rest-api</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p style="margin-top: 8px;">
|
||||||
|
IMPORTANT: You cannot mix groups and numbers in recipients!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
29
src/components/notifications/Slack.vue
Normal file
29
src/components/notifications/Slack.vue
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="slack-webhook-url" class="form-label">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>
|
||||||
|
<input id="slack-username" v-model="$parent.notification.slackusername" type="text" class="form-control">
|
||||||
|
<label for="slack-iconemo" class="form-label">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>
|
||||||
|
<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
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -17,13 +17,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
name: "teams",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -47,11 +47,6 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
HiddenInput,
|
HiddenInput,
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
name: "telegram",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
telegramGetUpdatesURL() {
|
telegramGetUpdatesURL() {
|
||||||
let token = "<YOUR BOT TOKEN HERE>"
|
let token = "<YOUR BOT TOKEN HERE>"
|
||||||
@ -62,9 +57,6 @@ export default {
|
|||||||
|
|
||||||
return `https://api.telegram.org/bot${token}/getUpdates`;
|
return `https://api.telegram.org/bot${token}/getUpdates`;
|
||||||
},
|
},
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async autoGetTelegramChatID() {
|
async autoGetTelegramChatID() {
|
||||||
|
|||||||
23
src/components/notifications/Webhook.vue
Normal file
23
src/components/notifications/Webhook.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="webhook-url" class="form-label">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>
|
||||||
|
<select id="webhook-content-type" v-model="$parent.notification.webhookContentType" class="form-select" required>
|
||||||
|
<option value="json">
|
||||||
|
application/json
|
||||||
|
</option>
|
||||||
|
<option value="form-data">
|
||||||
|
multipart/form-data
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
44
src/components/notifications/index.js
Normal file
44
src/components/notifications/index.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import STMP from "./SMTP.vue"
|
||||||
|
import Telegram from "./Telegram.vue";
|
||||||
|
import Discord from "./Discord.vue";
|
||||||
|
import Webhook from "./Webhook.vue";
|
||||||
|
import Signal from "./Signal.vue";
|
||||||
|
import Gotify from "./Gotify.vue";
|
||||||
|
import Slack from "./Slack.vue";
|
||||||
|
import RocketChat from "./RocketChat.vue";
|
||||||
|
import Teams from "./Teams.vue";
|
||||||
|
import Pushover from "./Pushover.vue";
|
||||||
|
import Pushy from "./Pushy.vue";
|
||||||
|
import Octopush from "./Octopush.vue";
|
||||||
|
import LunaSea from "./LunaSea.vue";
|
||||||
|
import Apprise from "./Apprise.vue";
|
||||||
|
import Pushbullet from "./Pushbullet.vue";
|
||||||
|
import Line from "./Line.vue";
|
||||||
|
import Mattermost from "./Mattermost.vue";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Manage all notification form.
|
||||||
|
*
|
||||||
|
* @type { Record<string, any> }
|
||||||
|
*/
|
||||||
|
const NotificationFormList = {
|
||||||
|
"telegram": Telegram,
|
||||||
|
"webhook": Webhook,
|
||||||
|
"smtp": STMP,
|
||||||
|
"discord": Discord,
|
||||||
|
"teams": Teams,
|
||||||
|
"signal": Signal,
|
||||||
|
"gotify": Gotify,
|
||||||
|
"slack": Slack,
|
||||||
|
"rocket.chat": RocketChat,
|
||||||
|
"pushover": Pushover,
|
||||||
|
"pushy": Pushy,
|
||||||
|
"octopush": Octopush,
|
||||||
|
"lunasea": LunaSea,
|
||||||
|
"apprise": Apprise,
|
||||||
|
"pushbullet": Pushbullet,
|
||||||
|
"line": Line,
|
||||||
|
"mattermost": Mattermost
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotificationFormList
|
||||||
@ -178,4 +178,21 @@ 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",
|
||||||
|
"webhook": "Webhook",
|
||||||
|
"smtp": "Email (SMTP)",
|
||||||
|
"discord": "Discord",
|
||||||
|
"teams": "Microsoft Teams",
|
||||||
|
"signal": "Signal",
|
||||||
|
"gotify": "Gotify",
|
||||||
|
"slack": "Slack",
|
||||||
|
"rocket.chat": "Rocket.chat",
|
||||||
|
"pushover": "Pushover",
|
||||||
|
"pushy": "Pushy",
|
||||||
|
"octopush": "Octopush",
|
||||||
|
"lunasea": "LunaSea",
|
||||||
|
"apprise": "Apprise (Support 50+ Notification services)",
|
||||||
|
"pushbullet": "Pushbullet",
|
||||||
|
"line": "Line Messenger",
|
||||||
|
"mattermost": "Mattermost",
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user