Packages
phoenix_kit
1.7.21
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_registration_request.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title="{@project_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-md shadow-2xl">
<div class="card-body">
<h1 class="text-2xl font-bold text-center mb-2">Register via Magic Link</h1>
<p class="text-center text-base-content/60 text-sm mb-6">
Enter your email to receive a registration link. No password required!
</p>
<%= if @email_sent do %>
<%!-- Success state --%>
<div class="alert alert-success">
<PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled class="fill-current shrink-0 h-6 w-6" />
<div>
<h3 class="font-bold">Email Sent!</h3>
<p class="text-sm">We've sent a registration link to {@email}</p>
</div>
</div>
<div class="bg-base-200 rounded-lg p-4 mt-4">
<p class="text-sm text-base-content/80">
<strong>Next steps:</strong>
</p>
<ol class="list-decimal list-inside text-sm text-base-content/70 mt-2 space-y-1">
<li>Check your email inbox</li>
<li>Click the registration link</li>
<li>Complete your profile</li>
</ol>
</div>
<div class="text-center mt-6">
<p class="text-sm text-base-content/60 mb-2">Didn't receive the email?</p>
<button
phx-click={JS.push("send_magic_link", value: %{email: @email})}
class="btn btn-sm btn-ghost"
>
Resend Link
</button>
</div>
<% else %>
<%!-- Email input form --%>
<form phx-submit="send_magic_link" class="space-y-4">
<%= if @error_message do %>
<div class="alert alert-error text-sm">
<PhoenixKitWeb.Components.Core.Icons.icon_error_circle class="stroke-current shrink-0 h-5 w-5" />
<span>{@error_message}</span>
</div>
<% end %>
<div>
<label class="label" for="email">
<span class="label-text flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_email class="w-4 h-4 mr-2" />
Email Address
</span>
</label>
<input
id="email"
name="email"
type="email"
value={@email}
placeholder="you@example.com"
class="input input-bordered w-full transition-colors focus:input-primary"
required
autofocus
/>
</div>
<button
type="submit"
phx-disable-with="Sending..."
disabled={@loading}
class="btn btn-primary w-full transition-all hover:scale-[1.02] active:scale-[0.98]"
>
<%= if @loading do %>
<span class="loading loading-spinner loading-sm"></span>
<span>Sending...</span>
<% else %>
<PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" />
<span>Send Magic Link</span>
<span aria-hidden="true">→</span>
<% end %>
</button>
</form>
<%!-- Info box --%>
<div class="bg-info/10 border border-info/20 rounded-lg p-4 mt-4">
<div class="flex items-start gap-2">
<PhoenixKitWeb.Components.Core.Icons.icon_info class="stroke-current shrink-0 h-5 w-5 text-info mt-0.5" />
<div class="text-sm text-base-content/70">
<p class="font-semibold text-base-content mb-1">Passwordless Registration</p>
<p>
We'll send you a secure link to complete your registration. The link expires in 30 minutes.
</p>
</div>
</div>
</div>
<% end %>
<%!-- Alternative options --%>
<div class="divider mt-6">Other options</div>
<div class="space-y-2">
<.link
navigate={Routes.path("/users/register")}
class="btn btn-outline w-full"
>
<PhoenixKitWeb.Components.Core.Icons.icon_user_add class="w-5 h-5 mr-2" />
Register with Password
</.link>
<.link
navigate={Routes.path("/users/log-in")}
class="btn btn-ghost w-full"
>
Already have an account? Sign in
</.link>
</div>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>