Packages
phoenix_kit
1.3.2
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
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/users/magic_link.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title={@page_title}
>
<div class="flex items-center justify-center py-8 min-h-[80vh]">
<div class="card bg-base-100 w-full max-w-sm shadow-2xl">
<div class="card-body">
<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"
>
<fieldset class="fieldset">
<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
id="magic_link_email"
name="magic_link[email]"
type="email"
class="input input-bordered w-full transition-colors focus:input-primary"
placeholder="you@example.com"
value={@form.params["email"] || ""}
required
/>
<button
type="submit"
phx-disable-with="Sending magic link..."
class="btn btn-primary w-full 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>
<%!-- Development Mode Notice --%>
<div :if={show_dev_notice?()} class="alert alert-info text-sm mt-4">
<PhoenixKitWeb.Components.Core.Icons.icon_info class="stroke-current shrink-0 h-6 w-6" />
<span>
Development mode: Check
<.link href="/dev/mailbox" class="font-semibold underline">mailbox</.link>
for confirmation emails
</span>
</div>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-base-300" />
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-base-100 text-base-content/60">Or continue with</span>
</div>
</div>
<div class="mt-4 text-center">
<.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-4 text-sm">
<span>Don't have an account? </span>
<.link
navigate={Routes.path("/users/register")}
class="font-semibold text-primary hover:underline"
>
Sign up
</.link>
</div>
</div>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>