Packages
phoenix_kit
1.7.229
1.7.230
1.7.229
1.7.228
1.7.227
1.7.226
1.7.225
1.7.224
1.7.223
1.7.222
1.7.221
1.7.220
1.7.219
1.7.218
1.7.217
1.7.216
1.7.215
1.7.214
1.7.213
1.7.212
1.7.211
1.7.210
1.7.209
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/components/auth_page_wrapper.ex
defmodule PhoenixKitWeb.Components.AuthPageWrapper do
@moduledoc """
Wrapper component for all auth pages (login, registration, etc.).
Reads branding settings (logo, background image/color) from Settings
and renders a consistent layout with optional custom branding.
Supports separate background images for desktop and mobile viewports.
"""
use Phoenix.Component
import Phoenix.HTML, only: [raw: 1]
alias PhoenixKit.Modules.Languages
alias PhoenixKit.Modules.Storage.URLSigner
alias PhoenixKit.Settings
alias PhoenixKitWeb.Components.Core.DevNotice
alias PhoenixKitWeb.Components.Core.LanguageSwitcher
alias PhoenixKitWeb.Components.LayoutWrapper
attr :flash, :map, required: true
attr :phoenix_kit_current_scope, :any, default: nil
attr :page_title, :string, required: true
attr :current_path, :string, default: nil
attr :dev_mailbox_message, :string,
default: nil,
doc:
"If set, renders <.dev_mailbox_notice message={...} /> below the card in local-mailer dev mode."
slot :inner_block, required: true
def auth_page_wrapper(assigns) do
assigns =
assigns
|> assign_new(:auth_logo_url, fn ->
case Settings.get_logo_uuid() do
uuid when is_binary(uuid) and uuid != "" -> URLSigner.signed_url(uuid, "medium")
_ -> ""
end
end)
|> assign_new(:auth_bg_image, fn ->
case Settings.get_setting("auth_background_image_file_uuid", "") do
uuid when is_binary(uuid) and uuid != "" -> URLSigner.signed_url(uuid, "original")
_ -> ""
end
end)
|> assign_new(:auth_bg_image_mobile, fn ->
case Settings.get_setting("auth_background_image_mobile_file_uuid", "") do
uuid when is_binary(uuid) and uuid != "" -> URLSigner.signed_url(uuid, "original")
_ -> ""
end
end)
|> assign_new(:auth_bg_color, fn -> Settings.get_setting("auth_background_color", "") end)
|> assign_new(:project_title, fn -> Settings.get_project_title() end)
|> assign_new(:show_language_switcher, fn ->
Languages.enabled?() and length(Languages.get_enabled_languages()) > 1
end)
assigns = assign(assigns, :bg_style_tag, bg_style_tag(assigns))
~H"""
<LayoutWrapper.auth_layout
flash={@flash}
phoenix_kit_current_scope={@phoenix_kit_current_scope}
page_title={@page_title}
current_path={@current_path}
>
{raw(@bg_style_tag)}
<%!-- Sizing here is deliberately free of viewport units.
`w-[100vw]` overflowed by exactly the scrollbar-gutter width — the
host root sets `scrollbar-gutter: stable`, so the gutter is always
reserved and 100vw counts it, producing a horizontal scrollbar on a
page that has nothing to scroll. `w-full` is a percentage of the
containing block and excludes it.
`min-h-full` for the same reason: a percentage can never exceed its
parent, so it cannot manufacture a vertical scrollbar either. The
parent's height comes from `auth_layout`'s `min-h-dvh`.
The old `-my-8` / `-mx-[calc(50vw-50%)]` compensated for a chrome
wrapper that auth no longer renders inside. --%>
<div class="auth-bg min-h-full w-full flex items-center justify-center px-4 py-8">
<div class="card bg-base-100 w-full max-w-sm shadow-2xl">
<div class="card-body">
<%= if @auth_logo_url != "" do %>
<div class="flex justify-center mb-6">
<img src={@auth_logo_url} alt={@project_title} class="h-20 object-contain" />
</div>
<% end %>
{render_slot(@inner_block)}
<%= if @show_language_switcher do %>
<div class="flex justify-center mt-4">
<LanguageSwitcher.language_switcher_dropdown
current_path={@current_path}
show_current={true}
/>
</div>
<% end %>
<%= if @dev_mailbox_message do %>
<DevNotice.dev_mailbox_notice message={@dev_mailbox_message} />
<% end %>
</div>
</div>
</div>
</LayoutWrapper.auth_layout>
"""
end
defp bg_style_tag(assigns) do
desktop = bg_css(assigns.auth_bg_image, assigns.auth_bg_color)
mobile =
if assigns.auth_bg_image_mobile != "" do
"@media (max-width: 768px) { .auth-bg { background-image: url('#{assigns.auth_bg_image_mobile}'); } }"
else
""
end
"<style>.auth-bg { #{desktop} background-size: cover; background-position: center; } #{mobile}</style>"
end
defp bg_css("", ""), do: ""
defp bg_css(image_url, _color) when image_url != "",
do: "background-image: url('#{image_url}');"
defp bg_css("", color), do: "background: #{color};"
end