fix(frontend): converts email smtp port to a number before posting to the api

- also adds toast notifications to both email/discord notifications pages to know when sucesses or
failures occur

re #251

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -6,6 +6,7 @@ import Button from '../../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import Axios from 'axios';
 import * as Yup from 'yup';
+import { useToasts } from 'react-toast-notifications';
 
 const messages = defineMessages({
   save: 'Save Changes',
@@ -14,10 +15,13 @@ const messages = defineMessages({
   webhookUrl: 'Webhook URL',
   validationWebhookUrlRequired: 'You must provide a webhook URL',
   webhookUrlPlaceholder: 'Server Settings -> Integrations -> Webhooks',
+  discordsettingssaved: 'Discord notification settings saved!',
+  discordsettingsfailed: 'Discord notification settings failed to save.',
 });
 
 const NotificationsDiscord: React.FC = () => {
   const intl = useIntl();
+  const { addToast } = useToasts();
   const { data, error, revalidate } = useSWR(
     '/api/v1/settings/notifications/discord'
   );
@@ -49,8 +53,15 @@ const NotificationsDiscord: React.FC = () => {
               webhookUrl: values.webhookUrl,
             },
           });
+          addToast(intl.formatMessage(messages.discordsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
         } catch (e) {
-          // TODO show error
+          addToast(intl.formatMessage(messages.discordsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
         } finally {
           revalidate();
         }

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -6,6 +6,7 @@ import Button from '../../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import Axios from 'axios';
 import * as Yup from 'yup';
+import { useToasts } from 'react-toast-notifications';
 
 const messages = defineMessages({
   save: 'Save Changes',
@@ -20,10 +21,13 @@ const messages = defineMessages({
   enableSsl: 'Enable SSL',
   authUser: 'Auth User',
   authPass: 'Auth Pass',
+  emailsettingssaved: 'Email notification settings saved!',
+  emailsettingsfailed: 'Email notification settings failed to save.',
 });
 
 const NotificationsEmail: React.FC = () => {
   const intl = useIntl();
+  const { addToast } = useToasts();
   const { data, error, revalidate } = useSWR(
     '/api/v1/settings/notifications/email'
   );
@@ -65,14 +69,21 @@ const NotificationsEmail: React.FC = () => {
             options: {
               emailFrom: values.emailFrom,
               smtpHost: values.smtpHost,
-              smtpPort: values.smtpPort,
+              smtpPort: Number(values.smtpPort),
               secure: values.secure,
               authUser: values.authUser,
               authPass: values.authPass,
             },
           });
+          addToast(intl.formatMessage(messages.emailsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
         } catch (e) {
-          // TODO show error
+          addToast(intl.formatMessage(messages.emailsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
         } finally {
           revalidate();
         }

src/i18n/locale/en.json

@@ -91,7 +91,11 @@
   "components.Settings.Notifications.agentenabled": "Agent Enabled",
   "components.Settings.Notifications.authPass": "Auth Pass",
   "components.Settings.Notifications.authUser": "Auth User",
+  "components.Settings.Notifications.discordsettingsfailed": "Discord notification settings failed to save.",
+  "components.Settings.Notifications.discordsettingssaved": "Discord notification settings saved!",
   "components.Settings.Notifications.emailsender": "Email Sender Address",
+  "components.Settings.Notifications.emailsettingsfailed": "Email notification settings failed to save.",
+  "components.Settings.Notifications.emailsettingssaved": "Email notification settings saved!",
   "components.Settings.Notifications.enableSsl": "Enable SSL",
   "components.Settings.Notifications.save": "Save Changes",
   "components.Settings.Notifications.saving": "Saving...",