feat(notif): allow users to enable/disable specific agents (#1172)

* refactor(ui): add tabs to user notification settings

* feat(notif): allow users to enable/disable specific agents

* fix(ui): only enforce required fields when agent is enabled

* fix(ui): hide unavailable notification agents

* feat(notif): mention admin users for admin Discord notifications

* fix(ui): modify styling of PGP key textareas to suit expected input

* fix(notif): mention all admins when there are multiple and fix rebase error

* fix: add missing form values, and fix Yup validation

* refactor: reduce repeated logic/code in email notif agent

* refactor: move 'Notification Types' label into NotificationTypeSelector component

* fix(email): correct inconsistencies in email template formatting

* refactor: use bitfields for storing user-enabled notif agent types

* feat: improve notification agent logging

* fix(ui): mark string fields as nullable so empty values are not type errors

* fix: add validation for PGP-related inputs

* fix: correctly fetch user in user settings & log mentioned IDs for Discord notifs

* fix(ui): fix mobile nav dropdown text & add hover effect to button-style tabs

* fix(notif): process admin email notifications asynchronously

* fix(logging): log name of notification type instead of its enum value

* fix: mark required fields and pass all user settings values to API

* fix(frontend): call mutate after changing email/Discord/Telegram global notif settings

* refactor: get global notif settings from relevant API endpoints instead of adding to public settings

* fix(notif): fall back to email notifications being enabled (default) if user settings do not exist

* fix(notif): do not set notifyUser for MEDIA_PENDING or MEDIA_AUTO_APPROVED

* fix: expose notif enabled settings in user notif endpoints & remove global enable notif setting

* fix(notif): remove unnecessary allowed_mentions object from Discord payload

* fix(notif): use form values for email test notification

* fix: make suggested changes and regenerate DB migration

* fix: loosen validation of PGP keys

* fix: fix user profile settings routes

* fix: remove route guard from profile pages

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -0,0 +1,178 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } 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 {
+  hasNotificationAgentEnabled,
+  NotificationAgentType,
+} from '../../../../../server/lib/notifications/agenttypes';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+
+const messages = defineMessages({
+  discordsettingssaved: 'Discord notification settings saved successfully!',
+  discordsettingsfailed: 'Discord notification settings failed to save.',
+  enableDiscord: 'Enable Mentions',
+  discordId: 'User ID',
+  discordIdTip:
+    'The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your user account',
+  validationDiscordId: 'You must provide a valid user ID',
+});
+
+const UserNotificationsDiscord: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const [notificationAgents, setNotificationAgents] = useState(0);
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  useEffect(() => {
+    setNotificationAgents(
+      data?.notificationAgents ?? NotificationAgentType.EMAIL
+    );
+  }, [data]);
+
+  const UserNotificationsDiscordSchema = Yup.object().shape({
+    discordId: Yup.string()
+      .when('enableDiscord', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationDiscordId)),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(/^\d{17,18}$/, intl.formatMessage(messages.validationDiscordId)),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableDiscord: hasNotificationAgentEnabled(
+          NotificationAgentType.DISCORD,
+          data?.notificationAgents ?? NotificationAgentType.EMAIL
+        ),
+        discordId: data?.discordId,
+      }}
+      validationSchema={UserNotificationsDiscordSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            notificationAgents,
+            pgpKey: data?.pgpKey,
+            discordId: values.discordId,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+          });
+          addToast(intl.formatMessage(messages.discordsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.discordsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+        return (
+          <Form className="section">
+            {data?.discordEnabled && (
+              <div className="form-row">
+                <label htmlFor="enableDiscord" className="checkbox-label">
+                  {intl.formatMessage(messages.enableDiscord)}
+                </label>
+                <div className="form-input">
+                  <Field
+                    type="checkbox"
+                    id="enableDiscord"
+                    name="enableDiscord"
+                    checked={hasNotificationAgentEnabled(
+                      NotificationAgentType.DISCORD,
+                      notificationAgents
+                    )}
+                    onChange={() => {
+                      setNotificationAgents(
+                        hasNotificationAgentEnabled(
+                          NotificationAgentType.DISCORD,
+                          notificationAgents
+                        )
+                          ? notificationAgents - NotificationAgentType.DISCORD
+                          : notificationAgents + NotificationAgentType.DISCORD
+                      );
+                      setFieldValue('enableDiscord', !values.enableDiscord);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            <div className="form-row">
+              <label htmlFor="discordId" className="text-label">
+                <span>{intl.formatMessage(messages.discordId)}</span>
+                <span className="label-required">*</span>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.discordIdTip, {
+                    FindDiscordIdLink: function FindDiscordIdLink(msg) {
+                      return (
+                        <a
+                          href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {msg}
+                        </a>
+                      );
+                    },
+                  })}
+                </span>
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field id="discordId" name="discordId" type="text" />
+                </div>
+                {errors.discordId && touched.discordId && (
+                  <div className="error">{errors.discordId}</div>
+                )}
+              </div>
+            </div>
+            <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 UserNotificationsDiscord;

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -0,0 +1,175 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } 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 {
+  hasNotificationAgentEnabled,
+  NotificationAgentType,
+} from '../../../../../server/lib/notifications/agenttypes';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Badge from '../../../Common/Badge';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { OpenPgpLink } from '../../../Settings/Notifications/NotificationsEmail';
+
+const messages = defineMessages({
+  emailsettingssaved: 'Email notification settings saved successfully!',
+  emailsettingsfailed: 'Email notification settings failed to save.',
+  enableEmail: 'Enable Notifications',
+  pgpPublicKey: 'PGP Public Key',
+  pgpPublicKeyTip:
+    'Encrypt email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
+  validationPgpPublicKey: 'You must provide a valid PGP public key',
+});
+
+const UserEmailSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const [notificationAgents, setNotificationAgents] = useState(0);
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  useEffect(() => {
+    setNotificationAgents(
+      data?.notificationAgents ?? NotificationAgentType.EMAIL
+    );
+  }, [data]);
+
+  const UserNotificationsEmailSchema = Yup.object().shape({
+    pgpKey: Yup.string()
+      .nullable()
+      .matches(
+        /^-----BEGIN PGP PUBLIC KEY BLOCK-----.+-----END PGP PUBLIC KEY BLOCK-----$/,
+        intl.formatMessage(messages.validationPgpPublicKey)
+      ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableEmail: hasNotificationAgentEnabled(
+          NotificationAgentType.EMAIL,
+          data?.notificationAgents ?? NotificationAgentType.EMAIL
+        ),
+        pgpKey: data?.pgpKey,
+      }}
+      validationSchema={UserNotificationsEmailSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            notificationAgents,
+            pgpKey: values.pgpKey,
+            discordId: data?.discordId,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+          });
+          addToast(intl.formatMessage(messages.emailsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.emailsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="enableEmail" className="checkbox-label">
+                {intl.formatMessage(messages.enableEmail)}
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="enableEmail"
+                  name="enableEmail"
+                  checked={hasNotificationAgentEnabled(
+                    NotificationAgentType.EMAIL,
+                    notificationAgents
+                  )}
+                  onChange={() => {
+                    setNotificationAgents(
+                      hasNotificationAgentEnabled(
+                        NotificationAgentType.EMAIL,
+                        notificationAgents
+                      )
+                        ? notificationAgents - NotificationAgentType.EMAIL
+                        : notificationAgents + NotificationAgentType.EMAIL
+                    );
+                    setFieldValue('enableEmail', !values.enableEmail);
+                  }}
+                />
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="pgpKey" className="text-label">
+                <span className="mr-2">
+                  {intl.formatMessage(messages.pgpPublicKey)}
+                </span>
+                <Badge badgeType="danger">
+                  {intl.formatMessage(globalMessages.advanced)}
+                </Badge>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.pgpPublicKeyTip, {
+                    OpenPgpLink: OpenPgpLink,
+                  })}
+                </span>
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    as="textarea"
+                    id="pgpKey"
+                    name="pgpKey"
+                    rows="10"
+                    className="font-mono text-xs"
+                  />
+                </div>
+                {errors.pgpKey && touched.pgpKey && (
+                  <div className="error">{errors.pgpKey}</div>
+                )}
+              </div>
+            </div>
+            <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 UserEmailSettings;

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -0,0 +1,217 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } 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 {
+  hasNotificationAgentEnabled,
+  NotificationAgentType,
+} from '../../../../../server/lib/notifications/agenttypes';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+
+const messages = defineMessages({
+  telegramsettingssaved: 'Telegram notification settings saved successfully!',
+  telegramsettingsfailed: 'Telegram notification settings failed to save.',
+  enableTelegram: 'Enable Notifications',
+  telegramChatId: 'Chat ID',
+  telegramChatIdTipLong:
+    '<TelegramBotLink>Start a chat</TelegramBotLink>, add <GetIdBotLink>@get_id_bot</GetIdBotLink>, and issue the <code>/my_id</code> command',
+  sendSilently: 'Send Silently',
+  sendSilentlyDescription: 'Send notifications with no sound',
+  validationTelegramChatId: 'You must provide a valid chat ID',
+});
+
+const UserTelegramSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const [notificationAgents, setNotificationAgents] = useState(0);
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  useEffect(() => {
+    setNotificationAgents(
+      data?.notificationAgents ?? NotificationAgentType.EMAIL
+    );
+  }, [data]);
+
+  const UserNotificationsTelegramSchema = Yup.object().shape({
+    telegramChatId: Yup.string()
+      .when('enableTelegram', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationTelegramChatId)),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(
+        /^-?\d+$/,
+        intl.formatMessage(messages.validationTelegramChatId)
+      ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableTelegram: hasNotificationAgentEnabled(
+          NotificationAgentType.TELEGRAM,
+          data?.notificationAgents ?? NotificationAgentType.EMAIL
+        ),
+        telegramChatId: data?.telegramChatId,
+        telegramSendSilently: data?.telegramSendSilently,
+      }}
+      validationSchema={UserNotificationsTelegramSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            notificationAgents,
+            pgpKey: data?.pgpKey,
+            discordId: data?.discordId,
+            telegramChatId: values.telegramChatId,
+            telegramSendSilently: values.telegramSendSilently,
+          });
+          addToast(intl.formatMessage(messages.telegramsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.telegramsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="enableTelegram" className="checkbox-label">
+                {intl.formatMessage(messages.enableTelegram)}
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="enableTelegram"
+                  name="enableTelegram"
+                  checked={hasNotificationAgentEnabled(
+                    NotificationAgentType.TELEGRAM,
+                    notificationAgents
+                  )}
+                  onChange={() => {
+                    setNotificationAgents(
+                      hasNotificationAgentEnabled(
+                        NotificationAgentType.TELEGRAM,
+                        notificationAgents
+                      )
+                        ? notificationAgents - NotificationAgentType.TELEGRAM
+                        : notificationAgents + NotificationAgentType.TELEGRAM
+                    );
+                    setFieldValue('enableTelegram', !values.enableTelegram);
+                  }}
+                />
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="telegramChatId" className="text-label">
+                {intl.formatMessage(messages.telegramChatId)}
+                <span className="label-required">*</span>
+                {data?.telegramBotUsername && (
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.telegramChatIdTipLong, {
+                      TelegramBotLink: function TelegramBotLink(msg) {
+                        return (
+                          <a
+                            href={`https://telegram.me/${data.telegramBotUsername}`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                      GetIdBotLink: function GetIdBotLink(msg) {
+                        return (
+                          <a
+                            href="https://telegram.me/get_id_bot"
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                      code: function code(msg) {
+                        return <code>{msg}</code>;
+                      },
+                    })}
+                  </span>
+                )}
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    id="telegramChatId"
+                    name="telegramChatId"
+                    type="text"
+                  />
+                </div>
+                {errors.telegramChatId && touched.telegramChatId && (
+                  <div className="error">{errors.telegramChatId}</div>
+                )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="telegramSendSilently" className="checkbox-label">
+                {intl.formatMessage(messages.sendSilently)}
+                <span className="label-tip">
+                  {intl.formatMessage(messages.sendSilentlyDescription)}
+                </span>
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="telegramSendSilently"
+                  name="telegramSendSilently"
+                />
+              </div>
+            </div>
+            <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 UserTelegramSettings;

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -1,61 +1,88 @@
-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 DiscordLogo from '../../../../assets/extlogos/discord.svg';
+import TelegramLogo from '../../../../assets/extlogos/telegram.svg';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Error from '../../../../pages/_error';
-import Badge from '../../../Common/Badge';
-import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import PageTitle from '../../../Common/PageTitle';
-import { PgpLink } from '../../../Settings/Notifications/NotificationsEmail';
+import SettingsTabs, { SettingsRoute } from '../../../Common/SettingsTabs';
 
 const messages = defineMessages({
   notifications: 'Notifications',
   notificationsettings: 'Notification Settings',
-  enableNotifications: 'Enable Notifications',
-  discordId: 'Discord ID',
-  discordIdTip:
-    'The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your Discord user account',
-  validationDiscordId: 'You must provide a valid Discord user ID',
-  telegramChatId: 'Telegram Chat ID',
-  telegramChatIdTip: 'Add <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat',
-  telegramChatIdTipLong:
-    '<TelegramBotLink>Start a chat</TelegramBotLink>, add <GetIdBotLink>@get_id_bot</GetIdBotLink>, and issue the <code>/my_id</code> command',
-  sendSilently: 'Send Telegram Messages Silently',
-  sendSilentlyDescription: 'Send notifications with no sound',
-  validationTelegramChatId: 'You must provide a valid Telegram chat ID',
+  email: 'Email',
   toastSettingsSuccess: 'Notification settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
-  pgpKey: '<PgpLink>PGP</PgpLink> Public Key',
-  pgpKeyTip: 'Encrypt email messages',
 });
 
-const UserNotificationSettings: React.FC = () => {
+const UserNotificationSettings: React.FC = ({ children }) => {
   const intl = useIntl();
-  const { addToast } = useToasts();
   const router = useRouter();
-  const { user, mutate } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 
-  const UserNotificationSettingsSchema = Yup.object().shape({
-    discordId: Yup.string()
-      .nullable()
-      .matches(/^\d{17,18}$/, intl.formatMessage(messages.validationDiscordId)),
-    telegramChatId: Yup.string()
-      .nullable()
-      .matches(
-        /^[-]?\d+$/,
-        intl.formatMessage(messages.validationTelegramChatId)
+  const settingsRoutes: SettingsRoute[] = [
+    {
+      text: intl.formatMessage(messages.email),
+      content: (
+        <span className="flex items-center">
+          <svg
+            className="h-4 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
+            />
+          </svg>
+          {intl.formatMessage(messages.email)}
+        </span>
       ),
+      route: '/settings/notifications/email',
+      regex: /\/settings\/notifications\/email/,
+      hidden: !data?.emailEnabled,
+    },
+    {
+      text: 'Discord',
+      content: (
+        <span className="flex items-center">
+          <DiscordLogo className="h-4 mr-2" />
+          Discord
+        </span>
+      ),
+      route: '/settings/notifications/discord',
+      regex: /\/settings\/notifications\/discord/,
+    },
+    {
+      text: 'Telegram',
+      content: (
+        <span className="flex items-center">
+          <TelegramLogo className="h-4 mr-2" />
+          Telegram
+        </span>
+      ),
+      route: '/settings/notifications/telegram',
+      regex: /\/settings\/notifications\/telegram/,
+      hidden: !data?.telegramEnabled || !data?.telegramBotUsername,
+    },
+  ];
+
+  settingsRoutes.forEach((settingsRoute) => {
+    settingsRoute.route = router.asPath.includes('/profile')
+      ? `/profile${settingsRoute.route}`
+      : `/users/${user?.id}${settingsRoute.route}`;
   });
 
   if (!data && !error) {
@@ -80,215 +107,8 @@ const UserNotificationSettings: React.FC = () => {
           {intl.formatMessage(messages.notificationsettings)}
         </h3>
       </div>
-      <Formik
-        initialValues={{
-          enableNotifications: data?.enableNotifications,
-          discordId: data?.discordId,
-          telegramChatId: data?.telegramChatId,
-          telegramSendSilently: data?.telegramSendSilently,
-          pgpKey: data?.pgpKey,
-        }}
-        validationSchema={UserNotificationSettingsSchema}
-        enableReinitialize
-        onSubmit={async (values) => {
-          try {
-            await axios.post(
-              `/api/v1/user/${user?.id}/settings/notifications`,
-              {
-                enableNotifications: values.enableNotifications,
-                discordId: values.discordId,
-                telegramChatId: values.telegramChatId,
-                telegramSendSilently: values.telegramSendSilently,
-                pgpKey: values.pgpKey,
-              }
-            );
-
-            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
-              autoDismiss: true,
-              appearance: 'success',
-            });
-          } catch (e) {
-            addToast(intl.formatMessage(messages.toastSettingsFailure), {
-              autoDismiss: true,
-              appearance: 'error',
-            });
-          } finally {
-            revalidate();
-            mutate();
-          }
-        }}
-      >
-        {({ errors, touched, isSubmitting }) => {
-          return (
-            <Form className="section">
-              <div className="form-row">
-                <label htmlFor="enableNotifications" className="checkbox-label">
-                  <span className="mr-2">
-                    {intl.formatMessage(messages.enableNotifications)}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <Field
-                    type="checkbox"
-                    id="enableNotifications"
-                    name="enableNotifications"
-                  />
-                </div>
-              </div>
-              <div className="form-row">
-                <label htmlFor="pgpKey" className="text-label">
-                  <span className="mr-2">
-                    {intl.formatMessage(messages.pgpKey, {
-                      PgpLink: PgpLink,
-                    })}
-                  </span>
-                  <Badge badgeType="danger">
-                    {intl.formatMessage(globalMessages.advanced)}
-                  </Badge>
-                  <span className="label-tip">
-                    {intl.formatMessage(messages.pgpKeyTip)}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <div className="form-input-field">
-                    <Field id="pgpKey" name="pgpKey" as="textarea" rows="3" />
-                  </div>
-                  {errors.pgpKey && touched.pgpKey && (
-                    <div className="error">{errors.pgpKey}</div>
-                  )}
-                </div>
-              </div>
-              <div className="form-row">
-                <label htmlFor="discordId" className="text-label">
-                  <span>{intl.formatMessage(messages.discordId)}</span>
-                  <span className="label-tip">
-                    {intl.formatMessage(messages.discordIdTip, {
-                      FindDiscordIdLink: function FindDiscordIdLink(msg) {
-                        return (
-                          <a
-                            href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-gray-100 underline transition duration-300 hover:text-white"
-                          >
-                            {msg}
-                          </a>
-                        );
-                      },
-                    })}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <div className="form-input-field">
-                    <Field id="discordId" name="discordId" type="text" />
-                  </div>
-                  {errors.discordId && touched.discordId && (
-                    <div className="error">{errors.discordId}</div>
-                  )}
-                </div>
-              </div>
-              <div className="form-row">
-                <label htmlFor="telegramChatId" className="text-label">
-                  <span>{intl.formatMessage(messages.telegramChatId)}</span>
-                  <span className="label-tip">
-                    {data?.telegramBotUsername
-                      ? intl.formatMessage(messages.telegramChatIdTipLong, {
-                          TelegramBotLink: function TelegramBotLink(msg) {
-                            return (
-                              <a
-                                href={`https://telegram.me/${data.telegramBotUsername}`}
-                                target="_blank"
-                                rel="noreferrer"
-                                className="text-gray-100 underline transition duration-300 hover:text-white"
-                              >
-                                {msg}
-                              </a>
-                            );
-                          },
-                          GetIdBotLink: function GetIdBotLink(msg) {
-                            return (
-                              <a
-                                href="https://telegram.me/get_id_bot"
-                                className="text-gray-100 underline transition duration-300 hover:text-white"
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {msg}
-                              </a>
-                            );
-                          },
-                          code: function code(msg) {
-                            return <code>{msg}</code>;
-                          },
-                        })
-                      : intl.formatMessage(messages.telegramChatIdTip, {
-                          GetIdBotLink: function GetIdBotLink(msg) {
-                            return (
-                              <a
-                                href="https://telegram.me/get_id_bot"
-                                className="text-gray-100 underline transition duration-300 hover:text-white"
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {msg}
-                              </a>
-                            );
-                          },
-                        })}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <div className="form-input-field">
-                    <Field
-                      id="telegramChatId"
-                      name="telegramChatId"
-                      type="text"
-                    />
-                  </div>
-                  {errors.telegramChatId && touched.telegramChatId && (
-                    <div className="error">{errors.telegramChatId}</div>
-                  )}
-                </div>
-              </div>
-              <div className="form-row">
-                <label
-                  htmlFor="telegramSendSilently"
-                  className="checkbox-label"
-                >
-                  <span className="mr-2">
-                    {intl.formatMessage(messages.sendSilently)}
-                  </span>
-                  <span className="label-tip">
-                    {intl.formatMessage(messages.sendSilentlyDescription)}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <Field
-                    type="checkbox"
-                    id="telegramSendSilently"
-                    name="telegramSendSilently"
-                  />
-                </div>
-              </div>
-              <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}
-                    >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
-                    </Button>
-                  </span>
-                </div>
-              </div>
-            </Form>
-          );
-        }}
-      </Formik>
+      <SettingsTabs tabType="button" settingsRoutes={settingsRoutes} />
+      <div className="section">{children}</div>
     </>
   );
 };