init
This commit is contained in:
502
src/component/Admin/Setting/Access.js
Normal file
502
src/component/Admin/Setting/Access.js
Normal file
@@ -0,0 +1,502 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import InputLabel from "@material-ui/core/InputLabel";
|
||||
import FormControl from "@material-ui/core/FormControl";
|
||||
import Input from "@material-ui/core/Input";
|
||||
import FormHelperText from "@material-ui/core/FormHelperText";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import API from "../../../middleware/Api";
|
||||
import { useDispatch } from "react-redux";
|
||||
import Select from "@material-ui/core/Select";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import Switch from "@material-ui/core/Switch";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import AlertDialog from "../Dialogs/Alert";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import FileSelector from "../Common/FileSelector";
|
||||
import { toggleSnackbar } from "../../../redux/explorer";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
[theme.breakpoints.up("md")]: {
|
||||
marginLeft: 100,
|
||||
},
|
||||
marginBottom: 40,
|
||||
},
|
||||
form: {
|
||||
maxWidth: 400,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
},
|
||||
formContainer: {
|
||||
[theme.breakpoints.up("md")]: {
|
||||
padding: "0px 24px 0 24px",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Access() {
|
||||
const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
|
||||
const { t: tVas } = useTranslation("dashboard", { keyPrefix: "vas" });
|
||||
const classes = useStyles();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [initCompleted, setInitComplete] = useState(false);
|
||||
const [options, setOptions] = useState({
|
||||
register_enabled: "1",
|
||||
default_group: "1",
|
||||
email_active: "0",
|
||||
login_captcha: "0",
|
||||
reg_captcha: "0",
|
||||
forget_captcha: "0",
|
||||
qq_login: "0",
|
||||
qq_direct_login: "0",
|
||||
qq_login_id: "",
|
||||
qq_login_key: "",
|
||||
authn_enabled: "0",
|
||||
mail_domain_filter: "0",
|
||||
mail_domain_filter_list: "",
|
||||
initial_files: "[]",
|
||||
});
|
||||
const [siteURL, setSiteURL] = useState("");
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [httpAlert, setHttpAlert] = useState(false);
|
||||
|
||||
const handleChange = (name) => (event) => {
|
||||
let value = event.target.value;
|
||||
if (event.target.checked !== undefined) {
|
||||
value = event.target.checked ? "1" : "0";
|
||||
}
|
||||
setOptions({
|
||||
...options,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleInputChange = (name) => (event) => {
|
||||
const value = event.target.value;
|
||||
setOptions({
|
||||
...options,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const ToggleSnackbar = useCallback(
|
||||
(vertical, horizontal, msg, color) =>
|
||||
dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
API.post("/admin/setting", {
|
||||
keys: [...Object.keys(options), "siteURL"],
|
||||
})
|
||||
.then((response) => {
|
||||
setSiteURL(response.data.siteURL);
|
||||
delete response.data.siteURL;
|
||||
setOptions(response.data);
|
||||
setInitComplete(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
ToggleSnackbar("top", "right", error.message, "error");
|
||||
});
|
||||
|
||||
API.get("/admin/groups")
|
||||
.then((response) => {
|
||||
setGroups(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
ToggleSnackbar("top", "right", error.message, "error");
|
||||
});
|
||||
// eslint-disable-next-line
|
||||
}, []);
|
||||
|
||||
const submit = (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
const option = [];
|
||||
Object.keys(options).forEach((k) => {
|
||||
option.push({
|
||||
key: k,
|
||||
value: options[k],
|
||||
});
|
||||
});
|
||||
API.patch("/admin/setting", {
|
||||
options: option,
|
||||
})
|
||||
.then(() => {
|
||||
ToggleSnackbar("top", "right", t("saved"), "success");
|
||||
})
|
||||
.catch((error) => {
|
||||
ToggleSnackbar("top", "right", error.message, "error");
|
||||
})
|
||||
.then(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AlertDialog
|
||||
title={t("hint")}
|
||||
msg={t("webauthnNoHttps")}
|
||||
onClose={() => setHttpAlert(false)}
|
||||
open={httpAlert}
|
||||
/>
|
||||
<form onSubmit={submit}>
|
||||
<div className={classes.root}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{t("accountManagement")}
|
||||
</Typography>
|
||||
<div className={classes.formContainer}>
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.register_enabled === "1"
|
||||
}
|
||||
onChange={handleChange(
|
||||
"register_enabled"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
label={t("allowNewRegistrations")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("allowNewRegistrationsDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.email_active === "1"
|
||||
}
|
||||
onChange={handleChange(
|
||||
"email_active"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
label={t("emailActivation")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("emailActivationDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.reg_captcha === "1"
|
||||
}
|
||||
onChange={handleChange(
|
||||
"reg_captcha"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
label={t("captchaForSignup")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("captchaForSignupDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.login_captcha === "1"
|
||||
}
|
||||
onChange={handleChange(
|
||||
"login_captcha"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
label={t("captchaForLogin")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("captchaForLoginDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.forget_captcha === "1"
|
||||
}
|
||||
onChange={handleChange(
|
||||
"forget_captcha"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
label={t("captchaForReset")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("captchaForResetDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.authn_enabled === "1"
|
||||
}
|
||||
onChange={(e) => {
|
||||
if (
|
||||
!siteURL.startsWith(
|
||||
"https://"
|
||||
)
|
||||
) {
|
||||
setHttpAlert(true);
|
||||
return;
|
||||
}
|
||||
handleChange("authn_enabled")(
|
||||
e
|
||||
);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={t("webauthn")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("webauthnDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
{t("defaultGroup")}
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={options.default_group}
|
||||
onChange={handleInputChange(
|
||||
"default_group"
|
||||
)}
|
||||
required
|
||||
>
|
||||
{groups.map((v) => {
|
||||
if (v.ID === 3) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<MenuItem
|
||||
key={v.ID}
|
||||
value={v.ID.toString()}
|
||||
>
|
||||
{v.Name}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{t("defaultGroupDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl>
|
||||
{initCompleted && (
|
||||
<FileSelector
|
||||
label={tVas("initialFiles")}
|
||||
value={JSON.parse(
|
||||
options.initial_files
|
||||
)}
|
||||
onChange={(v) =>
|
||||
handleInputChange("initial_files")({
|
||||
target: { value: v },
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("initialFilesDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
{tVas("filterEmailProvider")}
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={options.mail_domain_filter}
|
||||
onChange={handleInputChange(
|
||||
"mail_domain_filter"
|
||||
)}
|
||||
required
|
||||
>
|
||||
{[
|
||||
tVas("filterEmailProviderDisabled"),
|
||||
tVas("filterEmailProviderWhitelist"),
|
||||
tVas("filterEmailProviderBlacklist"),
|
||||
].map((v, i) => (
|
||||
<MenuItem key={i} value={i.toString()}>
|
||||
{v}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("filterEmailProviderDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
{options.mail_domain_filter !== "0" && (
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
{tVas("filterEmailProviderRule")}
|
||||
</InputLabel>
|
||||
<Input
|
||||
value={options.mail_domain_filter_list}
|
||||
onChange={handleChange(
|
||||
"mail_domain_filter_list"
|
||||
)}
|
||||
multiline
|
||||
rowsMax="10"
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("filterEmailProviderRuleDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={classes.root}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{tVas("qqConnect")}
|
||||
</Typography>
|
||||
<div className={classes.formContainer}>
|
||||
<div className={classes.form}>
|
||||
<Alert severity="info">
|
||||
{tVas("qqConnectHint", {
|
||||
url: siteURL.endsWith("/")
|
||||
? siteURL + "login/qq"
|
||||
: siteURL + "/login/qq",
|
||||
})}
|
||||
</Alert>
|
||||
</div>
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={options.qq_login === "1"}
|
||||
onChange={handleChange("qq_login")}
|
||||
/>
|
||||
}
|
||||
label={tVas("enableQQConnect")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("enableQQConnectDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
{options.qq_login === "1" && (
|
||||
<>
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={
|
||||
options.qq_direct_login ===
|
||||
"1"
|
||||
}
|
||||
onChange={handleChange(
|
||||
"qq_direct_login"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
label={tVas("loginWithoutBinding")}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("loginWithoutBindingDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
{tVas("appid")}
|
||||
</InputLabel>
|
||||
<Input
|
||||
required
|
||||
value={options.qq_login_id}
|
||||
onChange={handleInputChange(
|
||||
"qq_login_id"
|
||||
)}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("appidDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className={classes.form}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
{tVas("appKey")}
|
||||
</InputLabel>
|
||||
<Input
|
||||
required
|
||||
value={options.qq_login_key}
|
||||
onChange={handleInputChange(
|
||||
"qq_login_key"
|
||||
)}
|
||||
/>
|
||||
<FormHelperText id="component-helper-text">
|
||||
{tVas("appKeyDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={classes.root}>
|
||||
<Button
|
||||
disabled={loading}
|
||||
type={"submit"}
|
||||
variant={"contained"}
|
||||
color={"primary"}
|
||||
>
|
||||
{t("save")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user