feat: Add ability to configure and test SMTP via UI

client/src/components/common/AdministrationModal/AdministrationModal.jsx

@@ -5,18 +5,22 @@
 
 import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Modal, Tab } from 'semantic-ui-react';
 
+import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useClosableModal } from '../../../hooks';
 import UsersPane from './UsersPane';
+import SmtpPane from './SmtpPane';
 import WebhooksPane from './WebhooksPane';
 
 import styles from './AdministrationModal.module.scss';
 
 const AdministrationModal = React.memo(() => {
+  const config = useSelector(selectors.selectConfig);
+
   const dispatch = useDispatch();
   const [t] = useTranslation();
   const [activeTabIndex, setActiveTabIndex] = useState(0);
@@ -38,13 +42,21 @@ const AdministrationModal = React.memo(() => {
       }),
       render: () => <UsersPane />,
     },
-    {
-      menuItem: t('common.webhooks', {
+  ];
+  if (config.smtpHost !== undefined) {
+    panes.push({
+      menuItem: t('common.smtp', {
         context: 'title',
       }),
-      render: () => <WebhooksPane />,
-    },
-  ];
+      render: () => <SmtpPane />,
+    });
+  }
+  panes.push({
+    menuItem: t('common.webhooks', {
+      context: 'title',
+    }),
+    render: () => <WebhooksPane />,
+  });
 
   const isUsersPaneActive = activeTabIndex === 0;