// Written by retoor@molodetz.nl
// This code defines two custom HTML elements, `GenericField` and `GenericForm`. The `GenericField` element represents a form field with validation and styling functionalities, and the `GenericForm` fetches and manages form data, handling field validation and submission.
// No external imports are present; all utilized functionality is native to JavaScript and web APIs.
// MIT License
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
class GenericField extends HTMLElement {
form = null;
field = null;
inputElement = null;
footerElement = null;
action = null;
container = null;
styleElement = null;
name = null;
get value() {
return this.inputElement.value;
}
get type() {
return this.field.tag;
}
set value(val) {
val = val ?? "";
this.inputElement.value = val;
this.inputElement.setAttribute("value", val);
}
setInvalid() {
this.inputElement.classList.add("error");
this.inputElement.classList.remove("valid");
}
setErrors(errors) {
const errorText = errors.length ? errors[0] : "";
this.inputElement.setAttribute("title", errorText);
}
setValid() {
this.inputElement.classList.remove("error");
this.inputElement.classList.add("valid");
}
constructor() {
super();
this.attachShadow({ mode: "open" });
this.container = document.createElement("div");
this.styleElement = document.createElement("style");
this.styleElement.innerHTML = `
h1 {
font-size: 2em;
color: #f05a28;
margin-bottom: 20px;
margin-top: 0px;
}
input {
width: 90%;
padding: 10px;
margin: 10px 0;
border: 1px solid #333;
border-radius: 5px;
background-color: #1a1a1a;
color: #e6e6e6;
font-size: 1em;
&:focus {
outline: 2px solid #f05a28 !important;
}
&::placeholder {
transition: opacity 0.3s;
}
&:focus::placeholder {
opacity: 0.4;
}
}
button {
width: 50%;
padding: 10px;
background-color: #f05a28;
border: none;
float: right;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
border-radius: 5px;
color: white;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
clear: both;
}
button:hover {
background-color: #e04924;
}
a {
color: #f05a28;
text-decoration: none;
display: block;
margin-top: 15px;
font-size: 0.9em;
transition: color 0.3s;
}
a:hover {
color: #e04924;
}
.valid {
border: 1px solid green;
color: green;
font-size: 0.9em;
margin-top: 5px;
}
.error {
border: 3px solid red;
color: #d8000c;
font-size: 0.9em;
margin-top: 5px;
}
@media (max-width: 500px) {
input {
width: 90%;
}
}
`;
this.container.appendChild(this.styleElement);
this.shadowRoot.appendChild(this.container);
}
connectedCallback() {
this.updateAttributes();
}
setAttribute(name, value) {
this[name] = value;
}
focus(options) {
this.inputElement?.focus(options);
}
updateAttributes() {
const inputUpdate = this.inputElement != null;
if (this.inputElement == null && this.field) {
this.inputElement = document.createElement(this.field.tag);
if (this.field.tag === "button" && this.field.value === "submit") {
this.action = this.field.value;
}
this.inputElement.name = this.field.name;
this.name = this.inputElement.name;
const me = this;
this.inputElement.addEventListener("keyup", (e) => {
if (e.key === "Enter") {
const event = new CustomEvent("change", {
detail: me,
bubbles: true,
});
me.dispatchEvent(event);
me.dispatchEvent(new Event("submit"));
} else if (me.field.value !== e.target.value) {
const event = new CustomEvent("change", {
detail: me,
bubbles: true,
});
me.dispatchEvent(event);
}
});
this.inputElement.addEventListener("click", (e) => {
const event = new CustomEvent("click", { detail: me, bubbles: true });
me.dispatchEvent(event);
});
this.inputElement.addEventListener(
"blur",
(e) => {
const event = new CustomEvent("change", {
detail: me,
bubbles: true,
});
me.dispatchEvent(event);
},
true,
);
this.container.appendChild(this.inputElement);
}
if (!this.field) {
return;
}
this.inputElement.setAttribute("type", this.field.type ?? "input");
this.inputElement.setAttribute("name", this.field.name ?? "");
if (this.field.text != null) {
this.inputElement.innerText = this.field.text;
}
if (this.field.html != null) {
this.inputElement.innerHTML = this.field.html;
}
if (this.field.class_name) {
this.inputElement.classList.add(this.field.class_name);
}
this.inputElement.setAttribute("tabindex", this.field.index);
this.inputElement.classList.add(this.field.name);
if (this.field.value != null || !inputUpdate) {
this.value = this.field.value;
}
let place_holder = this.field.place_holder ?? null;
if (this.field.required && place_holder) {
place_holder = "* " + place_holder;
}
this.inputElement.setAttribute("placeholder", place_holder);
if (this.field.required) {
this.inputElement.setAttribute("required", "required");
} else {
this.inputElement.removeAttribute("required");
}
if (!this.footerElement) {
this.footerElement = document.createElement("div");
this.footerElement.style.clear = "both";
this.container.appendChild(this.footerElement);
}
}
}
customElements.define("generic-field", GenericField);
class GenericForm extends HTMLElement {
fields = {};
form = {};
constructor() {
super();
this.attachShadow({ mode: "open" });
this.styleElement = document.createElement("style");
this.styleElement.innerHTML = `
* {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 90%;
}
div {
min-width:350px;
border-radius: 10px;
padding: 30px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
text-align: center;
}
@media (max-width: 500px) {
width: 100%;
height: 100%;
form {
height: 100%;
width: 80%;
}
}`;
this.container = document.createElement("div");
this.container.appendChild(this.styleElement);
this.container.classList.add("generic-form-container");
this.shadowRoot.appendChild(this.container);
}
connectedCallback() {
const preloadedForm = this.getAttribute("preloaded-structure");
if (preloadedForm) {
try {
const form = JSON.parse(preloadedForm);
this.constructForm(form);
} catch (error) {
console.error(error, preloadedForm);
}
}
const url = this.getAttribute("url");
if (url) {
const fullUrl = url.startsWith("/")
? window.location.origin + url
: new URL(window.location.origin + "/http-get");
if (!url.startsWith("/")) {
fullUrl.searchParams.set("url", url);
}
this.loadForm(fullUrl.toString());
} else {
this.container.textContent = "No URL provided!";
}
}
async constructForm(formPayload) {
try {
this.form = formPayload;
let fields = Object.values(this.form.fields);
let hasAutoFocus = Object.keys(this.fields).length !== 0;
fields.sort((a, b) => a.index - b.index);
fields.forEach((field) => {
const updatingField = field.name in this.fields;
this.fields[field.name] ??= document.createElement("generic-field");
const fieldElement = this.fields[field.name];
fieldElement.setAttribute("form", this);
fieldElement.setAttribute("field", field);
fieldElement.updateAttributes();
if (!updatingField) {
this.container.appendChild(fieldElement);
if (!hasAutoFocus && field.tag === "input") {
fieldElement.focus();
hasAutoFocus = true;
}
fieldElement.addEventListener("change", (e) => {
this.form.fields[e.detail.name].value = e.detail.value;
});
fieldElement.addEventListener("click", async (e) => {
if (e.detail.type === "button" && e.detail.value === "submit") {
const isValid = await this.validate();
if (isValid) {
const saveResult = await this.submit();
if (saveResult.redirect_url) {
window.location.pathname = saveResult.redirect_url;
}
}
}
});
fieldElement.addEventListener("submit", async (e) => {
const isValid = await this.validate();
if (isValid) {
const saveResult = await this.submit();
if (saveResult.redirect_url) {
window.location.pathname = saveResult.redirect_url;
}
}
});
}
});
} catch (error) {
this.container.textContent = `Error: ${error.message}`;
}
}
async loadForm(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(
`Failed to fetch: ${response.status} ${response.statusText}`,
);
}
await this.constructForm(await response.json());
} catch (error) {
this.container.textContent = `Error: ${error.message}`;
}
}
async validate() {
const url = this.getAttribute("url");
let response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ action: "validate", form: this.form }),
});
const form = await response.json();
Object.values(form.fields).forEach((field) => {
if (!this.form.fields[field.name]) {
return;
}
this.form.fields[field.name].is_valid = field.is_valid;
if (!field.is_valid) {
this.fields[field.name].setInvalid();
this.fields[field.name].setErrors(field.errors);
} else {
this.fields[field.name].setValid();
}
this.fields[field.name].setAttribute("field", field);
this.fields[field.name].updateAttributes();
});
Object.values(form.fields).forEach((field) => {
this.fields[field.name].setErrors(field.errors);
});
return form["is_valid"];
}
async submit() {
const url = this.getAttribute("url");
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ action: "submit", form: this.form }),
});
return await response.json();
}
}
customElements.define("generic-form", GenericForm);