@sealcode/sealgen 0.11.8 → 0.12.0

package/dist/forms/multiform.js

@@ -0,0 +1,200 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+import { MountableWithFields } from "../page/mountable-with-fields.js";
+import { attribute } from "../sanitize.js";
+const FIELD_PREFIX_SEPARATOR = "___";
+class Multiform extends MountableWithFields {
+  constructor() {
+    super(...arguments);
+    this.controls = [];
+  }
+  init() {
+    super.init();
+    for (const [key, form] of Object.entries(this.forms)) {
+      if (key !== attribute(key)) {
+        throw new Error(
+          `Form name "${key}" is not url-safe. Try: "${attribute(
+            key
+          )}"`
+        );
+      }
+      form.makeOpenFormTag = () => `<div>`;
+      form.makeCloseFormTag = () => `</div>`;
+      form.field_names_prefix = key + FIELD_PREFIX_SEPARATOR;
+      form.form_id = this.name;
+      form.action = "./" + key;
+      form.init();
+      form.extractRawValues = async (context) => this.getSubformRawValues(context, key);
+      const submit_button_id = this.name + "_" + key + "_submit";
+      form.makeSubmitButton = () => (
+        /* HTML */
+        `<input
+				type="submit"
+				value="${form.submitButtonText}"
+				formaction="${form.action}"
+				id="${submit_button_id}"
+				${form.form_id ? `form="${form.form_id}"` : ""}
+			/> `
+      );
+    }
+    for (const form of Object.values(this.forms)) {
+      for (const field of Object.values(form.fields)) {
+        if (field.name.includes(FIELD_PREFIX_SEPARATOR)) {
+          throw new Error(
+            `A field name within multiform cannot contain '${FIELD_PREFIX_SEPARATOR}'`
+          );
+        }
+      }
+    }
+  }
+  async extractRawValues(ctx) {
+    return ctx.$body || {};
+  }
+  async canAccess() {
+    return {
+      canAccess: true,
+      message: "this view includes multiple forms and each of them have their unique access rules"
+    };
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getSubformsToRender(ctx) {
+    const requested_frame = ctx.headers["turbo-frame"];
+    if (!is(
+      requested_frame,
+      predicates.or(predicates.undefined, predicates.string)
+    )) {
+      throw new Error("Wrong turbo-frame header value type");
+    }
+    const forms_to_render = requested_frame && this.forms[requested_frame] ? [[requested_frame, this.forms[requested_frame]]] : Object.entries(this.forms);
+    return forms_to_render;
+  }
+  async renderSubform(ctx, sub_form_name, show_field_errors) {
+    const form = this.forms[sub_form_name];
+    const result = await form.canAccess(ctx);
+    if (!result.canAccess) {
+      return result.message;
+    }
+    return form.render(
+      ctx,
+      {
+        raw_values: await this.getSubformRawValues(ctx, sub_form_name),
+        messages: []
+      },
+      show_field_errors
+    );
+  }
+  async getSubformRawValues(ctx, sub_form_name) {
+    const result = Object.fromEntries(
+      Object.entries(await this.extractRawValues(ctx)).filter(
+        ([key]) => key.startsWith(sub_form_name + FIELD_PREFIX_SEPARATOR)
+      ).map(([key, value]) => [
+        key.slice((sub_form_name + FIELD_PREFIX_SEPARATOR).length),
+        value
+      ])
+    );
+    return result;
+  }
+  async render(ctx, messages, prerenderedForms = {}, show_field_errors) {
+    return tempstream`${this.renderMessages(ctx, {
+      raw_values: {},
+      messages
+    })}
+			<div class="forms">
+				<form
+					id="${this.name}"
+					novalidate
+					${/* 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>
+				${this.getSubformsToRender(ctx).map(([form_name]) => {
+      const frame_form_id = this.name + "_" + form_name + "_frame_form";
+      return tempstream`<turbo-frame
+						id="${form_name}"
+						contains-subform
+						subform-id="${frame_form_id}"
+					>
+						${prerenderedForms[form_name] || this.renderSubform(ctx, form_name, show_field_errors)}
+						<form id="${frame_form_id}" method="POST"></form>
+					</turbo-frame>`;
+    })}
+			</div>
+			${this.makeBottomScript()}`;
+  }
+  makeBottomScript() {
+    return (
+      /* HTML */
+      ` <script>
+			(function () {
+				if (!window.subform_handlers) {
+					window.subform_handlers = {};
+				}
+				if (window.subform_handlers["${this.name}"]) {
+					return;
+				}
+				const handler = () => {
+					document
+						.querySelectorAll("turbo-frame[contains-subform]")
+						.forEach((frame) => {
+							frame_form_id = frame.getAttribute("subform-id");
+							frame.querySelectorAll("input").forEach((input) => {
+								input.setAttribute("form", frame_form_id);
+							});
+						});
+				};
+				window.subform_handlers["${this.name}"] = handler;
+				document.documentElement.addEventListener(
+					"turbo:load",
+					handler
+				);
+				document.documentElement.addEventListener(
+					"turbo:frame-render",
+					handler
+				);
+			})();
+		</script>`
+    );
+  }
+  mount(router, path) {
+    router.get(path, async (ctx) => {
+      ctx.type = "html";
+      ctx.body = await this.render(ctx, [], {}, false);
+    });
+    for (const [key, form] of Object.entries(this.forms)) {
+      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;
+            const form_content = reaction.content;
+            ctx.body = this.render(
+              ctx,
+              [],
+              {
+                [key]: form_content
+              },
+              true
+            );
+          } else if (reaction.action == "redirect") {
+            ctx.status = 303;
+            ctx.redirect(reaction.url);
+          }
+        }
+      );
+    }
+  }
+}
+export {
+  Multiform
+};
+//# sourceMappingURL=multiform.js.map

package/dist/forms/multiform.test.js

@@ -0,0 +1,486 @@
+import Router from "@koa/router";
+import Koa from "koa";
+import axios from "axios";
+import { expect } from "@playwright/test";
+import { tempstream } from "tempstream";
+import { mount } from "../mount.js";
+import { Multiform } from "./multiform.js";
+import { assertThrowsAsync } from "../utils/utils.js";
+import { form_factory } from "./form.test.js";
+import { getBrowser } from "../utils/browser-creator.js";
+import { SimpleFormField } from "./fields/simple-form-field.js";
+import { Form } from "./form.js";
+import { FormHeader } from "./controls/form-header.js";
+import { SimpleInput } from "./controls/simple-input.js";
+import { EmailField } from "./fields/email.js";
+const fields1 = {
+  email: new SimpleFormField(true)
+};
+const form1 = new class extends Form {
+  constructor() {
+    super(...arguments);
+    this.defaultSuccessMessage = "Form1 done!";
+    this.controls = [new FormHeader("form1"), new SimpleInput(fields1.email)];
+    this.fields = fields1;
+  }
+  onSubmit() {
+    return;
+  }
+}();
+const fields2 = {
+  name: new SimpleFormField(true)
+};
+const form2 = new class extends Form {
+  constructor() {
+    super(...arguments);
+    this.defaultSuccessMessage = "Form2 done!";
+    this.controls = [new FormHeader("form2"), new SimpleInput(fields2.name)];
+    this.fields = fields2;
+  }
+  onSubmit() {
+    return;
+  }
+}();
+function multiform_factory(canAccessFun1, canAccessFun2) {
+  return new class extends Multiform {
+    constructor() {
+      super(...arguments);
+      this.name = "multiform_test";
+      this.forms = {
+        form1: form_factory(canAccessFun1),
+        form2: form_factory(canAccessFun2)
+      };
+    }
+    async render(...args) {
+      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(...args)}
+					</body>
+				</html>`;
+    }
+  }();
+}
+async function tests(js_enabled) {
+  let page;
+  beforeAll(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) {
+  let browser;
+  let 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();
+  await assertThrowsAsync(async () => {
+    await page.getByText("Incorrect input").click({ timeout: 500 });
+  });
+}
+async function individual_field_validation_e2e_tests(javaScriptEnabled) {
+  let browser;
+  let page;
+  beforeAll(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;
+    beforeAll(async () => {
+      const app = new Koa();
+      const router = new Router();
+      mount(
+        router,
+        "/",
+        new class extends Multiform {
+          constructor() {
+            super(...arguments);
+            this.name = "multiform_test";
+            this.forms = { form1, form2 };
+          }
+          async render(ctx, messages, prerenderedForms, show_field_errors = true) {
+            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,
+              show_field_errors
+            )}
+								</body>
+							</html>`;
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(8080);
+    });
+    afterAll(() => {
+      server.close();
+    });
+    describe("turbolinks + js enabled", async () => tests(true));
+    describe("turbolinks + js disabled", async () => tests(false));
+  });
+  describe("canAccess", async () => {
+    let page;
+    let server;
+    describe("allow access to both forms when both canAccess return true", async () => {
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          multiform_factory(
+            async (ctx) => {
+              return { canAccess: true, message: "" };
+            },
+            async (ctx) => {
+              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();
+      });
+      afterAll(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) => {
+              if (status == 422)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+    describe("deny access to both forms", async () => {
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          multiform_factory(
+            async (ctx) => {
+              return { canAccess: false, message: "" };
+            },
+            async (ctx) => {
+              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();
+      });
+      afterAll(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) => {
+              if (status == 403)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+    describe("allow access to one form, deny to the other", async () => {
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          multiform_factory(
+            async (ctx) => {
+              return { canAccess: true, message: "" };
+            },
+            async (ctx) => {
+              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();
+      });
+      afterAll(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) => {
+              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) => {
+              if (status == 403)
+                return true;
+              return false;
+            }
+          }
+        );
+      });
+    });
+  });
+  describe("validation e2e", async () => {
+    describe("basic tests", async () => {
+      let server;
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        mount(
+          router,
+          "/",
+          new class extends Multiform {
+            constructor() {
+              super(...arguments);
+              this.name = "multiform_test";
+              this.forms = {
+                form1: new class extends Form {
+                  constructor() {
+                    super(...arguments);
+                    this.fields = fields1;
+                    this.submitButtonText = "Submit";
+                    this.controls = [
+                      new SimpleInput(fields1.email, {
+                        label: "This is a test:",
+                        type: "text"
+                      })
+                    ];
+                  }
+                  async onSubmit() {
+                    return;
+                  }
+                  async validateValues(ctx, data) {
+                    if (data.email === "incorrect")
+                      return {
+                        valid: false,
+                        error: "Incorrect input"
+                      };
+                    return { valid: true, error: "" };
+                  }
+                }(),
+                form2: form_factory()
+              };
+            }
+            async render(...args) {
+              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(...args)}
+									</body>
+								</html>`;
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+      });
+      afterAll(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;
+      beforeAll(async () => {
+        const app = new Koa();
+        const router = new Router();
+        const fields = {
+          text: new EmailField(true)
+        };
+        mount(
+          router,
+          "/",
+          new class extends Multiform {
+            constructor() {
+              super(...arguments);
+              this.name = "multiform_test";
+              this.forms = {
+                form1: new class extends Form {
+                  constructor() {
+                    super(...arguments);
+                    this.fields = fields;
+                    this.submitButtonText = "Submit";
+                    this.controls = [
+                      new SimpleInput(fields.text, {
+                        label: "This is a test:",
+                        type: "text"
+                      })
+                    ];
+                  }
+                  async onSubmit() {
+                    return;
+                  }
+                }(),
+                form2: form_factory()
+              };
+            }
+            async render(...args) {
+              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(...args)}
+									</body>
+								</html>`;
+            }
+          }(),
+          true
+        );
+        app.use(router.routes()).use(router.allowedMethods());
+        server = app.listen(8080);
+      });
+      afterAll(async () => {
+        server.close();
+      });
+      describe("js enabled", async () => individual_field_validation_e2e_tests(true));
+      describe("js disabled", async () => individual_field_validation_e2e_tests(false));
+    });
+  });
+});
+//# sourceMappingURL=multiform.test.js.map