@sealcode/sealgen 0.11.7 → 0.12.0

package/lib/src/forms/fields/pick-from-list.js

@@ -0,0 +1,31 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { SimpleFormField } from "./simple-form-field.js";
+export class PickFromListField extends SimpleFormField {
+    constructor(required, generateOptions, customValidation = (ctx, value, instance) => instance.valueInList(ctx, value)) {
+        super(required);
+        this.required = required;
+        this.generateOptions = generateOptions;
+        this.customValidation = customValidation;
+        this.predicate = predicates.string;
+    }
+    isValueValid(ctx, value) {
+        return this.customValidation(ctx, value, this);
+    }
+    async valueInList(ctx, value) {
+        const options = await this.generateOptions(ctx);
+        if (!is(value, predicates.string)) {
+            return { valid: false, message: "not a string" };
+        }
+        if (this.required && !options.map((o) => o.value).includes(value)) {
+            return {
+                valid: false,
+                message: `"${value}" is not one of the options`,
+            };
+        }
+        return { valid: true, message: "" };
+    }
+    getEmptyValue() {
+        return "";
+    }
+}
+//# sourceMappingURL=pick-from-list.js.map

package/lib/src/forms/fields/pick-from-list.test.js

@@ -0,0 +1,17 @@
+import assert from "assert";
+import { Fields } from "../../index.js";
+describe("pick-from-list field", () => {
+    const ctx = {};
+    it("validation logic", async () => {
+        const field = new Fields.PickFromListField(true, async () => {
+            return [
+                { value: "samplev", label: "samplel" },
+                { value: "samplevv", label: "samplell" },
+            ];
+        });
+        assert.strictEqual((await field.isValueValid(ctx, 42)).valid, false);
+        assert.strictEqual((await field.isValueValid(ctx, "samplevv")).valid, true);
+        assert.strictEqual((await field.isValueValid(ctx, "notvalid")).valid, false);
+    });
+});
+//# sourceMappingURL=pick-from-list.test.js.map

package/lib/src/forms/fields/proxy-field.js

@@ -0,0 +1,20 @@
+import { FormField } from "./field.js";
+export class ProxyFormField extends FormField {
+    constructor(required, name, empty_value, parsed_value) {
+        super(required);
+        this.name = name;
+        this.empty_value = empty_value;
+        this.parsed_value = parsed_value;
+    }
+    getEmptyValue() {
+        return this.empty_value;
+    }
+    async parse() {
+        return {
+            parsable: true,
+            error: null,
+            parsed_value: this.parsed_value,
+        };
+    }
+}
+//# sourceMappingURL=proxy-field.js.map

package/lib/src/forms/fields/regexp.js

@@ -0,0 +1,40 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { FormField } from "./field.js";
+export class RegExpField extends FormField {
+    constructor(required, regexp, error_message, default_value = "") {
+        super(required);
+        this.regexp = regexp;
+        this.error_message = error_message;
+        this.default_value = default_value;
+        this.predicate = predicates.string;
+    }
+    async isValueValid(_, value) {
+        if (!is(value, predicates.string)) {
+            return { valid: false, message: "expected a string" };
+        }
+        if (this.regexp.exec(value)) {
+            return { valid: true, message: "" };
+        }
+        return { valid: false, message: this.error_message };
+    }
+    async parse(_, value) {
+        if (is(value, predicates.string)) {
+            return {
+                parsable: true,
+                parsed_value: value,
+                error: null,
+            };
+        }
+        else {
+            return {
+                parsable: false,
+                parsed_value: null,
+                error: "Please enter a string",
+            };
+        }
+    }
+    getEmptyValue() {
+        return this.default_value || "";
+    }
+}
+//# sourceMappingURL=regexp.js.map

package/lib/src/forms/fields/regexp.test.js

@@ -0,0 +1,21 @@
+import assert from "assert";
+import { Fields } from "../../index.js";
+describe("regexp field", () => {
+    const ctx = {};
+    it("validation logic", async () => {
+        const field = new Fields.RegExpField(true, /^4/, "error");
+        assert.strictEqual((await field.isValueValid(ctx, "42")).valid, true);
+        assert.strictEqual((await field.isValueValid(ctx, "notvalid")).valid, false);
+        assert.strictEqual((await field.isValueValid(ctx, 42)).valid, false);
+    });
+    it("parse function", async () => {
+        const field = new Fields.RegExpField(true, /^4/, "error");
+        const string_response = await field.parse(ctx, "42");
+        const number_response = await field.parse(ctx, 42);
+        assert.strictEqual(string_response.parsable, true);
+        assert.strictEqual(string_response.parsed_value, "42");
+        assert.strictEqual(number_response.parsable, false);
+        assert.strictEqual(number_response.error, "Please enter a string");
+    });
+});
+//# sourceMappingURL=regexp.test.js.map

package/lib/src/forms/fields/reverse-single-reference.js

@@ -0,0 +1,14 @@
+import { FormField } from "./field.js";
+export class ReverseSingleReference extends FormField {
+    constructor(required, sealious_field) {
+        super(required);
+        this.sealious_field = sealious_field;
+    }
+    async parse(ctx, raw_value) {
+        return { parsable: true, error: null, parsed_value: raw_value };
+    }
+    getEmptyValue() {
+        return [];
+    }
+}
+//# sourceMappingURL=reverse-single-reference.js.map

package/lib/src/forms/fields/simple-form-field.js

@@ -0,0 +1,19 @@
+import { predicates } from "@sealcode/ts-predicates";
+import { FormField } from "./field.js";
+export class SimpleFormField extends FormField {
+    async parse(_, raw_value) {
+        return {
+            parsed_value: (raw_value || "").toString(),
+            parsable: true,
+            error: null,
+        };
+    }
+    getEmptyValue() {
+        return "";
+    }
+    constructor(required) {
+        super(required);
+        this.predicate = predicates.string;
+    }
+}
+//# sourceMappingURL=simple-form-field.js.map

package/lib/src/forms/fields/structured-array.js

@@ -0,0 +1,18 @@
+import { FormField } from "./field.js";
+export class StructuredArrayField extends FormField {
+    constructor(sealious_field) {
+        super(true);
+        this.sealious_field = sealious_field;
+    }
+    async parse(context, value) {
+        return {
+            parsable: true,
+            error: null,
+            parsed_value: value || [],
+        };
+    }
+    getEmptyValue() {
+        return [];
+    }
+}
+//# sourceMappingURL=structured-array.js.map

package/lib/src/forms/form-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=form-types.js.map

package/lib/src/forms/form.js

@@ -0,0 +1,176 @@
+import { randomUUID } from "crypto";
+import Router from "@koa/router";
+import { tempstream } from "tempstream";
+import { hasFieldOfType, hasShape, is, predicates, } from "@sealcode/ts-predicates";
+import { MountableWithFields, } from "../page/mountable-with-fields.js";
+export class Form extends MountableWithFields {
+    constructor() {
+        super(...arguments);
+        this.defaultSuccessMessage = "Done";
+        this.submitButtonText = "Wyślij";
+        this.action = "./";
+        this.useTurbo = true;
+        this.form_id = randomUUID();
+    }
+    async canAccess(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _) {
+        return { canAccess: true, message: "" };
+    }
+    async renderError(_, error) {
+        return tempstream /* HTML */ `<div>${error.message}</div>`;
+    }
+    makeSubmitButton() {
+        return /* HTML */ `<input
+			type="submit"
+			value="${this.submitButtonText}"
+			formaction="${this.action}"
+			${this.form_id ? `form="${this.form_id}"` : ""}
+		/>`;
+    }
+    async render(ctx, data, show_field_errors) {
+        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
+    async makeFormClasses(_ctx) {
+        return [];
+    }
+    makeOpenFormTag(ctx) {
+        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">`;
+    }
+    makeCloseFormTag() {
+        return `</div>`;
+    }
+    async onValuesInvalid(ctx, form_messages, _field_errors) {
+        const messages = form_messages.length
+            ? form_messages
+            : [{ 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,
+        };
+    }
+    async onError(ctx, data, error) {
+        let error_message = "Unknown error has occured";
+        if (is(error, predicates.object) &&
+            hasShape({ message: predicates.string }, error)) {
+            error_message = error.message;
+        }
+        const messages = [{ type: "error", text: error_message }];
+        return {
+            action: "stay",
+            content: await this.render(ctx, {
+                raw_values: data.raw_values,
+                messages,
+            }, "show_field_errors" && true),
+        };
+    }
+    async onSuccess(ctx, data, _submitResult) {
+        const messages = [
+            { 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) {
+        return this.extractRawValues(ctx);
+    }
+    async handlePost(ctx) {
+        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) {
+            // 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);
+        }
+    }
+    mount(router, path) {
+        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) {
+        return ctx.$body;
+    }
+}
+//# sourceMappingURL=form.js.map

package/lib/src/forms/form.test.js

@@ -0,0 +1,271 @@
+import Router from "@koa/router";
+import { describe, it, beforeAll, afterAll, afterEach, beforeEach } from "vitest";
+import axios from "axios";
+import Koa from "koa";
+import { Controls, Fields, Form } from "../index.js";
+import { mount } from "../mount.js";
+import { locator_is_visible } from "../test_utils/locator_is_visible.js";
+import { getBrowser } from "../utils/browser-creator.js";
+import { assertThrowsAsync } from "../utils/utils.js";
+const fields = {
+    text: new Fields.SimpleFormField(true),
+};
+export function form_factory(canAccessFun) {
+    const result = new (class extends Form {
+        constructor() {
+            super(...arguments);
+            this.fields = fields;
+            this.submitButtonText = "Submit";
+            this.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;
+    beforeAll(async () => {
+        const browser = await getBrowser();
+        const context = await browser.newContext();
+        page = await context.newPage();
+    });
+    describe("basic tests", async () => {
+        let server;
+        beforeAll(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");
+        });
+        afterAll(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) => {
+                    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;
+        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) => {
+                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();
+            beforeAll(async () => {
+                mount(router, "/", form_factory(async (ctx) => {
+                    console.log("CAN ACCESS? FALSE");
+                    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 () => {
+                console.log("CONSOLELOG TEST");
+                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) => {
+                        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) => {
+                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, next) => {
+                ctx.$context = {
+                    user_id: "miguel",
+                };
+                await next();
+            });
+            mount(router, "/", form_factory(async (ctx) => {
+                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;
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                mount(router, "/", new (class extends Form {
+                    constructor() {
+                        super(...arguments);
+                        this.fields = fields;
+                        this.submitButtonText = "Submit";
+                        this.controls = [
+                            new Controls.SimpleInput(fields.text, {
+                                label: "This is a test:",
+                                type: "password",
+                            }),
+                        ];
+                    }
+                    async onSubmit() {
+                        return;
+                    }
+                    async validateValues(ctx, data) {
+                        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");
+            });
+            afterAll(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;
+            beforeAll(async () => {
+                const app = new Koa();
+                const router = new Router();
+                const fields = {
+                    text: new Fields.EmailField(true),
+                };
+                mount(router, "/", new (class extends Form {
+                    constructor() {
+                        super(...arguments);
+                        this.fields = fields;
+                        this.submitButtonText = "Submit";
+                        this.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");
+            });
+            afterAll(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 });
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=form.test.js.map