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

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;