feat(notif): add Pushbullet and Pushover agents to user notification settings (#1740)

* feat(notif): add Pushbullet and Pushover agents to user notification settings * docs(notif): add "hint" about user notifications to Pushbullet and Pushover pages * fix: regenerate DB migration
2025-09-17 17:24:35 +02:00 · 2021-10-25 06:46:05 -04:00
parent ab20c21184
commit aeb7a48d72
25 changed files with 914 additions and 155 deletions
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -51,8 +51,8 @@ const NotificationsTelegram: React.FC = () => {
      otherwise: Yup.string().nullable(),
    }),
    chatId: Yup.string()
-      .when('enabled', {
-        is: true,
+      .when(['enabled', 'types'], {
+        is: (enabled: boolean, types: number) => enabled && !!types,
        then: Yup.string()
          .nullable()
          .required(intl.formatMessage(messages.validationChatIdRequired)),
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
@@ -35,7 +35,7 @@ const UserNotificationsDiscord: React.FC = () => {
  const UserNotificationsDiscordSchema = Yup.object().shape({
    discordId: Yup.string()
      .when('types', {
-        is: (value: unknown) => !!value,
+        is: (types: number) => !!types,
        then: Yup.string()
          .nullable()
          .required(intl.formatMessage(messages.validationDiscordId)),
@@ -63,6 +63,9 @@ const UserNotificationsDiscord: React.FC = () => {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
            pgpKey: data?.pgpKey,
            discordId: values.discordId,
+            pushbulletAccessToken: data?.pushbulletAccessToken,
+            pushoverApplicationToken: data?.pushoverApplicationToken,
+            pushoverUserKey: data?.pushoverUserKey,
            telegramChatId: data?.telegramChatId,
            telegramSendSilently: data?.telegramSendSilently,
            notificationTypes: {
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
@@ -63,6 +63,9 @@ const UserEmailSettings: React.FC = () => {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
            pgpKey: values.pgpKey,
            discordId: data?.discordId,
+            pushbulletAccessToken: data?.pushbulletAccessToken,
+            pushoverApplicationToken: data?.pushoverApplicationToken,
+            pushoverUserKey: data?.pushoverUserKey,
            telegramChatId: data?.telegramChatId,
            telegramSendSilently: data?.telegramSendSilently,
            notificationTypes: {
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet.tsx
@@ -0,0 +1,172 @@
+import axios from 'axios';
+import { Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import * as Yup from 'yup';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import SensitiveInput from '../../../Common/SensitiveInput';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
+
+const messages = defineMessages({
+  pushbulletsettingssaved:
+    'Pushbullet notification settings saved successfully!',
+  pushbulletsettingsfailed: 'Pushbullet notification settings failed to save.',
+  pushbulletAccessToken: 'Access Token',
+  pushbulletAccessTokenTip:
+    'Create a token from your <PushbulletSettingsLink>Account Settings</PushbulletSettingsLink>',
+  validationPushbulletAccessToken: 'You must provide an access token',
+});
+
+const UserPushbulletSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  const UserNotificationsPushbulletSchema = Yup.object().shape({
+    pushbulletAccessToken: Yup.string().when('types', {
+      is: (types: number) => !!types,
+      then: Yup.string()
+        .nullable()
+        .required(intl.formatMessage(messages.validationPushbulletAccessToken)),
+      otherwise: Yup.string().nullable(),
+    }),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        pushbulletAccessToken: data?.pushbulletAccessToken,
+        types: data?.notificationTypes.pushbullet ?? 0,
+      }}
+      validationSchema={UserNotificationsPushbulletSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            pgpKey: data?.pgpKey,
+            discordId: data?.discordId,
+            pushbulletAccessToken: values.pushbulletAccessToken,
+            pushoverApplicationToken: data?.pushoverApplicationToken,
+            pushoverUserKey: data?.pushoverUserKey,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+            notificationTypes: {
+              pushbullet: values.types,
+            },
+          });
+          addToast(intl.formatMessage(messages.pushbulletsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.pushbulletsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        isValid,
+        values,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="pushbulletAccessToken" className="text-label">
+                {intl.formatMessage(messages.pushbulletAccessToken)}
+                <span className="label-required">*</span>
+                {data?.pushbulletAccessToken && (
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.pushbulletAccessTokenTip, {
+                      PushbulletSettingsLink: function PushbulletSettingsLink(
+                        msg
+                      ) {
+                        return (
+                          <a
+                            href="https://www.pushbullet.com/#settings/account"
+                            className="text-white transition duration-300 hover:underline"
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                    })}
+                  </span>
+                )}
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <SensitiveInput
+                    as="field"
+                    id="pushbulletAccessToken"
+                    name="pushbulletAccessToken"
+                    type="text"
+                  />
+                </div>
+                {errors.pushbulletAccessToken &&
+                  touched.pushbulletAccessToken && (
+                    <div className="error">{errors.pushbulletAccessToken}</div>
+                  )}
+              </div>
+            </div>
+            <NotificationTypeSelector
+              user={user}
+              currentTypes={values.types}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+              }}
+              error={
+                errors.types && touched.types
+                  ? (errors.types as string)
+                  : undefined
+              }
+            />
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(globalMessages.saving)
+                      : intl.formatMessage(globalMessages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default UserPushbulletSettings;
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
@@ -0,0 +1,228 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import * as Yup from 'yup';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
+
+const messages = defineMessages({
+  pushoversettingssaved: 'Pushover notification settings saved successfully!',
+  pushoversettingsfailed: 'Pushover notification settings failed to save.',
+  pushoverApplicationToken: 'Application API Token',
+  pushoverApplicationTokenTip:
+    '<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Overseerr',
+  pushoverUserKey: 'User or Group Key',
+  pushoverUserKeyTip:
+    'Your 30-character <UsersGroupsLink>user or group identifier</UsersGroupsLink>',
+  validationPushoverApplicationToken:
+    'You must provide a valid application token',
+  validationPushoverUserKey: 'You must provide a valid user or group key',
+});
+
+const UserPushoverSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  const UserNotificationsPushoverSchema = Yup.object().shape({
+    pushoverApplicationToken: Yup.string()
+      .when('types', {
+        is: (types: number) => !!types,
+        then: Yup.string()
+          .nullable()
+          .required(
+            intl.formatMessage(messages.validationPushoverApplicationToken)
+          ),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(
+        /^[a-z\d]{30}$/i,
+        intl.formatMessage(messages.validationPushoverApplicationToken)
+      ),
+    pushoverUserKey: Yup.string()
+      .when('types', {
+        is: (types: number) => !!types,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationPushoverUserKey)),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(
+        /^[a-z\d]{30}$/i,
+        intl.formatMessage(messages.validationPushoverUserKey)
+      ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        pushoverApplicationToken: data?.pushoverApplicationToken,
+        pushoverUserKey: data?.pushoverUserKey,
+        types: data?.notificationTypes.pushover ?? 0,
+      }}
+      validationSchema={UserNotificationsPushoverSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            pgpKey: data?.pgpKey,
+            discordId: data?.discordId,
+            pushbulletAccessToken: data?.pushbulletAccessToken,
+            pushoverApplicationToken: values.pushoverApplicationToken,
+            pushoverUserKey: values.pushoverUserKey,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+            notificationTypes: {
+              pushover: values.types,
+            },
+          });
+          addToast(intl.formatMessage(messages.pushoversettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.pushoversettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        isValid,
+        values,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="pushoverApplicationToken" className="text-label">
+                {intl.formatMessage(messages.pushoverApplicationToken)}
+                <span className="label-required">*</span>
+                {data?.pushoverApplicationToken && (
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.pushoverApplicationTokenTip, {
+                      ApplicationRegistrationLink:
+                        function ApplicationRegistrationLink(msg) {
+                          return (
+                            <a
+                              href="https://pushover.net/api#registration"
+                              className="text-white transition duration-300 hover:underline"
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              {msg}
+                            </a>
+                          );
+                        },
+                    })}
+                  </span>
+                )}
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    id="pushoverApplicationToken"
+                    name="pushoverApplicationToken"
+                    type="text"
+                  />
+                </div>
+                {errors.pushoverApplicationToken &&
+                  touched.pushoverApplicationToken && (
+                    <div className="error">
+                      {errors.pushoverApplicationToken}
+                    </div>
+                  )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="pushoverUserKey" className="checkbox-label">
+                {intl.formatMessage(messages.pushoverUserKey)}
+                <span className="label-tip">
+                  {intl.formatMessage(messages.pushoverUserKeyTip, {
+                    UsersGroupsLink: function UsersGroupsLink(msg) {
+                      return (
+                        <a
+                          href="https://pushover.net/api#identifiers"
+                          className="text-white transition duration-300 hover:underline"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {msg}
+                        </a>
+                      );
+                    },
+                  })}
+                </span>
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    id="pushoverUserKey"
+                    name="pushoverUserKey"
+                    type="text"
+                  />
+                </div>
+                {errors.pushoverUserKey && touched.pushoverUserKey && (
+                  <div className="error">{errors.pushoverUserKey}</div>
+                )}
+              </div>
+            </div>
+            <NotificationTypeSelector
+              user={user}
+              currentTypes={values.types}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+              }}
+              error={
+                errors.types && touched.types
+                  ? (errors.types as string)
+                  : undefined
+              }
+            />
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(globalMessages.saving)
+                      : intl.formatMessage(globalMessages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default UserPushoverSettings;
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
@@ -37,7 +37,7 @@ const UserTelegramSettings: React.FC = () => {
  const UserNotificationsTelegramSchema = Yup.object().shape({
    telegramChatId: Yup.string()
      .when('types', {
-        is: (value: unknown) => !!value,
+        is: (types: number) => !!types,
        then: Yup.string()
          .nullable()
          .required(intl.formatMessage(messages.validationTelegramChatId)),
@@ -67,6 +67,9 @@ const UserTelegramSettings: React.FC = () => {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
            pgpKey: data?.pgpKey,
            discordId: data?.discordId,
+            pushbulletAccessToken: data?.pushbulletAccessToken,
+            pushoverApplicationToken: data?.pushoverApplicationToken,
+            pushoverUserKey: data?.pushoverUserKey,
            telegramChatId: values.telegramChatId,
            telegramSendSilently: values.telegramSendSilently,
            notificationTypes: {
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
@@ -44,6 +44,9 @@ const UserWebPushSettings: React.FC = () => {
          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
            pgpKey: data?.pgpKey,
            discordId: data?.discordId,
+            pushbulletAccessToken: data?.pushbulletAccessToken,
+            pushoverApplicationToken: data?.pushoverApplicationToken,
+            pushoverUserKey: data?.pushoverUserKey,
            telegramChatId: data?.telegramChatId,
            telegramSendSilently: data?.telegramSendSilently,
            notificationTypes: {
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -5,6 +5,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
 import DiscordLogo from '../../../../assets/extlogos/discord.svg';
+import PushbulletLogo from '../../../../assets/extlogos/pushbullet.svg';
+import PushoverLogo from '../../../../assets/extlogos/pushover.svg';
 import TelegramLogo from '../../../../assets/extlogos/telegram.svg';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
@@ -64,6 +66,28 @@ const UserNotificationSettings: React.FC = ({ children }) => {
      route: '/settings/notifications/discord',
      regex: /\/settings\/notifications\/discord/,
    },
+    {
+      text: 'Pushbullet',
+      content: (
+        <span className="flex items-center">
+          <PushbulletLogo className="h-4 mr-2" />
+          Pushbullet
+        </span>
+      ),
+      route: '/settings/notifications/pushbullet',
+      regex: /\/settings\/notifications\/pushbullet/,
+    },
+    {
+      text: 'Pushover',
+      content: (
+        <span className="flex items-center">
+          <PushoverLogo className="h-4 mr-2" />
+          Pushover
+        </span>
+      ),
+      route: '/settings/notifications/pushover',
+      regex: /\/settings\/notifications\/pushover/,
+    },
    {
      text: 'Telegram',
      content: (