Put with forms is a problem?

components/TodoList.tsx

@@ -26,7 +26,7 @@ export function TodoList(
 	return (
 		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
 			<img
-				class='rounded-full w-full mb-2'
+				class='rounded-full w-[15rem] h-[15rem] mb-2 object-cover'
 				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
 				title={`${name}'s avatar`}
 			/>

islands/Admin.tsx

@@ -1,4 +1,5 @@
 import { createRef } from 'preact'
+import { type Signal, useSignal } from '@preact/signals'
 import { Todo, User } from '@homeman/models.ts'
 import { Button } from '@homeman/components/Button.tsx'
 import { Input } from '@homeman/components/Input.tsx'
@@ -17,7 +18,9 @@ async function promptDeleteUser(id: string, name: string) {
 }
 
 export function Admin({ users, todos }: Props) {
+	const editUser: Signal<User | null> = useSignal(null)
 	const addUserDialog = createRef<HTMLDialogElement>()
+	const editUserDialog = createRef<HTMLDialogElement>()
 	const usersById: Record<string, User> = {}
 	for (const u of users) {
 		usersById[u.id] = u
@@ -42,7 +45,7 @@ export function Admin({ users, todos }: Props) {
 					action='/api/user'
 					method='post'
 					encType='multipart/form-data'
-					onSubmit={() => console.log('Submitting...')}
+					onSubmit={() => console.log('Submitting new user...')}
 				>
 					<Label for='name'>
 						Name
@@ -66,6 +69,55 @@ export function Admin({ users, todos }: Props) {
 					</footer>
 				</form>
 			</dialog>
+			<dialog
+				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
+				ref={editUserDialog}
+			>
+				<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+					<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1>
+					<Button
+						onClick={() => editUserDialog.current?.close()}
+						class='text-xl p-4 border-b-2 mr-4'
+					>
+						✕
+					</Button>
+				</header>
+				<form
+					class='p-4 gap-4 flex flex-col'
+					action='/api/user'
+					// Form contains enctype=multipart/form-data, but does not contain method=post.
+					// Submitting normally with method=GET and no enctype instead.
+					method='put'
+					encType='multipart/form-data'
+					onSubmit={() => console.log('Submitting edit user...')}
+				>
+					<Input type='hidden' name='id' value={editUser.value?.id} />
+					<Label for='name'>
+						Name
+						<Input autofocus name='name' value={editUser.value?.name} />
+					</Label>
+					<Label for='avatar'>
+						Avatar
+						<Input type='file' name='avatar' />
+					</Label>
+					<Label for='color'>
+						Color
+						<Input
+							type='color'
+							name='color'
+							value={`#${editUser.value?.color}`}
+						/>
+					</Label>
+					<footer class='flex justify-end gap-2'>
+						<Button
+							onClick={() => editUserDialog.current?.close()}
+						>
+							Cancel
+						</Button>
+						<Input type='submit' value='Save' />
+					</footer>
+				</form>
+			</dialog>
 			<header class='flex items-center border-b-2 border-stone-500/20 '>
 				<h1 class='p-5 text-2xl'>
 					Users ({users.length})
@@ -84,21 +136,23 @@ export function Admin({ users, todos }: Props) {
 					</tr>
 				</thead>
 				<tbody>
-					{users.map(({ id, name, avatarUrl, color }) => (
+					{users.map((user) => {
+						const { id, name, avatarUrl, color } = user
+						return (
 							<tr>
 								<td>{name}</td>
 								<td>
 									{avatarUrl == null
 										? 'None'
-									: <img class='h-16 w-16' src={avatarUrl} />}
+										: <img class='h-16 w-16 object-cover' src={avatarUrl} />}
 								</td>
 								<td style={`color: #${color}`}>
 									#{color}
 								</td>
-							<td>
+								<td class=''>
 									<Button
 										title='Delete'
-									className='py-2'
+										className='py-2 mr-2'
 										onClick={() => promptDeleteUser(id, name)}
 									>
 										<svg
@@ -116,9 +170,33 @@ export function Admin({ users, todos }: Props) {
 											/>
 										</svg>
 									</Button>
+									<Button
+										title='Edit'
+										className='py-2'
+										onClick={() => {
+											editUser.value = user
+											editUserDialog.current?.showModal()
+										}}
+									>
+										<svg
+											xmlns='http://www.w3.org/2000/svg'
+											fill='none'
+											viewBox='0 0 24 24'
+											stroke-width='1.5'
+											stroke='currentColor'
+											class='w-6 h-6'
+										>
+											<path
+												stroke-linecap='round'
+												stroke-linejoin='round'
+												d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'
+											/>
+										</svg>
+									</Button>
 								</td>
 							</tr>
-					))}
+						)
+					})}
 				</tbody>
 			</table>
 			<header class='flex items-center border-b-2 border-stone-500/20 '>

models.ts

@@ -19,8 +19,8 @@ const User = z.object({
 	createdAt: z.date(),
 
 	name: z.string(),
-	avatarUrl: z.string().nullable(),
-	color: z.string().nullable(),
+	avatarUrl: z.string(),
+	color: z.string(),
 })
 export const UserModel = User
 export type User = z.infer<typeof User>

routes/api/user.ts

@@ -10,10 +10,12 @@ export const handler: Handlers<User | null> = {
 	async POST(req, _ctx) {
 		// handle json or form posts
 		let user: UserCreate
+		let redirectInstead = false
 		const newId = ulid()
 		if (req.headers.get('content-type')?.includes('json')) {
 			user = UserCreate.parse(req.json())
 		} else {
+			redirectInstead = true
 			const form = await req.formData()
 			const avatarFile = form.get('avatar') as File
 			if (!avatarFile) {
@@ -21,6 +23,7 @@ export const handler: Handlers<User | null> = {
 			}
 
 			// validate png/jpg/webp?
+			console.log(avatarFile.type)
 			await Deno.mkdir('./static/uploads', { recursive: true })
 			const name = `${newId}-${avatarFile.name.replaceAll('/', '')}`
 			const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
@@ -43,13 +46,56 @@ export const handler: Handlers<User | null> = {
 
 		const newUser: User = { ...user, id: newId, createdAt: new Date() }
 		const result = await db.users.create({ data: newUser })
+		if (redirectInstead) {
+			const url = new URL(req.url)
+			url.pathname = '/admin'
+			return Response.redirect(url, 303)
+		} else {
 			return new Response(JSON.stringify(result))
+		}
 	},
 	async PUT(req, _ctx) {
 		// TODO: form or json
-		const user = UserModel.parse(await req.json())
+		let model = UserModel.omit({ createdAt: true }).partial({ avatarUrl: true })
+		let user: z.infer<typeof model>
+		let redirectInstead = false
+		if (req.headers.get('content-type')?.includes('json')) {
+			// TODO: ensure missing fields don't get set to null?
+			user = model.parse(req.json())
+		} else {
+			redirectInstead = true
+			const form = await req.formData()
+			user = model.parse({
+				id: form.get('id')?.toString(),
+				name: form.get('name')?.toString(),
+				avatarUrl: null,
+				color: form.get('color')?.toString(),
+			})
+			const avatarFile = form.get('avatar') as (File | null)
+			if (!avatarFile) {
+				user.avatarUrl =
+					(await db.users.findFirst({ where: { id: user.id } })).avatarUrl
+			} else {
+				// validate png/jpg/webp?
+				console.log(avatarFile.type)
+				await Deno.mkdir('./static/uploads', { recursive: true })
+				const name = `${user.id}-${avatarFile.name.replaceAll('/', '')}`
+				const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
+					create: true,
+					write: true,
+				})
+				await avatarFile.stream().pipeTo(localAvatarFile.writable)
+			}
+		}
+
 		const result = await db.users.update({ data: user })
+		if (redirectInstead) {
+			const url = new URL(req.url)
+			url.pathname = '/admin'
+			return Response.redirect(url, 303)
+		} else {
 			return new Response(JSON.stringify(result))
+		}
 	},
 	async DELETE(req, _ctx) {
 		// TODO: form or query params or json