Skip to content
Gx
GitHub

Login

A sign-in page block with a form and a brand panel.

Open the preview in a new tab 

<login.Login title="Sign in" description="Enter your email and password." />

Installation

Run the command in the app module.

Terminal
gx add login

The command also installs button, card, field and input.

The command writes these files.

File Path in the app
Login.gx ui/login/Login.gx
Login.fixtures.go ui/login/Login.fixtures.go

Install button, card, field and input first.

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/login/Login.gx
package login

import "github.com/alternayte/gx/registry/button"
import "github.com/alternayte/gx/registry/card"
import "github.com/alternayte/gx/registry/field"
import "github.com/alternayte/gx/registry/input"

props {
  // Title is the heading of the card.
  Title       string = "Sign in"
  // Description is the text below the title.
  Description string = "Enter your email and password."
  // Action is the URL that the form posts to. Empty posts to the current URL.
  Action      gx.URL = ""
}

<div class="grid min-h-screen lg:grid-cols-2">
  <div class="flex items-center justify-center p-6">
    <card.Card title={p.Title} description={p.Description} class="w-full max-w-sm">
      <form method="post" action={p.Action}>
        <field.FieldGroup>
          <field.Field>
            <field.FieldLabel for="email">Email</field.FieldLabel>
            <input.Input id="email" name="email" type="email" placeholder="you@example.com" />
          </field.Field>
          <field.Field>
            <field.FieldLabel for="password">Password</field.FieldLabel>
            <input.Input id="password" name="password" type="password" />
          </field.Field>
          <div class="flex flex-col gap-3">
            <button.Button type="submit" class="w-full">Sign in</button.Button>
            <p class="text-center text-sm text-muted-foreground">Need an account? <a href="/signup" class="underline underline-offset-4 hover:text-primary">Create one</a></p>
          </div>
        </field.FieldGroup>
      </form>
    </card.Card>
  </div>
  <div class="hidden flex-col justify-between bg-muted p-10 lg:flex">
    <a href="/" class="font-semibold no-underline">Gx</a>
    <p class="max-w-sm text-sm text-foreground/80">A typed Go framework for server-rendered web apps.</p>
  </div>
</div>
ui/login/Login.fixtures.go
package login

import "github.com/alternayte/gx"

var LoginFixtures = gx.Fixtures[LoginProps]{
	"Default": {Title: "Sign in", Description: "Enter your email and password."},
}

The theme must define these tokens: --muted, --muted-foreground, --border, --card, --primary, --primary-foreground, --ring, --input.

Usage

<login.Login action="/signin" />

The block is copied source. Replace the raw form with a typed gx.Form and route input when the app has its sign-in route.

Examples

Default

Open the preview in a new tab 

<login.Login title="Sign in" description="Enter your email and password." />

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

login.Login

Prop Type Default Description
Title string "Sign in" Title is the heading of the card.
Description string "Enter your email and password." Description is the text below the title.
Action gx.URL "" Action is the URL that the form posts to. Empty posts to the current URL.

Do and do not

Do

  • Keep the form to two fields.
  • Link to the sign-up page.

Don't

  • Do not show a password hint on the page.
  • Do not remove the brand panel on wide screens.

Keyboard

Key Action
Tab Moves between the email field, the password field and the button.
Enter Submits the form from a field.