471 lines
19 KiB
JavaScript
471 lines
19 KiB
JavaScript
import {useCallback, useContext, useEffect, useState} from "react";
|
|
import {LocaleContext} from "shared/locale";
|
|
import {
|
|
Box, Button, Checkbox,
|
|
CircularProgress, FormControl, FormControlLabel,
|
|
FormGroup, FormLabel, Grid, IconButton,
|
|
Paper, Select, styled,
|
|
Tab,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableContainer,
|
|
TableRow,
|
|
Tabs, TextField,
|
|
Autocomplete,
|
|
Chip
|
|
} from "@mui/material";
|
|
import {Link} from "react-router-dom";
|
|
import {
|
|
Add,
|
|
Delete,
|
|
Google,
|
|
LibraryBooks,
|
|
Mail,
|
|
RestartAlt,
|
|
Save,
|
|
Send,
|
|
SettingsApplications
|
|
} from "@mui/icons-material";
|
|
import TIME_ZONES from "shared/time-zones";
|
|
import ButtonBar from "../elements/button-bar";
|
|
|
|
const SettingsFormGroup = styled(FormGroup)((props) => ({
|
|
marginBottom: props.theme.spacing(1),
|
|
}));
|
|
|
|
export default function SettingsView(props) {
|
|
|
|
// meta
|
|
const api = props.api;
|
|
const showDialog = props.showDialog;
|
|
const {translate: L, requestModules, currentLocale} = useContext(LocaleContext);
|
|
const KNOWN_SETTING_KEYS = {
|
|
"general": [
|
|
"base_url",
|
|
"site_name",
|
|
"user_registration_enabled",
|
|
"time_zone",
|
|
"allowed_extensions",
|
|
"trusted_domains",
|
|
],
|
|
"mail": [
|
|
"mail_enabled",
|
|
"mail_footer",
|
|
"mail_from",
|
|
"mail_host",
|
|
"mail_port",
|
|
"mail_username",
|
|
"mail_password",
|
|
"mail_async",
|
|
],
|
|
"recaptcha": [
|
|
"recaptcha_enabled",
|
|
"recaptcha_private_key",
|
|
"recaptcha_public_key",
|
|
],
|
|
"hidden": ["installation_completed", "mail_last_sync"]
|
|
};
|
|
|
|
// data
|
|
const [fetchSettings, setFetchSettings] = useState(true);
|
|
const [settings, setSettings] = useState(null);
|
|
const [extra, setExtra] = useState({});
|
|
const [uncategorizedKeys, setUncategorizedKeys] = useState([]);
|
|
|
|
// ui
|
|
const [selectedTab, setSelectedTab] = useState("general");
|
|
const [hasChanged, setChanged] = useState(false);
|
|
const [isSaving, setSaving] = useState(false);
|
|
const [newKey, setNewKey] = useState("");
|
|
const [testMailAddress, setTestMailAddress] = useState("");
|
|
const [isSending, setSending] = useState(false);
|
|
|
|
const isUncategorized = (key) => {
|
|
return !(Object.values(KNOWN_SETTING_KEYS).reduce((acc, arr) => {
|
|
return [ ...acc, ...arr ];
|
|
}, [])).includes(key);
|
|
}
|
|
|
|
useEffect(() => {
|
|
requestModules(props.api, ["general", "settings"], currentLocale).then(data => {
|
|
if (!data.success) {
|
|
showDialog("Error fetching translations: " + data.msg);
|
|
}
|
|
});
|
|
}, [currentLocale]);
|
|
|
|
const onFetchSettings = useCallback((force = false) => {
|
|
if (fetchSettings || force) {
|
|
setFetchSettings(false);
|
|
api.getSettings().then(data => {
|
|
if (!data.success) {
|
|
showDialog(data.msg, L("settings.fetch_settings_error"));
|
|
} else {
|
|
setSettings(Object.keys(data.settings)
|
|
.filter(key => !KNOWN_SETTING_KEYS.hidden.includes(key))
|
|
.reduce((obj, key) => {
|
|
obj[key] = data.settings[key];
|
|
return obj;
|
|
}, {})
|
|
);
|
|
setUncategorizedKeys(Object.keys(data.settings).filter(key => isUncategorized(key)));
|
|
}
|
|
});
|
|
}
|
|
}, [api, showDialog, fetchSettings]);
|
|
|
|
useEffect(() => {
|
|
onFetchSettings();
|
|
}, [fetchSettings]);
|
|
|
|
const onChangeValue = useCallback((key, value) => {
|
|
setChanged(true);
|
|
setSettings({...settings, [key]: value});
|
|
}, [settings]);
|
|
|
|
const onSaveSettings = useCallback(() => {
|
|
setSaving(true);
|
|
api.saveSettings(settings).then(data => {
|
|
setSaving(false);
|
|
if (data.success) {
|
|
showDialog(L("settings.save_settings_success"), L("general.success"));
|
|
setChanged(false);
|
|
} else {
|
|
showDialog(data.msg, L("settings.save_settings_error"));
|
|
}
|
|
});
|
|
}, [api, showDialog, settings]);
|
|
|
|
const onDeleteKey = useCallback(key => {
|
|
if (key && settings.hasOwnProperty(key)) {
|
|
let index = uncategorizedKeys.indexOf(key);
|
|
if (index !== -1) {
|
|
let newUncategorizedKeys = [...uncategorizedKeys];
|
|
newUncategorizedKeys.splice(index, 1);
|
|
setUncategorizedKeys(newUncategorizedKeys);
|
|
}
|
|
setChanged(true);
|
|
setSettings({...settings, [key]: null});
|
|
}
|
|
}, [settings, uncategorizedKeys]);
|
|
|
|
const onAddKey = useCallback(key => {
|
|
if (key) {
|
|
if (!isUncategorized(key) || !settings.hasOwnProperty(key) || settings[key] === null) {
|
|
setChanged(true);
|
|
setSettings({...settings, [key]: ""});
|
|
setUncategorizedKeys([...uncategorizedKeys, key]);
|
|
setNewKey("");
|
|
} else {
|
|
showDialog("This key is already defined", L("general.error"));
|
|
}
|
|
}
|
|
}, [settings, uncategorizedKeys, showDialog]);
|
|
|
|
const onChangeKey = useCallback((oldKey, newKey) => {
|
|
if (settings.hasOwnProperty(oldKey) && !settings.hasOwnProperty(newKey)) {
|
|
let newSettings = {...settings, [newKey]: settings[oldKey]};
|
|
delete newSettings[oldKey];
|
|
setChanged(true);
|
|
setSettings(newSettings);
|
|
}
|
|
}, [settings]);
|
|
|
|
const onSendTestMail = useCallback(() => {
|
|
if (!isSending) {
|
|
setSending(true);
|
|
api.sendTestMail(testMailAddress).then(data => {
|
|
setSending(false);
|
|
if (!data.success) {
|
|
showDialog(<>
|
|
{data.msg} <br />
|
|
<code>
|
|
{data.output}
|
|
</code>
|
|
</>, L("settings.send_test_email_error"));
|
|
} else {
|
|
showDialog(L("settings.send_test_email_success"), L("general.success"));
|
|
setTestMailAddress("");
|
|
}
|
|
});
|
|
}
|
|
}, [api, showDialog, testMailAddress, isSending]);
|
|
|
|
const onReset = useCallback(() => {
|
|
setFetchSettings(true);
|
|
setNewKey("");
|
|
setChanged(false);
|
|
setExtra({});
|
|
}, []);
|
|
|
|
const parseBool = (v) => v !== undefined && (v === true || v === 1 || ["true", "1", "yes"].includes(v.toString().toLowerCase()));
|
|
|
|
const renderTextInput = (key_name, disabled=false, props={}) => {
|
|
return <SettingsFormGroup key={"form-" + key_name} {...props}>
|
|
<FormLabel disabled={disabled}>{L("settings." + key_name)}</FormLabel>
|
|
<FormControl>
|
|
<TextField size={"small"} variant={"outlined"}
|
|
disabled={disabled}
|
|
value={settings[key_name]}
|
|
onChange={e => onChangeValue(key_name, e.target.value)} />
|
|
</FormControl>
|
|
</SettingsFormGroup>
|
|
}
|
|
|
|
const renderPasswordInput = (key_name, disabled=false, props={}) => {
|
|
return <SettingsFormGroup key={"form-" + key_name} {...props}>
|
|
<FormLabel disabled={disabled}>{L("settings." + key_name)}</FormLabel>
|
|
<FormControl>
|
|
<TextField size={"small"} variant={"outlined"}
|
|
type={"password"}
|
|
disabled={disabled}
|
|
placeholder={"(" + L("general.unchanged") + ")"}
|
|
value={settings[key_name]}
|
|
onChange={e => onChangeValue(key_name, e.target.value)} />
|
|
</FormControl>
|
|
</SettingsFormGroup>
|
|
}
|
|
|
|
const renderNumberInput = (key_name, minValue, maxValue, disabled=false, props={}) => {
|
|
return <SettingsFormGroup key={"form-" + key_name} {...props}>
|
|
<FormLabel disabled={disabled}>{L("settings." + key_name)}</FormLabel>
|
|
<FormControl>
|
|
<TextField size={"small"} variant={"outlined"}
|
|
type={"number"}
|
|
disabled={disabled}
|
|
inputProps={{min: minValue, max: maxValue}}
|
|
value={settings[key_name]}
|
|
onChange={e => onChangeValue(key_name, e.target.value)} />
|
|
</FormControl>
|
|
</SettingsFormGroup>
|
|
}
|
|
|
|
const renderCheckBox = (key_name, disabled=false, props={}) => {
|
|
return <SettingsFormGroup key={"form-" + key_name} {...props}>
|
|
<FormControlLabel
|
|
disabled={disabled}
|
|
control={<Checkbox
|
|
disabled={disabled}
|
|
checked={parseBool(settings[key_name])}
|
|
onChange={(e, v) => onChangeValue(key_name, v)} />}
|
|
label={L("settings." + key_name)} />
|
|
</SettingsFormGroup>
|
|
}
|
|
|
|
const renderSelection = (key_name, options, disabled=false, props={}) => {
|
|
return <SettingsFormGroup key={"form-" + key_name} {...props}>
|
|
<FormLabel disabled={disabled}>{L("settings." + key_name)}</FormLabel>
|
|
<FormControl>
|
|
<Select native value={settings[key_name]}
|
|
disabled={disabled}
|
|
size={"small"} onChange={e => onChangeValue(key_name, e.target.value)}>
|
|
{options.map(option => <option
|
|
key={"option-" + option}
|
|
value={option}>
|
|
{option}
|
|
</option>)}
|
|
</Select>
|
|
</FormControl>
|
|
</SettingsFormGroup>
|
|
}
|
|
|
|
const renderTextValuesInput = (key_name, disabled=false, props={}) => {
|
|
|
|
const finishTyping = () => {
|
|
console.log("finishTyping", key_name);
|
|
setExtra({...extra, [key_name]: ""});
|
|
if (extra[key_name]) {
|
|
setSettings({...settings, [key_name]: [...settings[key_name], extra[key_name]]});
|
|
}
|
|
}
|
|
|
|
return <SettingsFormGroup key={"form-" + key_name} {...props}>
|
|
<FormLabel disabled={disabled}>{L("settings." + key_name)}</FormLabel>
|
|
<Autocomplete
|
|
clearIcon={false}
|
|
options={[]}
|
|
freeSolo
|
|
multiple
|
|
value={settings[key_name]}
|
|
onChange={(e, v) => setSettings({...settings, [key_name]: v})}
|
|
renderTags={(values, props) =>
|
|
values.map((option, index) => (
|
|
<Chip label={option} {...props({ index })} />
|
|
))
|
|
}
|
|
renderInput={(params) => <TextField
|
|
{...params}
|
|
value={extra[key_name] ?? ""}
|
|
onChange={e => setExtra({...extra, [key_name]: e.target.value.trim()})}
|
|
onKeyDown={e => {
|
|
if (["Enter", "Tab", " "].includes(e.key)) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
finishTyping();
|
|
}
|
|
}}
|
|
onBlur={finishTyping} />}
|
|
/>
|
|
</SettingsFormGroup>
|
|
}
|
|
|
|
const renderTab = () => {
|
|
if (selectedTab === "general") {
|
|
return [
|
|
renderTextInput("site_name"),
|
|
renderTextInput("base_url"),
|
|
renderTextValuesInput("trusted_domains"),
|
|
renderCheckBox("user_registration_enabled"),
|
|
renderTextValuesInput("allowed_extensions"),
|
|
renderSelection("time_zone", TIME_ZONES),
|
|
];
|
|
} else if (selectedTab === "mail") {
|
|
return [
|
|
renderCheckBox("mail_enabled"),
|
|
renderTextInput("mail_from", !parseBool(settings.mail_enabled)),
|
|
renderTextInput("mail_host", !parseBool(settings.mail_enabled)),
|
|
renderNumberInput("mail_port", 1, 65535, !parseBool(settings.mail_enabled)),
|
|
renderTextInput("mail_username", !parseBool(settings.mail_enabled)),
|
|
renderPasswordInput("mail_password", !parseBool(settings.mail_enabled)),
|
|
renderTextInput("mail_footer", !parseBool(settings.mail_enabled)),
|
|
renderCheckBox("mail_async", !parseBool(settings.mail_enabled)),
|
|
<FormGroup key={"mail-test"}>
|
|
<FormLabel>{L("settings.send_test_email")}</FormLabel>
|
|
<FormControl disabled={!parseBool(settings.mail_enabled)}>
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={1}>
|
|
<Button startIcon={isSending ? <CircularProgress size={14} /> : <Send />}
|
|
variant={"outlined"} onClick={onSendTestMail}
|
|
fullWidth={true}
|
|
disabled={!parseBool(settings.mail_enabled) || isSending || !api.hasPermission("mail/test")}>
|
|
{isSending ? L("general.sending") + "…" : L("general.send")}
|
|
</Button>
|
|
</Grid>
|
|
<Grid item xs={11}>
|
|
<TextField disabled={!parseBool(settings.mail_enabled)}
|
|
fullWidth={true}
|
|
variant={"outlined"} value={testMailAddress}
|
|
onChange={e => setTestMailAddress(e.target.value)}
|
|
size={"small"} type={"email"}
|
|
placeholder={L("settings.mail_address")} />
|
|
</Grid>
|
|
</Grid>
|
|
</FormControl>
|
|
</FormGroup>
|
|
];
|
|
} else if (selectedTab === "recaptcha") {
|
|
return [
|
|
renderCheckBox("recaptcha_enabled"),
|
|
renderTextInput("recaptcha_public_key", !parseBool(settings.recaptcha_enabled)),
|
|
renderPasswordInput("recaptcha_private_key", !parseBool(settings.recaptcha_enabled)),
|
|
];
|
|
} else if (selectedTab === "uncategorized") {
|
|
return <TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>{L("settings.key")}</TableCell>
|
|
<TableCell>{L("settings.value")}</TableCell>
|
|
<TableCell align={"center"}>{L("general.controls")}</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{uncategorizedKeys.map(key => <TableRow key={"settings-" + key}>
|
|
<TableCell>
|
|
<TextField fullWidth={true} size={"small"} value={key}
|
|
onChange={e => onChangeKey(key, e.target.value)} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<TextField fullWidth={true} size={"small"} value={settings[key]}
|
|
onChange={e => onChangeValue(key, e.target.value)} />
|
|
</TableCell>
|
|
<TableCell align={"center"}>
|
|
<IconButton onClick={() => onDeleteKey(key)}
|
|
color={"secondary"}>
|
|
<Delete />
|
|
</IconButton>
|
|
</TableCell>
|
|
</TableRow>)}
|
|
<TableRow>
|
|
<TableCell>
|
|
<TextField fullWidth={true} size={"small"} onChange={e => setNewKey(e.target.value)}
|
|
onBlur={() => onAddKey(newKey)} value={newKey} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<TextField fullWidth={true} size={"small"} />
|
|
</TableCell>
|
|
<TableCell align={"center"}>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
<Box p={1}>
|
|
<Button startIcon={<Add />} variant={"outlined"}
|
|
size={"small"}>
|
|
{L("general.add")}
|
|
</Button>
|
|
</Box>
|
|
</TableContainer>
|
|
} else {
|
|
return <i>Invalid tab: {selectedTab}</i>
|
|
}
|
|
}
|
|
|
|
if (settings === null) {
|
|
return <CircularProgress />
|
|
}
|
|
|
|
return <>
|
|
<div className={"content-header"}>
|
|
<div className={"container-fluid"}>
|
|
<div className={"row mb-2"}>
|
|
<div className={"col-sm-6"}>
|
|
<h1 className={"m-0 text-dark"}>{L("settings.title")}</h1>
|
|
</div>
|
|
<div className={"col-sm-6"}>
|
|
<ol className={"breadcrumb float-sm-right"}>
|
|
<li className={"breadcrumb-item"}><Link to={"/admin/dashboard"}>Home</Link></li>
|
|
<li className="breadcrumb-item active">{L("settings.title")}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={"content"}>
|
|
<Tabs value={selectedTab} onChange={(e, v) => setSelectedTab(v)} component={Paper}>
|
|
<Tab value={"general"} label={L("settings.general")}
|
|
icon={<SettingsApplications />} iconPosition={"start"} />
|
|
<Tab value={"mail"} label={L("settings.mail")}
|
|
icon={<Mail />} iconPosition={"start"} />
|
|
<Tab value={"recaptcha"} label={L("settings.recaptcha")}
|
|
icon={<Google />} iconPosition={"start"} />
|
|
<Tab value={"uncategorized"} label={L("settings.uncategorized")}
|
|
icon={<LibraryBooks />} iconPosition={"start"} />
|
|
</Tabs>
|
|
<Box p={2}>
|
|
{
|
|
renderTab()
|
|
}
|
|
</Box>
|
|
<ButtonBar>
|
|
<Button color={"primary"}
|
|
onClick={onSaveSettings}
|
|
disabled={isSaving || !api.hasPermission("settings/set")}
|
|
startIcon={isSaving ? <CircularProgress size={14} /> : <Save />}
|
|
variant={"outlined"} title={L(hasChanged ? "general.unsaved_changes" : "general.save")}>
|
|
{isSaving ? L("general.saving") + "…" : (L("general.save") + (hasChanged ? " *" : ""))}
|
|
</Button>
|
|
<Button color={"secondary"}
|
|
onClick={onReset}
|
|
disabled={isSaving}
|
|
startIcon={<RestartAlt />}
|
|
variant={"outlined"} title={L("general.reset")}>
|
|
{L("general.reset")}
|
|
</Button>
|
|
</ButtonBar>
|
|
</div>
|
|
</>
|
|
|
|
} |