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/login.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title="{@project_title} - Sign in"
>
<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-6">
{@project_title} Sign in
</h1>
<.form
for={@form}
id="login_form"
action={Routes.path("/users/log-in")}
phx-update="ignore"
>
<fieldset class="fieldset">
<legend class="fieldset-legend sr-only">Login with Password</legend>
<label class="label" for="user_email_or_username">
<span class="label-text flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_user_profile class="w-4 h-4 mr-2" />
Email or Username
</span>
</label>
<input
id="user_email_or_username"
name="user[email_or_username]"
type="text"
class="input input-bordered w-full transition-colors focus:input-primary"
placeholder="Enter your email or username"
value={@form.params["email_or_username"] || ""}
autocomplete="username"
required
/>
<label class="label" for="user_password">
<span class="label-text flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_lock class="w-4 h-4 mr-2" /> Password
</span>
</label>
<input
id="user_password"
name="user[password]"
type="password"
class="input input-bordered w-full transition-colors focus:input-primary"
placeholder="Enter your password"
autocomplete="current-password"
required
/>
<div class="form-control mt-4">
<.checkbox
id="user_remember_me"
name="user[remember_me]"
label="Keep me logged in"
/>
</div>
<div class="text-center mt-2">
<.link
href={Routes.path("/users/reset-password")}
class="text-sm font-semibold text-primary hover:underline"
>
Forgot your password?
</.link>
</div>
<button
type="submit"
phx-disable-with="Logging in..."
class="btn btn-primary w-full mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"
>
<PhoenixKitWeb.Components.Core.Icons.icon_login class="w-5 h-5 mr-2" /> Log in
<span aria-hidden="true">→</span>
</button>
</fieldset>
</.form>
<%!-- Alternative authentication methods --%>
<%!-- Only show this section if at least one alternative method is available --%>
<%= if @magic_link_enabled or PhoenixKit.Users.OAuthAvailability.oauth_available?() do %>
<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 space-y-2">
<%!-- Magic Link authentication --%>
<%= if @magic_link_enabled do %>
<.link
navigate={Routes.path("/users/magic-link")}
class="btn btn-outline w-full transition-all hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg"
>
<PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" />
Sign in with Magic Link
</.link>
<% end %>
<%!-- OAuth authentication --%>
<PhoenixKitWeb.Components.OAuthButtons.oauth_buttons show_divider={false} />
</div>
</div>
<% end %>
<%!-- Registration link --%>
<%= if @allow_registration do %>
<div class="text-center mt-4 text-sm">
<span>New to {@project_title}? </span>
<.link
navigate={Routes.path("/users/register")}
class="font-semibold text-primary hover:underline"
>
Create an account
</.link>
</div>
<% end %>
<%!-- 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>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>