75 lines
5.1 KiB
JavaScript
75 lines
5.1 KiB
JavaScript
import Button from "@mui/material/Button";
|
|
import Dialog from "@mui/material/Dialog";
|
|
import DialogActions from "@mui/material/DialogActions";
|
|
import DialogContent from "@mui/material/DialogContent";
|
|
import DialogTitle from "@mui/material/DialogTitle";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import Stack from "@mui/material/Stack";
|
|
import TextField from "@mui/material/TextField";
|
|
import { useEffect, useState } from "react";
|
|
import { ExternalImageUploadField } from "../shared/ExternalImageUploadField.jsx";
|
|
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";
|
|
|
|
export function UserEditDialog({ loading, onClose, onSubmit, open, user }) {
|
|
const { t } = useExternalI18n();
|
|
const [form, setForm] = useState(emptyEditForm);
|
|
useEffect(() => {
|
|
setForm({ avatar: user?.avatar || "", country: user?.country || "", gender: user?.gender || "", username: user?.username || "" });
|
|
}, [user]);
|
|
return (
|
|
<BaseDialog loading={loading} open={open} title={t("users.editTitle")} onClose={onClose} onSubmit={() => onSubmit(form)}>
|
|
<ExternalImageUploadField disabled={loading} label={t("users.avatar")} value={form.avatar} onChange={(avatar) => setForm({ ...form, avatar })} />
|
|
<TextField disabled={loading} label={t("users.name")} required value={form.username} onChange={(event) => setForm({ ...form, username: event.target.value })} />
|
|
<TextField disabled={loading} label={t("users.gender")} select value={form.gender} onChange={(event) => setForm({ ...form, gender: event.target.value })}>
|
|
<MenuItem value="">{t("users.notSet")}</MenuItem><MenuItem value="male">{t("users.genderMale")}</MenuItem><MenuItem value="female">{t("users.genderFemale")}</MenuItem><MenuItem value="unknown">{t("users.genderUnknown")}</MenuItem>
|
|
</TextField>
|
|
<TextField disabled={loading} label={t("users.countryCode")} value={form.country} onChange={(event) => setForm({ ...form, country: event.target.value.trim().toUpperCase() })} />
|
|
</BaseDialog>
|
|
);
|
|
}
|
|
|
|
export function UserBanDialog({ loading, onClose, onSubmit, open, user }) {
|
|
const { t } = useExternalI18n();
|
|
const [form, setForm] = useState({ days: "7", reason: "" });
|
|
useEffect(() => setForm({ days: "7", reason: "" }), [user]);
|
|
return (
|
|
<BaseDialog loading={loading} open={open} title={t("users.banTitle", { user: user?.prettyId || user?.username || "" })} onClose={onClose} onSubmit={() => onSubmit(form)}>
|
|
<TextField disabled={loading} helperText={t("users.banForeverHint")} label={t("users.banDays")} required slotProps={{ htmlInput: { min: 0 } }} type="number" value={form.days} onChange={(event) => setForm({ ...form, days: event.target.value })} />
|
|
<TextField disabled={loading} label={t("users.banReason")} minRows={3} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
|
|
</BaseDialog>
|
|
);
|
|
}
|
|
|
|
export function UserLevelDialog({ loading, onClose, onSubmit, open, user }) {
|
|
const { t } = useExternalI18n();
|
|
const [form, setForm] = useState({ days: "30", level: "", reason: "", track: "wealth" });
|
|
useEffect(() => setForm({ days: "30", level: "", reason: "", track: "wealth" }), [user]);
|
|
return (
|
|
<BaseDialog loading={loading} open={open} title={t("users.levelTitle", { user: user?.prettyId || user?.username || "" })} onClose={onClose} onSubmit={() => onSubmit(form)}>
|
|
<TextField disabled={loading} label={t("users.levelType")} select value={form.track} onChange={(event) => setForm({ ...form, track: event.target.value })}><MenuItem value="wealth">{t("users.wealthLevel")}</MenuItem><MenuItem value="charm">{t("users.charmLevel")}</MenuItem><MenuItem value="vip">{t("users.vipLevel")}</MenuItem></TextField>
|
|
<TextField disabled={loading} label={t("users.level")} required slotProps={{ htmlInput: { min: 1 } }} type="number" value={form.level} onChange={(event) => setForm({ ...form, level: event.target.value })} />
|
|
<TextField disabled={loading} helperText={t("users.validDaysMin")} label={t("users.validDays")} required slotProps={{ htmlInput: { min: 1 } }} type="number" value={form.days} onChange={(event) => setForm({ ...form, days: event.target.value })} />
|
|
<TextField disabled={loading} label={t("users.grantReason")} minRows={2} multiline required value={form.reason} onChange={(event) => setForm({ ...form, reason: event.target.value })} />
|
|
</BaseDialog>
|
|
);
|
|
}
|
|
|
|
function BaseDialog({ children, loading, onClose, onSubmit, open, title }) {
|
|
const { t } = useExternalI18n();
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
onSubmit();
|
|
};
|
|
return (
|
|
<Dialog fullWidth maxWidth="sm" open={open} onClose={loading ? undefined : onClose}>
|
|
<Stack component="form" onSubmit={handleSubmit}>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogContent><Stack className="external-dialog-fields" spacing={2}>{children}</Stack></DialogContent>
|
|
<DialogActions><Button disabled={loading} onClick={onClose}>{t("common.cancel")}</Button><Button disabled={loading} type="submit" variant="contained">{t("common.confirm")}</Button></DialogActions>
|
|
</Stack>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
const emptyEditForm = { avatar: "", country: "", gender: "", username: "" };
|