Form validation with Zog

Author: nicolashery

app/forms/forms.go

@@ -0,0 +1,22 @@
+package forms
+
+type Errors = map[string][]string
+
+func EmptyErrors() Errors {
+	return make(map[string][]string)
+}
+
+func HasError(errors Errors, name string) bool {
+	_, ok := errors[name]
+	return ok
+}
+
+func GetErrors(errors Errors, name string) []string {
+	errs, ok := errors[name]
+
+	if !ok {
+		return []string{}
+	}
+
+	return errs
+}

app/forms/spaces.forms.go

@@ -0,0 +1,43 @@
+package forms
+
+import (
+	"net/http"
+
+	z "github.com/Oudwins/zog"
+	"github.com/Oudwins/zog/zhttp"
+)
+
+type CreateSpace struct {
+	Name     string `zog:"name"`
+	Identity string `zog:"identity"`
+	Email    string `zog:"email"`
+	Code     string `zog:"code"`
+}
+
+func createSpaceSchema(requiresCode bool) *z.StructSchema {
+	codeSchema := z.String().Trim()
+	if requiresCode {
+		codeSchema = codeSchema.Required()
+	}
+
+	return z.Struct(z.Schema{
+		"name":     z.String().Trim().Required().Max(255),
+		"identity": z.String().Trim().Required().Max(255),
+		"email":    z.String().Trim().Required().Email().Max(255),
+		"code":     codeSchema,
+	})
+}
+
+func ParseCreateSpace(r *http.Request, requiresCode bool) (CreateSpace, map[string][]string) {
+	var form CreateSpace
+	if !requiresCode {
+		form.Code = "placeholder"
+	}
+
+	errs := createSpaceSchema(requiresCode).Parse(zhttp.Request(r), &form)
+	if errs == nil {
+		return form, nil
+	}
+
+	return form, z.Issues.SanitizeMap(errs)
+}

app/handlers/spaces.handlers.go

@@ -6,13 +6,13 @@ import (
 	"fmt"
 	"log/slog"
 	"net/http"
-	"strings"
 	"time"
 
 	"github.com/gorilla/sessions"
 	"github.com/nicolashery/simply-shared-notes/app/access"
 	"github.com/nicolashery/simply-shared-notes/app/config"
 	"github.com/nicolashery/simply-shared-notes/app/db"
+	"github.com/nicolashery/simply-shared-notes/app/forms"
 	"github.com/nicolashery/simply-shared-notes/app/publicid"
 	"github.com/nicolashery/simply-shared-notes/app/session"
 	"github.com/nicolashery/simply-shared-notes/app/views/pages"
@@ -22,42 +22,23 @@ func handleSpacesNew(cfg *config.Config) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		requiresCode := cfg.RequiresInvitationCode()
 
-		var code string
+		var form forms.CreateSpace
 		if requiresCode {
-			code = r.URL.Query().Get("code")
+			form.Code = r.URL.Query().Get("code")
 		}
 
-		pages.SpacesNew(requiresCode, code).Render(r.Context(), w)
+		pages.SpacesNew(requiresCode, &form, forms.EmptyErrors()).Render(r.Context(), w)
 	}
 }
 
-type CreateSpaceForm struct {
-	Name     string
-	Identity string
-	Email    string
-	Code     string
-}
-
-func parseCreateSpaceForm(r *http.Request, f *CreateSpaceForm) error {
-	err := r.ParseForm()
-	if err != nil {
-		return err
-	}
-
-	f.Name = strings.Trim(r.Form.Get("name"), " ")
-	f.Identity = strings.Trim(r.Form.Get("identity"), " ")
-	f.Email = strings.Trim(r.Form.Get("email"), " ")
-	f.Code = strings.Trim(r.Form.Get("code"), " ")
-
-	return nil
-}
-
 func handleSpacesCreate(cfg *config.Config, logger *slog.Logger, sqlDB *sql.DB, queries *db.Queries, sessionStore *sessions.CookieStore) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		var form CreateSpaceForm
-		err := parseCreateSpaceForm(r, &form)
-		if err != nil {
-			http.Error(w, "failed to parse form", http.StatusBadRequest)
+		requiresCode := cfg.RequiresInvitationCode()
+
+		form, errors := forms.ParseCreateSpace(r, requiresCode)
+		if errors != nil {
+			w.WriteHeader(http.StatusUnprocessableEntity)
+			pages.SpacesNew(requiresCode, &form, errors).Render(r.Context(), w)
 			return
 		}
 
@@ -120,7 +101,7 @@ func createSpaceAndFirstMember(
 	ctx context.Context,
 	sqlDB *sql.DB,
 	queries *db.Queries,
-	form CreateSpaceForm,
+	form forms.CreateSpace,
 	now time.Time,
 	tokens access.AccessTokens,
 	memberPublicId string,

app/views/layouts/space.layout.templ

@@ -212,7 +212,10 @@ templ userMenu(access *access.Access, identity *identity.Identity) {
 						</a>
 					</li>
 					<li>
-						<a class="flex">
+						<a
+							href={ templ.URL("/new") }
+							class="flex"
+						>
 							<svg
 								class="w-5 h-5"
 								xmlns="http://www.w3.org/2000/svg"

app/views/layouts/space.layout_templ.go

@@ -1,8 +1,11 @@
 package pages
 
-import "github.com/nicolashery/simply-shared-notes/app/views/layouts"
+import (
+	"github.com/nicolashery/simply-shared-notes/app/forms"
+	"github.com/nicolashery/simply-shared-notes/app/views/layouts"
+)
 
-templ SpacesNew(requiresCode bool, code string) {
+templ SpacesNew(requiresCode bool, form *forms.CreateSpace, errors forms.Errors) {
 	@layouts.Landing("Create space") {
 		<div class="max-w-md mx-auto py-4">
 			<h1 class="text-2xl font-bold mb-1.5">Create a new space</h1>
@@ -12,23 +15,67 @@ templ SpacesNew(requiresCode bool, code string) {
 			<form method="POST" action="/new" class="flex flex-col gap-4">
 				<fieldset class="flex flex-col gap-1.5">
 					<label for="name" class="text-sm font-semibold">Space name</label>
-					<input type="text" name="name" id="name" class="input w-full"/>
+					<input
+						type="text"
+						name="name"
+						id="name"
+						value={ form.Name }
+						class={ "input w-full", templ.KV("input-error", forms.HasError(errors, "name")) }
+					/>
+					for _, e := range forms.GetErrors(errors, "name") {
+						<p class="text-sm text-error">
+							{ e }
+						</p>
+					}
 					<p class="text-sm opacity-60">You can always change the name later in the space settings.</p>
 				</fieldset>
 				<fieldset class="flex flex-col gap-1.5">
 					<label for="identity" class="text-sm font-semibold">Your name</label>
-					<input type="text" name="identity" id="identity" class="input w-full"/>
+					<input
+						type="text"
+						name="identity"
+						id="identity"
+						value={ form.Identity }
+						class={ "input w-full", templ.KV("input-error", forms.HasError(errors, "identity")) }
+					/>
+					for _, e := range forms.GetErrors(errors, "identity") {
+						<p class="text-sm text-error">
+							{ e }
+						</p>
+					}
 					<p class="text-sm opacity-60">We'll use this to create the first member of your new space. You can add more later from the members page.</p>
 				</fieldset>
 				<fieldset class="flex flex-col gap-1.5">
 					<label for="email" class="text-sm font-semibold">Your email</label>
-					<input type="email" name="email" id="email" class="input w-full"/>
+					<input
+						type="email"
+						name="email"
+						id="email"
+						value={ form.Email }
+						class={ "input w-full", templ.KV("input-error", forms.HasError(errors, "email")) }
+					/>
+					for _, e := range forms.GetErrors(errors, "email") {
+						<p class="text-sm text-error">
+							{ e }
+						</p>
+					}
 					<p class="text-sm opacity-60">Your email is only used to send you the secure access link to your space. We will never spam or share your email with a third party.</p>
 				</fieldset>
 				if requiresCode {
 					<fieldset class="flex flex-col gap-1.5">
 						<label for="code" class="text-sm font-semibold">Invitation code</label>
-						<input type="text" name="code" id="code" value={ code } class="input w-full"/>
+						<input
+							type="text"
+							name="code"
+							id="code"
+							value={ form.Code }
+							class={ "input w-full", templ.KV("input-error", forms.HasError(errors, "code")) }
+						/>
+						for _, e := range forms.GetErrors(errors, "code") {
+							<p class="text-sm text-error">
+								{ e }
+							</p>
+						}
 						<p class="text-sm opacity-60">Creating spaces is only possible with an invitation code.</p>
 					</fieldset>
 				}