functionally completed user editing

client/next.config.ts

@@ -10,7 +10,7 @@ const nextConfig: NextConfig = {
 		fallback: [
 			{
 				source: "/api/:path*",
-				destination: "http://golunteer-frontend:8080/api/:path*",
+				destination: "http://golunteer-backend:8080/api/:path*",
 			},
 		],
 	}),

client/src/Zustand.ts

@@ -2,7 +2,6 @@
 
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { apiCall } from "./lib";
 
 export interface EventData {
 	id: number;
@@ -17,48 +16,29 @@ export interface User {
 }
 
 interface Zustand {
-	events: EventData[];
-	pendingEvents: number;
 	user: User | null;
-	setEvents: (events: EventData[]) => void;
 	reset: (zustand?: Partial<Zustand>) => void;
-	getPendingEvents: () => Promise<void>;
 }
 
 const initialState = {
-	events: [],
 	user: null,
-	pendingEvents: 0,
 };
 
 const zustand = create<Zustand>()(
 	persist(
 		(set) => ({
 			...initialState,
-			setEvents: (events) => set({ events }),
 			reset: (newZustand) =>
 				set({
 					...initialState,
 					...newZustand,
 				}),
-			getPendingEvents: async () => {
-				const result = await apiCall<{ pendingEvents: number }>(
-					"GET",
-					"events/user/pending",
-				);
-
-				if (result.ok) {
-					const resultData = await result.json();
-
-					set(() => ({ pendingEvents: resultData }));
-				}
-			},
 		}),
 		{
 			name: "golunteer-storage",
 			partialize: (state) =>
 				Object.fromEntries(
-					Object.entries(state).filter(([key]) => !["events"].includes(key)),
+					Object.entries(state).filter(([key]) => ["user"].includes(key)),
 				),
 		},
 	),

client/src/app/Header.tsx

@@ -21,12 +21,25 @@ import {
 } from "@nextui-org/react";
 import zustand from "@/Zustand";
 import { SiteLink } from "./layout";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 export default function Header({ sites }: { sites: SiteLink[] }) {
 	const router = useRouter();
 	const user = zustand((state) => state.user);
-	const pendingEvents = zustand((state) => state.pendingEvents);
+	const [pendingEvents, setPendingEvents] = useState(0);
+
+	useEffect(() => {
+		(async () => {
+			const result = await apiCall<{ pendingEvents: number }>(
+				"GET",
+				"events/user/pending",
+			);
+
+			if (result.ok) {
+				setPendingEvents(await result.json());
+			}
+		})();
+	}, []);
 
 	const pathname = usePathname();
 

client/src/app/Main.tsx

@@ -18,6 +18,7 @@ export default function Main({ children }: { children: React.ReactNode }) {
 
 	const router = useRouter();
 	const pathname = usePathname();
+	const user = zustand((state) => state.user);
 
 	useEffect(() => {
 		void (async () => {
@@ -34,14 +35,13 @@ export default function Main({ children }: { children: React.ReactNode }) {
 						const response = await welcomeResult.json();
 
 						if (response.userName !== undefined && response.userName !== "") {
-							void zustand.getState().getPendingEvents();
-
 							zustand.getState().reset({ user: response });
 
 							loggedIn = true;
 						}
 					} catch {}
 				} else {
+					zustand.getState().reset();
 				}
 			} else {
 				loggedIn = true;
@@ -62,7 +62,7 @@ export default function Main({ children }: { children: React.ReactNode }) {
 				}
 			}
 		})();
-	}, [pathname, router]);
+	}, [pathname, router, user]);
 
 	switch (auth) {
 		case AuthState.Loading:

client/src/app/Overview.tsx

@@ -1,11 +1,8 @@
 "use client";
 
 import { Add } from "@carbon/icons-react";
-import Event from "../components/Event/Event";
 import { useState } from "react";
 import AddEvent from "../components/Event/AddEvent";
-import zustand from "../Zustand";
-import AssignmentTable from "@/components/Event/AssignmentTable";
 import { Button } from "@nextui-org/react";
 
 export default function EventVolunteer() {
@@ -14,13 +11,7 @@ export default function EventVolunteer() {
 	return (
 		<div className="relative flex-1">
 			<h2 className="mb-4 text-center text-4xl">Overview</h2>
-			<div className="flex flex-wrap justify-center gap-4">
-				{zustand.getState().events.map((ee) => (
-					<Event key={ee.id} event={ee}>
-						<AssignmentTable tasks={ee.tasks} />
-					</Event>
-				))}
-			</div>
+			<div className="flex flex-wrap justify-center gap-4"></div>
 
 			<Button
 				color="primary"

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

client/src/app/events/page.tsx

@@ -15,8 +15,6 @@ export default function Events() {
 
 	useEffect(() => {
 		(async () => {
-			console.debug("query");
-
 			const data = await apiCall<EventData[]>("GET", "events/assignments");
 
 			if (data.ok) {

client/src/app/login/page.tsx

@@ -27,9 +27,6 @@ export default function Login() {
 			// add the user-info to the zustand
 			zustand.getState().reset({ user: await result.json() });
 
-			// retrieve the notifications
-			await zustand.getState().getPendingEvents();
-
 			// redirect to the home-page
 			router.push("/");
 		} else {

client/src/components/Event/AddEvent.tsx

@@ -33,6 +33,7 @@ export default function AddEvent(props: {
 	className?: string;
 	isOpen: boolean;
 	onOpenChange: (isOpen: boolean) => void;
+	onSuccess?: () => void;
 }) {
 	// initial state for the inputs
 	const initialState: state = {
@@ -73,6 +74,8 @@ export default function AddEvent(props: {
 			zustand.getState().setEvents(await result.json());
 
 			props.onOpenChange(false);
+
+			props.onSuccess?.();
 		}
 	}
 

client/src/lib.ts

@@ -84,8 +84,10 @@ export class DateFormatter {
 export function vaidatePassword(password: string): string[] {
 	const errors = [];
 
-	if (password.length < 1) {
-		errors.push("Password must be 16 characters or more");
+	if (password.length < 12) {
+		errors.push("Password must be 12 characters or more");
+	} else if (password.length > 64) {
+		errors.push("Password must be 64 characters or short");
 	}
 
 	return errors;

client/tailwind.config.ts

@@ -20,7 +20,20 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-				highlight: HIGHLIGHT,
+				highlight: {
+					DEFAULT: HIGHLIGHT,
+					"50": "hsl(0,85.7%,97.3%)",
+					"100": "hsl(0,93.3%,94.1%)",
+					"200": "hsl(0,96.3%,89.4%)",
+					"300": "hsl(0,93.5%,81.8%)",
+					"400": "hsl(0,90.6%,70.8%)",
+					"500": "hsl(0,84.2%,60.2%)",
+					"600": "hsl(0,72.2%,50.6%)",
+					"700": "hsl(0,73.7%,41.8%)",
+					"800": "hsl(0,70%,35.3%)",
+					"900": "hsl(0,62.8%,30.6%)",
+					"950": "hsl(0,74.7%,15.5%)",
+				},
 				foreground: FOREGROUND,
 				"accent-1": ACCENT1,
 				"accent-2": ACCENT2,