feat(ntfy): add native ntfy notification support (#1599)

* feat(ntfy): add native ntfy notification

fix #499

* feat(ntfy): update translation keys

* feat(ntfy): append ntfy to cypress settings

* feat(ntfy): adjust ntfy agent shouldSend

* feat(ntfy): simplify ntfy post routes

* feat(ntfy): refactor ntfy agent from fetch to axios

* feat(ntfy): refactor ntfy frontend from fetch to axios

cypress/config/settings.cypress.json

@@ -142,6 +142,14 @@
           "token": "",
           "priority": 0
         }
+      },
+      "ntfy": {
+        "enabled": false,
+        "types": 0,
+        "options": {
+          "url": "",
+          "topic": ""
+        }
       }
     }
   },

jellyseerr-api.yml

@@ -1399,6 +1399,32 @@ components:
               type: string
             token:
               type: string
+    NtfySettings:
+      type: object
+      properties:
+        enabled:
+          type: boolean
+          example: false
+        types:
+          type: number
+          example: 2
+        options:
+          type: object
+          properties:
+            url:
+              type: string
+            topic:
+              type: string
+            authMethodUsernamePassword:
+              type: boolean
+            username:
+              type: string
+            password:
+              type: string
+            authMethodToken:
+              type: boolean
+            token:
+              type: string
     LunaSeaSettings:
       type: object
       properties:
@@ -3249,6 +3275,52 @@ paths:
       responses:
         '204':
           description: Test notification attempted
+  /settings/notifications/ntfy:
+    get:
+      summary: Get ntfy.sh notification settings
+      description: Returns current ntfy.sh notification settings in a JSON object.
+      tags:
+        - settings
+      responses:
+        '200':
+          description: Returned ntfy.sh settings
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/NtfySettings'
+    post:
+      summary: Update ntfy.sh notification settings
+      description: Update ntfy.sh notification settings with the provided values.
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/NtfySettings'
+      responses:
+        '200':
+          description: 'Values were sucessfully updated'
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/NtfySettings'
+  /settings/notifications/ntfy/test:
+    post:
+      summary: Test ntfy.sh settings
+      description: Sends a test notification to the ntfy.sh agent.
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/NtfySettings'
+      responses:
+        '204':
+          description: Test notification attempted
   /settings/notifications/slack:
     get:
       summary: Get Slack notification settings

server/index.ts

@@ -10,6 +10,7 @@ import DiscordAgent from '@server/lib/notifications/agents/discord';
 import EmailAgent from '@server/lib/notifications/agents/email';
 import GotifyAgent from '@server/lib/notifications/agents/gotify';
 import LunaSeaAgent from '@server/lib/notifications/agents/lunasea';
+import NtfyAgent from '@server/lib/notifications/agents/ntfy';
 import PushbulletAgent from '@server/lib/notifications/agents/pushbullet';
 import PushoverAgent from '@server/lib/notifications/agents/pushover';
 import SlackAgent from '@server/lib/notifications/agents/slack';
@@ -103,6 +104,7 @@ app
       new DiscordAgent(),
       new EmailAgent(),
       new GotifyAgent(),
+      new NtfyAgent(),
       new LunaSeaAgent(),
       new PushbulletAgent(),
       new PushoverAgent(),

server/lib/notifications/agents/ntfy.ts

@@ -0,0 +1,164 @@
+import { IssueStatus, IssueTypeName } from '@server/constants/issue';
+import type { NotificationAgentNtfy } from '@server/lib/settings';
+import { getSettings } from '@server/lib/settings';
+import logger from '@server/logger';
+import axios from 'axios';
+import { hasNotificationType, Notification } from '..';
+import type { NotificationAgent, NotificationPayload } from './agent';
+import { BaseAgent } from './agent';
+
+class NtfyAgent
+  extends BaseAgent<NotificationAgentNtfy>
+  implements NotificationAgent
+{
+  protected getSettings(): NotificationAgentNtfy {
+    if (this.settings) {
+      return this.settings;
+    }
+
+    const settings = getSettings();
+
+    return settings.notifications.agents.ntfy;
+  }
+
+  private buildPayload(type: Notification, payload: NotificationPayload) {
+    const { applicationUrl } = getSettings().main;
+
+    const topic = this.getSettings().options.topic;
+    const priority = 3;
+
+    const title = payload.event
+      ? `${payload.event} - ${payload.subject}`
+      : payload.subject;
+    let message = payload.message ?? '';
+
+    if (payload.request) {
+      message += `\n\nRequested By: ${payload.request.requestedBy.displayName}`;
+
+      let status = '';
+      switch (type) {
+        case Notification.MEDIA_PENDING:
+          status = 'Pending Approval';
+          break;
+        case Notification.MEDIA_APPROVED:
+        case Notification.MEDIA_AUTO_APPROVED:
+          status = 'Processing';
+          break;
+        case Notification.MEDIA_AVAILABLE:
+          status = 'Available';
+          break;
+        case Notification.MEDIA_DECLINED:
+          status = 'Declined';
+          break;
+        case Notification.MEDIA_FAILED:
+          status = 'Failed';
+          break;
+      }
+
+      if (status) {
+        message += `\nRequest Status: ${status}`;
+      }
+    } else if (payload.comment) {
+      message += `\nComment from ${payload.comment.user.displayName}:\n${payload.comment.message}`;
+    } else if (payload.issue) {
+      message += `\n\nReported By: ${payload.issue.createdBy.displayName}`;
+      message += `\nIssue Type: ${IssueTypeName[payload.issue.issueType]}`;
+      message += `\nIssue Status: ${
+        payload.issue.status === IssueStatus.OPEN ? 'Open' : 'Resolved'
+      }`;
+    }
+
+    for (const extra of payload.extra ?? []) {
+      message += `\n\n**${extra.name}**\n${extra.value}`;
+    }
+
+    const attach = payload.image;
+
+    let click;
+    if (applicationUrl && payload.media) {
+      click = `${applicationUrl}/${payload.media.mediaType}/${payload.media.tmdbId}`;
+    }
+
+    return {
+      topic,
+      priority,
+      title,
+      message,
+      attach,
+      click,
+    };
+  }
+
+  public shouldSend(): boolean {
+    const settings = this.getSettings();
+
+    if (settings.enabled && settings.options.url && settings.options.topic) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public async send(
+    type: Notification,
+    payload: NotificationPayload
+  ): Promise<boolean> {
+    const settings = this.getSettings();
+
+    if (
+      !payload.notifySystem ||
+      !hasNotificationType(type, settings.types ?? 0)
+    ) {
+      return true;
+    }
+
+    logger.debug('Sending ntfy notification', {
+      label: 'Notifications',
+      type: Notification[type],
+      subject: payload.subject,
+    });
+
+    try {
+      let authHeader;
+      if (
+        settings.options.authMethodUsernamePassword &&
+        settings.options.username &&
+        settings.options.password
+      ) {
+        const encodedAuth = Buffer.from(
+          `${settings.options.username}:${settings.options.password}`
+        ).toString('base64');
+
+        authHeader = `Basic ${encodedAuth}`;
+      } else if (settings.options.authMethodToken) {
+        authHeader = `Bearer ${settings.options.token}`;
+      }
+
+      await axios.post(
+        settings.options.url,
+        this.buildPayload(type, payload),
+        authHeader
+          ? {
+              headers: {
+                Authorization: authHeader,
+              },
+            }
+          : undefined
+      );
+
+      return true;
+    } catch (e) {
+      logger.error('Error sending ntfy notification', {
+        label: 'Notifications',
+        type: Notification[type],
+        subject: payload.subject,
+        errorMessage: e.message,
+        response: e?.response?.data,
+      });
+
+      return false;
+    }
+  }
+}
+
+export default NtfyAgent;

server/lib/settings/index.ts

@@ -259,10 +259,23 @@ export interface NotificationAgentGotify extends NotificationAgentConfig {
   };
 }
 
+export interface NotificationAgentNtfy extends NotificationAgentConfig {
+  options: {
+    url: string;
+    topic: string;
+    authMethodUsernamePassword?: boolean;
+    username?: string;
+    password?: string;
+    authMethodToken?: boolean;
+    token?: string;
+  };
+}
+
 export enum NotificationAgentKey {
   DISCORD = 'discord',
   EMAIL = 'email',
   GOTIFY = 'gotify',
+  NTFY = 'ntfy',
   PUSHBULLET = 'pushbullet',
   PUSHOVER = 'pushover',
   SLACK = 'slack',
@@ -275,6 +288,7 @@ interface NotificationAgents {
   discord: NotificationAgentDiscord;
   email: NotificationAgentEmail;
   gotify: NotificationAgentGotify;
+  ntfy: NotificationAgentNtfy;
   lunasea: NotificationAgentLunaSea;
   pushbullet: NotificationAgentPushbullet;
   pushover: NotificationAgentPushover;
@@ -471,6 +485,14 @@ class Settings {
               priority: 0,
             },
           },
+          ntfy: {
+            enabled: false,
+            types: 0,
+            options: {
+              url: '',
+              topic: '',
+            },
+          },
         },
       },
       jobs: {

server/routes/settings/notifications.ts

@@ -5,6 +5,7 @@ import DiscordAgent from '@server/lib/notifications/agents/discord';
 import EmailAgent from '@server/lib/notifications/agents/email';
 import GotifyAgent from '@server/lib/notifications/agents/gotify';
 import LunaSeaAgent from '@server/lib/notifications/agents/lunasea';
+import NtfyAgent from '@server/lib/notifications/agents/ntfy';
 import PushbulletAgent from '@server/lib/notifications/agents/pushbullet';
 import PushoverAgent from '@server/lib/notifications/agents/pushover';
 import SlackAgent from '@server/lib/notifications/agents/slack';
@@ -413,4 +414,38 @@ notificationRoutes.post('/gotify/test', async (req, res, next) => {
   }
 });
 
+notificationRoutes.get('/ntfy', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.ntfy);
+});
+
+notificationRoutes.post('/ntfy', async (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.ntfy = req.body;
+  await settings.save();
+
+  res.status(200).json(settings.notifications.agents.ntfy);
+});
+
+notificationRoutes.post('/ntfy/test', async (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information is missing from the request.',
+    });
+  }
+
+  const ntfyAgent = new NtfyAgent(req.body);
+  if (await sendTestNotification(ntfyAgent, req.user)) {
+    return res.status(204).send();
+  } else {
+    return next({
+      status: 500,
+      message: 'Failed to send ntfy notification.',
+    });
+  }
+});
+
 export default notificationRoutes;

src/assets/extlogos/ntfy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill="currentColor"><path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" transform="scale(.26458)"/><path d="M88.2 95.309H64.92c-1.601 0-2.91 1.236-2.91 2.746l.022 18.602-.435 2.506 6.231-1.881H88.2c1.6 0 2.91-1.236 2.91-2.747v-16.48c0-1.51-1.31-2.746-2.91-2.746z" transform="translate(-51.147 -81.516)"/><path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" transform="scale(.26458)"/><path d="M62.57 116.77v-1.312l3.28-1.459q.159-.068.306-.102.158-.045.283-.068l.271-.022v-.09q-.136-.012-.271-.046-.125-.023-.283-.057-.147-.045-.306-.113l-3.28-1.459v-1.323l5.068 2.319v1.413z" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/><path d="M62.309 110.31v1.903l3.437 1.53.022.007-.022.008-3.437 1.53v1.892l.37-.17 5.221-2.39v-1.75zm.525.817 4.541 2.08v1.076l-4.541 2.078v-.732l3.12-1.389.003-.002a1.56 1.56 0 0 1 .258-.086h.006l.008-.002c.094-.027.176-.047.246-.06l.498-.041v-.574l-.24-.02a1.411 1.411 0 0 1-.231-.04l-.008-.001-.008-.002a9.077 9.077 0 0 1-.263-.053 2.781 2.781 0 0 1-.266-.097l-.004-.002-3.119-1.39z" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/><path d="M69.171 117.754h5.43v1.278h-5.43Z" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/><path d="M68.908 117.492v1.802h5.955v-1.802zm.526.524h4.904v.754h-4.904z" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/></g></svg>

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

@@ -0,0 +1,366 @@
+import Button from '@app/components/Common/Button';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import SensitiveInput from '@app/components/Common/SensitiveInput';
+import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import * as Yup from 'yup';
+
+const messages = defineMessages(
+  'components.Settings.Notifications.NotificationsNtfy',
+  {
+    agentenabled: 'Enable Agent',
+    url: 'Server root URL',
+    topic: 'Topic',
+    usernamePasswordAuth: 'Username + Password authentication',
+    username: 'Username',
+    password: 'Password',
+    tokenAuth: 'Token authentication',
+    token: 'Token',
+    ntfysettingssaved: 'Ntfy notification settings saved successfully!',
+    ntfysettingsfailed: 'Ntfy notification settings failed to save.',
+    toastNtfyTestSending: 'Sending ntfy test notification…',
+    toastNtfyTestSuccess: 'Ntfy test notification sent!',
+    toastNtfyTestFailed: 'Ntfy test notification failed to send.',
+    validationNtfyUrl: 'You must provide a valid URL',
+    validationNtfyTopic: 'You must provide a topic',
+    validationTypes: 'You must select at least one notification type',
+  }
+);
+
+const NotificationsNtfy = () => {
+  const intl = useIntl();
+  const { addToast, removeToast } = useToasts();
+  const [isTesting, setIsTesting] = useState(false);
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR('/api/v1/settings/notifications/ntfy');
+
+  const NotificationsNtfySchema = Yup.object().shape({
+    url: Yup.string()
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationNtfyUrl)),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(
+        // eslint-disable-next-line no-useless-escape
+        /^(https?:)?\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,
+        intl.formatMessage(messages.validationNtfyUrl)
+      ),
+    topic: Yup.string()
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationNtfyUrl)),
+        otherwise: Yup.string().nullable(),
+      })
+      .defined(intl.formatMessage(messages.validationNtfyTopic)),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enabled: data.enabled,
+        types: data.types,
+        url: data.options.url,
+        topic: data.options.topic,
+        authMethodUsernamePassword: data.options.authMethod,
+        username: data.options.username,
+        password: data.options.password,
+        authMethodToken: data.options.authMethodToken,
+        token: data.options.token,
+      }}
+      validationSchema={NotificationsNtfySchema}
+      onSubmit={async (values) => {
+        try {
+          await axios.post('/api/v1/settings/notifications/ntfy', {
+            enabled: values.enabled,
+            types: values.types,
+            options: {
+              url: values.url,
+              topic: values.topic,
+              authMethodUsernamePassword: values.authMethodUsernamePassword,
+              username: values.username,
+              password: values.password,
+              authMethodToken: values.authMethodToken,
+              token: values.token,
+            },
+          });
+
+          addToast(intl.formatMessage(messages.ntfysettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.ntfysettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        values,
+        isValid,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
+        const testSettings = async () => {
+          setIsTesting(true);
+          let toastId: string | undefined;
+          try {
+            addToast(
+              intl.formatMessage(messages.toastNtfyTestSending),
+              {
+                autoDismiss: false,
+                appearance: 'info',
+              },
+              (id) => {
+                toastId = id;
+              }
+            );
+            await axios.post('/api/v1/settings/notifications/ntfy/test', {
+              enabled: true,
+              types: values.types,
+              options: {
+                url: values.url,
+                topic: values.topic,
+                authMethodUsernamePassword: values.authMethodUsernamePassword,
+                username: values.username,
+                password: values.password,
+                authMethodToken: values.authMethodToken,
+                token: values.token,
+              },
+            });
+
+            if (toastId) {
+              removeToast(toastId);
+            }
+            addToast(intl.formatMessage(messages.toastNtfyTestSuccess), {
+              autoDismiss: true,
+              appearance: 'success',
+            });
+          } catch (e) {
+            if (toastId) {
+              removeToast(toastId);
+            }
+            addToast(intl.formatMessage(messages.toastNtfyTestFailed), {
+              autoDismiss: true,
+              appearance: 'error',
+            });
+          } finally {
+            setIsTesting(false);
+          }
+        };
+
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="enabled" className="checkbox-label">
+                {intl.formatMessage(messages.agentenabled)}
+                <span className="label-required">*</span>
+              </label>
+              <div className="form-input-area">
+                <Field type="checkbox" id="enabled" name="enabled" />
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="url" className="text-label">
+                {intl.formatMessage(messages.url)}
+                <span className="label-required">*</span>
+              </label>
+              <div className="form-input-area">
+                <div className="form-input-field">
+                  <Field id="url" name="url" type="text" inputMode="url" />
+                </div>
+                {errors.url &&
+                  touched.url &&
+                  typeof errors.url === 'string' && (
+                    <div className="error">{errors.url}</div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="topic" className="text-label">
+                {intl.formatMessage(messages.topic)}
+                <span className="label-required">*</span>
+              </label>
+              <div className="form-input-area">
+                <div className="form-input-field">
+                  <Field id="topic" name="topic" type="text" />
+                </div>
+                {errors.topic &&
+                  touched.topic &&
+                  typeof errors.topic === 'string' && (
+                    <div className="error">{errors.topic}</div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label
+                htmlFor="authMethodUsernamePassword"
+                className="checkbox-label"
+              >
+                <span className="mr-2">
+                  {intl.formatMessage(messages.usernamePasswordAuth)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <Field
+                  type="checkbox"
+                  id="authMethodUsernamePassword"
+                  name="authMethodUsernamePassword"
+                  disabled={values.authMethodToken}
+                  onChange={() => {
+                    setFieldValue(
+                      'authMethodUsernamePassword',
+                      !values.authMethodUsernamePassword
+                    );
+                  }}
+                />
+              </div>
+            </div>
+            {values.authMethodUsernamePassword && (
+              <div className="mr-2 ml-4">
+                <div className="form-row">
+                  <label htmlFor="username" className="text-label">
+                    {intl.formatMessage(messages.username)}
+                  </label>
+                  <div className="form-input-area">
+                    <div className="form-input-field">
+                      <Field id="username" name="username" type="text" />
+                    </div>
+                  </div>
+                </div>
+                <div className="form-row">
+                  <label htmlFor="password" className="text-label">
+                    {intl.formatMessage(messages.password)}
+                  </label>
+                  <div className="form-input-area">
+                    <div className="form-input-field">
+                      <SensitiveInput
+                        as="field"
+                        id="password"
+                        name="password"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div className="form-row">
+              <label htmlFor="authMethodToken" className="checkbox-label">
+                <span className="mr-2">
+                  {intl.formatMessage(messages.tokenAuth)}
+                </span>
+              </label>
+              <div className="form-input-area">
+                <Field
+                  type="checkbox"
+                  id="authMethodToken"
+                  name="authMethodToken"
+                  disabled={values.authMethodUsernamePassword}
+                  onChange={() => {
+                    setFieldValue('authMethodToken', !values.authMethodToken);
+                  }}
+                />
+              </div>
+            </div>
+            {values.authMethodToken && (
+              <div className="form-row mr-2 ml-4">
+                <label htmlFor="token" className="text-label">
+                  {intl.formatMessage(messages.token)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <SensitiveInput as="field" id="token" name="token" />
+                  </div>
+                </div>
+              </div>
+            )}
+            <NotificationTypeSelector
+              currentTypes={values.enabled ? values.types : 0}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+
+                if (newTypes) {
+                  setFieldValue('enabled', true);
+                }
+              }}
+              error={
+                values.enabled && !values.types && touched.types
+                  ? intl.formatMessage(messages.validationTypes)
+                  : undefined
+              }
+            />
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
+                  <Button
+                    buttonType="warning"
+                    disabled={isSubmitting || !isValid || isTesting}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      testSettings();
+                    }}
+                  >
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
+                  </Button>
+                </span>
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={
+                      isSubmitting ||
+                      !isValid ||
+                      isTesting ||
+                      (values.enabled && !values.types)
+                    }
+                  >
+                    <ArrowDownOnSquareIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default NotificationsNtfy;

src/components/Settings/SettingsNotifications.tsx

@@ -1,6 +1,7 @@
 import DiscordLogo from '@app/assets/extlogos/discord.svg';
 import GotifyLogo from '@app/assets/extlogos/gotify.svg';
 import LunaSeaLogo from '@app/assets/extlogos/lunasea.svg';
+import NtfyLogo from '@app/assets/extlogos/ntfy.svg';
 import PushbulletLogo from '@app/assets/extlogos/pushbullet.svg';
 import PushoverLogo from '@app/assets/extlogos/pushover.svg';
 import SlackLogo from '@app/assets/extlogos/slack.svg';
@@ -75,6 +76,17 @@ const SettingsNotifications = ({ children }: SettingsNotificationsProps) => {
       route: '/settings/notifications/gotify',
       regex: /^\/settings\/notifications\/gotify/,
     },
+    {
+      text: 'ntfy.sh',
+      content: (
+        <span className="flex items-center">
+          <NtfyLogo className="mr-2 h-4" />
+          ntfy.sh
+        </span>
+      ),
+      route: '/settings/notifications/ntfy',
+      regex: /^\/settings\/notifications\/ntfy/,
+    },
     {
       text: 'LunaSea',
       content: (

src/i18n/locale/en.json

@@ -624,6 +624,22 @@
   "components.Settings.Notifications.NotificationsLunaSea.validationWebhookUrl": "You must provide a valid URL",
   "components.Settings.Notifications.NotificationsLunaSea.webhookUrl": "Webhook URL",
   "components.Settings.Notifications.NotificationsLunaSea.webhookUrlTip": "Your user- or device-based <LunaSeaLink>notification webhook URL</LunaSeaLink>",
+  "components.Settings.Notifications.NotificationsNtfy.agentenabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsNtfy.ntfysettingsfailed": "Ntfy notification settings failed to save.",
+  "components.Settings.Notifications.NotificationsNtfy.ntfysettingssaved": "Ntfy notification settings saved successfully!",
+  "components.Settings.Notifications.NotificationsNtfy.password": "Password",
+  "components.Settings.Notifications.NotificationsNtfy.toastNtfyTestFailed": "Ntfy test notification failed to send.",
+  "components.Settings.Notifications.NotificationsNtfy.toastNtfyTestSending": "Sending ntfy test notification…",
+  "components.Settings.Notifications.NotificationsNtfy.toastNtfyTestSuccess": "Ntfy test notification sent!",
+  "components.Settings.Notifications.NotificationsNtfy.token": "Token",
+  "components.Settings.Notifications.NotificationsNtfy.tokenAuth": "Token authentication",
+  "components.Settings.Notifications.NotificationsNtfy.topic": "Topic",
+  "components.Settings.Notifications.NotificationsNtfy.url": "Server root URL",
+  "components.Settings.Notifications.NotificationsNtfy.username": "Username",
+  "components.Settings.Notifications.NotificationsNtfy.usernamePasswordAuth": "Username + Password authentication",
+  "components.Settings.Notifications.NotificationsNtfy.validationNtfyTopic": "You must provide a topic",
+  "components.Settings.Notifications.NotificationsNtfy.validationNtfyUrl": "You must provide a valid URL",
+  "components.Settings.Notifications.NotificationsNtfy.validationTypes": "You must select at least one notification type",
   "components.Settings.Notifications.NotificationsPushbullet.accessToken": "Access Token",
   "components.Settings.Notifications.NotificationsPushbullet.accessTokenTip": "Create a token from your <PushbulletSettingsLink>Account Settings</PushbulletSettingsLink>",
   "components.Settings.Notifications.NotificationsPushbullet.agentEnabled": "Enable Agent",

src/pages/settings/notifications/ntfy.tsx

@@ -0,0 +1,19 @@
+import NotificationsNtfy from '@app/components/Settings/Notifications/NotificationsNtfy';
+import SettingsLayout from '@app/components/Settings/SettingsLayout';
+import SettingsNotifications from '@app/components/Settings/SettingsNotifications';
+import useRouteGuard from '@app/hooks/useRouteGuard';
+import { Permission } from '@app/hooks/useUser';
+import type { NextPage } from 'next';
+
+const NotificationsPage: NextPage = () => {
+  useRouteGuard(Permission.ADMIN);
+  return (
+    <SettingsLayout>
+      <SettingsNotifications>
+        <NotificationsNtfy />
+      </SettingsNotifications>
+    </SettingsLayout>
+  );
+};
+
+export default NotificationsPage;