functionally completed user editing

client/src/app/admin/AddUser.tsx

@@ -25,7 +25,6 @@ export default function AddUser(props: {
 			onOpenChange={props.onOpenChange}
 			shadow={"none" as "sm"}
 			backdrop="blur"
-			className="bg-accent-5"
 		>
 			<ModalContent>
 				<ModalHeader>

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>
+	);
+}

client/src/app/admin/Users.tsx

@@ -9,22 +9,33 @@ import {
 	TableColumn,
 	TableHeader,
 	TableRow,
+	Tooltip,
 } from "@nextui-org/react";
 import { useAsyncList } from "@react-stately/data";
 import { FormEvent, useState } from "react";
 import AddUser from "./AddUser";
+import { Edit } from "@carbon/icons-react";
+import EditUser from "./EditUser";
 
 export default function Users() {
 	const [showAddUser, setShowAddUser] = useState(false);
+	const [editUser, setEditUser] = useState<User | undefined>();
+
 	const users = useAsyncList<User>({
 		async load() {
-			return {
-				items: [
-					{ userName: "admin", admin: true },
-					{ userName: "foo", admin: false },
-					{ userName: "bar", admin: true },
-				],
-			};
+			const result = await apiCall("GET", "users");
+
+			if (result.ok) {
+				const users = (await result.json()) as User[];
+
+				return {
+					items: users,
+				};
+			} else {
+				return {
+					items: [],
+				};
+			}
 		},
 		async sort({ items, sortDescriptor }) {
 			return {
@@ -67,6 +78,7 @@ export default function Users() {
 		}
 	}
 
+	// content above the user-tabel
 	const topContent = (
 		<>
 			<Button onPress={() => setShowAddUser(true)}>Add User</Button>
@@ -90,6 +102,7 @@ export default function Users() {
 					<TableColumn allowsSorting key="admin">
 						Admin
 					</TableColumn>
+					<TableColumn key="edit">Edit</TableColumn>
 				</TableHeader>
 				<TableBody items={users.items}>
 					{(user) => (
@@ -98,6 +111,18 @@ export default function Users() {
 							<TableCell>
 								<Checkbox isSelected={user.admin} />
 							</TableCell>
+							<TableCell>
+								<Button
+									isIconOnly
+									variant="light"
+									size="sm"
+									onPress={() => setEditUser(user)}
+								>
+									<Tooltip content="Edit event">
+										<Edit />
+									</Tooltip>
+								</Button>
+							</TableCell>
 						</TableRow>
 					)}
 				</TableBody>
@@ -108,6 +133,17 @@ export default function Users() {
 				onOpenChange={setShowAddUser}
 				onSubmit={(e) => void addUser(e)}
 			/>
+			<EditUser
+				isOpen={editUser !== undefined}
+				user={editUser}
+				onOpenChange={(isOpen) =>
+					!isOpen ? setEditUser(undefined) : undefined
+				}
+				onSuccess={() => {
+					users.reload();
+					setEditUser(undefined);
+				}}
+			/>
 		</div>
 	);
 }