EzAuth.UI.Core.Inputs (EzAuth v0.1.0)

Copy Markdown View Source

Form input components for EzAuth flows.

Each public component wraps a labelled form control. Hosts compose these directly: no identity configuration is read here; the caller decides which inputs to render.

Summary

Functions

code(assigns)

Renders a row of single-character inputs for one-time code entry.

email(assigns)

Renders an email input.

identity(assigns)

Renders a polymorphic identity input that adapts label, type, inputmode, and autocomplete to whichever identity is currently active.

input(assigns)

Renders a labelled input field.

name(assigns)

Renders a full-name input.

password(assigns)

Renders a password input.

phone(assigns)

Renders a phone input.

username(assigns)

Renders a username input.

Functions

code(assigns)

Renders a row of single-character inputs for one-time code entry.

Submits name[0], name[1], ... as separate params so the server can rejoin them. The CodeInput hook (in priv/static/ez_auth.js) handles auto-advance, Arrow/Backspace navigation, and paste distribution. Hosts must register the hook with their LiveSocket.

Options

  • :id - unique id for the input group (required).
  • :name - base parameter name for the submitted code parts (required).
  • :length - number of boxes. Defaults to 6.
  • :format - :numeric (digits only, default) or :alphanumeric (digits + letters). Gates the mask: the hook only advances focus when the typed character passes the mask.

Styling

  • [data-part="code-input"] - code input container.
  • [data-part="code-input-box"] - each code entry box.
  • [data-format={format}] - active input mask on the container.

Examples

<EzAuth.UI.Core.Inputs.code id="verify-code" name="code" />
<EzAuth.UI.Core.Inputs.code id="verify-code" name="code" length={4} />
<EzAuth.UI.Core.Inputs.code id="verify-code" name="code" format={:alphanumeric} />

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • length (:integer) - Defaults to 6.
  • format (:atom) - Defaults to :numeric. Must be one of :numeric, or :alphanumeric.
  • Global attributes are accepted.

email(assigns)

Renders an email input.

Options

  • :field - form field to bind to this input (required).
  • :required - whether the field is required. Defaults to false.

Styling

  • [data-part="field"] - input container.
  • [data-part="label"] - visible field label.
  • [data-part="input"] - form control.
  • [data-invalid] - invalid state on the container.

Examples

<EzAuth.UI.Core.Inputs.email field={@form[:email]} required />

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • required (:boolean) - Defaults to false.
  • Global attributes are accepted.

identity(assigns)

Renders a polymorphic identity input that adapts label, type, inputmode, and autocomplete to whichever identity is currently active.

Detection is the caller's responsibility — pass the active atom via :identity (typically computed from EzAuth.Accounts.Identity.detect_identity/2 in the parent's phx-change handler). The underlying input carries phx-debounce="150" so the parent's change handler fires throttled. Before any identity is detected, the input's name= is the literal "_identity" (underscore-prefixed like Phoenix's _target), so submissions in the not-yet-detected state aren't treated as real form fields.

Options

  • :form - the form to derive name= from once an identity is detected (required).

  • :identity - the active identity (:email | :phone | nil). Defaults to nil.

  • :accepts - identity types this input can adapt to. Defaults to [:email].
  • :field - form field to bind value/errors to. Optional.
  • :value - current typed value. Optional.

Examples

<EzAuth.UI.Core.Inputs.identity form={@form} identity={@detected} accepts={[:email, :phone]} />

Attributes

  • id (:string) (required)
  • form (Phoenix.HTML.Form) (required)
  • identity (:atom) (required)
  • accepts (:list) - Defaults to [:email].
  • value (:string) - Defaults to nil.
  • Global attributes are accepted.

input(assigns)

Renders a labelled input field.

The shared building block used by all input components in this module. Accepts either a Phoenix.HTML.FormField (via :field) or raw :id/:name/:value attributes.

Options

  • :field - bound form field. When given, :id, :name, :value, and :errors are derived from it.
  • :id - DOM id. Required when :field is not given.
  • :name - form name attribute. Required when :field is not given.
  • :value - current value. Defaults to nil.
  • :label - visible label text. Optional.
  • :type - one of text, email, tel, password. Defaults to text.
  • :errors - list of error messages. Defaults to [].

Extra attributes (autocomplete, inputmode, placeholder, etc.) are forwarded to the underlying <input>.

Styling

  • [data-part="field"] - input container.
  • [data-part="label"] - visible field label.
  • [data-part="input"] - form control.
  • [data-invalid] - invalid state on the container.

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • type (:string) - Defaults to "text". Must be one of "text", "email", "tel", or "password".
  • field (Phoenix.HTML.FormField)
  • errors (:list) - Defaults to [].
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "disabled", "inputmode", "placeholder", "required"].

name(assigns)

Renders a full-name input.

Options

  • :field - form field to bind to this input (required).
  • :required - whether the field is required. Defaults to false.

Styling

  • [data-part="field"] - input container.
  • [data-part="label"] - visible field label.
  • [data-part="input"] - form control.
  • [data-invalid] - invalid state on the container.

Examples

<EzAuth.UI.Core.Inputs.name field={@form[:name]} required />

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • required (:boolean) - Defaults to false.
  • Global attributes are accepted.

password(assigns)

Renders a password input.

Options

  • :field - form field to bind to this input (required).
  • :required - whether the field is required. Defaults to false.
  • :autocomplete - browser autocomplete hint. Defaults to "current-password". Use "new-password" in registration flows.

Styling

  • [data-part="field"] - input container.
  • [data-part="label"] - visible field label.
  • [data-part="input"] - form control.
  • [data-invalid] - invalid state on the container.

Examples

<EzAuth.UI.Core.Inputs.password field={@form[:password]} required />
<EzAuth.UI.Core.Inputs.password
  field={@form[:password]}
  autocomplete="new-password"
  required
/>

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • required (:boolean) - Defaults to false.
  • autocomplete (:string) - Defaults to "current-password".
  • Global attributes are accepted.

phone(assigns)

Renders a phone input.

Options

  • :field - form field to bind to this input (required).
  • :required - whether the field is required. Defaults to false.

Styling

  • [data-part="field"] - input container.
  • [data-part="label"] - visible field label.
  • [data-part="input"] - form control.
  • [data-invalid] - invalid state on the container.

Examples

<EzAuth.UI.Core.Inputs.phone field={@form[:phone]} required />

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • required (:boolean) - Defaults to false.
  • Global attributes are accepted.

username(assigns)

Renders a username input.

Options

  • :field - form field to bind to this input (required).
  • :required - whether the field is required. Defaults to false.

Styling

  • [data-part="field"] - input container.
  • [data-part="label"] - visible field label.
  • [data-part="input"] - form control.
  • [data-invalid] - invalid state on the container.

Examples

<EzAuth.UI.Core.Inputs.username field={@form[:username]} required />

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • required (:boolean) - Defaults to false.
  • Global attributes are accepted.