mirror of
https://github.com/fallenbagel/jellyseerr.git
synced 2026-01-01 12:18:35 -05:00
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
This commit is contained in:
TheCatLady
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user