Packages

phoenix_kit

1.7.151
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}

  current_path={assigns[:url_path] || "/users/magic-link"}

  dev_mailbox_message={gettext("magic link emails")}

>

  <h1 class="text-2xl font-bold text-center mb-2">{gettext("Magic Link Login")}</h1>

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

    {gettext("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 <fieldset>'s default `min-width: min-content`

         so a long-content child doesn't push the form past the card. --%>

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

      <legend class="fieldset-legend sr-only">{gettext("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" /> {gettext(

            "Email"

          )}

        </span>

      </label>

      <.input

        field={@form[:email]}

        type="email"

        placeholder="you@example.com"

        autocomplete="email"

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

        required

      />



      <%!-- `@loading` already swaps the button content; redundant

           `phx-disable-with` was removed because the double swap

           broke the DOM merge. `min-w-0 max-w-full` belt-and-

           suspenders for the fieldset overflow fix. --%>

      <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>

          {gettext("Sending magic link...")}

        <% else %>

          <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" /> {gettext(

            "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">{gettext("Magic link sent!")}</h3>

      <div class="text-xs">

        {gettext("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>{gettext("Prefer a password?")}</span>

    <.link

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

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

    >

      {gettext("Sign in with password")}

    </.link>

  </div>



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

    <span>{gettext("Don't have an account?")}</span>

    <.link

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

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

    >

      {gettext("Create an account")}

    </.link>

  </div>

</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>