Forms

// Package route holds the route types of the account slice. A route
// package holds only route types.
package route

import "github.com/alternayte/gx"

// Index is the first page of the slice.
type Index struct {
	gx.Route `GET /account`
}

// SignupPage is the page that shows the signup form.
type SignupPage struct {
	gx.Route `GET /account/signup`
}

// Address is a nested part of the form.
type Address struct {
	City string
}

// Signup is the input of the signup form.
type Signup struct {
	gx.Route `POST /account/signup`
	Email    string
	Age      int
	Plan     string
	Terms    bool
	Avatar   gx.File
	Address  Address
}

// Rules holds the checks of the form.
func (in *Signup) Rules() gx.Rules {
	return gx.Rules{
		gx.Field(&in.Email, gx.Required, gx.Email, gx.MaxLen(254)),
		gx.Field(&in.Age, gx.Min(18), gx.Max(120)),
		gx.Field(&in.Plan, gx.OneOf("free", "team")),
		gx.Field(&in.Terms, gx.True("terms.required")),
		gx.Field(&in.Avatar, gx.MaxSize(1<<20), gx.Accept("image/*")),
		gx.Field(&in.Address.City, gx.Required),
	}
}

package account

import (
	"github.com/alternayte/gx"
	"acme/account/route"
)

// Signup receives the signup form.
var Signup = gx.Form(func(c *gx.Ctx, in *route.Signup) error {
	if in.Email == "taken@example.com" {
		return gx.FieldError(&in.Email, "email.taken")
	}
	return c.Redirect(route.Index{})
}, SignupView)

// SignupPage shows the empty form.
var SignupPage = gx.Page(func(c *gx.Ctx, in route.SignupPage) (SignupViewProps, error) {
	return Signup.Props(&route.Signup{Plan: "free"}), nil
}, SignupView)

package account

import "acme/account/route"

props {
  // F is the typed form: one field per input field.
  F route.SignupForm
}

<gx.Head title="Sign up" />
<h1 class="text-2xl font-semibold">Sign up</h1>
<form {...p.F.Attrs()} class="mt-4 grid max-w-sm gap-2">
  <label for={p.F.Email.ID}>Email</label>
  <input {...p.F.Email.Attrs()} type="email" data-gx-validate="blur" class="rounded-md border border-border px-3 py-2" />
  <p id={p.F.Email.ID + "-error"} role="alert" class="text-sm text-destructive">{p.F.Email.Error}</p>

  <label for={p.F.Age.ID}>Age</label>
  <input {...p.F.Age.Attrs()} type="number" class="rounded-md border border-border px-3 py-2" />
  <p id={p.F.Age.ID + "-error"} role="alert" class="text-sm text-destructive">{p.F.Age.Error}</p>

  <label for={p.F.Plan.ID}>Plan</label>
  <select name={p.F.Plan.Name} id={p.F.Plan.ID} class="rounded-md border border-border px-3 py-2">
    <option value="free" selected={p.F.Plan.Value == "free"}>Free</option>
    <option value="team" selected={p.F.Plan.Value == "team"}>Team</option>
  </select>

  <label for={p.F.Address.City.ID}>City</label>
  <input {...p.F.Address.City.Attrs()} type="text" class="rounded-md border border-border px-3 py-2" />
  <p id={p.F.Address.City.ID + "-error"} role="alert" class="text-sm text-destructive">{p.F.Address.City.Error}</p>

  <label for={p.F.Avatar.ID}>Picture</label>
  <input {...p.F.Avatar.Attrs()} type="file" />
  <p id={p.F.Avatar.ID + "-error"} role="alert" class="text-sm text-destructive">{p.F.Avatar.Error}</p>

  <label class="flex items-center gap-2">
    <input {...p.F.Terms.Attrs()} type="checkbox" />
    I accept the terms
  </label>
  <p id={p.F.Terms.ID + "-error"} role="alert" class="text-sm text-destructive">{p.F.Terms.Error}</p>

  <button type="submit" class="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground">Create account</button>
</form>

enctype="multipart/form-data"
name="address.city"
accept="image/*"
min="18"

package account

import "github.com/alternayte/gx"

// UseShortMessages replaces two default messages.
func UseShortMessages() {
	gx.SetTranslator(func(key, fallback string) string {
		switch key {
		case "required":
			return "Required."
		case "email.taken":
			return "This email has an account."
		}
		return fallback
	})
}