functionally completed user editing

client/src/app/admin/EditUser.tsx

@@ -0,0 +1,137 @@
+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>
+	);
+}