@sealcode/sealgen 0.8.48 → 0.8.49

package/src/forms/forms.scss

@@ -0,0 +1,85 @@
+.form-message {
+	--color: black;
+	border: 1px solid var(--color);
+	border-radius: 5px;
+	padding: 10px;
+
+	&--error {
+		--color: #ff4136;
+	}
+
+	&--success {
+		--color: #2ecc40;
+	}
+}
+
+.form__error {
+	color: #ff4136;
+}
+
+.form-input__wrapper--checkbox {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	& > input[type="checkbox"] {
+		width: 15px;
+		height: 15px;
+
+		+ label {
+			padding-left: 10px;
+		}
+	}
+}
+
+.form-input__wrapper--multiple-files--photos {
+	ul {
+		list-style: none;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		grid-gap: 10px;
+		margin-bottom: 20px;
+
+		li {
+			background-color: white;
+			box-shadow: 1px 1px 6px 0px #00000038;
+			padding: 10px;
+			display: grid;
+			grid-template-columns: 1fr 20px;
+			grid-template-rows: 20px auto min-content;
+			grid-row-gap: 10px;
+
+			a {
+				grid-row: 1/3;
+				grid-column: 1/3;
+
+				picture,
+				img {
+					width: 100%;
+					height: 150px;
+					object-fit: contain;
+				}
+			}
+
+			.filename {
+				grid-row: 3/4;
+				grid-column: 1/3;
+			}
+
+			form {
+				grid-row: 1/2;
+				grid-column: 2/3;
+				position: relative;
+				z-index: 2;
+			}
+		}
+	}
+}
+
+.file-list-item {
+	display: flex;
+	flex-flow: row;
+
+	form {
+		padding-left: 20px;
+	}
+}

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));
+		});
+	});
+});