mirror of
https://github.com/fallenbagel/jellyseerr.git
synced 2026-01-02 04:39:14 -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
@@ -18,8 +18,7 @@ const messages = defineMessages({
|
||||
webhookUrlPlaceholder: 'Server Settings → Integrations → Webhooks',
|
||||
discordsettingssaved: 'Discord notification settings saved successfully!',
|
||||
discordsettingsfailed: 'Discord notification settings failed to save.',
|
||||
testsent: 'Test notification sent!',
|
||||
notificationtypes: 'Notification Types',
|
||||
testsent: 'Discord test notification sent!',
|
||||
validationUrl: 'You must provide a valid URL',
|
||||
});
|
||||
|
||||
@@ -35,7 +34,13 @@ const NotificationsDiscord: React.FC = () => {
|
||||
.nullable()
|
||||
.url(intl.formatMessage(messages.validationUrl)),
|
||||
webhookUrl: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationUrl))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationUrl)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.url(intl.formatMessage(messages.validationUrl)),
|
||||
});
|
||||
|
||||
@@ -64,6 +69,7 @@ const NotificationsDiscord: React.FC = () => {
|
||||
webhookUrl: values.webhookUrl,
|
||||
},
|
||||
});
|
||||
|
||||
addToast(intl.formatMessage(messages.discordsettingssaved), {
|
||||
appearance: 'success',
|
||||
autoDismiss: true,
|
||||
@@ -163,26 +169,10 @@ const NotificationsDiscord: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationtypes)}
|
||||
<span className="label-required">*</span>
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -13,7 +13,7 @@ import LoadingSpinner from '../../Common/LoadingSpinner';
|
||||
import NotificationTypeSelector from '../../NotificationTypeSelector';
|
||||
|
||||
const messages = defineMessages({
|
||||
validationSmtpHostRequired: 'You must provide a hostname or IP address',
|
||||
validationSmtpHostRequired: 'You must provide a valid hostname or IP address',
|
||||
validationSmtpPortRequired: 'You must provide a valid port number',
|
||||
agentenabled: 'Enable Agent',
|
||||
emailsender: 'Sender Address',
|
||||
@@ -24,34 +24,32 @@ const messages = defineMessages({
|
||||
authPass: 'SMTP Password',
|
||||
emailsettingssaved: 'Email notification settings saved successfully!',
|
||||
emailsettingsfailed: 'Email notification settings failed to save.',
|
||||
testsent: 'Test notification sent!',
|
||||
testsent: 'Email test notification sent!',
|
||||
allowselfsigned: 'Allow Self-Signed Certificates',
|
||||
ssldisabletip:
|
||||
'SSL should be disabled on standard TLS connections (port 587)',
|
||||
senderName: 'Sender Name',
|
||||
notificationtypes: 'Notification Types',
|
||||
validationEmail: 'You must provide a valid email address',
|
||||
emailNotificationTypesAlert: 'Email Notification Recipients',
|
||||
emailNotificationTypesAlertDescription:
|
||||
'<strong>Media Requested</strong>, <strong>Media Automatically Approved</strong>, and <strong>Media Failed</strong> email notifications are sent to all users with the <strong>Manage Requests</strong> permission.',
|
||||
emailNotificationTypesAlertDescriptionPt2:
|
||||
'<strong>Media Approved</strong>, <strong>Media Declined</strong>, and <strong>Media Available</strong> email notifications are sent to the user who submitted the request.',
|
||||
pgpPrivateKey: '<PgpLink>PGP</PgpLink> Private Key',
|
||||
pgpPrivateKey: 'PGP Private Key',
|
||||
pgpPrivateKeyTip:
|
||||
'Sign encrypted email messages (PGP password is also required)',
|
||||
pgpPassword: '<PgpLink>PGP</PgpLink> Password',
|
||||
'Sign encrypted email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
|
||||
validationPgpPrivateKey:
|
||||
'You must provide a valid PGP private key if a PGP password is entered',
|
||||
pgpPassword: 'PGP Password',
|
||||
pgpPasswordTip:
|
||||
'Sign encrypted email messages (PGP private key is also required)',
|
||||
'Sign encrypted email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
|
||||
validationPgpPassword:
|
||||
'You must provide a PGP password if a PGP private key is entered',
|
||||
});
|
||||
|
||||
export function PgpLink(msg: string): JSX.Element {
|
||||
export function OpenPgpLink(msg: string): JSX.Element {
|
||||
return (
|
||||
<a
|
||||
href="https://www.openpgp.org/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-gray-100 underline transition duration-300 hover:text-white"
|
||||
>
|
||||
<a href="https://www.openpgp.org/" target="_blank" rel="noreferrer">
|
||||
{msg}
|
||||
</a>
|
||||
);
|
||||
@@ -64,21 +62,60 @@ const NotificationsEmail: React.FC = () => {
|
||||
'/api/v1/settings/notifications/email'
|
||||
);
|
||||
|
||||
const NotificationsEmailSchema = Yup.object().shape({
|
||||
emailFrom: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationEmail))
|
||||
.email(intl.formatMessage(messages.validationEmail)),
|
||||
smtpHost: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationSmtpHostRequired))
|
||||
.matches(
|
||||
// eslint-disable-next-line
|
||||
/^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
|
||||
intl.formatMessage(messages.validationSmtpHostRequired)
|
||||
),
|
||||
smtpPort: Yup.number()
|
||||
.typeError(intl.formatMessage(messages.validationSmtpPortRequired))
|
||||
.required(intl.formatMessage(messages.validationSmtpPortRequired)),
|
||||
});
|
||||
const NotificationsEmailSchema = Yup.object().shape(
|
||||
{
|
||||
emailFrom: Yup.string()
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationEmail)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.email(intl.formatMessage(messages.validationEmail)),
|
||||
smtpHost: Yup.string()
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationSmtpHostRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.matches(
|
||||
/^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
|
||||
intl.formatMessage(messages.validationSmtpHostRequired)
|
||||
),
|
||||
smtpPort: Yup.number()
|
||||
.typeError(intl.formatMessage(messages.validationSmtpPortRequired))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.number().required(
|
||||
intl.formatMessage(messages.validationSmtpPortRequired)
|
||||
),
|
||||
otherwise: Yup.number().nullable(),
|
||||
}),
|
||||
pgpPrivateKey: Yup.string()
|
||||
.when('pgpPassword', {
|
||||
is: (value: unknown) => !!value,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationPgpPrivateKey)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.matches(
|
||||
/^-----BEGIN PGP PRIVATE KEY BLOCK-----.+-----END PGP PRIVATE KEY BLOCK-----$/,
|
||||
intl.formatMessage(messages.validationPgpPrivateKey)
|
||||
),
|
||||
pgpPassword: Yup.string().when('pgpPrivateKey', {
|
||||
is: (value: unknown) => !!value,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationPgpPassword)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
}),
|
||||
},
|
||||
[['pgpPrivateKey', 'pgpPassword']]
|
||||
);
|
||||
|
||||
if (!data && !error) {
|
||||
return <LoadingSpinner />;
|
||||
@@ -119,6 +156,7 @@ const NotificationsEmail: React.FC = () => {
|
||||
pgpPassword: values.pgpPassword,
|
||||
},
|
||||
});
|
||||
|
||||
addToast(intl.formatMessage(messages.emailsettingssaved), {
|
||||
appearance: 'success',
|
||||
autoDismiss: true,
|
||||
@@ -323,15 +361,15 @@ const NotificationsEmail: React.FC = () => {
|
||||
<div className="form-row">
|
||||
<label htmlFor="pgpPrivateKey" className="text-label">
|
||||
<span className="mr-2">
|
||||
{intl.formatMessage(messages.pgpPrivateKey, {
|
||||
PgpLink: PgpLink,
|
||||
})}
|
||||
{intl.formatMessage(messages.pgpPrivateKey)}
|
||||
</span>
|
||||
<Badge badgeType="danger">
|
||||
{intl.formatMessage(globalMessages.advanced)}
|
||||
</Badge>
|
||||
<span className="label-tip">
|
||||
{intl.formatMessage(messages.pgpPrivateKeyTip)}
|
||||
{intl.formatMessage(messages.pgpPrivateKeyTip, {
|
||||
OpenPgpLink: OpenPgpLink,
|
||||
})}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
@@ -340,23 +378,27 @@ const NotificationsEmail: React.FC = () => {
|
||||
id="pgpPrivateKey"
|
||||
name="pgpPrivateKey"
|
||||
as="textarea"
|
||||
rows="3"
|
||||
rows="10"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
{errors.pgpPrivateKey && touched.pgpPrivateKey && (
|
||||
<div className="error">{errors.pgpPrivateKey}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="pgpPassword" className="text-label">
|
||||
<span className="mr-2">
|
||||
{intl.formatMessage(messages.pgpPassword, {
|
||||
PgpLink: PgpLink,
|
||||
})}
|
||||
{intl.formatMessage(messages.pgpPassword)}
|
||||
</span>
|
||||
<Badge badgeType="danger">
|
||||
{intl.formatMessage(globalMessages.advanced)}
|
||||
</Badge>
|
||||
<span className="label-tip">
|
||||
{intl.formatMessage(messages.pgpPasswordTip)}
|
||||
{intl.formatMessage(messages.pgpPasswordTip, {
|
||||
OpenPgpLink: OpenPgpLink,
|
||||
})}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
@@ -368,30 +410,15 @@ const NotificationsEmail: React.FC = () => {
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
{errors.pgpPassword && touched.pgpPassword && (
|
||||
<div className="error">{errors.pgpPassword}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationtypes)}
|
||||
<span className="label-required">*</span>
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) =>
|
||||
setFieldValue('types', newTypes)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -18,11 +18,10 @@ const messages = defineMessages({
|
||||
pushbulletSettingsSaved:
|
||||
'Pushbullet notification settings saved successfully!',
|
||||
pushbulletSettingsFailed: 'Pushbullet notification settings failed to save.',
|
||||
testSent: 'Test notification sent!',
|
||||
testSent: 'Pushbullet test notification sent!',
|
||||
settingUpPushbullet: 'Setting Up Pushbullet Notifications',
|
||||
settingUpPushbulletDescription:
|
||||
'To configure Pushbullet notifications, you will need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink> and enter it below.',
|
||||
notificationTypes: 'Notification Types',
|
||||
'To configure Pushbullet notifications, you will need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink>.',
|
||||
});
|
||||
|
||||
const NotificationsPushbullet: React.FC = () => {
|
||||
@@ -33,9 +32,13 @@ const NotificationsPushbullet: React.FC = () => {
|
||||
);
|
||||
|
||||
const NotificationsPushbulletSchema = Yup.object().shape({
|
||||
accessToken: Yup.string().required(
|
||||
intl.formatMessage(messages.validationAccessTokenRequired)
|
||||
),
|
||||
accessToken: Yup.string().when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationAccessTokenRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
}),
|
||||
});
|
||||
|
||||
if (!data && !error) {
|
||||
@@ -138,28 +141,10 @@ const NotificationsPushbullet: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationTypes)}
|
||||
<span className="label-required">*</span>
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) =>
|
||||
setFieldValue('types', newTypes)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -14,16 +14,15 @@ import NotificationTypeSelector from '../../../NotificationTypeSelector';
|
||||
const messages = defineMessages({
|
||||
agentenabled: 'Enable Agent',
|
||||
accessToken: 'Application/API Token',
|
||||
userToken: 'User Key',
|
||||
userToken: 'User or Group Key',
|
||||
validationAccessTokenRequired: 'You must provide a valid application token',
|
||||
validationUserTokenRequired: 'You must provide a valid user key',
|
||||
pushoversettingssaved: 'Pushover notification settings saved successfully!',
|
||||
pushoversettingsfailed: 'Pushover notification settings failed to save.',
|
||||
testsent: 'Test notification sent!',
|
||||
testsent: 'Pushover test notification sent!',
|
||||
settinguppushover: 'Setting Up Pushover Notifications',
|
||||
settinguppushoverDescription:
|
||||
'To configure Pushover notifications, you will need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and enter the API token below. (You can use one of our <IconLink>official icons on GitHub</IconLink>.) You will also need your user key.',
|
||||
notificationtypes: 'Notification Types',
|
||||
'To configure Pushover notifications, you will need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and enter the API token below. (You can use one of the <IconLink>official Overseerr icons on GitHub</IconLink>.)',
|
||||
});
|
||||
|
||||
const NotificationsPushover: React.FC = () => {
|
||||
@@ -35,13 +34,25 @@ const NotificationsPushover: React.FC = () => {
|
||||
|
||||
const NotificationsPushoverSchema = Yup.object().shape({
|
||||
accessToken: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationAccessTokenRequired))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationAccessTokenRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.matches(
|
||||
/^[a-z\d]{30}$/i,
|
||||
intl.formatMessage(messages.validationAccessTokenRequired)
|
||||
),
|
||||
userToken: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationUserTokenRequired))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationUserTokenRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.matches(
|
||||
/^[a-z\d]{30}$/i,
|
||||
intl.formatMessage(messages.validationUserTokenRequired)
|
||||
@@ -182,28 +193,10 @@ const NotificationsPushover: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationtypes)}
|
||||
<span className="label-required">*</span>
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) =>
|
||||
setFieldValue('types', newTypes)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -16,11 +16,10 @@ const messages = defineMessages({
|
||||
webhookUrl: 'Webhook URL',
|
||||
slacksettingssaved: 'Slack notification settings saved successfully!',
|
||||
slacksettingsfailed: 'Slack notification settings failed to save.',
|
||||
testsent: 'Test notification sent!',
|
||||
testsent: 'Slack test notification sent!',
|
||||
settingupslack: 'Setting Up Slack Notifications',
|
||||
settingupslackDescription:
|
||||
'To configure Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and enter the webhook URL below.',
|
||||
notificationtypes: 'Notification Types',
|
||||
validationWebhookUrl: 'You must provide a valid URL',
|
||||
});
|
||||
|
||||
@@ -33,7 +32,13 @@ const NotificationsSlack: React.FC = () => {
|
||||
|
||||
const NotificationsSlackSchema = Yup.object().shape({
|
||||
webhookUrl: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationWebhookUrl))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationWebhookUrl)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.url(intl.formatMessage(messages.validationWebhookUrl)),
|
||||
});
|
||||
|
||||
@@ -136,28 +141,10 @@ const NotificationsSlack: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationtypes)}
|
||||
<span className="label-required">*</span>
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) =>
|
||||
setFieldValue('types', newTypes)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -14,17 +14,18 @@ import NotificationTypeSelector from '../../NotificationTypeSelector';
|
||||
const messages = defineMessages({
|
||||
agentenabled: 'Enable Agent',
|
||||
botUsername: 'Bot Username',
|
||||
botUsernameTip:
|
||||
'Allow users to start a chat with the bot and configure their own personal notifications',
|
||||
botAPI: 'Bot Authentication Token',
|
||||
chatId: 'Chat ID',
|
||||
validationBotAPIRequired: 'You must provide a bot authentication token',
|
||||
validationChatIdRequired: 'You must provide a valid chat ID',
|
||||
telegramsettingssaved: 'Telegram notification settings saved successfully!',
|
||||
telegramsettingsfailed: 'Telegram notification settings failed to save.',
|
||||
testsent: 'Test notification sent!',
|
||||
testsent: 'Telegram test notification sent!',
|
||||
settinguptelegram: 'Setting Up Telegram Notifications',
|
||||
settinguptelegramDescription:
|
||||
'To configure Telegram notifications, you will need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key. Additionally, you will need the chat ID for the chat to which you would like to send notifications. You can find this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat and issuing the <code>/my_id</code> command.',
|
||||
notificationtypes: 'Notification Types',
|
||||
sendSilently: 'Send Silently',
|
||||
sendSilentlyTip: 'Send notifications with no sound',
|
||||
});
|
||||
@@ -37,13 +38,23 @@ const NotificationsTelegram: React.FC = () => {
|
||||
);
|
||||
|
||||
const NotificationsTelegramSchema = Yup.object().shape({
|
||||
botAPI: Yup.string().required(
|
||||
intl.formatMessage(messages.validationBotAPIRequired)
|
||||
),
|
||||
botAPI: Yup.string().when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationBotAPIRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
}),
|
||||
chatId: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationChatIdRequired))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationChatIdRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.matches(
|
||||
/^[-]?\d+$/,
|
||||
/^-?\d+$/,
|
||||
intl.formatMessage(messages.validationChatIdRequired)
|
||||
),
|
||||
});
|
||||
@@ -75,6 +86,7 @@ const NotificationsTelegram: React.FC = () => {
|
||||
botUsername: values.botUsername,
|
||||
},
|
||||
});
|
||||
|
||||
addToast(intl.formatMessage(messages.telegramsettingssaved), {
|
||||
appearance: 'success',
|
||||
autoDismiss: true,
|
||||
@@ -156,6 +168,9 @@ const NotificationsTelegram: React.FC = () => {
|
||||
<div className="form-row">
|
||||
<label htmlFor="botUsername" className="text-label">
|
||||
{intl.formatMessage(messages.botUsername)}
|
||||
<span className="label-tip">
|
||||
{intl.formatMessage(messages.botUsernameTip)}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="form-input-field">
|
||||
@@ -224,28 +239,10 @@ const NotificationsTelegram: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="form-row">
|
||||
<span id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationtypes)}
|
||||
<span className="label-required">*</span>
|
||||
</span>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) =>
|
||||
setFieldValue('types', newTypes)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -45,8 +45,7 @@ const messages = defineMessages({
|
||||
validationJsonPayloadRequired: 'You must provide a valid JSON payload',
|
||||
webhooksettingssaved: 'Webhook notification settings saved successfully!',
|
||||
webhooksettingsfailed: 'Webhook notification settings failed to save.',
|
||||
testsent: 'Test notification sent!',
|
||||
notificationtypes: 'Notification Types',
|
||||
testsent: 'Webhook test notification sent!',
|
||||
resetPayload: 'Reset to Default',
|
||||
resetPayloadSuccess: 'JSON payload reset successfully!',
|
||||
customJson: 'JSON Payload',
|
||||
@@ -63,14 +62,26 @@ const NotificationsWebhook: React.FC = () => {
|
||||
|
||||
const NotificationsWebhookSchema = Yup.object().shape({
|
||||
webhookUrl: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationWebhookUrl))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationWebhookUrl)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.matches(
|
||||
// eslint-disable-next-line
|
||||
/^(https?:)?\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,
|
||||
intl.formatMessage(messages.validationWebhookUrl)
|
||||
),
|
||||
jsonPayload: Yup.string()
|
||||
.required(intl.formatMessage(messages.validationJsonPayloadRequired))
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
then: Yup.string()
|
||||
.nullable()
|
||||
.required(intl.formatMessage(messages.validationJsonPayloadRequired)),
|
||||
otherwise: Yup.string().nullable(),
|
||||
})
|
||||
.test(
|
||||
'validate-json',
|
||||
intl.formatMessage(messages.validationJsonPayloadRequired),
|
||||
@@ -258,32 +269,10 @@ const NotificationsWebhook: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<div
|
||||
role="group"
|
||||
aria-labelledby="group-label"
|
||||
className="form-group"
|
||||
>
|
||||
<div className="sm:grid sm:grid-cols-4 sm:gap-4">
|
||||
<div>
|
||||
<div id="group-label" className="group-label">
|
||||
{intl.formatMessage(messages.notificationtypes)}
|
||||
<span className="label-required">*</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg">
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) =>
|
||||
setFieldValue('types', newTypes)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NotificationTypeSelector
|
||||
currentTypes={values.types}
|
||||
onUpdate={(newTypes) => setFieldValue('types', newTypes)}
|
||||
/>
|
||||
<div className="actions">
|
||||
<div className="flex justify-end">
|
||||
<span className="inline-flex ml-3 rounded-md shadow-sm">
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import PageTitle from '../Common/PageTitle';
|
||||
import globalMessages from '../../i18n/globalMessages';
|
||||
import PageTitle from '../Common/PageTitle';
|
||||
import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
|
||||
|
||||
const messages = defineMessages({
|
||||
menuGeneralSettings: 'General',
|
||||
@@ -16,14 +15,7 @@ const messages = defineMessages({
|
||||
menuAbout: 'About',
|
||||
});
|
||||
|
||||
interface SettingsRoute {
|
||||
text: string;
|
||||
route: string;
|
||||
regex: RegExp;
|
||||
}
|
||||
|
||||
const SettingsLayout: React.FC = ({ children }) => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
|
||||
const settingsRoutes: SettingsRoute[] = [
|
||||
@@ -69,78 +61,11 @@ const SettingsLayout: React.FC = ({ children }) => {
|
||||
},
|
||||
];
|
||||
|
||||
const activeLinkColor =
|
||||
'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
|
||||
|
||||
const inactiveLinkColor =
|
||||
'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
|
||||
|
||||
const SettingsLink: React.FC<{
|
||||
route: string;
|
||||
regex: RegExp;
|
||||
isMobile?: boolean;
|
||||
}> = ({ children, route, regex, isMobile = false }) => {
|
||||
if (isMobile) {
|
||||
return <option value={route}>{children}</option>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={route}>
|
||||
<a
|
||||
className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
|
||||
router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
|
||||
}`}
|
||||
aria-current="page"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<PageTitle title={intl.formatMessage(globalMessages.settings)} />
|
||||
<div className="mt-6">
|
||||
<div className="sm:hidden">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
router.push(e.target.value);
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
router.push(e.target.value);
|
||||
}}
|
||||
defaultValue={
|
||||
settingsRoutes.find(
|
||||
(route) => !!router.pathname.match(route.regex)
|
||||
)?.route
|
||||
}
|
||||
aria-label="Selected tab"
|
||||
>
|
||||
{settingsRoutes.map((route, index) => (
|
||||
<SettingsLink
|
||||
route={route.route}
|
||||
regex={route.regex}
|
||||
isMobile
|
||||
key={`mobile-settings-link-${index}`}
|
||||
>
|
||||
{route.text}
|
||||
</SettingsLink>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="hidden overflow-x-scroll overflow-y-hidden border-b border-gray-600 sm:block hide-scrollbar">
|
||||
<nav className="flex -mb-px">
|
||||
{settingsRoutes.map((route, index) => (
|
||||
<SettingsLink
|
||||
route={route.route}
|
||||
regex={route.regex}
|
||||
key={`standard-settings-link-${index}`}
|
||||
>
|
||||
{route.text}
|
||||
</SettingsLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<SettingsTabs settingsRoutes={settingsRoutes} />
|
||||
</div>
|
||||
<div className="mt-10 text-white">{children}</div>
|
||||
</>
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
import axios from 'axios';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import Link from 'next/link';
|
||||
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 Bolt from '../../assets/bolt.svg';
|
||||
import DiscordLogo from '../../assets/extlogos/discord.svg';
|
||||
import PushbulletLogo from '../../assets/extlogos/pushbullet.svg';
|
||||
@@ -13,38 +7,22 @@ import PushoverLogo from '../../assets/extlogos/pushover.svg';
|
||||
import SlackLogo from '../../assets/extlogos/slack.svg';
|
||||
import TelegramLogo from '../../assets/extlogos/telegram.svg';
|
||||
import globalMessages from '../../i18n/globalMessages';
|
||||
import Error from '../../pages/_error';
|
||||
import Button from '../Common/Button';
|
||||
import LoadingSpinner from '../Common/LoadingSpinner';
|
||||
import PageTitle from '../Common/PageTitle';
|
||||
import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
|
||||
|
||||
const messages = defineMessages({
|
||||
notifications: 'Notifications',
|
||||
notificationsettings: 'Notification Settings',
|
||||
notificationsettingsDescription:
|
||||
'Configure global notification settings. The options below will apply to all notification agents.',
|
||||
notificationAgentsSettings: 'Notification Agents',
|
||||
notificationAgentSettingsDescription:
|
||||
'Choose the types of notifications to send, and which notification agents to use.',
|
||||
'Configure and enable notification agents.',
|
||||
notificationsettingssaved: 'Notification settings saved successfully!',
|
||||
notificationsettingsfailed: 'Notification settings failed to save.',
|
||||
enablenotifications: 'Enable Notifications',
|
||||
email: 'Email',
|
||||
webhook: 'Webhook',
|
||||
});
|
||||
|
||||
interface SettingsRoute {
|
||||
text: string;
|
||||
content: React.ReactNode;
|
||||
route: string;
|
||||
regex: RegExp;
|
||||
}
|
||||
|
||||
const SettingsNotifications: React.FC = ({ children }) => {
|
||||
const router = useRouter();
|
||||
const intl = useIntl();
|
||||
const { addToast } = useToasts();
|
||||
const { data, error, revalidate } = useSWR('/api/v1/settings/notifications');
|
||||
|
||||
const settingsRoutes: SettingsRoute[] = [
|
||||
{
|
||||
@@ -139,40 +117,6 @@ const SettingsNotifications: React.FC = ({ children }) => {
|
||||
},
|
||||
];
|
||||
|
||||
const activeLinkColor = 'bg-indigo-700';
|
||||
const inactiveLinkColor = 'bg-gray-800';
|
||||
|
||||
const SettingsLink: React.FC<{
|
||||
route: string;
|
||||
regex: RegExp;
|
||||
isMobile?: boolean;
|
||||
}> = ({ children, route, regex, isMobile = false }) => {
|
||||
if (isMobile) {
|
||||
return <option value={route}>{children}</option>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={route}>
|
||||
<a
|
||||
className={`whitespace-nowrap ml-8 first:ml-0 px-3 py-2 font-medium text-sm rounded-md ${
|
||||
router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
|
||||
}`}
|
||||
aria-current="page"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
if (!data && !error) {
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return <Error statusCode={500} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
@@ -185,131 +129,11 @@ const SettingsNotifications: React.FC = ({ children }) => {
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.notificationsettings)}
|
||||
</h3>
|
||||
<p className="description">
|
||||
{intl.formatMessage(messages.notificationsettingsDescription)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="section">
|
||||
<Formik
|
||||
initialValues={{
|
||||
enabled: data.enabled,
|
||||
}}
|
||||
enableReinitialize
|
||||
onSubmit={async (values) => {
|
||||
try {
|
||||
await axios.post('/api/v1/settings/notifications', {
|
||||
enabled: values.enabled,
|
||||
});
|
||||
addToast(intl.formatMessage(messages.notificationsettingssaved), {
|
||||
appearance: 'success',
|
||||
autoDismiss: true,
|
||||
});
|
||||
} catch (e) {
|
||||
addToast(
|
||||
intl.formatMessage(messages.notificationsettingsfailed),
|
||||
{
|
||||
appearance: 'error',
|
||||
autoDismiss: true,
|
||||
}
|
||||
);
|
||||
} finally {
|
||||
revalidate();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, values, setFieldValue }) => {
|
||||
return (
|
||||
<Form className="section">
|
||||
<div className="form-row">
|
||||
<label htmlFor="name" className="checkbox-label">
|
||||
<span>
|
||||
{intl.formatMessage(messages.enablenotifications)}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<Field
|
||||
type="checkbox"
|
||||
id="enabled"
|
||||
name="enabled"
|
||||
onChange={() => {
|
||||
setFieldValue('enabled', !values.enabled);
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<div className="mt-10 mb-6">
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.notificationAgentsSettings)}
|
||||
</h3>
|
||||
<p className="description">
|
||||
{intl.formatMessage(messages.notificationAgentSettingsDescription)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="sm:hidden">
|
||||
<label htmlFor="tabs" className="sr-only">
|
||||
Select a tab
|
||||
</label>
|
||||
<select
|
||||
onChange={(e) => {
|
||||
router.push(e.target.value);
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
router.push(e.target.value);
|
||||
}}
|
||||
defaultValue={
|
||||
settingsRoutes.find(
|
||||
(route) => !!router.pathname.match(route.regex)
|
||||
)?.route
|
||||
}
|
||||
aria-label="Selected tab"
|
||||
>
|
||||
{settingsRoutes.map((route, index) => (
|
||||
<SettingsLink
|
||||
route={route.route}
|
||||
regex={route.regex}
|
||||
isMobile
|
||||
key={`mobile-settings-link-${index}`}
|
||||
>
|
||||
{route.text}
|
||||
</SettingsLink>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar">
|
||||
<nav className="flex space-x-4" aria-label="Tabs">
|
||||
{settingsRoutes.map((route, index) => (
|
||||
<SettingsLink
|
||||
route={route.route}
|
||||
regex={route.regex}
|
||||
key={`standard-settings-link-${index}`}
|
||||
>
|
||||
{route.content}
|
||||
</SettingsLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsTabs tabType="button" settingsRoutes={settingsRoutes} />
|
||||
<div className="section">{children}</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user