Tried both ways, to a container and to itself. JS.dispatch makes the same result too.
<.button onclick="document.querySelector('#continue-with-email-modal').showModal()">
Continue with Email
</.button>
<.modal id="continue-with-email-modal">
<.form for={:account} phx-submit="mail_access" class="space-y-4">
<.input name="email" placeholder="Your email" />
<.button phx-disable-with>Send Link</.button>
</.form>
</.modal>
def handle_event("mail_access", %{"email" => email}, socket) do
Feder.Auth.mail_access(email)
{:noreply, put_flash(socket, :info, "Check your email")}
end
# components
@doc """
Renders a button.
"""
attr :rest, :global, include: ~w(disabled form name value)
slot :inner_block, required: true
def button(assigns) do
~H"""
<button
class={[
theme(),
text_box(:double),
tickle(),
"font-display font-semibold italic text-base cursor-default",
"phx-submit-loading:opacity-75"
]}
{@rest}
>
<%= render_slot(@inner_block) %>
</button>
"""
end
@doc """
Renders a modal.
Open with `#showModal()`.
"""
attr :id, :string, required: true
attr :class, :list, default: []
slot :inner_block, required: true
# TODO: Make is survive LiveSocket updates.
def modal(assigns) do
~H"""
<dialog
id={@id}
class={["bg-inherit p-0", @class]}
onclick="if (event.target == this) this.close()"
>
<.focus_wrap id={"#{@id}-focus-wrap"}>
<div class={[
theme(),
box(),
"mx-auto min-w-[16rem] w-1/2 max-w-prose",
"grid justify-items-center gap-4",
@class
]}>
<%= render_slot(@inner_block) %>
</div>
</.focus_wrap>
</dialog>
"""
end
@doc """
Renders an input.
Field association generates ID, name, and value out of schema.
Otherwise, a name must be given.
## Examples
<.input field={{f, :email}} type="email" />
<.input name="my-input" errors={["oh no!"]} />
"""
attr :field, :any, doc: "a %Phoenix.HTML.Form{}/field name tuple, for example: {f, :email}"
attr :name, :string
attr :class, :list, default: []
attr :rest, :global, include: ~w(autocomplete disabled form max maxlength min minlength
pattern placeholder readonly required size step)
slot :inner_block
def input(assigns) do
with assigns <- maybe_field(assigns) do
~H"""
<input
id={assigns[:id] || @name}
name={@name}
value={assigns[:value]}
phx-feedback-for={@name}
class={[theme(), text_box(), "w-full", @class]}
{@rest}
/>
"""
end
end
