@sealcode/sealgen 0.8.43 → 0.8.47

package/src/forms/multiform.test.ts

@@ -0,0 +1,540 @@
+import Router from "@koa/router";
+import Koa from "koa";
+import axios from "axios";
+import { Browser, firefox, Page } from "playwright";
+import { expect } from "@playwright/test";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { Controls, Fields, Form, Mountable } from "..";
+import { mount } from "../mount";
+import { FormDataValue, FormMessage } from "./form";
+import { Multiform } from "./multiform";
+import { assertThrowsAsync } from "../utils/utils";
+import { form_factory } from "./form.test";
+import { getBrowser } from "../utils/browser-creator";
+
+const fields1 = {
+	email: new Fields.SimpleFormField(true),
+};
+
+const form1 = new (class extends Form<typeof fields1, void> {
+	defaultSuccessMessage = "Form1 done!";
+	controls = [new Controls.FormHeader("form1"), new Controls.SimpleInput(fields1.email)];
+	fields = fields1;
+	onSubmit() {
+		return;
+	}
+})();
+
+const fields2 = {
+	name: new Fields.SimpleFormField(true),
+};
+
+const form2 = new (class extends Form<Record<never, unknown>, void> {
+	defaultSuccessMessage = "Form2 done!";
+	controls = [new Controls.FormHeader("form2"), new Controls.SimpleInput(fields2.name)];
+	fields = fields2;
+	onSubmit() {
+		return;
+	}
+})();
+
+function multiform_factory(
+	canAccessFun1?: Mountable["canAccess"],
+	canAccessFun2?: Mountable["canAccess"]
+): Multiform {
+	return new (class extends Multiform {
+		name = "multiform_test";
+		forms = {
+			form1: form_factory(canAccessFun1),
+			form2: form_factory(canAccessFun2),
+		};
+		async render(...args: Parameters<Multiform["render"]>): Promise<FlatTemplatable> {
+			return tempstream/* HTML */ `<!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(...args)}
+					</body>
+				</html>`;
+		}
+	})();
+}
+
+async function tests(js_enabled: boolean) {
+	let page: Page;
+
+	before(async () => {
+		const browser = await getBrowser();
+		const context = await browser.newContext({
+			javaScriptEnabled: js_enabled,
+		});
+		page = await context.newPage();
+		await page.goto("http://localhost:8080");
+		await page.getByLabel("email").click();
+		await page.getByLabel("email").fill("sample1");
+		await page.getByLabel("name").click();
+		await page.getByLabel("name").fill("sample2");
+		await page.locator("#multiform_test_form1_submit").click();
+	});
+
+	it("checking whether only one submit handler is run", async () => {
+		await page.getByText("Form1 done!").click();
+		await assertThrowsAsync(async () => {
+			return page.getByText("Form2 done!").click({ timeout: 500 });
+		});
+	});
+
+	it("checking whether the input in the not submitted form prevails", async () => {
+		await expect(page.getByLabel("name")).toHaveValue("sample2");
+	});
+}
+
+async function general_form_validation_e2e_tests(js_enabled: boolean) {
+	let browser: Browser;
+	let page: Page;
+
+	browser = await getBrowser();
+	const context = await browser.newContext({
+		javaScriptEnabled: js_enabled,
+	});
+	page = await context.newPage();
+	await page.goto("http://localhost:8080");
+	await page.getByPlaceholder("text").click();
+	await page.getByPlaceholder("text").fill("incorrect");
+	await page.getByPlaceholder("password").click();
+	await page.getByPlaceholder("password").fill("test");
+	await page.locator("#multiform_test_form2_submit").click();
+	assertThrowsAsync(async () => {
+		page.getByText("Incorrect input").click({ timeout: 500 });
+	});
+}
+
+async function individual_field_validation_e2e_tests(javaScriptEnabled: boolean) {
+	let browser: Browser;
+	let page: Page;
+
+	before(async () => {
+		browser = await getBrowser();
+		const context = await browser.newContext({
+			javaScriptEnabled,
+		});
+		page = await context.newPage();
+		await page.goto("http://localhost:8080");
+	});
+
+	it("validation message shows when incorrect input is given", async () => {
+		await page.getByPlaceholder("text").click();
+		await page.getByPlaceholder("text").fill("notanemail");
+		await page.locator("#multiform_test_form1_submit").click();
+		await page.getByText("Please enter a proper email address").click();
+	});
+
+	it("validation message doesn't show when correct input is given", async () => {
+		await page.getByPlaceholder("text").click();
+		await page.getByPlaceholder("text").fill("yes@an.email");
+		await page.locator("#multiform_test_form1_submit").click();
+		assertThrowsAsync(async () => {
+			return page.getByText("Please enter a proper email address").click({ timeout: 500 });
+		});
+	});
+}
+
+describe("multiform test", () => {
+	describe("basic tests", async () => {
+		let server: ReturnType<Koa["listen"]>;
+
+		before(async () => {
+			const app = new Koa();
+			const router = new Router();
+
+			mount(
+				router,
+				"/",
+				new (class extends Multiform {
+					name = "multiform_test";
+					forms = { form1, form2 };
+					async render(
+						ctx: Koa.Context,
+						messages: FormMessage[],
+						prerenderedForms?: Record<string, FlatTemplatable | undefined>,
+						show_field_errors = true
+					): Promise<FlatTemplatable> {
+						return tempstream/* HTML */ `<!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,
+										show_field_errors
+									)}
+								</body>
+							</html>`;
+					}
+				})(),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(8080);
+		});
+
+		after(() => {
+			server.close();
+		});
+
+		describe("turbolinks + js enabled", async () => tests(true));
+		describe("turbolinks + js disabled", async () => tests(false));
+	});
+
+	describe("canAccess", async () => {
+		let page: Page;
+		let server: ReturnType<Koa["listen"]>;
+
+		describe("allow access to both forms when both canAccess return true", async () => {
+			before(async () => {
+				const app = new Koa();
+				const router = new Router();
+
+				mount(
+					router,
+					"/",
+					multiform_factory(
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: true, message: "" };
+						},
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: true, message: "" };
+						}
+					),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+				const browser = await getBrowser();
+				const context = await browser.newContext();
+				page = await context.newPage();
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			it("check wether it renders", async () => {
+				const response = await page.goto("http://localhost:8080");
+
+				if (response?.status() != 200) {
+					throw new Error(
+						`Should return 200 status and it returns ${response?.status()}`
+					);
+				}
+				await page.locator("#form1").getByText("This is a test:").click();
+				await page.locator("#form2").getByText("This is a test:").click();
+			});
+
+			it("check wether you can submit through http (axios)", async () => {
+				await axios.post(
+					"http://localhost:8080/form2",
+					{
+						form2__text: "pass",
+					},
+					{
+						validateStatus: (status: number) => {
+							if (status == 422) return true;
+							return false;
+						},
+					}
+				);
+			});
+		});
+
+		describe("deny access to both forms", async () => {
+			before(async () => {
+				const app = new Koa();
+				const router = new Router();
+
+				mount(
+					router,
+					"/",
+					multiform_factory(
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: false, message: "" };
+						},
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: false, message: "" };
+						}
+					),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+				const browser = await getBrowser();
+				const context = await browser.newContext();
+				page = await context.newPage();
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			it("check wether forms didnt render", async () => {
+				await page.goto("http://localhost:8080");
+				await assertThrowsAsync(async () => {
+					return page
+						.locator("#form1")
+						.getByText("This is a test:")
+						.click({ timeout: 300 });
+				});
+			});
+
+			it("check wether it's possible to submit through http", async () => {
+				await axios.post(
+					"http://localhost:8080/form2",
+					{
+						form2__text: "pass",
+					},
+					{
+						validateStatus: (status: number) => {
+							if (status == 403) return true;
+							return false;
+						},
+					}
+				);
+			});
+		});
+
+		describe("allow access to one form, deny to the other", async () => {
+			before(async () => {
+				const app = new Koa();
+				const router = new Router();
+
+				mount(
+					router,
+					"/",
+					multiform_factory(
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: true, message: "" };
+						},
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: false, message: "" };
+						}
+					),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+				const browser = await getBrowser();
+				const context = await browser.newContext({});
+				page = await context.newPage();
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			it("check wether form1 renders", async () => {
+				await page.goto("http://localhost:8080");
+				await page.locator("#form1").getByText("This is a test:").click({ timeout: 300 });
+			});
+
+			it("check wether it's possible to submit to form1 through http", async () => {
+				await axios.post(
+					"http://localhost:8080/form1",
+					{
+						form1__text: "pass",
+					},
+					{
+						validateStatus: (status: number) => {
+							if (status == 422) return true;
+							return false;
+						},
+					}
+				);
+			});
+
+			it("check wether form2 does not render", async () => {
+				await page.goto("http://localhost:8080");
+				await assertThrowsAsync(async () => {
+					return page
+						.locator("#form2")
+						.getByText("This is a test:")
+						.click({ timeout: 300 });
+				});
+			});
+
+			it("check wether it's possible to submit to form2 through http", async () => {
+				await axios.post(
+					"http://localhost:8080/form2",
+					{
+						form2__text: "pass",
+					},
+					{
+						validateStatus: (status: number) => {
+							if (status == 403) return true;
+							return false;
+						},
+					}
+				);
+			});
+		});
+	});
+
+	describe("validation e2e", async () => {
+		describe("basic tests", async () => {
+			let server: ReturnType<Koa["listen"]>;
+
+			before(async () => {
+				const app = new Koa();
+				const router = new Router();
+
+				mount(
+					router,
+					"/",
+					new (class extends Multiform {
+						name = "multiform_test";
+						forms = {
+							form1: new (class extends Form<typeof fields1, void> {
+								fields = fields1;
+								submitButtonText = "Submit";
+								controls = [
+									new Controls.SimpleInput(fields1.email, {
+										label: "This is a test:",
+										type: "text",
+									}),
+								];
+
+								async onSubmit() {
+									return;
+								}
+
+								async validateValues(
+									ctx: Koa.Context,
+									data: Record<string, FormDataValue>
+								): Promise<{ valid: boolean; error: string }> {
+									if (data.email === "incorrect")
+										return {
+											valid: false,
+											error: "Incorrect input",
+										};
+									return { valid: true, error: "" };
+								}
+							})(),
+							form2: form_factory(),
+						};
+						async render(
+							...args: Parameters<Multiform["render"]>
+						): Promise<FlatTemplatable> {
+							return tempstream/* HTML */ `<!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(...args)}
+									</body>
+								</html>`;
+						}
+					})(),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			it("js enabled", async () => general_form_validation_e2e_tests(true));
+			it("js disabled", async () => general_form_validation_e2e_tests(false));
+		});
+
+		describe("field specific validation", async () => {
+			let server: ReturnType<Koa["listen"]>;
+
+			before(async () => {
+				const app = new Koa();
+				const router = new Router();
+				const fields = {
+					text: new Fields.EmailField(true),
+				};
+
+				mount(
+					router,
+					"/",
+					new (class extends Multiform {
+						name = "multiform_test";
+						forms = {
+							form1: new (class extends Form<typeof fields, void> {
+								fields = fields;
+								submitButtonText = "Submit";
+								controls = [
+									new Controls.SimpleInput(fields.text, {
+										label: "This is a test:",
+										type: "text",
+									}),
+								];
+
+								async onSubmit() {
+									return;
+								}
+							})(),
+							form2: form_factory(),
+						};
+						async render(
+							...args: Parameters<Multiform["render"]>
+						): Promise<FlatTemplatable> {
+							return tempstream/* HTML */ `<!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(...args)}
+									</body>
+								</html>`;
+						}
+					})(),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			describe("js enabled", async () => individual_field_validation_e2e_tests(true));
+			describe("js disabled", async () => individual_field_validation_e2e_tests(false));
+		});
+	});
+});

package/src/forms/multiform.ts

@@ -111,7 +111,7 @@ export class Multiform extends MountableWithFields {
 		sub_form_name: string
 	): Promise<Record<string, FormDataValue>> {
 		const result = Object.fromEntries(
-			Object.entries(this.extractRawValues(ctx))
+			Object.entries(await this.extractRawValues(ctx))
 				.filter(([key]) =>
 					key.startsWith(sub_form_name + FIELD_PREFIX_SEPARATOR)
 				)
@@ -138,7 +138,7 @@ export class Multiform extends MountableWithFields {
 					id="${this.name}"
 					novalidate
 					${
-						/* novalidate is here because all the subforms are actuallly one form and errors in one will prevent submitting all of the forms */ ""
+						/* novalidate is here because all the subforms are actually one form and errors in one will prevent submitting all of the forms */ ""
 					}
 					method="POST"
 				></form>
@@ -203,6 +203,16 @@ export class Multiform extends MountableWithFields {
 			router.post(
 				path + (path.endsWith("/") ? "" : "/") + key,
 				async (ctx) => {
+					const result = await form.canAccess(ctx);
+					if (!result.canAccess) {
+						ctx.body = this.renderError(ctx, {
+							type: "access",
+							message: result.message,
+						});
+						ctx.status = 403;
+						return;
+					}
+
 					const reaction = await form.handlePost(ctx);
 					if (reaction.action == "stay") {
 						ctx.status = 422;

package/src/make-env.ts

@@ -7,7 +7,7 @@ const target_locreq = _locreq(process.cwd());
 export async function makeEnv(): Promise<void> {
 	const { uid, gid } = os.userInfo();
 	const content = `USER_ID=${uid}
-GROUD_ID=${gid}
+GROUP_ID=${gid}
 `;
 	const path = target_locreq.resolve(".env");
 	await fs.writeFile(path, content);

package/src/mount.ts

@@ -1,5 +1,5 @@
 import Router from "@koa/router";
-import Koa, { Context } from "koa";
+import Koa, { BaseContext, Context } from "koa";
 import { Middlewares } from "sealious";
 import { Mountable } from "./page/mountable";
 
@@ -15,15 +15,49 @@ async function handleHtmlPromise(ctx: Context, next: Koa.Next) {
 export function mount(
 	router: Router,
 	url: string | { rawURL: string },
-	mountable: Mountable
+	mountable: Mountable,
+	use_dummy_app = false
 ): void {
 	const raw_url = typeof url === "string" ? url : url.rawURL;
-	router.use(
-		raw_url,
-		Middlewares.extractContext(),
-		Middlewares.parseBody(),
-		handleHtmlPromise
-	);
+	const args = use_dummy_app
+		? [
+				async (ctx: BaseContext, next: any) => {
+					// this dummy is a temporary solution it's ilustrating the ways that
+					// sealgen is coupled with sealious. Definitely room for improvement in this
+					// regard
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+					ctx.$app = {
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+						Logger: new Proxy(
+							{},
+							{
+								get: (_target: any, prop: any) => {
+									if (prop === "info") {
+										// eslint-disable-next-line @typescript-eslint/no-empty-function
+										return () => {};
+									} else {
+										// eslint-disable-next-line @typescript-eslint/no-empty-function
+										return () => {};
+									}
+								},
+							}
+						),
+						getString: (x: string) => x,
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					} as any;
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+					await next();
+				},
+				Middlewares.parseBody(),
+				handleHtmlPromise,
+		  ]
+		: [
+				Middlewares.extractContext(),
+				Middlewares.parseBody(),
+				handleHtmlPromise,
+		  ];
+
+	router.use(raw_url, ...args);
 	mountable.init();
 
 	// to automatically add trailing slashes:
@@ -31,7 +65,7 @@ export function mount(
 		const url2 = ctx.URL;
 		if (!url2.pathname.endsWith("/")) {
 			url2.pathname += "/";
-			ctx.redirect(url2.pathname);
+			ctx.redirect(url2.href);
 		}
 		await next();
 	});

package/src/page/mountable-with-fields.ts

@@ -11,7 +11,7 @@ import { Mountable } from "./mountable";
 
 export type PageErrorMessage = { type: "access" | "internal"; message: string };
 
-export type Fields = Record<string, FormField<boolean, unknown>>;
+export type Fields = Record<string, FormField<boolean, any>>;
 
 export abstract class MountableWithFields<
 	F extends Fields = Fields

package/src/test_utils/locator_is_visible.ts

@@ -0,0 +1,17 @@
+/* eslint-disable no-await-in-loop */
+import { Locator } from "playwright";
+import { sleep } from "../utils/sleep";
+
+export async function locator_is_visible(
+	locator: Locator,
+	timeout = 500
+): Promise<boolean> {
+	let exists = false;
+	while (timeout > 0 && !exists) {
+		await sleep(50);
+		timeout -= 50;
+		exists = await locator.isVisible();
+	}
+
+	return exists;
+}

package/src/utils/assert-throws.ts

@@ -0,0 +1,18 @@
+import assert from "assert";
+
+export async function assertThrowsAsync(
+	fn: () => Promise<unknown>,
+	error_handler?: (e: unknown) => Promise<void> | void
+): Promise<void> {
+	let error: unknown = null;
+	try {
+		await fn();
+	} catch (e: unknown) {
+		error = e;
+	} finally {
+		assert.notStrictEqual(error, null, "It didn't throw");
+		if (error_handler) {
+			await error_handler(error);
+		}
+	}
+}