Renders the visual card of an authentication flow: the outer container, header (built from :title + :subtitle), the main :inner_block, and an optional :footer. Used by SignIn, SignUp, and the task flows so they share one chrome.

Phoenix LiveComponents require a static HTML tag at the root of their own template, so hosts wrap this in a thin id-only <div id={@id}> for diff tracking — the visible card lives in this component's <div>.

Options

• :title - heading text shown in the header (required).
• :subtitle - supporting text under the title (required).

Slots

• :inner_block - main flow content (required).
• :footer - rendered inside <footer data-part="footer"> (required).

Styling

• [data-part="auth-card"] - the outer card container.
• [data-part="header"] - the header block.
• [data-part="title"] - the title.
• [data-part="subtitle"] - the subtitle.
• [data-part="footer"] - the footer block.

Examples

<div id={@id}>
  <EzAuth.UI.Core.auth_card title="Sign in" subtitle="Welcome back!">
    <.form ...>...</.form>

    <:footer>
      Don't have an account?
      <a href="/sign-up" data-part="footer-link">Sign up</a>
    </:footer>
  </EzAuth.UI.Core.auth_card>
</div>

Attributes

• title (:string) (required)
• subtitle (:string) (required)

Slots

• inner_block (required)
• footer (required)

Renders the shared <.form> wrapper used by SignIn and SignUp.

Encapsulates the boilerplate that's identical across both flows: method="post", phx-target, phx-change="change", phx-submit="submit", and phx-trigger-action. The host LiveComponent must implement handle_event/3 clauses for "change" and "submit".

Options

• :form - the Phoenix.HTML.Form to bind (required).
• :action - the form's action URL (required).
• :trigger_action - whether to trigger native form submission (required).
• :myself - the host LiveComponent's @myself (required).

Slots

• :inner_block - the form body (required).

Examples

<EzAuth.UI.Core.auth_form
  form={@form}
  action="/auth/sign-up"
  trigger_action={@trigger_action}
  myself={@myself}
>
  <Inputs.email field={@form[:email]} required />
  <Inputs.password field={@form[:password]} required />
  <Buttons.submit label="Sign up" />
</EzAuth.UI.Core.auth_form>

Attributes

• form (:any) (required)
• action (:string) (required)
• trigger_action (:boolean) (required)
• myself (:any) (required)

Slots

• inner_block (required)

Renders an icon SVG inline at the requested size (pixels, applied to both width and height).

Icons are sourced from Remix Icon (Apache 2.0). Supported names: brand icons (:apple, :facebook, :github, :google, :microsoft, :x) and generic UI icons (:link, :phone, :envelope, :arrow_right). See EzAuth.UI.Core.Icon for the exact Remix Icon mappings.

Options

• :name - icon atom to render (required).
• :size - edge length in pixels (required).

Styling

• [data-part="icon"] - icon container.
• [data-icon={name}] - icon identity on the container.

Examples

<EzAuth.UI.Core.icon name={:google} size={20} />
<EzAuth.UI.Core.icon name={:link} size={20} />

Attributes

• name (:atom) (required)
• size (:integer) (required)
• Global attributes are accepted.