Packages

phoenix_kit

1.7.118
1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
222 Versions
45 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web users magic_link.html.heex
Raw

lib/phoenix_kit_web/users/magic_link.html.heex 

<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title={@page_title}

>

  <h1 class="text-2xl font-bold text-center mb-2">Magic Link Login</h1>

  <p class="text-center text-base-content/60 text-sm mb-6">

    Enter your email to receive a secure login link

  </p>



  <.form

    for={@form}

    id="magic_link_form"

    phx-submit="send_magic_link"

    phx-change="validate"

  >

    <%!--

      `min-w-0` overrides the browser-default `min-width: min-content`

      on <fieldset>, which would otherwise let the fieldset grow past

      its parent <form>'s width whenever a child has a longer

      intrinsic width (the icon + "Send Magic Link →" content). With

      `min-w-0` the fieldset honors the form's flex container width,

      so the `w-full` submit button no longer overflows the card.

    --%>

    <fieldset class="fieldset min-w-0">

      <legend class="fieldset-legend sr-only">Magic Link Authentication</legend>



      <div :if={@error} class="alert alert-error text-sm mb-4">

        <PhoenixKitWeb.Components.Core.Icons.icon_error_circle class="stroke-current shrink-0 h-6 w-6" />

        <span>{@error}</span>

      </div>



      <label class="label" for="magic_link_email">

        <span class="label-text flex items-center">

          <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-4 h-4 mr-2" /> Email

        </span>

      </label>

      <.input

        field={@form[:email]}

        type="email"

        placeholder="you@example.com"

        autocomplete="email"

        class="transition-colors focus:input-primary"

        required

      />



      <%!--

        No `phx-disable-with` here: the `@loading` branch already

        swaps the button to the spinner + "Sending magic link…"

        state on submit, and the two mechanisms conflict — when

        both fire on the same submit Phoenix LV's diff merger

        injects a stray empty `<svg data-phx-skip>` into the button

        (~183px wide) from the success-alert icon below, which then

        forces the text to wrap onto 3 lines and look broken.

        `min-w-0` + `max-w-full` belt-and-suspenders against the

        fieldset overflow bug.

      --%>

      <button

        type="submit"

        class="btn btn-primary w-full max-w-full min-w-0 mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"

        disabled={@loading || @sent}

      >

        <%= if @loading do %>

          <span class="loading loading-spinner loading-sm mr-2"></span> Sending magic link...

        <% else %>

          <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" /> Send Magic Link

          <span aria-hidden="true">→</span>

        <% end %>

      </button>

    </fieldset>

  </.form>



  <div :if={@sent} class="alert alert-success mt-4">

    <PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled class="stroke-current shrink-0 h-6 w-6" />

    <div>

      <h3 class="font-bold">Magic link sent!</h3>

      <div class="text-xs">

        Check your email for a secure login link. The link will expire in 15 minutes.

      </div>

    </div>

  </div>



  <div class="text-center mt-4 text-sm">

    <span>Prefer a password? </span>

    <.link

      navigate={Routes.path("/users/log-in")}

      class="font-semibold text-primary hover:underline"

    >

      Sign in with password

    </.link>

  </div>



  <div class="text-center mt-2 text-sm">

    <span>Don't have an account? </span>

    <.link

      navigate={Routes.path("/users/register")}

      class="font-semibold text-primary hover:underline"

    >

      Create an account

    </.link>

  </div>



  <%!-- Development Mode Notice --%>

  <.dev_mailbox_notice message="magic link emails" />

</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>