feat(notifications): Webhook Notifications (#632)

overseerr-api.yml

@@ -864,6 +864,22 @@ components:
           properties:
             webhookUrl:
               type: string
+    WebhookSettings:
+      type: object
+      properties:
+        enabled:
+          type: boolean
+          example: false
+        types:
+          type: number
+          example: 2
+        options:
+          type: object
+          properties:
+            webhookUrl:
+              type: string
+            jsonPayload:
+              type: string
     TelegramSettings:
       type: object
       properties:
@@ -1841,6 +1857,52 @@ paths:
       responses:
         '204':
           description: Test notification attempted
+  /settings/notifications/webhook:
+    get:
+      summary: Return current webhook notification settings
+      description: Returns current webhook notification settings in JSON format
+      tags:
+        - settings
+      responses:
+        '200':
+          description: Returned webhook settings
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/WebhookSettings'
+    post:
+      summary: Update webhook notification settings
+      description: Update current webhook notification settings with provided values
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/WebhookSettings'
+      responses:
+        '200':
+          description: 'Values were sucessfully updated'
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/WebhookSettings'
+  /settings/notifications/webhook/test:
+    post:
+      summary: Test the provided slack settings
+      description: Sends a test notification to the slack agent
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SlackSettings'
+      responses:
+        '204':
+          description: Test notification attempted
   /settings/about:
     get:
       summary: Return current about stats

package.json

@@ -18,6 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "@svgr/webpack": "^5.5.0",
+    "ace-builds": "^1.4.12",
     "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "bowser": "^2.11.0",
@@ -37,6 +38,7 @@
     "plex-api": "^5.3.1",
     "pug": "^3.0.0",
     "react": "17.0.1",
+    "react-ace": "^9.2.1",
     "react-dom": "17.0.1",
     "react-intersection-observer": "^8.31.0",
     "react-intl": "^5.10.11",

server/index.ts

@@ -21,6 +21,7 @@ import TelegramAgent from './lib/notifications/agents/telegram';
 import { getAppVersion } from './utils/appVersion';
 import SlackAgent from './lib/notifications/agents/slack';
 import PushoverAgent from './lib/notifications/agents/pushover';
+import WebhookAgent from './lib/notifications/agents/webhook';
 
 const API_SPEC_PATH = path.join(__dirname, '../overseerr-api.yml');
 
@@ -51,6 +52,7 @@ app
       new SlackAgent(),
       new TelegramAgent(),
       new PushoverAgent(),
+      new WebhookAgent(),
     ]);
 
     // Start Jobs
@@ -98,7 +100,6 @@ app
       };
       next();
     });
-
     server.use('/api/v1', routes);
     server.get('*', (req, res) => handle(req, res));
     server.use(

server/lib/notifications/agents/webhook.ts

@@ -0,0 +1,139 @@
+import axios from 'axios';
+import { get } from 'lodash';
+import { hasNotificationType, Notification } from '..';
+import { MediaStatus } from '../../../constants/media';
+import logger from '../../../logger';
+import { getSettings, NotificationAgentWebhook } from '../../settings';
+import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+
+type KeyMapFunction = (
+  payload: NotificationPayload,
+  type: Notification
+) => string;
+
+const KeyMap: Record<string, string | KeyMapFunction> = {
+  notification_type: (_payload, type) => Notification[type],
+  subject: 'subject',
+  message: 'message',
+  image: 'image',
+  notifyuser_username: 'notifyUser.username',
+  notifyuser_email: 'notifyUser.email',
+  notifyuser_avatar: 'notifyUser.avatar',
+  media_tmdbid: 'media.tmdbId',
+  media_imdbid: 'media.imdbId',
+  media_tvdbid: 'media.tvdbId',
+  media_type: 'media.mediaType',
+  media_status: (payload) =>
+    payload.media?.status ? MediaStatus[payload.media?.status] : '',
+  media_status4k: (payload) =>
+    payload.media?.status ? MediaStatus[payload.media?.status4k] : '',
+};
+
+class WebhookAgent
+  extends BaseAgent<NotificationAgentWebhook>
+  implements NotificationAgent {
+  protected getSettings(): NotificationAgentWebhook {
+    if (this.settings) {
+      return this.settings;
+    }
+
+    const settings = getSettings();
+
+    return settings.notifications.agents.webhook;
+  }
+
+  private parseKeys(
+    finalPayload: Record<string, unknown>,
+    payload: NotificationPayload,
+    type: Notification
+  ): Record<string, unknown> {
+    Object.keys(finalPayload).forEach((key) => {
+      if (key === '{{extra}}') {
+        finalPayload.extra = payload.extra ?? [];
+        delete finalPayload[key];
+        key = 'extra';
+      } else if (key === '{{media}}') {
+        if (payload.media) {
+          finalPayload.media = finalPayload[key];
+        } else {
+          finalPayload.media = null;
+        }
+        delete finalPayload[key];
+        key = 'media';
+      }
+
+      if (typeof finalPayload[key] === 'string') {
+        Object.keys(KeyMap).forEach((keymapKey) => {
+          const keymapValue = KeyMap[keymapKey as keyof typeof KeyMap];
+          finalPayload[key] = (finalPayload[key] as string).replace(
+            `{{${keymapKey}}}`,
+            typeof keymapValue === 'function'
+              ? keymapValue(payload, type)
+              : get(payload, keymapValue) ?? ''
+          );
+        });
+      } else if (finalPayload[key] && typeof finalPayload[key] === 'object') {
+        finalPayload[key] = this.parseKeys(
+          finalPayload[key] as Record<string, unknown>,
+          payload,
+          type
+        );
+      }
+    });
+
+    return finalPayload;
+  }
+
+  private buildPayload(type: Notification, payload: NotificationPayload) {
+    const payloadString = Buffer.from(
+      this.getSettings().options.jsonPayload,
+      'base64'
+    ).toString('ascii');
+
+    const parsedJSON = JSON.parse(JSON.parse(payloadString));
+
+    return this.parseKeys(parsedJSON, payload, type);
+  }
+
+  public shouldSend(type: Notification): boolean {
+    if (
+      this.getSettings().enabled &&
+      this.getSettings().options.webhookUrl &&
+      hasNotificationType(type, this.getSettings().types)
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public async send(
+    type: Notification,
+    payload: NotificationPayload
+  ): Promise<boolean> {
+    logger.debug('Sending webhook notification', { label: 'Notifications' });
+    try {
+      const { webhookUrl, authHeader } = this.getSettings().options;
+
+      if (!webhookUrl) {
+        return false;
+      }
+
+      await axios.post(webhookUrl, this.buildPayload(type, payload), {
+        headers: {
+          Authorization: authHeader,
+        },
+      });
+
+      return true;
+    } catch (e) {
+      logger.error('Error sending Webhook notification', {
+        label: 'Notifications',
+        errorMessage: e.message,
+      });
+      return false;
+    }
+  }
+}
+
+export default WebhookAgent;

server/lib/settings.ts

@@ -106,12 +106,21 @@ export interface NotificationAgentPushover extends NotificationAgentConfig {
   };
 }
 
+export interface NotificationAgentWebhook extends NotificationAgentConfig {
+  options: {
+    webhookUrl: string;
+    jsonPayload: string;
+    authHeader: string;
+  };
+}
+
 interface NotificationAgents {
   email: NotificationAgentEmail;
   discord: NotificationAgentDiscord;
   slack: NotificationAgentSlack;
   telegram: NotificationAgentTelegram;
   pushover: NotificationAgentPushover;
+  webhook: NotificationAgentWebhook;
 }
 
 interface NotificationSettings {
@@ -199,6 +208,16 @@ class Settings {
               sound: '',
             },
           },
+          webhook: {
+            enabled: false,
+            types: 0,
+            options: {
+              webhookUrl: '',
+              authHeader: '',
+              jsonPayload:
+                'IntcbiAgICBcIm5vdGlmaWNhdGlvbl90eXBlXCI6IFwie3tub3RpZmljYXRpb25fdHlwZX19XCIsXG4gICAgXCJzdWJqZWN0XCI6IFwie3tzdWJqZWN0fX1cIixcbiAgICBcIm1lc3NhZ2VcIjogXCJ7e21lc3NhZ2V9fVwiLFxuICAgIFwiaW1hZ2VcIjogXCJ7e2ltYWdlfX1cIixcbiAgICBcImVtYWlsXCI6IFwie3tub3RpZnl1c2VyX2VtYWlsfX1cIixcbiAgICBcInVzZXJuYW1lXCI6IFwie3tub3RpZnl1c2VyX3VzZXJuYW1lfX1cIixcbiAgICBcImF2YXRhclwiOiBcInt7bm90aWZ5dXNlcl9hdmF0YXJ9fVwiLFxuICAgIFwie3ttZWRpYX19XCI6IHtcbiAgICAgICAgXCJtZWRpYV90eXBlXCI6IFwie3ttZWRpYV90eXBlfX1cIixcbiAgICAgICAgXCJ0bWRiSWRcIjogXCJ7e21lZGlhX3RtZGJpZH19XCIsXG4gICAgICAgIFwiaW1kYklkXCI6IFwie3ttZWRpYV9pbWRiaWR9fVwiLFxuICAgICAgICBcInR2ZGJJZFwiOiBcInt7bWVkaWFfdHZkYmlkfX1cIixcbiAgICAgICAgXCJzdGF0dXNcIjogXCJ7e21lZGlhX3N0YXR1c319XCIsXG4gICAgICAgIFwic3RhdHVzNGtcIjogXCJ7e21lZGlhX3N0YXR1czRrfX1cIlxuICAgIH0sXG4gICAgXCJ7e2V4dHJhfX1cIjogW11cbn0i',
+            },
+          },
         },
       },
     };

server/routes/settings/index.ts

@@ -5,31 +5,28 @@ import {
   SonarrSettings,
   Library,
   MainSettings,
-} from '../lib/settings';
+} from '../../lib/settings';
 import { getRepository } from 'typeorm';
-import { User } from '../entity/User';
+import { User } from '../../entity/User';
-import PlexAPI from '../api/plexapi';
+import PlexAPI from '../../api/plexapi';
-import { jobPlexFullSync } from '../job/plexsync';
+import { jobPlexFullSync } from '../../job/plexsync';
-import SonarrAPI from '../api/sonarr';
+import SonarrAPI from '../../api/sonarr';
-import RadarrAPI from '../api/radarr';
+import RadarrAPI from '../../api/radarr';
-import logger from '../logger';
+import logger from '../../logger';
-import { scheduledJobs } from '../job/schedule';
+import { scheduledJobs } from '../../job/schedule';
-import { Permission } from '../lib/permissions';
+import { Permission } from '../../lib/permissions';
-import { isAuthenticated } from '../middleware/auth';
+import { isAuthenticated } from '../../middleware/auth';
 import { merge, omit } from 'lodash';
-import Media from '../entity/Media';
+import Media from '../../entity/Media';
-import { MediaRequest } from '../entity/MediaRequest';
+import { MediaRequest } from '../../entity/MediaRequest';
-import { getAppVersion } from '../utils/appVersion';
+import { getAppVersion } from '../../utils/appVersion';
-import { SettingsAboutResponse } from '../interfaces/api/settingsInterfaces';
+import { SettingsAboutResponse } from '../../interfaces/api/settingsInterfaces';
-import { Notification } from '../lib/notifications';
+import notificationRoutes from './notifications';
-import DiscordAgent from '../lib/notifications/agents/discord';
-import EmailAgent from '../lib/notifications/agents/email';
-import SlackAgent from '../lib/notifications/agents/slack';
-import TelegramAgent from '../lib/notifications/agents/telegram';
-import PushoverAgent from '../lib/notifications/agents/pushover';
 
 const settingsRoutes = Router();
 
+settingsRoutes.use('/notifications', notificationRoutes);
+
 const filteredMainSettings = (
   user: User,
   main: MainSettings
@@ -437,176 +434,6 @@ settingsRoutes.get(
   }
 );
 
-settingsRoutes.get('/notifications/discord', (_req, res) => {
-  const settings = getSettings();
-
-  res.status(200).json(settings.notifications.agents.discord);
-});
-
-settingsRoutes.post('/notifications/discord', (req, res) => {
-  const settings = getSettings();
-
-  settings.notifications.agents.discord = req.body;
-  settings.save();
-
-  res.status(200).json(settings.notifications.agents.discord);
-});
-
-settingsRoutes.post('/notifications/discord/test', (req, res, next) => {
-  if (!req.user) {
-    return next({
-      status: 500,
-      message: 'User information missing from request',
-    });
-  }
-
-  const discordAgent = new DiscordAgent(req.body);
-  discordAgent.send(Notification.TEST_NOTIFICATION, {
-    notifyUser: req.user,
-    subject: 'Test Notification',
-    message:
-      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
-  });
-
-  return res.status(204).send();
-});
-
-settingsRoutes.get('/notifications/slack', (_req, res) => {
-  const settings = getSettings();
-
-  res.status(200).json(settings.notifications.agents.slack);
-});
-
-settingsRoutes.post('/notifications/slack', (req, res) => {
-  const settings = getSettings();
-
-  settings.notifications.agents.slack = req.body;
-  settings.save();
-
-  res.status(200).json(settings.notifications.agents.slack);
-});
-
-settingsRoutes.post('/notifications/slack/test', (req, res, next) => {
-  if (!req.user) {
-    return next({
-      status: 500,
-      message: 'User information missing from request',
-    });
-  }
-
-  const slackAgent = new SlackAgent(req.body);
-  slackAgent.send(Notification.TEST_NOTIFICATION, {
-    notifyUser: req.user,
-    subject: 'Test Notification',
-    message:
-      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
-  });
-
-  return res.status(204).send();
-});
-
-settingsRoutes.get('/notifications/telegram', (_req, res) => {
-  const settings = getSettings();
-
-  res.status(200).json(settings.notifications.agents.telegram);
-});
-
-settingsRoutes.post('/notifications/telegram', (req, res) => {
-  const settings = getSettings();
-
-  settings.notifications.agents.telegram = req.body;
-  settings.save();
-
-  res.status(200).json(settings.notifications.agents.telegram);
-});
-
-settingsRoutes.post('/notifications/telegram/test', (req, res, next) => {
-  if (!req.user) {
-    return next({
-      status: 500,
-      message: 'User information missing from request',
-    });
-  }
-
-  const telegramAgent = new TelegramAgent(req.body);
-  telegramAgent.send(Notification.TEST_NOTIFICATION, {
-    notifyUser: req.user,
-    subject: 'Test Notification',
-    message:
-      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
-  });
-
-  return res.status(204).send();
-});
-
-settingsRoutes.get('/notifications/pushover', (_req, res) => {
-  const settings = getSettings();
-
-  res.status(200).json(settings.notifications.agents.pushover);
-});
-
-settingsRoutes.post('/notifications/pushover', (req, res) => {
-  const settings = getSettings();
-
-  settings.notifications.agents.pushover = req.body;
-  settings.save();
-
-  res.status(200).json(settings.notifications.agents.pushover);
-});
-
-settingsRoutes.post('/notifications/pushover/test', (req, res, next) => {
-  if (!req.user) {
-    return next({
-      status: 500,
-      message: 'User information missing from request',
-    });
-  }
-
-  const pushoverAgent = new PushoverAgent(req.body);
-  pushoverAgent.send(Notification.TEST_NOTIFICATION, {
-    notifyUser: req.user,
-    subject: 'Test Notification',
-    message:
-      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
-  });
-
-  return res.status(204).send();
-});
-
-settingsRoutes.get('/notifications/email', (_req, res) => {
-  const settings = getSettings();
-
-  res.status(200).json(settings.notifications.agents.email);
-});
-
-settingsRoutes.post('/notifications/email', (req, res) => {
-  const settings = getSettings();
-
-  settings.notifications.agents.email = req.body;
-  settings.save();
-
-  res.status(200).json(settings.notifications.agents.email);
-});
-
-settingsRoutes.post('/notifications/email/test', (req, res, next) => {
-  if (!req.user) {
-    return next({
-      status: 500,
-      message: 'User information missing from request',
-    });
-  }
-
-  const emailAgent = new EmailAgent(req.body);
-  emailAgent.send(Notification.TEST_NOTIFICATION, {
-    notifyUser: req.user,
-    subject: 'Test Notification',
-    message:
-      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
-  });
-
-  return res.status(204).send();
-});
-
 settingsRoutes.get('/about', async (req, res) => {
   const mediaRepository = getRepository(Media);
   const mediaRequestRepository = getRepository(MediaRequest);

server/routes/settings/notifications.ts

@@ -0,0 +1,265 @@
+import { Router } from 'express';
+import { getSettings } from '../../lib/settings';
+import { Notification } from '../../lib/notifications';
+import DiscordAgent from '../../lib/notifications/agents/discord';
+import EmailAgent from '../../lib/notifications/agents/email';
+import SlackAgent from '../../lib/notifications/agents/slack';
+import TelegramAgent from '../../lib/notifications/agents/telegram';
+import PushoverAgent from '../../lib/notifications/agents/pushover';
+import WebhookAgent from '../../lib/notifications/agents/webhook';
+
+const notificationRoutes = Router();
+
+notificationRoutes.get('/discord', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.discord);
+});
+
+notificationRoutes.post('/discord', (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.discord = req.body;
+  settings.save();
+
+  res.status(200).json(settings.notifications.agents.discord);
+});
+
+notificationRoutes.post('/discord/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  const discordAgent = new DiscordAgent(req.body);
+  discordAgent.send(Notification.TEST_NOTIFICATION, {
+    notifyUser: req.user,
+    subject: 'Test Notification',
+    message:
+      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+  });
+
+  return res.status(204).send();
+});
+
+notificationRoutes.get('/slack', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.slack);
+});
+
+notificationRoutes.post('/slack', (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.slack = req.body;
+  settings.save();
+
+  res.status(200).json(settings.notifications.agents.slack);
+});
+
+notificationRoutes.post('/slack/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  const slackAgent = new SlackAgent(req.body);
+  slackAgent.send(Notification.TEST_NOTIFICATION, {
+    notifyUser: req.user,
+    subject: 'Test Notification',
+    message:
+      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+  });
+
+  return res.status(204).send();
+});
+
+notificationRoutes.get('/telegram', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.telegram);
+});
+
+notificationRoutes.post('/telegram', (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.telegram = req.body;
+  settings.save();
+
+  res.status(200).json(settings.notifications.agents.telegram);
+});
+
+notificationRoutes.post('/telegram/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  const telegramAgent = new TelegramAgent(req.body);
+  telegramAgent.send(Notification.TEST_NOTIFICATION, {
+    notifyUser: req.user,
+    subject: 'Test Notification',
+    message:
+      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+  });
+
+  return res.status(204).send();
+});
+
+notificationRoutes.get('/pushover', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.pushover);
+});
+
+notificationRoutes.post('/pushover', (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.pushover = req.body;
+  settings.save();
+
+  res.status(200).json(settings.notifications.agents.pushover);
+});
+
+notificationRoutes.post('/pushover/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  const pushoverAgent = new PushoverAgent(req.body);
+  pushoverAgent.send(Notification.TEST_NOTIFICATION, {
+    notifyUser: req.user,
+    subject: 'Test Notification',
+    message:
+      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+  });
+
+  return res.status(204).send();
+});
+
+notificationRoutes.get('/email', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.email);
+});
+
+notificationRoutes.post('/email', (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.email = req.body;
+  settings.save();
+
+  res.status(200).json(settings.notifications.agents.email);
+});
+
+notificationRoutes.post('/email/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  const emailAgent = new EmailAgent(req.body);
+  emailAgent.send(Notification.TEST_NOTIFICATION, {
+    notifyUser: req.user,
+    subject: 'Test Notification',
+    message:
+      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+  });
+
+  return res.status(204).send();
+});
+
+notificationRoutes.get('/webhook', (_req, res) => {
+  const settings = getSettings();
+
+  const webhookSettings = settings.notifications.agents.webhook;
+
+  const response: typeof webhookSettings = {
+    enabled: webhookSettings.enabled,
+    types: webhookSettings.types,
+    options: {
+      ...webhookSettings.options,
+      jsonPayload: JSON.parse(
+        Buffer.from(webhookSettings.options.jsonPayload, 'base64').toString(
+          'ascii'
+        )
+      ),
+    },
+  };
+
+  res.status(200).json(response);
+});
+
+notificationRoutes.post('/webhook', (req, res, next) => {
+  const settings = getSettings();
+  try {
+    JSON.parse(req.body.options.jsonPayload);
+
+    settings.notifications.agents.webhook = {
+      enabled: req.body.enabled,
+      types: req.body.types,
+      options: {
+        jsonPayload: Buffer.from(req.body.options.jsonPayload).toString(
+          'base64'
+        ),
+        webhookUrl: req.body.options.webhookUrl,
+        authHeader: req.body.options.authHeader,
+      },
+    };
+    settings.save();
+
+    res.status(200).json(settings.notifications.agents.webhook);
+  } catch (e) {
+    next({ status: 500, message: e.message });
+  }
+});
+
+notificationRoutes.post('/webhook/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  try {
+    JSON.parse(req.body.options.jsonPayload);
+
+    const testBody = {
+      enabled: req.body.enabled,
+      types: req.body.types,
+      options: {
+        jsonPayload: Buffer.from(req.body.options.jsonPayload).toString(
+          'base64'
+        ),
+        webhookUrl: req.body.options.webhookUrl,
+        authHeader: req.body.options.authHeader,
+      },
+    };
+
+    const webhookAgent = new WebhookAgent(testBody);
+    webhookAgent.send(Notification.TEST_NOTIFICATION, {
+      notifyUser: req.user,
+      subject: 'Test Notification',
+      message:
+        'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+    });
+
+    return res.status(204).send();
+  } catch (e) {
+    next({ status: 500, message: e.message });
+  }
+});
+
+export default notificationRoutes;

src/assets/bolt.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path></svg>

src/components/JSONEditor/index.tsx

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes } from 'react';
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-dracula';
+
+interface JSONEditorProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  value: string;
+  onUpdate: (value: string) => void;
+}
+
+const JSONEditor: React.FC<JSONEditorProps> = ({
+  name,
+  value,
+  onUpdate,
+  onBlur,
+}) => {
+  return (
+    <div className="w-full overflow-hidden rounded-md">
+      <AceEditor
+        mode="json"
+        theme="dracula"
+        onChange={onUpdate}
+        name={name}
+        editorProps={{ $blockScrolling: true }}
+        value={value}
+        onBlur={onBlur}
+        height="300px"
+        width="100%"
+      />
+    </div>
+  );
+};
+
+export default JSONEditor;

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -0,0 +1,315 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import dynamic from 'next/dynamic';
+import useSWR from 'swr';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import Button from '../../../Common/Button';
+import { defineMessages, useIntl } from 'react-intl';
+import axios from 'axios';
+import * as Yup from 'yup';
+import { useToasts } from 'react-toast-notifications';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
+
+const JSONEditor = dynamic(() => import('../../../JSONEditor'), { ssr: false });
+
+const defaultPayload = {
+  notification_type: '{{notification_type}}',
+  subject: '{{subject}}',
+  message: '{{message}}',
+  image: '{{image}}',
+  email: '{{notifyuser_email}}',
+  username: '{{notifyuser_username}}',
+  avatar: '{{notifyuser_avatar}}',
+  '{{media}}': {
+    media_type: '{{media_type}}',
+    tmdbId: '{{media_tmdbid}}',
+    imdbId: '{{media_imdbid}}',
+    tvdbId: '{{media_tvdbid}}',
+    status: '{{media_status}}',
+    status4k: '{{media_status4k}}',
+  },
+  '{{extra}}': [],
+};
+
+const messages = defineMessages({
+  save: 'Save Changes',
+  saving: 'Saving...',
+  agentenabled: 'Agent Enabled',
+  webhookUrl: 'Webhook URL',
+  authheader: 'Authorization Header',
+  validationWebhookUrlRequired: 'You must provide a webhook URL',
+  validationJsonPayloadRequired: 'You must provide a JSON Payload',
+  webhookUrlPlaceholder: 'Remote webhook URL',
+  webhooksettingssaved: 'Webhook notification settings saved!',
+  webhooksettingsfailed: 'Webhook notification settings failed to save.',
+  testsent: 'Test notification sent!',
+  test: 'Test',
+  notificationtypes: 'Notification Types',
+  resetPayload: 'Reset to Default JSON Payload',
+  resetPayloadSuccess: 'JSON reset to default payload.',
+  customJson: 'Custom JSON Payload',
+});
+
+const NotificationsWebhook: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const { data, error, revalidate } = useSWR(
+    '/api/v1/settings/notifications/webhook'
+  );
+
+  const NotificationsWebhookSchema = Yup.object().shape({
+    webhookUrl: Yup.string().required(
+      intl.formatMessage(messages.validationWebhookUrlRequired)
+    ),
+    jsonPayload: Yup.string()
+      .required(intl.formatMessage(messages.validationJsonPayloadRequired))
+      .test('validate-json', 'Invalid JSON', (value) => {
+        try {
+          JSON.parse(value ?? '');
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enabled: data.enabled,
+        types: data.types,
+        webhookUrl: data.options.webhookUrl,
+        jsonPayload: data.options.jsonPayload,
+        authHeader: data.options.authHeader,
+      }}
+      validationSchema={NotificationsWebhookSchema}
+      onSubmit={async (values) => {
+        try {
+          await axios.post('/api/v1/settings/notifications/webhook', {
+            enabled: values.enabled,
+            types: values.types,
+            options: {
+              webhookUrl: values.webhookUrl,
+              jsonPayload: JSON.stringify(values.jsonPayload),
+              authHeader: values.authHeader,
+            },
+          });
+          addToast(intl.formatMessage(messages.webhooksettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.webhooksettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        values,
+        isValid,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
+        const resetPayload = () => {
+          setFieldValue(
+            'jsonPayload',
+            JSON.stringify(defaultPayload, undefined, '    ')
+          );
+          addToast(intl.formatMessage(messages.resetPayloadSuccess), {
+            appearance: 'info',
+            autoDismiss: true,
+          });
+        };
+
+        const testSettings = async () => {
+          await axios.post('/api/v1/settings/notifications/webhook/test', {
+            enabled: true,
+            types: values.types,
+            options: {
+              webhookUrl: values.webhookUrl,
+              jsonPayload: JSON.stringify(values.jsonPayload),
+              authHeader: values.authHeader,
+            },
+          });
+
+          addToast(intl.formatMessage(messages.testsent), {
+            appearance: 'info',
+            autoDismiss: true,
+          });
+        };
+
+        return (
+          <Form>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
+              <label
+                htmlFor="enabled"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+              >
+                {intl.formatMessage(messages.agentenabled)}
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <Field
+                  type="checkbox"
+                  id="enabled"
+                  name="enabled"
+                  className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
+                />
+              </div>
+            </div>
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+              >
+                {intl.formatMessage(messages.webhookUrl)}
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="flex max-w-lg rounded-md shadow-sm">
+                  <Field
+                    id="webhookUrl"
+                    name="webhookUrl"
+                    type="text"
+                    placeholder={intl.formatMessage(
+                      messages.webhookUrlPlaceholder
+                    )}
+                    className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                  />
+                </div>
+                {errors.webhookUrl && touched.webhookUrl && (
+                  <div className="mt-2 text-red-500">{errors.webhookUrl}</div>
+                )}
+              </div>
+            </div>
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+              >
+                {intl.formatMessage(messages.authheader)}
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="flex max-w-lg rounded-md shadow-sm">
+                  <Field
+                    id="authHeader"
+                    name="authHeader"
+                    type="text"
+                    className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+              >
+                {intl.formatMessage(messages.customJson)}
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="flex max-w-lg rounded-md shadow-sm">
+                  <JSONEditor
+                    name="webhook-json-payload"
+                    onUpdate={(value) => setFieldValue('jsonPayload', value)}
+                    value={values.jsonPayload}
+                    onBlur={() => setFieldTouched('jsonPayload')}
+                  />
+                </div>
+                {errors.jsonPayload && touched.jsonPayload && (
+                  <div className="mt-2 text-red-500">{errors.jsonPayload}</div>
+                )}
+                <div className="mt-2">
+                  <Button
+                    buttonSize="sm"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      resetPayload();
+                    }}
+                  >
+                    <svg
+                      className="w-5 h-5 mr-1"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    {intl.formatMessage(messages.resetPayload)}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="mt-6">
+              <div role="group" aria-labelledby="label-permissions">
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
+                  <div>
+                    <div
+                      className="text-base font-medium leading-6 text-gray-400 sm:text-sm sm:leading-5"
+                      id="label-types"
+                    >
+                      {intl.formatMessage(messages.notificationtypes)}
+                    </div>
+                  </div>
+                  <div className="mt-4 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg">
+                      <NotificationTypeSelector
+                        currentTypes={values.types}
+                        onUpdate={(newTypes) =>
+                          setFieldValue('types', newTypes)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="pt-5 mt-8 border-t border-gray-700">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="warning"
+                    disabled={isSubmitting || !isValid}
+                    onClick={(e) => {
+                      e.preventDefault();
+
+                      testSettings();
+                    }}
+                  >
+                    {intl.formatMessage(messages.test)}
+                  </Button>
+                </span>
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(messages.saving)
+                      : intl.formatMessage(messages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default NotificationsWebhook;

src/components/Settings/SettingsNotifications.tsx

@@ -6,6 +6,7 @@ import DiscordLogo from '../../assets/extlogos/discord_white.svg';
 import SlackLogo from '../../assets/extlogos/slack.svg';
 import TelegramLogo from '../../assets/extlogos/telegram.svg';
 import PushoverLogo from '../../assets/extlogos/pushover.svg';
+import Bolt from '../../assets/bolt.svg';
 
 const messages = defineMessages({
   notificationsettings: 'Notification Settings',
@@ -89,6 +90,17 @@ const settingsRoutes: SettingsRoute[] = [
     route: '/settings/notifications/pushover',
     regex: /^\/settings\/notifications\/pushover/,
   },
+  {
+    text: 'Webhook',
+    content: (
+      <span className="flex items-center">
+        <Bolt className="h-4 mr-2" />
+        Webhook
+      </span>
+    ),
+    route: '/settings/notifications/webhook',
+    regex: /^\/settings\/notifications\/webhook/,
+  },
 ];
 
 const SettingsNotifications: React.FC = ({ children }) => {

src/i18n/locale/en.json

@@ -162,6 +162,22 @@
   "components.Settings.Notifications.NotificationsSlack.validationWebhookUrlRequired": "You must provide a webhook URL",
   "components.Settings.Notifications.NotificationsSlack.webhookUrl": "Webhook URL",
   "components.Settings.Notifications.NotificationsSlack.webhookUrlPlaceholder": "Webhook URL",
+  "components.Settings.Notifications.NotificationsWebhook.agentenabled": "Agent Enabled",
+  "components.Settings.Notifications.NotificationsWebhook.authheader": "Authorization Header",
+  "components.Settings.Notifications.NotificationsWebhook.customJson": "Custom JSON Payload",
+  "components.Settings.Notifications.NotificationsWebhook.notificationtypes": "Notification Types",
+  "components.Settings.Notifications.NotificationsWebhook.resetPayload": "Reset to Default JSON Payload",
+  "components.Settings.Notifications.NotificationsWebhook.resetPayloadSuccess": "JSON reset to default payload.",
+  "components.Settings.Notifications.NotificationsWebhook.save": "Save Changes",
+  "components.Settings.Notifications.NotificationsWebhook.saving": "Saving...",
+  "components.Settings.Notifications.NotificationsWebhook.test": "Test",
+  "components.Settings.Notifications.NotificationsWebhook.testsent": "Test notification sent!",
+  "components.Settings.Notifications.NotificationsWebhook.validationJsonPayloadRequired": "You must provide a JSON Payload",
+  "components.Settings.Notifications.NotificationsWebhook.validationWebhookUrlRequired": "You must provide a webhook URL",
+  "components.Settings.Notifications.NotificationsWebhook.webhookUrl": "Webhook URL",
+  "components.Settings.Notifications.NotificationsWebhook.webhookUrlPlaceholder": "Remote webhook URL",
+  "components.Settings.Notifications.NotificationsWebhook.webhooksettingsfailed": "Webhook notification settings failed to save.",
+  "components.Settings.Notifications.NotificationsWebhook.webhooksettingssaved": "Webhook notification settings saved!",
   "components.Settings.Notifications.agentenabled": "Agent Enabled",
   "components.Settings.Notifications.allowselfsigned": "Allow Self-Signed Certificates",
   "components.Settings.Notifications.authPass": "Auth Pass",

src/pages/settings/notifications/webhook.tsx

@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import NotificationsWebhook from '../../../components/Settings/Notifications/NotificationsWebhook';
+import SettingsLayout from '../../../components/Settings/SettingsLayout';
+import SettingsNotifications from '../../../components/Settings/SettingsNotifications';
+
+const NotificationsPage: NextPage = () => {
+  return (
+    <SettingsLayout>
+      <SettingsNotifications>
+        <NotificationsWebhook />
+      </SettingsNotifications>
+    </SettingsLayout>
+  );
+};
+
+export default NotificationsPage;

yarn.lock

@@ -2552,6 +2552,11 @@ accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+ace-builds@^1.4.12, ace-builds@^1.4.6:
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7"
+  integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg==
+
 acorn-jsx@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
@@ -5118,6 +5123,11 @@ didyoumean@^1.2.1:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
   integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=
 
+diff-match-patch@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -8412,6 +8422,11 @@ lodash.get@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
   integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.ismatch@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
@@ -11418,6 +11433,17 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^9.2.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-9.2.1.tgz#1efaa0476c77649136def50e5c4ca30c7e546036"
+  integrity sha512-2arIeMER/W6/h+QGHs0YJ0pEJo5AmBOUs/R72Poa6eXSOSTpJPp/WkwD/KE7BgNy9vZ7YjlbqA+2ZcoVf6AjsQ==
+  dependencies:
+    ace-builds "^1.4.6"
+    diff-match-patch "^1.0.4"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.7.2"
+
 react-dom@17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"