From e9735d239b4605d65ca5c39c15fff993edd938d4 Mon Sep 17 00:00:00 2001
From: zsxeee <zsxeee@qq.com>
Date: Fri, 17 Sep 2021 16:07:03 +0800
Subject: [PATCH] Convert notification form to separate component

---
 src/components/NotificationDialog.vue       | 398 +-------------------
 src/components/notifications/Apprise.vue    |  30 ++
 src/components/notifications/Discord.vue    |  30 ++
 src/components/notifications/Gotify.vue     |  32 ++
 src/components/notifications/Line.vue       |  34 ++
 src/components/notifications/LunaSea.vue    |  19 +
 src/components/notifications/Mattermost.vue |  42 +++
 src/components/notifications/Octopush.vue   |  45 +++
 src/components/notifications/Pushbullet.vue |  25 ++
 src/components/notifications/Pushover.vue   |  72 ++++
 src/components/notifications/Pushy.vue      |  31 ++
 src/components/notifications/RocketChat.vue |  39 ++
 src/components/notifications/Signal.vue     |  42 +++
 src/components/notifications/Slack.vue      |  39 ++
 src/components/notifications/Webhook.vue    |  37 ++
 src/components/notifications/index.js       |  44 +++
 src/languages/en.js                         |  17 +
 17 files changed, 594 insertions(+), 382 deletions(-)
 create mode 100644 src/components/notifications/Apprise.vue
 create mode 100644 src/components/notifications/Discord.vue
 create mode 100644 src/components/notifications/Gotify.vue
 create mode 100644 src/components/notifications/Line.vue
 create mode 100644 src/components/notifications/LunaSea.vue
 create mode 100644 src/components/notifications/Mattermost.vue
 create mode 100644 src/components/notifications/Octopush.vue
 create mode 100644 src/components/notifications/Pushbullet.vue
 create mode 100644 src/components/notifications/Pushover.vue
 create mode 100644 src/components/notifications/Pushy.vue
 create mode 100644 src/components/notifications/RocketChat.vue
 create mode 100644 src/components/notifications/Signal.vue
 create mode 100644 src/components/notifications/Slack.vue
 create mode 100644 src/components/notifications/Webhook.vue
 create mode 100644 src/components/notifications/index.js

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index 220ff8d71..c26990f89 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -13,23 +13,7 @@
                         <div class="mb-3">
                             <label for="notification-type" class="form-label">{{ $t("Notification Type") }}</label>
                             <select id="notification-type" v-model="notification.type" class="form-select">
-                                <option value="telegram">Telegram</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>
+                                <option v-for="type in notificationTypes" :value="type">{{ $t(type) }}</option>
                             </select>
                         </div>
 
@@ -38,370 +22,8 @@
                             <input id="notification-name" v-model="notification.name" type="text" class="form-control" required>
                         </div>
 
-                        <Telegram v-if="notification.type === 'telegram'" />
-
-                        <!-- 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'" />
+                        <!-- form body -->
+                        <component :is="currentForm" />
 
                         <div class="mb-3 mt-4">
                             <hr class="dropdown-divider mb-4">
@@ -454,6 +76,7 @@ import HiddenInput from "./HiddenInput.vue";
 import Telegram from "./notifications/Telegram.vue";
 import Teams from "./notifications/Teams.vue";
 import SMTP from "./notifications/SMTP.vue";
+import NotificationForm from "./notifications"
 
 export default {
     components: {
@@ -470,8 +93,10 @@ export default {
             model: null,
             processing: false,
             id: null,
+            notificationTypes: Object.keys(NotificationForm),
             notification: {
                 name: "",
+                /** @type { null | keyof NotificationForm } */
                 type: null,
                 isDefault: false,
                 // Do not set default value here, please scroll to show()
@@ -480,6 +105,15 @@ export default {
         }
     },
 
+    computed: {
+        currentForm() {
+            if (!this.notification.type) {
+                return null
+            }
+            return NotificationForm[this.notification.type]
+        }
+    },
+
     watch: {
         "notification.type"(to, from) {
             let oldName;
@@ -528,7 +162,7 @@ export default {
                 }
 
                 // Set Default value here
-                this.notification.type = "telegram";
+                this.notification.type = this.notificationTypes[0];
                 this.notification.gotifyPriority = 8;
                 this.notification.smtpSecure = false;
             }
diff --git a/src/components/notifications/Apprise.vue b/src/components/notifications/Apprise.vue
new file mode 100644
index 000000000..b9d2a94b5
--- /dev/null
+++ b/src/components/notifications/Apprise.vue
@@ -0,0 +1,30 @@
+<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:
+            <!-- TODO: appriseInstalled -->
+            <span v-if="$parent.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 {
+            name: "apprise",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Discord.vue b/src/components/notifications/Discord.vue
new file mode 100644
index 000000000..3d4869edd
--- /dev/null
+++ b/src/components/notifications/Discord.vue
@@ -0,0 +1,30 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "discord",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Gotify.vue b/src/components/notifications/Gotify.vue
new file mode 100644
index 000000000..600b5e48a
--- /dev/null
+++ b/src/components/notifications/Gotify.vue
@@ -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,
+    },
+    data() {
+        return {
+            name: "gotify",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Line.vue b/src/components/notifications/Line.vue
new file mode 100644
index 000000000..2468875b7
--- /dev/null
+++ b/src/components/notifications/Line.vue
@@ -0,0 +1,34 @@
+<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,
+    },
+    data() {
+        return {
+            name: "line",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/LunaSea.vue b/src/components/notifications/LunaSea.vue
new file mode 100644
index 000000000..efa103fb7
--- /dev/null
+++ b/src/components/notifications/LunaSea.vue
@@ -0,0 +1,19 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "lunasea",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Mattermost.vue b/src/components/notifications/Mattermost.vue
new file mode 100644
index 000000000..79ff23bb2
--- /dev/null
+++ b/src/components/notifications/Mattermost.vue
@@ -0,0 +1,42 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "mattermost",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Octopush.vue b/src/components/notifications/Octopush.vue
new file mode 100644
index 000000000..94c5783b4
--- /dev/null
+++ b/src/components/notifications/Octopush.vue
@@ -0,0 +1,45 @@
+<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,
+    },
+    data() {
+        return {
+            name: "octopush",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Pushbullet.vue b/src/components/notifications/Pushbullet.vue
new file mode 100644
index 000000000..8eddb9fb7
--- /dev/null
+++ b/src/components/notifications/Pushbullet.vue
@@ -0,0 +1,25 @@
+<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,
+    },
+    data() {
+        return {
+            name: "pushbullet",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Pushover.vue b/src/components/notifications/Pushover.vue
new file mode 100644
index 000000000..ff29a4066
--- /dev/null
+++ b/src/components/notifications/Pushover.vue
@@ -0,0 +1,72 @@
+<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,
+    },
+    data() {
+        return {
+            name: "pushover",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Pushy.vue b/src/components/notifications/Pushy.vue
new file mode 100644
index 000000000..752f16952
--- /dev/null
+++ b/src/components/notifications/Pushy.vue
@@ -0,0 +1,31 @@
+<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,
+    },
+    data() {
+        return {
+            name: "pushy",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/RocketChat.vue b/src/components/notifications/RocketChat.vue
new file mode 100644
index 000000000..50c21b20e
--- /dev/null
+++ b/src/components/notifications/RocketChat.vue
@@ -0,0 +1,39 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "rocket.chat",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Signal.vue b/src/components/notifications/Signal.vue
new file mode 100644
index 000000000..f68b6dfed
--- /dev/null
+++ b/src/components/notifications/Signal.vue
@@ -0,0 +1,42 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "signal",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Slack.vue b/src/components/notifications/Slack.vue
new file mode 100644
index 000000000..c1b4f7c01
--- /dev/null
+++ b/src/components/notifications/Slack.vue
@@ -0,0 +1,39 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "slack",
+        }
+    },
+}
+</script>
diff --git a/src/components/notifications/Webhook.vue b/src/components/notifications/Webhook.vue
new file mode 100644
index 000000000..002a2d507
--- /dev/null
+++ b/src/components/notifications/Webhook.vue
@@ -0,0 +1,37 @@
+<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>
+
+<script>
+export default {
+    data() {
+        return {
+            name: "webhook",
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/components/notifications/index.js b/src/components/notifications/index.js
new file mode 100644
index 000000000..50716f14b
--- /dev/null
+++ b/src/components/notifications/index.js
@@ -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 NotificationForm = {
+    "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 NotificationForm
diff --git a/src/languages/en.js b/src/languages/en.js
index 1971f6f6d..bb0f50b9b 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -167,4 +167,21 @@ export default {
     Purple: "Purple",
     Pink: "Pink",
     "Search...": "Search...",
+    "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",
 }