@ -7,11 +7,25 @@ import SlackLogo from '../../assets/extlogos/slack.svg';
import TelegramLogo from '../../assets/extlogos/telegram.svg' ;
import PushoverLogo from '../../assets/extlogos/pushover.svg' ;
import Bolt from '../../assets/bolt.svg' ;
import { Field , Form , Formik } from 'formik' ;
import useSWR from 'swr' ;
import Error from '../../pages/_error' ;
import LoadingSpinner from '../Common/LoadingSpinner' ;
import axios from 'axios' ;
import { useToasts } from 'react-toast-notifications' ;
import Button from '../Common/Button' ;
const messages = defineMessages ( {
save : 'Save Changes' ,
saving : 'Saving…' ,
notificationsettings : 'Notification Settings' ,
notificationsettingsDescription :
'Global notification configuration. The settings below affect all notification agents.' ,
notificationAgentsSettings : 'Notification Agents' ,
notificationAgentSettingsDescription :
'Here you can pick and choose what types of notifications to send and through what types of services.' ,
notificationsettingssaved : 'Notification settings saved!' ,
notificationsettingsfailed : 'Notification settings failed to save.' ,
} ) ;
interface SettingsRoute {
@ -106,6 +120,8 @@ const settingsRoutes: SettingsRoute[] = [
const SettingsNotifications : React.FC = ( { children } ) = > {
const router = useRouter ( ) ;
const intl = useIntl ( ) ;
const { addToast } = useToasts ( ) ;
const { data , error , revalidate } = useSWR ( '/api/v1/settings/notifications' ) ;
const activeLinkColor = 'bg-indigo-700' ;
@ -134,6 +150,14 @@ const SettingsNotifications: React.FC = ({ children }) => {
) ;
} ;
if ( ! data && ! error ) {
return < LoadingSpinner / > ;
}
if ( ! data ) {
return < Error statusCode = { 500 } / > ;
}
return (
< >
< div className = "mb-6" >
@ -144,6 +168,110 @@ const SettingsNotifications: React.FC = ({ children }) => {
{ intl . formatMessage ( messages . notificationsettingsDescription ) }
< / p >
< / div >
< div className = "mt-6 sm:mt-5" >
< Formik
initialValues = { {
enabled : data.enabled ,
autoapprovalEnabled : data.autoapprovalEnabled ,
} }
enableReinitialize
onSubmit = { async ( values ) = > {
try {
await axios . post ( '/api/v1/settings/notifications' , {
enabled : values.enabled ,
autoapprovalEnabled : values.autoapprovalEnabled ,
} ) ;
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 >
< div className = "mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800" >
< label
htmlFor = "name"
className = "block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
>
< span className = "mr-2" > Enable Notifications < / span >
< / label >
< div className = "mt-1 sm:mt-0 sm:col-span-2" >
< Field
type = "checkbox"
id = "enabled"
name = "enabled"
onChange = { ( ) = > {
setFieldValue ( 'enabled' , ! values . enabled ) ;
} }
className = "w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/ >
< / div >
< / div >
< div className = "mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800" >
< label
htmlFor = "name"
className = "block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
>
< span className = "mr-2" >
Send Notifications for auto - approved media
< / span >
< / label >
< div className = "mt-1 sm:mt-0 sm:col-span-2" >
< Field
type = "checkbox"
id = "autoapprovalEnabled"
name = "autoapprovalEnabled"
onChange = { ( ) = > {
setFieldValue (
'autoapprovalEnabled' ,
! values . autoapprovalEnabled
) ;
} }
className = "w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/ >
< / div >
< / div >
< div className = "pt-5 mt-8 border-t border-gray-700" >
< 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 ( messages . saving )
: intl . formatMessage ( messages . save ) }
< / Button >
< / span >
< / div >
< / div >
< / Form >
) ;
} }
< / Formik >
< / div >
< div className = "mt-10 mb-6" >
< h3 className = "text-lg font-medium leading-6 text-gray-200" >
{ intl . formatMessage ( messages . notificationAgentsSettings ) }
< / h3 >
< p className = "max-w-2xl mt-1 text-sm leading-5 text-gray-500" >
{ intl . formatMessage ( messages . notificationAgentSettingsDescription ) }
< / p >
< / div >
< div >
< div className = "sm:hidden" >
< label htmlFor = "tabs" className = "sr-only" >
sct
4 years ago