In my deno fresh app, I can't get form inputs and send them to an async function - forms

Question

This is a deno "fresh" framework app and I have a island that allows the admin to create new users. Obviously this is a security vulnerability but this is just a testing proof of concept and I'm just trying to get a "fresh" app to send form data to the backend. This is my Creator island.
islands/Creator.tsx
// import { useState } from "preact/hooks";
import { useState, useEffect } from "preact/hooks";
import { Handlers, PageProps } from "$fresh/server.ts";
import UserDb from "../database.ts";
interface CreatorProps {
email: string,
key: string
}
export default function Creator(props: CreatorProps) {
const handleSubmit = (event) => {
event.preventDefault();
const emailInput = event.target.email;
const ageInput = event.target.key;
console.log(emailInput.value);
console.log(ageInput.value);
createNewUser(emailInput.value, ageInput.value)
};
async function createNewUser(email, key) {
console.log(email);
console.log(key);
const headers = new Headers({
'Content-Type': 'text/plain'
});
const opts = {
method: 'POST',
headers: headers,
body: JSON.stringify({
email: email,
key: key,
})
}
const rawPosts = await fetch('http://localhost:8000/api/createUser', opts);
console.log(rawPosts);
}
return (
<div>
<form onsubmit={handleSubmit}>
<h1 class="text rounded-lg p-4 my-8"> Search </h1>
<input class="center rounded-lg p-4 my-8" type="text" name="email" />
<input class="center rounded-lg p-4 my-8" type="text" name="key" />
<br />
<button
class="px-5 py-2.5 text-sm font-medium bg-blue-600 rounded-md shadow disabled:(bg-gray-800 border border-blue-600 opacity-50 cursor-not-allowed)"
type="submit">Submit
</button>
</form>
<br />
{/* <ul>
{results.map((name) => <li key={name}>{name}</li>)}
</ul> */}
</div>
);
};
And when I typed uiui and rrgg in the email and key fields and hit enter, I got this error in my terminal:
Watcher File change detected! Restarting!
Listening on http://localhost:8000/
NOTICE: relation "users" already exists, skipping
Request {
bodyUsed: false,
headers: Headers {
accept: "*/*",
"accept-encoding": "gzip, deflate, br",
"accept-language": "en-US,en;q=0.9",
connection: "keep-alive",
"content-length": "29",
"content-type": "text/plain",
host: "localhost:8000",
origin: "http://localhost:8000",
referer: "http://localhost:8000/create",
"sec-ch-ua": '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"macOS"',
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0...."
},
method: "POST",
redirect: "follow",
url: "http://localhost:8000/api/createUser"
}
Request {
bodyUsed: false,
headers: Headers {
accept: "*/*",
"accept-encoding": "gzip, deflate, br",
"accept-language": "en-US,en;q=0.9",
connection: "keep-alive",
"content-length": "29",
"content-type": "text/plain",
host: "localhost:8000",
origin: "http://localhost:8000",
referer: "http://localhost:8000/create",
"sec-ch-ua": '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"macOS"',
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0...."
},
method: "POST",
redirect: "follow",
url: "http://localhost:8000/api/createUser"
}
Request {
bodyUsed: false,
headers: Headers {
accept: "*/*",
"accept-encoding": "gzip, deflate, br",
"accept-language": "en-US,en;q=0.9",
connection: "keep-alive",
"content-length": "29",
"content-type": "text/plain",
host: "localhost:8000",
origin: "http://localhost:8000",
referer: "http://localhost:8000/create",
"sec-ch-ua": '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"macOS"',
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0...."
},
method: "POST",
redirect: "follow",
url: "http://localhost:8000/api/createUser"
}
Request {
bodyUsed: false,
headers: Headers {
accept: "*/*",
"accept-encoding": "gzip, deflate, br",
"accept-language": "en-US,en;q=0.9",
connection: "keep-alive",
"content-length": "29",
"content-type": "text/plain",
host: "localhost:8000",
origin: "http://localhost:8000",
referer: "http://localhost:8000/create",
"sec-ch-ua": '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"macOS"',
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0...."
},
method: "POST",
redirect: "follow",
url: "http://localhost:8000/api/createUser"
}
Request {
bodyUsed: false,
headers: Headers {
accept: "*/*",
"accept-encoding": "gzip, deflate, br",
"accept-language": "en-US,en;q=0.9",
connection: "keep-alive",
"content-length": "29",
"content-type": "text/plain",
host: "localhost:8000",
origin: "http://localhost:8000",
referer: "http://localhost:8000/create",
"sec-ch-ua": '"Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"macOS"',
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0...."
},
method: "POST",
redirect: "follow",
url: "http://localhost:8000/api/createUser"
}
Notice email and key aren't even logging on the server side, and the function appears to be running several times
And I got this in my web console:
So why are email and key being read and logged just fine in handleSubmit but not in createNewUser()?

Answer 1

You need to create an api route.
/routes/api/createNewUser.ts
import { HandlerContext } from "$fresh/server.ts";
export const handler = async (_req: Request, _ctx: HandlerContext): Response => {
if(_req.method === 'POST') {
const body = await _req.json();
const {email, key} = body;
console.log('email', email);
console.log('key', key);
/* your logic to use email & key to create user here */
return new Response(JSON.stringify({
message: 'User created successfully.'
}), {
status: 200,
headers: {
'Content-Type': 'application/json'
}
});
}
}