ls-deno/routes/register.tsx

import { Handlers, PageProps } from "$fresh/server.ts";
import { Page } from "../components/Page.tsx";
import { PostgresError, query } from "../db.ts";
import { hash } from "https://deno.land/x/bcrypt@v0.4.1/mod.ts";

type UserID = string;

interface RegistrationError {
  message: string;
}

export const handler: Handlers<UserID | RegistrationError | null> = {
  async POST(request, context) {
    const formData = (await request.formData());
    const username = formData.get("username");
    const password = formData.get("password");
    if (!username) throw "no username provided";
    if (!password) throw "no password provided";
    const hashed_password = await hash(password.toString());
    try {
      const result = await query<{ id: string }>(
        `insert into "user" (username, hashed_password) values ($1, $2) returning id`,
        [username, hashed_password],
      );
      console.debug(result);
      if (!result) throw "insert failed";
      const { rows: [{ id }] } = result;
      return await context.render(id);
    } catch (err) {
      if (err instanceof PostgresError) {
        console.error("PostgresError:", err);
        return await context.render({ message: err.message });
      } else {
        throw err;
      }
    }
  },
};

export default function Register(
  { data: userId }: PageProps<UserID | RegistrationError | null>,
) {
  if (typeof userId == "string") {
    return RegistrationSuccessful(userId);
  } else {
    return RegistrationForm(userId);
  }
}

function RegistrationSuccessful(_userId: UserID) {
  return (
    <Page>
      <p>
        You're all signed up! Let's go <a href="/login">log in</a>!
      </p>
    </Page>
  );
}

function RegistrationForm(props?: RegistrationError | null) {
  console.log(props);
  return (
    <Page>
      {props != null &&
        <p class="text-red-500">{props.message}</p>}
      <form class="flex flex-col max-w-lg" method="post">
        <label for="username">Username</label>
        <input class="bg-gray-800 px-4 py-2" type="text" name="username" />
        <label for="password">Password</label>
        <input class="bg-gray-800 px-4 py-2" type="password" name="password" />
        <input
          class="bg-gray-800 px-4 p-2 mt-2"
          type="submit"
          value="Register"
        />
      </form>
    </Page>
  );
}