import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; import { useToast } from "@/components/ui/use-toast"; import { getErrMsg } from "@/utils/error"; import { NotifyChannelEmail, NotifyChannels } from "@/domain/settings"; import { useNotifyContext } from "@/providers/notify"; import { update } from "@/repository/settings"; import Show from "@/components/Show"; import { notifyTest } from "@/api/notify"; type EmailSetting = { id: string; name: string; data: NotifyChannelEmail; }; const Mail = () => { const { config, setChannels } = useNotifyContext(); const { t } = useTranslation(); const [changed, setChanged] = useState(false); const [mail, setMail] = useState({ id: config.id ?? "", name: "notifyChannels", data: { smtpHost: "", smtpPort: 465, smtpTLS: true, username: "", password: "", senderAddress: "", receiverAddress: "", enabled: false, }, }); const [originMail, setOriginMail] = useState({ id: config.id ?? "", name: "notifyChannels", data: { smtpHost: "", smtpPort: 465, smtpTLS: true, username: "", password: "", senderAddress: "", receiverAddress: "", enabled: false, }, }); useEffect(() => { setChanged(false); }, [config]); useEffect(() => { const data = getDetailMail(); setOriginMail({ id: config.id ?? "", name: "email", data, }); }, [config]); useEffect(() => { const data = getDetailMail(); setMail({ id: config.id ?? "", name: "email", data, }); }, [config]); const { toast } = useToast(); const getDetailMail = () => { const df: NotifyChannelEmail = { smtpHost: "smtp.example.com", smtpPort: 465, smtpTLS: true, username: "", password: "", senderAddress: "", receiverAddress: "", enabled: false, }; if (!config.content) { return df; } const chanels = config.content as NotifyChannels; if (!chanels.email) { return df; } return chanels.email as NotifyChannelEmail; }; const checkChanged = (data: NotifyChannelEmail) => { if ( data.smtpHost !== originMail.data.smtpHost || data.smtpPort !== originMail.data.smtpPort || data.smtpTLS !== originMail.data.smtpTLS || data.username !== originMail.data.username || data.password !== originMail.data.password || data.senderAddress !== originMail.data.senderAddress || data.receiverAddress !== originMail.data.receiverAddress ) { setChanged(true); } else { setChanged(false); } }; const handleSaveClick = async () => { try { const resp = await update({ ...config, name: "notifyChannels", content: { ...config.content, email: { ...mail.data, }, }, }); setChannels(resp); toast({ title: t("common.save.succeeded.message"), description: t("settings.notification.config.saved.message"), }); } catch (e) { const msg = getErrMsg(e); toast({ title: t("common.save.failed.message"), description: `${t("settings.notification.config.failed.message")}: ${msg}`, variant: "destructive", }); } }; const [testing, setTesting] = useState(false); const handlePushTestClick = async () => { if (testing) return; try { setTesting(true); await notifyTest("email"); toast({ title: t("settings.notification.push_test_message.succeeded.message"), description: t("settings.notification.push_test_message.succeeded.message"), }); } catch (e) { const msg = getErrMsg(e); toast({ title: t("settings.notification.push_test_message.failed.message"), description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`, variant: "destructive", }); } finally { setTesting(false); } }; const handleSwitchChange = async () => { const newData = { ...mail, data: { ...mail.data, enabled: !mail.data.enabled, }, }; setMail(newData); try { const resp = await update({ ...config, name: "notifyChannels", content: { ...config.content, email: { ...newData.data, }, }, }); setChannels(resp); } catch (e) { const msg = getErrMsg(e); toast({ title: t("common.save.failed.message"), description: `${t("settings.notification.config.failed.message")}: ${msg}`, variant: "destructive", }); } }; return (
{ const newData = { ...mail, data: { ...mail.data, smtpHost: e.target.value, }, }; checkChanged(newData.data); setMail(newData); }} />
{ const newData = { ...mail, data: { ...mail.data, smtpPort: +e.target.value || 0, }, }; checkChanged(newData.data); setMail(newData); }} />
{ const newData = { ...mail, data: { ...mail.data, smtpPort: e && mail.data.smtpPort === 25 ? 465 : !e && mail.data.smtpPort === 465 ? 25 : mail.data.smtpPort, smtpTLS: e, }, }; checkChanged(newData.data); setMail(newData); }} />
{ const newData = { ...mail, data: { ...mail.data, username: e.target.value, }, }; checkChanged(newData.data); setMail(newData); }} />
{ const newData = { ...mail, data: { ...mail.data, password: e.target.value, }, }; checkChanged(newData.data); setMail(newData); }} />
{ const newData = { ...mail, data: { ...mail.data, senderAddress: e.target.value, }, }; checkChanged(newData.data); setMail(newData); }} />
{ const newData = { ...mail, data: { ...mail.data, receiverAddress: e.target.value, }, }; checkChanged(newData.data); setMail(newData); }} />
); }; export default Mail;