diff --git a/client/src/Hooks/useFetchSettings.js b/client/src/Hooks/useFetchSettings.js
index 15859795f..f7651e789 100644
--- a/client/src/Hooks/useFetchSettings.js
+++ b/client/src/Hooks/useFetchSettings.js
@@ -3,7 +3,7 @@ import { networkService } from "../main";
import { createToast } from "../Utils/toastUtils";
import { useTranslation } from "react-i18next";
-const useFetchSettings = ({ setSettings }) => {
+const useFetchSettings = ({ setSettingsData }) => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(undefined);
useEffect(() => {
@@ -11,7 +11,7 @@ const useFetchSettings = ({ setSettings }) => {
setIsLoading(true);
try {
const response = await networkService.getAppSettings();
- setSettings(response?.data?.data);
+ setSettingsData(response?.data?.data);
} catch (error) {
createToast({ body: "Failed to fetch settings" });
setError(error);
diff --git a/client/src/Pages/Settings/SettingsDemoMonitors.jsx b/client/src/Pages/Settings/SettingsDemoMonitors.jsx
index 6722e97ac..1a592e776 100644
--- a/client/src/Pages/Settings/SettingsDemoMonitors.jsx
+++ b/client/src/Pages/Settings/SettingsDemoMonitors.jsx
@@ -8,12 +8,8 @@ import { PropTypes } from "prop-types";
import { useTranslation } from "react-i18next";
import Dialog from "../../Components/Dialog";
import { useState } from "react";
-const SettingsDemoMonitors = ({
- isLoading,
- authIsLoading,
- checksIsLoading,
- handleChange,
-}) => {
+
+const SettingsDemoMonitors = ({ HEADER_SX, handleChange, isLoading }) => {
const { t } = useTranslation();
const theme = useTheme();
// Local state
@@ -23,16 +19,14 @@ const SettingsDemoMonitors = ({
{t("settingsDemoMonitors")}
-
- {t("settingsDemoMonitorsDescription")}
-
+ {t("settingsDemoMonitorsDescription")}
{t("settingsAddDemoMonitors")}
@@ -89,10 +83,8 @@ const SettingsDemoMonitors = ({
};
SettingsDemoMonitors.propTypes = {
- isLoading: PropTypes.bool,
- authIsLoading: PropTypes.bool,
- checksIsLoading: PropTypes.bool,
handleChange: PropTypes.func,
+ HEADER_SX: PropTypes.object,
};
export default SettingsDemoMonitors;
diff --git a/client/src/Pages/Settings/SettingsEmail.jsx b/client/src/Pages/Settings/SettingsEmail.jsx
new file mode 100644
index 000000000..ecc2a51f2
--- /dev/null
+++ b/client/src/Pages/Settings/SettingsEmail.jsx
@@ -0,0 +1,126 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import ConfigBox from "../../Components/ConfigBox";
+import TextInput from "../../Components/Inputs/TextInput";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+// Utils
+import { useTheme } from "@emotion/react";
+import { PropTypes } from "prop-types";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
+const SettingsEmail = ({
+ HEADER_SX,
+ handleChange,
+ settingsData,
+ setSettingsData,
+ isPasswordSet,
+}) => {
+ const { t } = useTranslation();
+ const theme = useTheme();
+
+ const [password, setPassword] = useState("");
+ const [hasBeenReset, setHasBeenReset] = useState(false);
+
+ const handlePasswordChange = (e) => {
+ setPassword(e.target.value);
+ setSettingsData({
+ ...settingsData,
+ settings: { ...settingsData.settings, systemEmailPassword: e.target.value },
+ });
+ };
+
+ return (
+
+
+ {t("settingsEmail")}
+ {t("settingsEmailDescription")}
+
+
+
+
+ {t("settingsEmailHost")}
+
+
+
+ {t("settingsEmailPort")}
+
+
+
+ {t("settingsEmailUser")}
+
+
+
+ {t("settingsEmailAddress")}
+
+
+ {(isPasswordSet === false || hasBeenReset === true) && (
+
+ {t("settingsEmailPassword")}
+ }
+ />
+
+ )}
+ {isPasswordSet === true && hasBeenReset === false && (
+
+ {t("settingsEmailFieldResetLabel")}
+
+
+ )}
+
+
+
+ );
+};
+
+SettingsEmail.propTypes = {
+ settingsData: PropTypes.object,
+ setSettingsData: PropTypes.func,
+ handleChange: PropTypes.func,
+ HEADER_SX: PropTypes.object,
+ isPasswordSet: PropTypes.bool,
+};
+
+export default SettingsEmail;
diff --git a/client/src/Pages/Settings/SettingsPagespeed.jsx b/client/src/Pages/Settings/SettingsPagespeed.jsx
index 87f558f32..95b159fa5 100644
--- a/client/src/Pages/Settings/SettingsPagespeed.jsx
+++ b/client/src/Pages/Settings/SettingsPagespeed.jsx
@@ -11,26 +11,28 @@ import { PropTypes } from "prop-types";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
-const SettingsPagespeed = ({ HEADING_SX, settings, setSettings }) => {
+const SettingsPagespeed = ({
+ HEADING_SX,
+ settingsData,
+ setSettingsData,
+ isApiKeySet,
+}) => {
const { t } = useTranslation();
const theme = useTheme();
// Local state
const [apiKey, setApiKey] = useState("");
- const [isApiKeySet, setIsApiKeySet] = useState(false);
const [hasBeenReset, setHasBeenReset] = useState(false);
// Handler
const handleChange = (e) => {
setApiKey(e.target.value);
- setSettings({ ...settings, pagespeedApiKey: e.target.value });
+ setSettingsData({
+ ...settingsData,
+ settings: { ...settingsData.settings, pagespeedApiKey: e.target.value },
+ });
};
- useEffect(() => {
- console.log(settings);
- setIsApiKeySet(Boolean(settings.pagespeedApiKey) && apiKey === "");
- }, [settings, apiKey]);
-
return (
@@ -56,7 +58,10 @@ const SettingsPagespeed = ({ HEADING_SX, settings, setSettings }) => {