Page MenuHomeSealhub
Files F996386

multiform.ts
No OneTemporary
Actions

multiform.ts
View Options

import Koa, { Context } from "koa";
import Router from "@koa/router";
import { Controls, Fields, Form } from "../..";
import { Multiform } from "../../forms/multiform";
import koaBody from "koa-body";
import { FlatTemplatable, tempstream } from "tempstream";
import { App } from "sealious";
import { FormMessage } from "../../forms/form";
const app = new Koa({ proxy: true });
const router = new Router();
const fields1 = {
email: new Fields.SimpleFormField(true),
password: new Fields.SimpleFormField(true),
};
const form1 = new (class extends Form<typeof fields1> {
defaultSuccessMessage = "Form1 done!";
controls = [
new Controls.FormHeader("form1"),
new Controls.SimpleInput(fields1.email),
];
fields = fields1;
onSubmit() {
console.log("form1 submit");
}
})();
const fields2 = {
name: new Fields.SimpleFormField(true),
surname: new Fields.SimpleFormField(true),
};
const form2 = new (class extends Form<Record<never, unknown>> {
defaultSuccessMessage = "Form2 done!";
controls = [
new Controls.FormHeader("form2"),
new Controls.SimpleInput(fields2.name),
];
fields = fields2;
onSubmit() {
console.log("form2 submit");
}
})();
const multiform = new (class extends Multiform {
name = "multiform_test";
forms = { form1, form2 };
async render(
ctx: Koa.Context,
messages: FormMessage[],
prerenderedForms?: Record<string, FlatTemplatable | undefined>
): Promise<FlatTemplatable> {
return tempstream`<!DOCTYPE html>
<html>
<head>
<title>Multiform Test - Sealgen</title>
<script type="module">
import hotwiredTurbo from "https://cdn.skypack.dev/pin/@hotwired/turbo@v7.0.0-9XNv1By6uiqRlBzQLO2d/mode=imports,min/optimized/@hotwired/turbo.js";
</script>
</head>
<body>
${super.render(ctx, messages, prerenderedForms)}
</body>
</html>`;
}
})();
const URL = "/";
async function handleHtmlPromise(ctx: Context, next: Koa.Next) {
await next();
if (ctx.body instanceof Promise) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
ctx.body = await ctx.body;
}
ctx.set("content-type", "text/html;charset=utf-8");
}
router.use(
URL,
koaBody(),
async (ctx, next) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
ctx.$body = ctx.request.body;
ctx.$app = {
getString: (
_: unknown,
args: unknown[],
trans: string | ((...args: unknown[]) => string)
) => (typeof trans == "function" ? trans(args) : trans),
} as unknown as App;
await next();
},
handleHtmlPromise
);
multiform.init();
multiform.mount(router, URL);
// to automatically add trailing slashes:
router.use(URL, (ctx) => ctx.set("content-type", "text/html;charset=utf-8"));
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000);
console.log("Multiform test app listening on localhost:3000");

File Metadata

Mime Type
text/html
Expires
Tue, Dec 24, 14:02 (10 h, 42 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
557228
Default Alt Text
multiform.ts (2 KB)

Event Timeline