Admin header

islands/Admin.tsx

@@ -27,6 +27,11 @@ export function Admin({ users, todos }: Props) {
 	}
 	return (
 		<main class='flex flex-col'>
+			<header class='flex items-center border-b-2 border-stone-500/20 '>
+				<h1 class='p-5 text-2xl'>
+					Administration Page
+				</h1>
+			</header>
 			<dialog
 				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
 				ref={addUserDialog}
@@ -89,10 +94,11 @@ export function Admin({ users, todos }: Props) {
 					// Form contains enctype=multipart/form-data, but does not contain method=post.
 					// Submitting normally with method=GET and no enctype instead.
 					// possible workaround? https://stackoverflow.com/questions/50691938/patch-and-put-request-does-not-working-with-form-data
-					method='put'
+					method='post'
 					encType='multipart/form-data'
 					onSubmit={() => console.log('Submitting edit user...')}
 				>
+					<Input type='hidden' name='_method' value='put' />
 					<Input type='hidden' name='id' value={editUser.value?.id} />
 					<Label for='name'>
 						Name

routes/api/user.ts

@@ -22,7 +22,7 @@ export const handler: Handlers<User | null> = {
 				throw new Error('invalid avatar file')
 			}
 
-			// validate png/jpg/webp?
+			// TODO: validate png/jpg/webp?
 			console.log(avatarFile.type)
 			await Deno.mkdir('./static/uploads', { recursive: true })
 			const name = `${newId}-${avatarFile.name.replaceAll('/', '')}`