138 lines
3.3 KiB
TypeScript
138 lines
3.3 KiB
TypeScript
import {
|
|
apiCall,
|
|
classNames,
|
|
vaidatePassword as validatePassword,
|
|
} from "@/lib";
|
|
import zustand, { User } from "@/Zustand";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Form,
|
|
Input,
|
|
Modal,
|
|
ModalBody,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
} from "@nextui-org/react";
|
|
import { FormEvent, useEffect, useState } from "react";
|
|
|
|
export default function EditUser(props: {
|
|
isOpen: boolean;
|
|
user?: User;
|
|
onOpenChange: (isOpen: boolean) => void;
|
|
onSuccess: () => void;
|
|
}) {
|
|
const [name, setName] = useState(props.user?.userName);
|
|
const [admin, setAdmin] = useState(props.user?.admin);
|
|
const [password, setPassword] = useState("");
|
|
|
|
const pwErrors = validatePassword(password);
|
|
|
|
// set the states on value changes
|
|
useEffect(() => {
|
|
if (props.user !== undefined) {
|
|
setName(props.user.userName);
|
|
setAdmin(props.user.admin);
|
|
|
|
// reset the password
|
|
setPassword("");
|
|
}
|
|
}, [props.user]);
|
|
|
|
// update the user in the backend
|
|
async function updateUser(e: FormEvent<HTMLFormElement>) {
|
|
const formData = Object.fromEntries(new FormData(e.currentTarget));
|
|
|
|
const data = {
|
|
...formData,
|
|
userName: props.user?.userName,
|
|
admin: formData.admin !== undefined,
|
|
};
|
|
|
|
// if we modify ourself, set admin to true since it isn't included in the form data because the checkbox is disabled
|
|
data.admin ||= props.user?.userName === zustand.getState().user?.userName;
|
|
|
|
const result = await apiCall("PATCH", "users", undefined, data);
|
|
|
|
if (result.ok) {
|
|
// if we updated ourself
|
|
if (props.user?.userName === zustand.getState().user?.userName) {
|
|
zustand.setState({ user: null });
|
|
}
|
|
|
|
props.onSuccess();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={props.isOpen} onOpenChange={props.onOpenChange}>
|
|
{props.user !== undefined ? (
|
|
<ModalContent>
|
|
<ModalHeader>
|
|
<h1 className="text-2xl">
|
|
Edit User{" "}
|
|
<span className="font-numbers font-normal italic">
|
|
{props.user.userName}
|
|
</span>
|
|
</h1>
|
|
</ModalHeader>
|
|
<Form
|
|
validationBehavior="native"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
updateUser(e);
|
|
}}
|
|
>
|
|
<ModalBody className="w-full">
|
|
<Input
|
|
label="Name"
|
|
color={name !== props.user.userName ? "warning" : "default"}
|
|
name="newName"
|
|
value={name}
|
|
onValueChange={setName}
|
|
/>
|
|
<Input
|
|
label="Password"
|
|
color={password.length > 0 ? "warning" : "default"}
|
|
name="password"
|
|
value={password}
|
|
onValueChange={setPassword}
|
|
isInvalid={password.length > 0 && pwErrors.length > 0}
|
|
errorMessage={
|
|
<ul>
|
|
{pwErrors.map((e, ii) => (
|
|
<li key={ii}>{e}</li>
|
|
))}
|
|
</ul>
|
|
}
|
|
/>
|
|
<Checkbox
|
|
name="admin"
|
|
color={admin !== props.user.admin ? "warning" : "primary"}
|
|
isDisabled={
|
|
props.user.userName === zustand.getState().user?.userName
|
|
}
|
|
isSelected={admin}
|
|
onValueChange={setAdmin}
|
|
classNames={{
|
|
label: classNames({
|
|
"text-warning": admin !== props.user.admin,
|
|
}),
|
|
}}
|
|
>
|
|
Admin
|
|
</Checkbox>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button type="submit" color="primary">
|
|
Update
|
|
</Button>
|
|
</ModalFooter>
|
|
</Form>
|
|
</ModalContent>
|
|
) : null}
|
|
</Modal>
|
|
);
|
|
}
|