forked from BLC/sgeUpdated
Add 'sge-frontend/' from commit '5fa787e054b25ac53edc7ff0275ea7960a709401'
git-subtree-dir: sge-frontend git-subtree-mainline:876c278ac4git-subtree-split:5fa787e054
This commit is contained in:
257
sge-frontend/src/views/MailSettings/index.js
Normal file
257
sge-frontend/src/views/MailSettings/index.js
Normal file
@@ -0,0 +1,257 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Grid,
|
||||
TextField,
|
||||
Typography,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
Box,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
updateMailSettings,
|
||||
clearMailSuccess,
|
||||
clearMailError,
|
||||
} from "../../redux/actions/mailSettings";
|
||||
|
||||
const MailSettings = ({ closeModal }) => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const { currentSettings, loading, error, success } = useSelector(
|
||||
(state) => state.mailSettings
|
||||
);
|
||||
|
||||
// State to track if we have multiple email configurations
|
||||
const [hasMultipleEmails, setHasMultipleEmails] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
id: "",
|
||||
hostName: "",
|
||||
smtpPort: "",
|
||||
emailAddress: "",
|
||||
emailPassword: "",
|
||||
mainMail: true,
|
||||
});
|
||||
|
||||
// Clear success and error when modal is closed or component unmounts
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
dispatch(clearMailSuccess());
|
||||
dispatch(clearMailError());
|
||||
};
|
||||
}, [dispatch]);
|
||||
|
||||
// Check if there are multiple email configurations
|
||||
// Since we don't have a direct way to check this, we'll assume there's only one for now
|
||||
// TODO We would need to add a GraphQL query to get all mail configurations
|
||||
|
||||
useEffect(() => {
|
||||
if (currentSettings) {
|
||||
setHasMultipleEmails(false);
|
||||
setFormData({
|
||||
id: currentSettings.id,
|
||||
hostName: currentSettings.hostName,
|
||||
smtpPort: currentSettings.smtpPort,
|
||||
emailAddress: currentSettings.emailAddress,
|
||||
emailPassword: "",
|
||||
// If there's only one email, it must be the main one
|
||||
mainMail: hasMultipleEmails ? currentSettings.mainMail : true,
|
||||
});
|
||||
}
|
||||
}, [currentSettings]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
|
||||
// If there's only one email and the field is mainMail, don't allow changes
|
||||
if (!hasMultipleEmails && name === "mainMail") {
|
||||
return;
|
||||
}
|
||||
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const submitData = {
|
||||
...formData,
|
||||
smtpPort: parseInt(formData.smtpPort),
|
||||
// If there's only one email, ensure mainMail is always true
|
||||
mainMail: hasMultipleEmails ? formData.mainMail : true,
|
||||
};
|
||||
if (!formData.emailPassword && formData.id) {
|
||||
delete submitData.emailPassword;
|
||||
}
|
||||
dispatch(updateMailSettings(submitData));
|
||||
};
|
||||
|
||||
// Only close modal on success, no notification
|
||||
useEffect(() => {
|
||||
if (success && closeModal) {
|
||||
closeModal(true);
|
||||
}
|
||||
}, [success, closeModal]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{loading ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<CircularProgress color="success" />
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
{!currentSettings ? (
|
||||
<Alert severity="warning" sx={{ mb: 2 }}>
|
||||
{t("MailSettings.noMailsRegistered")}
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="h5" sx={{ mb: 3 }}>
|
||||
{t("MailSettings.mailSettings")}
|
||||
</Typography>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Box component="form" onSubmit={handleSubmit}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={t("MailSettings.hostName")}
|
||||
id="hostName"
|
||||
name="hostName"
|
||||
placeholder={t("MailSettings.hostName")}
|
||||
value={formData.hostName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
color="success"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={t("MailSettings.smtpPort")}
|
||||
id="smtpPort"
|
||||
name="smtpPort"
|
||||
type="number"
|
||||
placeholder={t("MailSettings.smtpPort")}
|
||||
value={formData.smtpPort}
|
||||
onChange={handleChange}
|
||||
required
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
color="success"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={t("MailSettings.emailAddress")}
|
||||
id="emailAddress"
|
||||
name="emailAddress"
|
||||
type="email"
|
||||
placeholder={
|
||||
formData.emailAddress
|
||||
? t("MailSettings.emailAddress")
|
||||
: t("MailSettings.noEmailFound")
|
||||
}
|
||||
value={formData.emailAddress || ""}
|
||||
onChange={handleChange}
|
||||
required
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
color="success"
|
||||
helperText={
|
||||
!formData.emailAddress
|
||||
? t("MailSettings.noEmailFound")
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={`${t("MailSettings.emailPassword")} ${
|
||||
formData.id ? t("MailSettings.leaveBlankNote") : ""
|
||||
}`}
|
||||
id="emailPassword"
|
||||
name="emailPassword"
|
||||
type="password"
|
||||
placeholder={t("MailSettings.emailPassword")}
|
||||
value={formData.emailPassword}
|
||||
onChange={handleChange}
|
||||
required={!formData.id}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
color="success"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* Only show the mainMail checkbox if there are multiple email configurations */}
|
||||
{hasMultipleEmails && (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
id="mainMail"
|
||||
name="mainMail"
|
||||
checked={formData.mainMail}
|
||||
onChange={handleChange}
|
||||
color="success"
|
||||
/>
|
||||
}
|
||||
label={t("MailSettings.mainMail")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{t("MailSettings.saveSettings")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MailSettings;
|
||||
Reference in New Issue
Block a user