Merge pull request 'Added form preloading, and autofocus on the first input element' (#26) from BordedDev/snek:main into main

Reviewed-on: https://molodetz.nl/retoor/snek/pulls/26
Reviewed-by: retoor <retoor@noreply@molodetz.nl>

src/snek/static/generic-form.js

@@ -165,7 +165,13 @@ class GenericField extends HTMLElement {
     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") {
@@ -218,7 +224,9 @@ class GenericField extends HTMLElement {
     }
     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) {
@@ -281,6 +289,15 @@ class GenericForm extends HTMLElement {
   }
 
   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");
@@ -293,25 +310,35 @@ class GenericForm extends HTMLElement {
     }
   }
 
-  async loadForm(url) {
+  async constructForm(formPayload) {
     try {
-      const response = await fetch(url);
+      this.form = formPayload;
-      if (!response.ok) {
-        throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);
-      }
-      this.form = await response.json();
 
       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 fieldElement = document.createElement('generic-field');
+        const updatingField = field.name in this.fields
-        this.fields[field.name] = fieldElement;
+
+        this.fields[field.name] ??= document.createElement('generic-field');
+
+        const fieldElement = this.fields[field.name];
+
         fieldElement.setAttribute("form", this);
         fieldElement.setAttribute("field", field);
-        this.container.appendChild(fieldElement);
+
         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;
           });
@@ -337,8 +364,21 @@ class GenericForm extends HTMLElement {
               }
             }
           })
+        }
       });
+    } 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}`;
     }

src/snek/templates/login.html

@@ -11,6 +11,6 @@
 {% block main %}
     <div class="back-form">
         <fancy-button url="/back" text="Back" size="auto"></fancy-button>
-        <generic-form class="center" url="/login.json"></generic-form>
+        <generic-form class="center" url="/login.json" preloaded-structure='{{ form|tojson|safe }}'></generic-form>
     </div>
 {% endblock %}

src/snek/templates/register.html

@@ -12,6 +12,6 @@
     <div class="back-form">
         <fancy-button url="/back" text="Back" size="auto"></fancy-button>
 
-        <generic-form class="center" url="/register.json"></generic-form>
+        <generic-form class="center" url="/register.json" preloaded-structure='{{ form|tojson|safe }}'></generic-form>
     </div>
 {% endblock %}

src/snek/view/login.py

@@ -18,7 +18,7 @@ class LoginView(BaseFormView):
             return web.HTTPFound("/web.html")
         if self.request.path.endswith(".json"):
             return await super().get()
-        return await self.render_template("login.html")
+        return await self.render_template("login.html", {"form": await self.form(app=self.app).to_json()})
 
     async def submit(self, form):
         if await form.is_valid:

src/snek/view/register.py

@@ -18,7 +18,7 @@ class RegisterView(BaseFormView):
             return web.HTTPFound("/web.html")
         if self.request.path.endswith(".json"):
             return await super().get()
-        return await self.render_template("register.html")
+        return await self.render_template("register.html", {"form": await self.form(app=self.app).to_json()})
 
     async def submit(self, form):
         result = await self.app.services.user.register(