Add htmx_inline_validation.sc

Author: sake92

examples/scala-cli/htmx/htmx_inline_validation.sc

@@ -0,0 +1,69 @@
+//> using scala "3.3.1"
+//> using dep ba.sake::sharaf:0.0.22
+
+import io.undertow.Undertow
+import ba.sake.sharaf.*, routing.*
+import ba.sake.formson.FormDataRW
+
+object views {
+  import scalatags.Text.all.*
+  import ba.sake.hepek.html.HtmlPage
+  import ba.sake.hepek.htmx.*
+
+  class IndexView(formData: ContactForm) extends HtmlPage with HtmxDependencies:
+    override def bodyContent = div(
+      h3("Signup Form"),
+      contactForm(formData)
+    )
+
+    override def stylesInline = List("""
+      .error-message {
+        color:red;
+      }
+      .error input {
+          box-shadow: 0 0 3px #CC0000;
+      }
+      .valid input {
+          box-shadow: 0 0 3px #36cc00;
+      }
+    """)
+
+  def contactForm(formData: ContactForm) = form(hx.post := "/contact", hx.swap := "outerHTML")(
+    emailField(formData.email, false),
+    div(label("First Name")(input(name := "firstName", value := formData.firstName))),
+    div(label("Last Name")(input(name := "lastName", value := formData.lastName))),
+    button("Submit")
+  )
+
+  def emailField(fieldValue: String, isError: Boolean) =
+    div(hx.target := "this", hx.swap := "outerHTML", Option.when(isError)(cls := "error"))(
+      label("Email Address")(
+        input(name := "email", value := fieldValue, hx.post := "/contact/email", hx.indicator := "#ind"),
+        img(id := "ind", src := "/img/bars.svg", cls := "htmx-indicator")
+      ),
+      Option.when(isError)(div(cls := "error-message")("That email is already taken.  Please enter another email."))
+    )
+
+}
+
+case class ContactForm(email: String, firstName: String, lastName: String) derives FormDataRW
+
+val routes = Routes:
+  case GET() -> Path() =>
+    val formData = ContactForm("", "", "")
+    Response.withBody(views.IndexView(formData))
+  case POST() -> Path("contact", "email") =>
+    val formData = Request.current.bodyForm[ContactForm]
+    val isValid = formData.email == "[email protected]"
+    Response.withBody(views.emailField(formData.email, !isValid))
+  case POST() -> Path("contact") =>
+    val formData = Request.current.bodyForm[ContactForm]
+    Response.withBody(views.contactForm(formData))
+
+Undertow.builder
+  .addHttpListener(8181, "localhost")
+  .setHandler(SharafHandler(routes))
+  .build
+  .start()
+
+println(s"Server started at http://localhost:8181")