From a7c4d2aae4c0bc60768e2158284a883859f8623a Mon Sep 17 00:00:00 2001 From: luke-dcz Date: Wed, 22 Jan 2025 11:44:23 +0000 Subject: [PATCH 1/5] add routes --- internal/server/routes.go | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/internal/server/routes.go b/internal/server/routes.go index 198afb8..53a63c7 100644 --- a/internal/server/routes.go +++ b/internal/server/routes.go @@ -9,6 +9,7 @@ import ( clicktoedit "github.com/gofs-cli/template/internal/ui/pages/click-to-edit" clicktoload "github.com/gofs-cli/template/internal/ui/pages/click-to-load" "github.com/gofs-cli/template/internal/ui/pages/home" + inlinevalidation "github.com/gofs-cli/template/internal/ui/pages/inline-validation" "github.com/gofs-cli/template/internal/ui/pages/notfound" "github.com/gofs-cli/template/internal/ui/pages/page1" "github.com/gofs-cli/template/internal/ui/pages/page2" @@ -40,6 +41,10 @@ func (s *Server) Routes() { routesMux.Handle("GET /click-to-load", clicktoload.Index()) routesMux.Handle("GET /click-to-load/contacts", clicktoload.Page()) + // inline validation example + routesMux.Handle("GET /inline-validation", inlinevalidation.Index()) + routesMux.Handle("POST /inline-validation/email", inlinevalidation.Validate()) + routesMux.Handle("GET /modal", home.Modal()) routesMux.Handle("GET /page1", page1.Index()) From a44d50a3d2f222ee24123b1bbce97ff7a8399771 Mon Sep 17 00:00:00 2001 From: luke-dcz Date: Wed, 22 Jan 2025 11:44:32 +0000 Subject: [PATCH 2/5] add inline validation handler --- .../ui/pages/inline-validation/handlers.go | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 internal/ui/pages/inline-validation/handlers.go diff --git a/internal/ui/pages/inline-validation/handlers.go b/internal/ui/pages/inline-validation/handlers.go new file mode 100644 index 0000000..1d5b057 --- /dev/null +++ b/internal/ui/pages/inline-validation/handlers.go @@ -0,0 +1,26 @@ +package inlinevalidation + +import ( + "net/http" + + "github.com/a-h/templ" + "github.com/gofs-cli/template/internal/ui" + "github.com/gofs-cli/template/internal/ui/components/header" +) + +func Index() http.Handler { + return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { + templ.Handler(ui.IndexPage(layout(header.Header(), body()))).ServeHTTP(w, r) + }) +} + +func Validate() http.Handler { + return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { + email := r.PostFormValue("email") + if email != "test@test.com" { + templ.Handler(errorEmail(email)).ServeHTTP(w, r) + } else { + templ.Handler(validEmail(email)).ServeHTTP(w, r) + } + }) +} From c682ab36509f53fa3f1f269732a37679ae70b974 Mon Sep 17 00:00:00 2001 From: luke-dcz Date: Wed, 22 Jan 2025 11:44:47 +0000 Subject: [PATCH 3/5] add templ page --- .../ui/pages/inline-validation/index.templ | 72 ++++ .../ui/pages/inline-validation/index_templ.go | 332 ++++++++++++++++++ 2 files changed, 404 insertions(+) create mode 100644 internal/ui/pages/inline-validation/index.templ create mode 100644 internal/ui/pages/inline-validation/index_templ.go diff --git a/internal/ui/pages/inline-validation/index.templ b/internal/ui/pages/inline-validation/index.templ new file mode 100644 index 0000000..81e592b --- /dev/null +++ b/internal/ui/pages/inline-validation/index.templ @@ -0,0 +1,72 @@ +package inlinevalidation + +import "github.com/gofs-cli/template/internal/ui/components/toast" + +css classLayout() { + display: grid; +} + +css validInput() { + box-shadow: 0 0 3px #36cc00; +} + +css errorInput() { + box-shadow: 0 0 3px #CC0000; +} + +css errorMessage() { + color: red; +} + +templ layout(header, body templ.Component) { + @toast.Container() +
+
+ @header +
+
+ @body +
+
+} + +templ body() { +

Inline Validation

+ @form() +} + +templ form() { +
+
+ + + +
+
+ + +
+
+ + +
+ +
+} + +templ errorEmail(email string) { +
+ + + +
That email is already taken. Please enter another email.
+
+} + +templ validEmail(email string) { +
+ + + +
+} diff --git a/internal/ui/pages/inline-validation/index_templ.go b/internal/ui/pages/inline-validation/index_templ.go new file mode 100644 index 0000000..c2afa20 --- /dev/null +++ b/internal/ui/pages/inline-validation/index_templ.go @@ -0,0 +1,332 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.3.819 +package inlinevalidation + +//lint:file-ignore SA4006 This context is only used if a nested component is present. + +import "github.com/a-h/templ" +import templruntime "github.com/a-h/templ/runtime" + +import "github.com/gofs-cli/template/internal/ui/components/toast" + +func classLayout() templ.CSSClass { + templ_7745c5c3_CSSBuilder := templruntime.GetBuilder() + templ_7745c5c3_CSSBuilder.WriteString(`display:grid;`) + templ_7745c5c3_CSSID := templ.CSSID(`classLayout`, templ_7745c5c3_CSSBuilder.String()) + return templ.ComponentCSSClass{ + ID: templ_7745c5c3_CSSID, + Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`), + } +} + +func validInput() templ.CSSClass { + templ_7745c5c3_CSSBuilder := templruntime.GetBuilder() + templ_7745c5c3_CSSBuilder.WriteString(`box-shadow:0 0 3px #36cc00;`) + templ_7745c5c3_CSSID := templ.CSSID(`validInput`, templ_7745c5c3_CSSBuilder.String()) + return templ.ComponentCSSClass{ + ID: templ_7745c5c3_CSSID, + Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`), + } +} + +func errorInput() templ.CSSClass { + templ_7745c5c3_CSSBuilder := templruntime.GetBuilder() + templ_7745c5c3_CSSBuilder.WriteString(`box-shadow:0 0 3px #CC0000;`) + templ_7745c5c3_CSSID := templ.CSSID(`errorInput`, templ_7745c5c3_CSSBuilder.String()) + return templ.ComponentCSSClass{ + ID: templ_7745c5c3_CSSID, + Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`), + } +} + +func errorMessage() templ.CSSClass { + templ_7745c5c3_CSSBuilder := templruntime.GetBuilder() + templ_7745c5c3_CSSBuilder.WriteString(`color:red;`) + templ_7745c5c3_CSSID := templ.CSSID(`errorMessage`, templ_7745c5c3_CSSBuilder.String()) + return templ.ComponentCSSClass{ + ID: templ_7745c5c3_CSSID, + Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`), + } +} + +func layout(header, body templ.Component) templ.Component { + return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var1 := templ.GetChildren(ctx) + if templ_7745c5c3_Var1 == nil { + templ_7745c5c3_Var1 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = toast.Container().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var2 = []any{classLayout()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = header.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = body.Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func body() templ.Component { + return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var4 := templ.GetChildren(ctx) + if templ_7745c5c3_Var4 == nil { + templ_7745c5c3_Var4 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

Inline Validation

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = form().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func form() templ.Component { + return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var5 := templ.GetChildren(ctx) + if templ_7745c5c3_Var5 == nil { + templ_7745c5c3_Var5 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func errorEmail(email string) templ.Component { + return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var6 := templ.GetChildren(ctx) + if templ_7745c5c3_Var6 == nil { + templ_7745c5c3_Var6 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var7 = []any{errorInput()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var10 = []any{errorMessage()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "
That email is already taken. Please enter another email.
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +func validEmail(email string) templ.Component { + return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var12 := templ.GetChildren(ctx) + if templ_7745c5c3_Var12 == nil { + templ_7745c5c3_Var12 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var13 = []any{validInput()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var13...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return nil + }) +} + +var _ = templruntime.GeneratedTemplate From 47b927040db5c92ae1330dd4e526d23acee25c96 Mon Sep 17 00:00:00 2001 From: luke-dcz Date: Wed, 22 Jan 2025 11:51:37 +0000 Subject: [PATCH 4/5] add minor styles --- .../ui/pages/inline-validation/index.templ | 21 ++-- .../ui/pages/inline-validation/index_templ.go | 112 +++++++++++------- 2 files changed, 85 insertions(+), 48 deletions(-) diff --git a/internal/ui/pages/inline-validation/index.templ b/internal/ui/pages/inline-validation/index.templ index 81e592b..14577fe 100644 --- a/internal/ui/pages/inline-validation/index.templ +++ b/internal/ui/pages/inline-validation/index.templ @@ -6,6 +6,12 @@ css classLayout() { display: grid; } +css formStyles() { + display: flex; + flex-direction: column; + gap: 8px; +} + css validInput() { box-shadow: 0 0 3px #36cc00; } @@ -31,26 +37,27 @@ templ layout(header, body templ.Component) { } templ body() { -

Inline Validation

+

Inline Validation:

+

Enter an email into the input below and on tab out it will be validated. Only "test@test.com" will pass.

@form() } templ form() { -
+
-
+
- +
-
+
- +
- + } diff --git a/internal/ui/pages/inline-validation/index_templ.go b/internal/ui/pages/inline-validation/index_templ.go index c2afa20..aea77ca 100644 --- a/internal/ui/pages/inline-validation/index_templ.go +++ b/internal/ui/pages/inline-validation/index_templ.go @@ -20,6 +20,18 @@ func classLayout() templ.CSSClass { } } +func formStyles() templ.CSSClass { + templ_7745c5c3_CSSBuilder := templruntime.GetBuilder() + templ_7745c5c3_CSSBuilder.WriteString(`display:flex;`) + templ_7745c5c3_CSSBuilder.WriteString(`flex-direction:column;`) + templ_7745c5c3_CSSBuilder.WriteString(`gap:8px;`) + templ_7745c5c3_CSSID := templ.CSSID(`formStyles`, templ_7745c5c3_CSSBuilder.String()) + return templ.ComponentCSSClass{ + ID: templ_7745c5c3_CSSID, + Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`), + } +} + func validInput() templ.CSSClass { templ_7745c5c3_CSSBuilder := templruntime.GetBuilder() templ_7745c5c3_CSSBuilder.WriteString(`box-shadow:0 0 3px #36cc00;`) @@ -138,7 +150,7 @@ func body() templ.Component { templ_7745c5c3_Var4 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

Inline Validation

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "

Inline Validation:

Enter an email into the input below and on tab out it will be validated. Only \"test@test.com\" will pass.

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -171,7 +183,25 @@ func form() templ.Component { templ_7745c5c3_Var5 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") + var templ_7745c5c3_Var6 = []any{formStyles()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -195,69 +225,69 @@ func errorEmail(email string) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var6 := templ.GetChildren(ctx) - if templ_7745c5c3_Var6 == nil { - templ_7745c5c3_Var6 = templ.NopComponent + templ_7745c5c3_Var8 := templ.GetChildren(ctx) + if templ_7745c5c3_Var8 == nil { + templ_7745c5c3_Var8 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var7 = []any{errorInput()} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...) + var templ_7745c5c3_Var9 = []any{errorInput()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"> ") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var10 = []any{errorMessage()} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...) + var templ_7745c5c3_Var12 = []any{errorMessage()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "
That email is already taken. Please enter another email.
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\">That email is already taken. Please enter another email.
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -281,47 +311,47 @@ func validEmail(email string) templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var12 := templ.GetChildren(ctx) - if templ_7745c5c3_Var12 == nil { - templ_7745c5c3_Var12 = templ.NopComponent + templ_7745c5c3_Var14 := templ.GetChildren(ctx) + if templ_7745c5c3_Var14 == nil { + templ_7745c5c3_Var14 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - var templ_7745c5c3_Var13 = []any{validInput()} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var13...) + var templ_7745c5c3_Var15 = []any{validInput()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } From ba5a5ea42eac314af5d8bfc77d2628318be5ceea Mon Sep 17 00:00:00 2001 From: Steven Lee Date: Mon, 27 Jan 2025 13:07:02 +0000 Subject: [PATCH 5/5] complete example functionality --- internal/server/routes.go | 1 + .../ui/pages/inline-validation/handlers.go | 15 +- .../ui/pages/inline-validation/index.templ | 38 ++-- .../ui/pages/inline-validation/index_templ.go | 198 ++++++++---------- 4 files changed, 123 insertions(+), 129 deletions(-) diff --git a/internal/server/routes.go b/internal/server/routes.go index 4a80408..f505ac6 100644 --- a/internal/server/routes.go +++ b/internal/server/routes.go @@ -48,6 +48,7 @@ func (s *Server) Routes() { // inline validation example routesMux.Handle("GET /inline-validation", inlinevalidation.Index()) + routesMux.Handle("POST /inline-validation", inlinevalidation.Submit()) routesMux.Handle("POST /inline-validation/email", inlinevalidation.Validate()) routesMux.Handle("GET /modal", home.Modal()) diff --git a/internal/ui/pages/inline-validation/handlers.go b/internal/ui/pages/inline-validation/handlers.go index 1d5b057..adaac41 100644 --- a/internal/ui/pages/inline-validation/handlers.go +++ b/internal/ui/pages/inline-validation/handlers.go @@ -14,13 +14,16 @@ func Index() http.Handler { }) } +func Submit() http.Handler { + return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { + e := r.PostFormValue("email") + templ.Handler(form(e)).ServeHTTP(w, r) + }) +} + func Validate() http.Handler { return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { - email := r.PostFormValue("email") - if email != "test@test.com" { - templ.Handler(errorEmail(email)).ServeHTTP(w, r) - } else { - templ.Handler(validEmail(email)).ServeHTTP(w, r) - } + e := r.PostFormValue("email") + templ.Handler(email(e, e != "test@test.com")).ServeHTTP(w, r) }) } diff --git a/internal/ui/pages/inline-validation/index.templ b/internal/ui/pages/inline-validation/index.templ index 14577fe..26e2e68 100644 --- a/internal/ui/pages/inline-validation/index.templ +++ b/internal/ui/pages/inline-validation/index.templ @@ -39,16 +39,12 @@ templ layout(header, body templ.Component) { templ body() {

Inline Validation:

Enter an email into the input below and on tab out it will be validated. Only "test@test.com" will pass.

- @form() + @form("") } -templ form() { +templ form(emailAddress string) {
-
- - - -
+ @email(emailAddress, false)
@@ -61,19 +57,25 @@ templ form() { } -templ errorEmail(email string) { -
- - - -
That email is already taken. Please enter another email.
-
-} - -templ validEmail(email string) { +templ email(email string, err bool) {
- + + if err { +
That email is already taken. Please enter another email.
+ }
} diff --git a/internal/ui/pages/inline-validation/index_templ.go b/internal/ui/pages/inline-validation/index_templ.go index aea77ca..a565cc3 100644 --- a/internal/ui/pages/inline-validation/index_templ.go +++ b/internal/ui/pages/inline-validation/index_templ.go @@ -154,7 +154,7 @@ func body() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = form().Render(ctx, templ_7745c5c3_Buffer) + templ_7745c5c3_Err = form("").Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -162,7 +162,7 @@ func body() templ.Component { }) } -func form() templ.Component { +func form(emailAddress string) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { @@ -201,7 +201,15 @@ func form() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\">
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\">") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = email(emailAddress, false).Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -209,7 +217,7 @@ func form() templ.Component { }) } -func errorEmail(email string) templ.Component { +func email(email string, err bool) templ.Component { return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { @@ -230,7 +238,7 @@ func errorEmail(email string) templ.Component { templ_7745c5c3_Var8 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -239,119 +247,99 @@ func errorEmail(email string) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " ") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - var templ_7745c5c3_Var12 = []any{errorMessage()} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "
That email is already taken. Please enter another email.
") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - return nil - }) -} - -func validEmail(email string) templ.Component { - return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { - templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context - if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { - return templ_7745c5c3_CtxErr - } - templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) - if !templ_7745c5c3_IsBuffer { - defer func() { - templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) - if templ_7745c5c3_Err == nil { - templ_7745c5c3_Err = templ_7745c5c3_BufErr - } - }() - } - ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var14 := templ.GetChildren(ctx) - if templ_7745c5c3_Var14 == nil { - templ_7745c5c3_Var14 = templ.NopComponent - } - ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "
") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - var templ_7745c5c3_Var15 = []any{validInput()} - templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if err { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " class=\"") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var12 string + templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var9).String()) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/ui/pages/inline-validation/index.templ`, Line: 1, Col: 0} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " else") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if email != "" { + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " class=\"") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + var templ_7745c5c3_Var13 string + templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String()) + if templ_7745c5c3_Err != nil { + return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/ui/pages/inline-validation/index.templ`, Line: 1, Col: 0} + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "> ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + if err { + var templ_7745c5c3_Var14 = []any{errorMessage()} + templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "
That email is already taken. Please enter another email.
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + } + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err }