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

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)),

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: {

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: {

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;

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;

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: {

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: {

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: (

src/i18n/locale/en.json

@@ -874,6 +874,16 @@
   "components.UserProfile.UserSettings.UserNotificationSettings.notificationsettings": "Notification Settings",
   "components.UserProfile.UserSettings.UserNotificationSettings.pgpPublicKey": "PGP Public Key",
   "components.UserProfile.UserSettings.UserNotificationSettings.pgpPublicKeyTip": "Encrypt email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushbulletAccessToken": "Access Token",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushbulletAccessTokenTip": "Create a token from your <PushbulletSettingsLink>Account Settings</PushbulletSettingsLink>",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushbulletsettingsfailed": "Pushbullet notification settings failed to save.",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushbulletsettingssaved": "Pushbullet notification settings saved successfully!",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushoverApplicationToken": "Application API Token",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushoverApplicationTokenTip": "<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Overseerr",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushoverUserKey": "User or Group Key",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushoverUserKeyTip": "Your 30-character <UsersGroupsLink>user or group identifier</UsersGroupsLink>",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushoversettingsfailed": "Pushover notification settings failed to save.",
+  "components.UserProfile.UserSettings.UserNotificationSettings.pushoversettingssaved": "Pushover notification settings saved successfully!",
   "components.UserProfile.UserSettings.UserNotificationSettings.sendSilently": "Send Silently",
   "components.UserProfile.UserSettings.UserNotificationSettings.sendSilentlyDescription": "Send notifications with no sound",
   "components.UserProfile.UserSettings.UserNotificationSettings.telegramChatId": "Chat ID",
@@ -882,6 +892,9 @@
   "components.UserProfile.UserSettings.UserNotificationSettings.telegramsettingssaved": "Telegram notification settings saved successfully!",
   "components.UserProfile.UserSettings.UserNotificationSettings.validationDiscordId": "You must provide a valid user ID",
   "components.UserProfile.UserSettings.UserNotificationSettings.validationPgpPublicKey": "You must provide a valid PGP public key",
+  "components.UserProfile.UserSettings.UserNotificationSettings.validationPushbulletAccessToken": "You must provide an access token",
+  "components.UserProfile.UserSettings.UserNotificationSettings.validationPushoverApplicationToken": "You must provide a valid application token",
+  "components.UserProfile.UserSettings.UserNotificationSettings.validationPushoverUserKey": "You must provide a valid user or group key",
   "components.UserProfile.UserSettings.UserNotificationSettings.validationTelegramChatId": "You must provide a valid chat ID",
   "components.UserProfile.UserSettings.UserNotificationSettings.webpush": "Web Push",
   "components.UserProfile.UserSettings.UserNotificationSettings.webpushsettingsfailed": "Web push notification settings failed to save.",

src/pages/profile/settings/notifications/pushbullet.tsx

@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserNotificationSettings from '../../../../components/UserProfile/UserSettings/UserNotificationSettings';
+import UserNotificationsPushbullet from '../../../../components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet';
+
+const NotificationsPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserNotificationSettings>
+        <UserNotificationsPushbullet />
+      </UserNotificationSettings>
+    </UserSettings>
+  );
+};
+
+export default NotificationsPage;

src/pages/profile/settings/notifications/pushover.tsx

@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserNotificationSettings from '../../../../components/UserProfile/UserSettings/UserNotificationSettings';
+import UserNotificationsPushover from '../../../../components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover';
+
+const NotificationsPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserNotificationSettings>
+        <UserNotificationsPushover />
+      </UserNotificationSettings>
+    </UserSettings>
+  );
+};
+
+export default NotificationsPage;

src/pages/users/[userId]/settings/notifications/pushbullet.tsx

@@ -0,0 +1,20 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../../components/UserProfile/UserSettings';
+import UserNotificationSettings from '../../../../../components/UserProfile/UserSettings/UserNotificationSettings';
+import UserNotificationsPushbullet from '../../../../../components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushbullet';
+import useRouteGuard from '../../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../../hooks/useUser';
+
+const NotificationsPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserNotificationSettings>
+        <UserNotificationsPushbullet />
+      </UserNotificationSettings>
+    </UserSettings>
+  );
+};
+
+export default NotificationsPage;

src/pages/users/[userId]/settings/notifications/pushover.tsx

@@ -0,0 +1,20 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../../components/UserProfile/UserSettings';
+import UserNotificationSettings from '../../../../../components/UserProfile/UserSettings/UserNotificationSettings';
+import UserNotificationsPushover from '../../../../../components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover';
+import useRouteGuard from '../../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../../hooks/useUser';
+
+const NotificationsPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserNotificationSettings>
+        <UserNotificationsPushover />
+      </UserNotificationSettings>
+    </UserSettings>
+  );
+};
+
+export default NotificationsPage;