149 lines
4.1 KiB
TypeScript
149 lines
4.1 KiB
TypeScript
import toast from "react-hot-toast";
|
|
import Modal from "../Modal";
|
|
import useUserStore from "@/store/admin/users";
|
|
import TextInput from "../TextInput";
|
|
import { FormEvent, useState } from "react";
|
|
import { useTranslation, Trans } from "next-i18next";
|
|
|
|
type Props = {
|
|
onClose: Function;
|
|
};
|
|
|
|
type FormData = {
|
|
name: string;
|
|
username?: string;
|
|
email?: string;
|
|
password: string;
|
|
};
|
|
|
|
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
|
|
|
|
export default function NewUserModal({ onClose }: Props) {
|
|
const { t } = useTranslation();
|
|
const { addUser } = useUserStore();
|
|
const [form, setForm] = useState<FormData>({
|
|
name: "",
|
|
username: "",
|
|
email: emailEnabled ? "" : undefined,
|
|
password: "",
|
|
});
|
|
const [submitLoader, setSubmitLoader] = useState(false);
|
|
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
if (!submitLoader) {
|
|
const checkFields = () => {
|
|
if (emailEnabled) {
|
|
return form.name !== "" && form.email !== "" && form.password !== "";
|
|
} else {
|
|
return (
|
|
form.name !== "" && form.username !== "" && form.password !== ""
|
|
);
|
|
}
|
|
};
|
|
|
|
if (checkFields()) {
|
|
if (form.password.length < 8)
|
|
return toast.error(t("password_length_error"));
|
|
|
|
setSubmitLoader(true);
|
|
|
|
const load = toast.loading(t("creating_account"));
|
|
|
|
const response = await addUser(form);
|
|
|
|
toast.dismiss(load);
|
|
setSubmitLoader(false);
|
|
|
|
if (response.ok) {
|
|
toast.success(t("user_created"));
|
|
onClose();
|
|
} else {
|
|
toast.error(response.data as string);
|
|
}
|
|
} else {
|
|
toast.error(t("fill_all_fields_error"));
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal toggleModal={onClose}>
|
|
<p className="text-xl font-thin">{t("create_new_user")}</p>
|
|
|
|
<div className="divider mb-3 mt-1"></div>
|
|
|
|
<form onSubmit={submit}>
|
|
<div className="grid sm:grid-cols-2 gap-3">
|
|
<div>
|
|
<p className="mb-2">{t("display_name")}</p>
|
|
<TextInput
|
|
placeholder={t("placeholder_johnny")}
|
|
className="bg-base-200"
|
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
|
value={form.name}
|
|
/>
|
|
</div>
|
|
|
|
{emailEnabled ? (
|
|
<div>
|
|
<p className="mb-2">{t("email")}</p>
|
|
<TextInput
|
|
placeholder={t("placeholder_email")}
|
|
className="bg-base-200"
|
|
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
|
value={form.email}
|
|
/>
|
|
</div>
|
|
) : undefined}
|
|
|
|
<div>
|
|
<p className="mb-2">
|
|
{t("username")}{" "}
|
|
{emailEnabled && (
|
|
<span className="text-xs text-neutral">{t("optional")}</span>
|
|
)}
|
|
</p>
|
|
<TextInput
|
|
placeholder={t("placeholder_john")}
|
|
className="bg-base-200"
|
|
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
|
value={form.username}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="mb-2">{t("password")}</p>
|
|
<TextInput
|
|
placeholder="••••••••••••••"
|
|
className="bg-base-200"
|
|
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
|
value={form.password}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="note" className="alert alert-note mt-5">
|
|
<i className="bi-exclamation-triangle text-xl" />
|
|
<span>
|
|
<Trans
|
|
i18nKey="password_change_note"
|
|
components={[<b key={0} />]}
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center mt-5">
|
|
<button
|
|
className="btn btn-accent dark:border-violet-400 text-white ml-auto"
|
|
type="submit"
|
|
>
|
|
{t("create_user")}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|