@sealcode/sealgen 0.8.48 → 0.8.49

package/src/forms/form.test.ts

@@ -0,0 +1,351 @@
+import Router from "@koa/router";
+import axios from "axios";
+import Koa, { BaseContext } from "koa";
+import { Page } from "playwright";
+import { Controls, Fields, Form, FormDataValue, Mountable } from "../index";
+import { mount } from "../mount";
+import { locator_is_visible } from "../test_utils/locator_is_visible";
+import { getBrowser } from "../utils/browser-creator";
+import { assertThrowsAsync } from "../utils/utils";
+
+const fields = {
+	text: new Fields.SimpleFormField(true),
+};
+
+export function form_factory(canAccessFun?: Mountable["canAccess"]): Form<typeof fields, void> {
+	const result = new (class extends Form<typeof fields, void> {
+		fields = fields;
+		submitButtonText = "Submit";
+		controls = [
+			new Controls.SimpleInput(fields.text, {
+				label: "This is a test:",
+				type: "password",
+			}),
+		];
+
+		async onSubmit() {
+			return;
+		}
+	})();
+	if (canAccessFun) result.canAccess = canAccessFun;
+	return result;
+}
+
+describe("form test", () => {
+	let page: Page;
+
+	before(async () => {
+		const browser = await getBrowser();
+		const context = await browser.newContext();
+		page = await context.newPage();
+	});
+
+	describe("basic tests", async () => {
+		let server: ReturnType<Koa["listen"]>;
+
+		before(async () => {
+			const app = new Koa();
+			const router = new Router();
+
+			mount(router, "/", form_factory(), true);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(8080);
+			await page.goto("http://localhost:8080");
+		});
+
+		after(async () => {
+			server.close();
+		});
+
+		it("does not allow to submit an empty form when there's a required field", async () => {
+			await page.getByRole("button", { name: "Submit", exact: true }).click();
+			await assertThrowsAsync(async () => {
+				return page.getByText("Done").click({ timeout: 500 });
+			});
+		});
+
+		it("allows to submit a form when all required fields have a value", async () => {
+			await page.getByPlaceholder("password").click();
+			await page.getByPlaceholder("password").fill("testpasswd");
+			await page.getByRole("button", { name: "Submit", exact: true }).click();
+			await page.getByText("Done").click();
+		});
+
+		it("does not allow submitting an empty form by circumventing HTML-based validation", async () => {
+			const res_axios = await axios.post(
+				"http://localhost:8080",
+				{
+					text: "",
+				},
+				{
+					validateStatus: (status: number) => {
+						if (status == 422) return true;
+						return false;
+					},
+				}
+			);
+			if (!res_axios.data.includes("Some fields are invalid")) {
+				throw new Error("when sending a empty request with axios, the error didnt appear");
+			}
+		});
+	});
+
+	describe("canAccess tests", async () => {
+		let server: ReturnType<Koa["listen"]>;
+
+		afterEach(async () => {
+			server.close();
+		});
+
+		it("allows visit when configured when canAccess returns true", async () => {
+			const app = new Koa();
+			const router = new Router();
+
+			mount(
+				router,
+				"/",
+				form_factory(
+					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 response = await page.goto("http://localhost:8080");
+			if (response?.status() != 200) {
+				throw new Error(`Should return 200 status and it returns ${response?.status()}`);
+			}
+		});
+
+		describe("declines access when canAccess returns false", async () => {
+			const app = new Koa();
+			const router = new Router();
+
+			before(async () => {
+				mount(
+					router,
+					"/",
+					form_factory(
+						async (
+							ctx: Koa.Context
+						): Promise<{ canAccess: boolean; message: string }> => {
+							return { canAccess: false, message: "" };
+						}
+					),
+					true
+				);
+				app.use(router.routes()).use(router.allowedMethods());
+			});
+
+			beforeEach(async () => {
+				server = app.listen(8080);
+			});
+
+			it("prevents the form from rendering", async () => {
+				const response = await page.goto("http://localhost:8080");
+				if (response?.status() != 403) {
+					throw new Error(
+						`Should return 403 status and it returns ${response?.status()}`
+					);
+				}
+			});
+
+			it("does not allow submitting of the form through axios", async () => {
+				await axios.post(
+					"http://localhost:8080",
+					{
+						text: "sample",
+					},
+					{
+						validateStatus: (status: number) => {
+							if (status == 403) return true;
+							return false;
+						},
+					}
+				);
+			});
+		});
+
+		it("passes the context to canAccess (false case)", async () => {
+			const app = new Koa();
+			const router = new Router();
+
+			mount(
+				router,
+				"/",
+				form_factory(
+					async (ctx: Koa.Context): Promise<{ canAccess: boolean; message: string }> => {
+						return ctx.$context && ctx.$context.user_id
+							? { canAccess: true, message: "" }
+							: { canAccess: false, message: "" };
+					}
+				),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(8080);
+			const response = await page.goto("http://localhost:8080");
+			if (response?.status() != 403) {
+				throw new Error(`Should return 403 status and it returns ${response?.status()}`);
+			}
+		});
+
+		it("passes the context to canAccess (true case)", async () => {
+			const app = new Koa();
+			const router = new Router();
+
+			router.use(async (ctx: BaseContext, next: any) => {
+				ctx.$context = {
+					user_id: "miguel",
+				} as any;
+				await next();
+			});
+			mount(
+				router,
+				"/",
+				form_factory(
+					async (ctx: Koa.Context): Promise<{ canAccess: boolean; message: string }> => {
+						return ctx.$context && ctx.$context.user_id
+							? { canAccess: true, message: "" }
+							: { canAccess: false, message: "" };
+					}
+				),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(8080);
+			const response = await page.goto("http://localhost:8080");
+			if (response?.status() != 200) {
+				throw new Error(`Should return 200 status and it returns ${response?.status()}`);
+			}
+		});
+	});
+
+	describe("validation e2e", async () => {
+		describe("validation message", async () => {
+			let server: ReturnType<Koa["listen"]>;
+
+			before(async () => {
+				const app = new Koa();
+				const router = new Router();
+
+				mount(
+					router,
+					"/",
+					new (class extends Form<typeof fields, void> {
+						fields = fields;
+						submitButtonText = "Submit";
+						controls = [
+							new Controls.SimpleInput(fields.text, {
+								label: "This is a test:",
+								type: "password",
+							}),
+						];
+
+						async onSubmit() {
+							return;
+						}
+
+						async validateValues(
+							ctx: Koa.Context,
+							data: Record<string, FormDataValue>
+						): Promise<{ valid: boolean; error: string }> {
+							if (data.text === "incorrect")
+								return {
+									valid: false,
+									error: "Incorrect input",
+								};
+							return { valid: true, error: "" };
+						}
+					})(),
+					true
+				);
+
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+				await page.goto("http://localhost:8080");
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			it("shows up when incorrect input is given", async () => {
+				await page.getByPlaceholder("password").click();
+				await page.getByPlaceholder("password").fill("incorrect");
+				await page.getByRole("button", { name: "Submit" }).click();
+				if (!(await locator_is_visible(page.getByText("Incorrect input"))))
+					throw new Error("validation message doens't show up when input is incorrect");
+			});
+
+			it("doesn't show when correct input is given", async () => {
+				await page.getByPlaceholder("password").click();
+				await page.getByPlaceholder("password").fill("correct");
+				await page.getByRole("button", { name: "Submit" }).click();
+				await assertThrowsAsync(async () => {
+					return page.getByText("Incorrect input").click({ timeout: 500 });
+				});
+			});
+		});
+
+		describe("field specific validation message", 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 Form<typeof fields, void> {
+						fields = fields;
+						submitButtonText = "Submit";
+						controls = [
+							new Controls.SimpleInput(fields.text, {
+								label: "This is a test:",
+								type: "text",
+							}),
+						];
+
+						async onSubmit() {
+							return;
+						}
+					})(),
+					true
+				);
+
+				app.use(router.routes()).use(router.allowedMethods());
+				server = app.listen(8080);
+				await page.goto("http://localhost:8080");
+			});
+
+			after(async () => {
+				server.close();
+			});
+
+			it("shows up when incorrect input is given", async () => {
+				await page.getByPlaceholder("text").click();
+				await page.getByPlaceholder("text").fill("notanemail");
+				await page.getByRole("button", { name: "Submit" }).click();
+				await page.getByText("Please enter a proper email address").click();
+			});
+
+			it("doesn't show up when correct input is given", async () => {
+				await page.getByPlaceholder("text").click();
+				await page.getByPlaceholder("text").fill("yes@an.email");
+				await page.getByRole("button", { name: "Submit" }).click();
+				assertThrowsAsync(async () => {
+					return page
+						.getByText("Please enter a proper email address")
+						.click({ timeout: 500 });
+				});
+			});
+		});
+	});
+});

package/src/forms/form.ts

@@ -0,0 +1,294 @@
+import { Context } from "koa";
+import { randomUUID } from "crypto";
+import { File as SealiousFile } from "sealious";
+import Router from "@koa/router";
+import { FlatTemplatable, tempstream } from "tempstream";
+import {
+	hasFieldOfType,
+	hasShape,
+	is,
+	predicates,
+} from "@sealcode/ts-predicates";
+import { FormField } from "./fields/field";
+import {
+	Fields,
+	MountableWithFields,
+	PageErrorMessage,
+} from "../page/mountable-with-fields";
+
+export type FormDataPrimitive = string | string[] | number | undefined;
+export type FormDataValue =
+	| FormDataPrimitive
+	| Record<string, FormDataPrimitive>
+	| SealiousFile;
+
+export type FieldValueType<F extends FormField> = F extends FormField<infer R>
+	? R
+	: never;
+
+export type FormFieldsToValues<
+	F extends Record<string, FormField<boolean, keyof F>>
+> = {
+	[Property in keyof F]: FieldValueType<F[Property]>;
+};
+
+export type FormMessage = { type: "info" | "success" | "error"; text: string };
+
+export type FormData<Fieldnames extends string = string> = {
+	raw_values: Record<Fieldnames, FormDataValue>;
+	messages: FormMessage[];
+};
+
+export type FormReaction =
+	| { action: "stay"; content: FlatTemplatable; messages?: FormMessage[] }
+	| { action: "redirect"; url: string; messages?: FormMessage[] };
+
+export abstract class Form<
+	F extends Fields,
+	SubmitResult extends any
+> extends MountableWithFields<F> {
+	defaultSuccessMessage = "Done";
+	submitButtonText = "Wyślij";
+	action = "./";
+	useTurbo = true;
+	form_id = randomUUID();
+
+	async canAccess(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_: Context
+	): Promise<{ canAccess: boolean; message: string }> {
+		return { canAccess: true, message: "" };
+	}
+
+	async renderError(
+		_: Context,
+		error: PageErrorMessage
+	): Promise<FlatTemplatable> {
+		return tempstream/* HTML */ `<div>${error.message}</div>`;
+	}
+
+	makeSubmitButton(): FlatTemplatable {
+		return /* HTML */ `<input
+			type="submit"
+			value="${this.submitButtonText}"
+			formaction="${this.action}"
+			${this.form_id ? `form="${this.form_id}"` : ""}
+		/>`;
+	}
+
+	async render(
+		ctx: Context,
+		data: FormData,
+		show_field_errors: boolean
+	): Promise<FlatTemplatable> {
+		return tempstream/* HTML */ `<div class="form-container">
+			${this.makeOpenFormTag(ctx)}
+			${!this.controls.some((control) => control.role == "messages")
+				? this.renderMessages(ctx, data)
+				: ""}
+			${this.renderControls(
+				this.makeFormControlContext(ctx, data, show_field_errors)
+			)}
+			${this.controls.some((control) => control.role == "submit")
+				? ""
+				: this.makeSubmitButton()}
+			${this.makeCloseFormTag()}
+		</div>`;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	public async makeFormClasses(_ctx: Context): Promise<string[]> {
+		return [];
+	}
+
+	public makeOpenFormTag(ctx: Context): FlatTemplatable {
+		return tempstream`<form enctype="multipart/form-data" method="POST" id="${
+			this.form_id
+		}" action="${this.action}" class="${this.makeFormClasses(ctx).then(
+			(classes) => classes.join(" ")
+		)}" ${
+			this.useTurbo ? "" : `data-turbo="false"`
+		}></form><div class="form">`;
+	}
+
+	public makeCloseFormTag(): FlatTemplatable {
+		return `</div>`;
+	}
+
+	public async onValuesInvalid(
+		ctx: Context,
+		form_messages: FormMessage[],
+		_field_errors: Partial<Record<keyof Fields, string>>
+	): Promise<FormReaction> {
+		const messages = form_messages.length
+			? form_messages
+			: [<const>{ type: "error", text: "Some fields are invalid" }];
+		return {
+			action: "stay",
+			content: await this.render(
+				ctx,
+				{
+					raw_values: await this.extractRawValues(ctx),
+					messages,
+				},
+				"show_field_errors" && true
+			),
+			messages,
+		};
+	}
+
+	public async onError(
+		ctx: Context,
+		data: FormData,
+		error: unknown
+	): Promise<FormReaction> {
+		let error_message = "Unknown error has occured";
+		if (
+			is(error, predicates.object) &&
+			hasShape({ message: predicates.string }, error)
+		) {
+			error_message = error.message;
+		}
+		const messages = [<const>{ type: "error", text: error_message }];
+		return {
+			action: "stay",
+			content: await this.render(
+				ctx,
+				{
+					raw_values: data.raw_values,
+					messages,
+				},
+				"show_field_errors" && true
+			),
+		};
+	}
+
+	public abstract onSubmit(
+		ctx: Context,
+		data: FormData
+	): SubmitResult | Promise<SubmitResult>;
+
+	public async onSuccess(
+		ctx: Context,
+		data: FormData,
+		_submitResult: SubmitResult
+	): Promise<FormReaction> {
+		const messages = [
+			<const>{ type: "success", text: this.defaultSuccessMessage },
+		];
+		return {
+			action: "stay",
+			content: await this.render(
+				ctx,
+				{
+					raw_values: data.raw_values,
+					messages,
+				},
+				"show_field_errors" && false
+			),
+			messages,
+		};
+	}
+
+	async getRawValuesOnSuccess(ctx: Context) {
+		return this.extractRawValues(ctx);
+	}
+
+	async handlePost(ctx: Context): Promise<FormReaction> {
+		const raw_values = await this.extractRawValues(ctx);
+		const { valid, form_messages, field_errors } = await this.validate(
+			ctx,
+			raw_values
+		);
+		if (!valid) {
+			return this.onValuesInvalid(ctx, form_messages, field_errors);
+		}
+		try {
+			ctx.status = 303;
+			const result = await this.onSubmit(ctx, {
+				raw_values,
+				messages: [],
+			});
+			return this.onSuccess(
+				ctx,
+				{
+					raw_values: await this.getRawValuesOnSuccess(ctx),
+					messages: [],
+				},
+				result
+			);
+		} catch (e: unknown) {
+			// eslint-disable-next-line no-console
+			console.dir(e, { depth: 5 });
+			const message =
+				is(e, predicates.object) &&
+				hasFieldOfType(e, "message", predicates.string)
+					? e?.message
+					: is(e, predicates.string)
+					? e
+					: "Wystąpił błąd";
+
+			return this.onError(
+				ctx,
+				{
+					raw_values,
+					messages: [
+						{
+							type: "error",
+							text: message,
+						},
+					],
+				},
+				e
+			);
+		}
+	}
+
+	public mount(router: Router, path: string): void {
+		router.use(path, async (ctx, next) => {
+			const result = await this.canAccess(ctx);
+			if (!result.canAccess) {
+				ctx.body = this.renderError(ctx, {
+					type: "access",
+					message: result.message,
+				});
+				ctx.status = 403;
+				return;
+			}
+			await next();
+		});
+		router.get(path, async (ctx) => {
+			ctx.type = "html";
+			ctx.body = await this.render(
+				ctx,
+				{
+					raw_values: await this.extractRawValues(ctx),
+					messages: [],
+				},
+				"show_field_errors" && false
+			);
+		});
+		router.post(path, async (ctx) => {
+			const reaction = await this.handlePost(ctx);
+			if (reaction.action == "stay") {
+				ctx.status = 422;
+				ctx.body = reaction.content;
+			} else if (reaction.action == "redirect") {
+				ctx.status = 303;
+				ctx.redirect(reaction.url);
+			}
+		});
+		const subrouter = new Router(); // for use with other subroutes that individual controls might register
+		for (const control of this.controls) {
+			control.mount(subrouter);
+		}
+
+		router.use(path, subrouter.routes(), subrouter.allowedMethods());
+	}
+
+	async extractRawValues(
+		ctx: Context
+	): Promise<Record<string, FormDataValue>> {
+		return ctx.$body;
+	}
+}