Convert contact page to Templ

This commit is contained in:
Tony Grosinger 2024-07-14 19:50:58 -07:00
parent 59740c499c
commit 9356062b54
4 changed files with 293 additions and 79 deletions

View File

@ -3,12 +3,15 @@ package handlers
import ( import (
"fmt" "fmt"
"github.com/a-h/templ"
"github.com/go-playground/validator/v10" "github.com/go-playground/validator/v10"
"github.com/labstack/echo/v4" "github.com/labstack/echo/v4"
"git.grosinger.net/tgrosinger/saasitone/pkg/form" "git.grosinger.net/tgrosinger/saasitone/pkg/form"
"git.grosinger.net/tgrosinger/saasitone/pkg/page" "git.grosinger.net/tgrosinger/saasitone/pkg/page"
"git.grosinger.net/tgrosinger/saasitone/pkg/services" "git.grosinger.net/tgrosinger/saasitone/pkg/services"
"git.grosinger.net/tgrosinger/saasitone/templ/layouts"
"git.grosinger.net/tgrosinger/saasitone/templ/pages"
"git.grosinger.net/tgrosinger/saasitone/templates" "git.grosinger.net/tgrosinger/saasitone/templates"
) )
@ -22,13 +25,6 @@ type (
mail *services.MailClient mail *services.MailClient
*services.TemplateRenderer *services.TemplateRenderer
} }
contactForm struct {
Email string `form:"email" validate:"required,email"`
Department string `form:"department" validate:"required,oneof=sales marketing hr"`
Message string `form:"message" validate:"required"`
form.Submission
}
) )
func init() { func init() {
@ -48,16 +44,22 @@ func (h *Contact) Routes(g *echo.Group) {
func (h *Contact) Page(ctx echo.Context) error { func (h *Contact) Page(ctx echo.Context) error {
p := page.New(ctx) p := page.New(ctx)
p.Layout = templates.LayoutMain
p.Name = templates.PageContact p.Name = templates.PageContact
p.Title = "Contact us" p.Title = "Contact us"
p.Form = form.Get[contactForm](ctx)
return h.RenderPage(ctx, p) f := form.Get[pages.ContactForm](ctx)
component := pages.Contact(p, f)
// TODO: This can be reused
p.LayoutComponent = func(content templ.Component) templ.Component {
return layouts.Main(p, content)
}
return h.RenderPageTempl(ctx, p, component)
} }
func (h *Contact) Submit(ctx echo.Context) error { func (h *Contact) Submit(ctx echo.Context) error {
var input contactForm var input pages.ContactForm
err := form.Submit(ctx, &input) err := form.Submit(ctx, &input)

74
templ/pages/contact.templ Normal file
View File

@ -0,0 +1,74 @@
package pages
import (
"git.grosinger.net/tgrosinger/saasitone/templ/components"
"git.grosinger.net/tgrosinger/saasitone/pkg/form"
"git.grosinger.net/tgrosinger/saasitone/pkg/page"
)
type ContactForm struct {
Email string `form:"email" validate:"required,email"`
Department string `form:"department" validate:"required,oneof=sales marketing hr"`
Message string `form:"message" validate:"required"`
form.Submission
}
templ Contact(p page.Page, f *ContactForm) {
if p.HTMX.Request.Target != "contact" {
<article class="message is-link">
<div class="message-body">
<p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p>
<p>Only the form below will update async upon submission.</p>
</div>
</article>
}
if f.IsDone() {
<article class="message is-large is-success">
<div class="message-header">
<p>Thank you!</p>
</div>
<div class="message-body">
No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.
</div>
</article>
} else {
<form id="contact" method="post" hx-post={ p.ToURL("contact.submit") }>
<div class="field">
<label for="email" class="label">Email address</label>
<div class="control">
<input id="email" name="email" type="email" class={ "input", f.Submission.GetFieldStatusClass("Email") } value={ f.Email }/>
</div>
@components.FieldErrors(f.Submission.GetFieldErrors("Email"))
</div>
<div class="control">
<label class="label">Department</label>
<label class="radio">
<input type="radio" name="department" value="sales" checked?={ f.Department == "sales" }/>
Sales
</label>
<label class="radio">
<input type="radio" name="department" value="marketing" checked?={ f.Department == "marketing" }/>
Marketing
</label>
<label class="radio">
<input type="radio" name="department" value="hr" checked?={ f.Department == "hr" }/>
HR
</label>
@components.FieldErrors(f.Submission.GetFieldErrors("Department"))
</div>
<div class="field">
<label for="message" class="label">Message</label>
<div class="control">
<textarea id="message" name="message" class={ "textarea", f.Submission.GetFieldStatusClass("Message") }>{ f.Message }</textarea>
</div>
@components.FieldErrors(f.Submission.GetFieldErrors("Message"))
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
@components.CSRF(p.CSRF)
</form>
}
}

View File

@ -0,0 +1,206 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.707
package pages
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
import (
"git.grosinger.net/tgrosinger/saasitone/pkg/form"
"git.grosinger.net/tgrosinger/saasitone/pkg/page"
"git.grosinger.net/tgrosinger/saasitone/templ/components"
)
type ContactForm struct {
Email string `form:"email" validate:"required,email"`
Department string `form:"department" validate:"required,oneof=sales marketing hr"`
Message string `form:"message" validate:"required"`
form.Submission
}
func Contact(p page.Page, f *ContactForm) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
if p.HTMX.Request.Target != "contact" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<article class=\"message is-link\"><div class=\"message-body\"><p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p><p>Only the form below will update async upon submission.</p></div></article>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if f.IsDone() {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<article class=\"message is-large is-success\"><div class=\"message-header\"><p>Thank you!</p></div><div class=\"message-body\">No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.</div></article>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"contact\" method=\"post\" hx-post=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(p.ToURL("contact.submit"))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/contact.templ`, Line: 35, Col: 70}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"field\"><label for=\"email\" class=\"label\">Email address</label><div class=\"control\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 = []any{"input", f.Submission.GetFieldStatusClass("Email")}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<input id=\"email\" name=\"email\" type=\"email\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/contact.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" value=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(f.Email)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/contact.templ`, Line: 39, Col: 125}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.FieldErrors(f.Submission.GetFieldErrors("Email")).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"control\"><label class=\"label\">Department</label> <label class=\"radio\"><input type=\"radio\" name=\"department\" value=\"sales\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if f.Department == "sales" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> Sales</label> <label class=\"radio\"><input type=\"radio\" name=\"department\" value=\"marketing\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if f.Department == "marketing" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> Marketing</label> <label class=\"radio\"><input type=\"radio\" name=\"department\" value=\"hr\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if f.Department == "hr" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("> HR</label>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.FieldErrors(f.Submission.GetFieldErrors("Department")).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"field\"><label for=\"message\" class=\"label\">Message</label><div class=\"control\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 = []any{"textarea", f.Submission.GetFieldStatusClass("Message")}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<textarea id=\"message\" name=\"message\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/contact.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(f.Message)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templ/pages/contact.templ`, Line: 62, Col: 120}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</textarea></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.FieldErrors(f.Submission.GetFieldErrors("Message")).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"field is-grouped\"><div class=\"control\"><button class=\"button is-link\">Submit</button></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.CSRF(p.CSRF).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}

View File

@ -1,68 +0,0 @@
{{define "content"}}
{{- if not (eq .HTMX.Request.Target "contact")}}
<article class="message is-link">
<div class="message-body">
<p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p>
<p>Only the form below will update async upon submission.</p>
</div>
</article>
{{- end}}
{{template "form" .}}
{{end}}
{{define "form"}}
{{- if .Form.IsDone}}
<article class="message is-large is-success">
<div class="message-header">
<p>Thank you!</p>
</div>
<div class="message-body">
No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.
</div>
</article>
{{- else}}
<form id="contact" method="post" hx-post="{{url "contact.submit"}}">
<div class="field">
<label for="email" class="label">Email address</label>
<div class="control">
<input id="email" name="email" type="email" class="input {{.Form.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
</div>
{{template "field-errors" (.Form.GetFieldErrors "Email")}}
</div>
<div class="control">
<label class="label">Department</label>
<label class="radio">
<input type="radio" name="department" value="sales" {{if eq .Form.Department "sales"}}checked{{end}}/>
Sales
</label>
<label class="radio">
<input type="radio" name="department" value="marketing" {{if eq .Form.Department "marketing"}}checked{{end}}/>
Marketing
</label>
<label class="radio">
<input type="radio" name="department" value="hr" {{if eq .Form.Department "hr"}}checked{{end}}/>
HR
</label>
{{template "field-errors" (.Form.GetFieldErrors "Department")}}
</div>
<div class="field">
<label for="message" class="label">Message</label>
<div class="control">
<textarea id="message" name="message" class="textarea {{.Form.GetFieldStatusClass "Message"}}">{{.Form.Message}}</textarea>
</div>
{{template "field-errors" (.Form.GetFieldErrors "Message")}}
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
{{template "csrf" .}}
</form>
{{- end}}
{{end}}