035

src/hh1.nim

@@ -64,7 +64,7 @@ import
         val.message = ""
         val.mark = ""
         validity[a] = val
-    ctx.send(sendLogin(validity, ""))
+    ctx.send(htmxLogin(validity, ""))
   
   let conn=newTurso()
   var temp=getUser(conn, em, ps)
@@ -77,7 +77,31 @@ import
       val.message = ""
       val.mark = ""
       validity[a] = val
-    ctx.send(sendLogin(validity, "Invalid Email or Password"))
+    ctx.send(htmxLogin(validity, "Invalid Email or Password"))
+
+"/htmx/email" -> post:
+  var
+    em = ctx.urlForm["email"]
+    val: Validity
+  if em == "":
+    val.message = "Last Name is Required"
+    val.mark = "is-invalid"
+  else:
+    val.message = ""
+    val.mark = ""
+  ctx.send htmxEmail(em, val)
+
+"/htmx/password" -> post:
+  var
+    pw = ctx.urlForm["password"]
+    val: Validity
+  if pw == "":
+    val.message = "Last Name is Required"
+    val.mark = "is-invalid"
+  else:
+    val.message = ""
+    val.mark = ""
+  ctx.send htmxPassword(pw, val)
 
 "/:path" -> get:
   compileTemplateFile(getScriptDir() / "view" / "404.nimja")

src/lib/htmx.nim

@@ -3,7 +3,7 @@ import
   tables,
   ../model/rand
 
-proc sendLogin*(val: Table[string, Validity], message: string): string =
+proc htmxLogin*(val: Table[string, Validity], message: string): string =
   result = fmt"""
     <form id="input_form" class="" novalidate
       hx-trigger="submit"
@@ -31,4 +31,32 @@ proc sendLogin*(val: Table[string, Validity], message: string): string =
         <a id="b4" href="/signup" class="btn btn-outline-primary">Sign Up</a>
         <hr>
     </form>
-  """
+  """
+
+proc htmxEmail*(email: string, input: Validity): string =
+  result = fmt"""
+    <div class="form-group mt-5"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+        <label for="email">Email:</label>
+        <label class="text-danger">{input.message}</label>
+        <input type="email" name="email" id="email" class="form-control {input.mark}" required autocomplete="off"
+          hx-post="/htmx/email"
+          value="{email}"
+        >
+    </div>"""
+
+proc htmxPassword*(password: string, input: Validity): string =
+  result = fmt"""
+    <div class="form-group"
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+        <label for="password">Password:</label>
+        <label class="text-danger">{input.message}</label>
+        <input type="password" name="password" id="password" class="form-control {input.mark}" required autocomplete="off"
+          hx-post="/htmx/password"
+          value="{password}"
+        >
+    </div>"""

src/view/login.nimja

@@ -15,16 +15,28 @@
             >
 
               <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">Email:</label>
                     <label class="text-danger"></label>
-                    <input type="email" name="email" id="email" class="form-control" required autocomplete="off" value="">
+                    <input type="email" name="email" id="email" class="form-control" required autocomplete="off"
+                      value=""
+                      hx-post="/htmx/email"
+                    >
                 </div>
 
-                <div class="form-group">
+                <div class="form-group"
+                  hx-target="this"
+                  hx-swap="outerHTML"
+                >
                     <label for="password">Password:</label>
                     <label class="text-danger"></label>
-                    <input type="password" name="password" id="password" class="form-control" required autocomplete="off" value="">
+                    <input type="password" name="password" id="password" class="form-control" required autocomplete="off"
+                      value=""
+                      hx-post="/htmx/password"
+                    >
 
                 </div>