045

src/lib/htmx.nim

@@ -125,3 +125,48 @@ proc htmxSignup*(val: Table[string, Validity], message: string): string =
         <a id="b4" href="/login" class="btn btn-outline-primary">Login</a>
         <hr>
     </form>"""
+
+proc htmxFirstName*(firstName: string, input: Validity): string =
+  result = fmt"""
+    <div class="form-group mt-5"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="email">First Name:</label>
+      <label class="text-danger">{input.message}</label>
+
+      <input type="text" name="fn" class="form-control {input.mark}" required autocomplete="off"
+        value="{firstName}"
+        hx-post="/htmx/fname"
+      >  
+  """
+
+proc htmxLastName*(lastName: string, input: Validity): string =
+  result = fmt"""
+    <div class="form-group mt-5"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="email">Last Name:</label>
+      <label class="text-danger">{input.message}</label>
+
+      <input type="text" name="ln" class="form-control {input.mark}" required autocomplete="off"
+        value="{lastName}"
+        hx-post="/htmx/lname"
+      >  
+  """
+
+proc htmxPhone*(phone: string, input: Validity): string =
+  result = fmt"""
+    <div class="form-group mt-5"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <label for="email">Phone:</label>
+      <label class="text-danger">{input.message}</label>
+
+      <input type="email" name="ph" class="form-control {input.mark}" required autocomplete="off"
+        value="{phone}"
+        hx-post="/htmx/phone"
+      >  
+  """

src/view/signup.html

@@ -17,11 +17,17 @@
             >
 
               <label class="text-danger"></label>
-                <div class="form-group mt-5">
+                <div class="form-group mt-5"
+                  hx-target="this"
+                  hx-swap="outerHTML"
+                >
                     <label for="email">First Name:</label>
                     <label class="text-danger"></label>
 
-                    <input type="text" name="fn" class="form-control" required autocomplete="off">
+                    <input type="text" name="fn" class="form-control" required autocomplete="off"
+                      value=""
+                      hx-post="/htmx/fname"
+                    >
 
                 </div>
 
@@ -72,4 +78,4 @@
     </div>
 </div>
 
-{% endblock %}
+{% endblock %}