Packages
phoenix_kit
1.7.78
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.Storage.URLSigner
alias PhoenixKit.Settings
alias PhoenixKitWeb.Components.LayoutWrapper
attr :flash, :map, required: true
attr :phoenix_kit_current_scope, :any, default: nil
attr :page_title, :string, required: true
slot :inner_block, required: true
def auth_page_wrapper(assigns) do
assigns =
assigns
|> assign_new(:auth_logo_url, fn ->
case Settings.get_setting("auth_logo_file_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)
assigns = assign(assigns, :bg_style_tag, bg_style_tag(assigns))
~H"""
<LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={@phoenix_kit_current_scope}
page_title={@page_title}
>
{raw(@bg_style_tag)}
<%!-- z-10: above footer (z-auto/0) but below sticky header (z-50) in parent layouts --%>
<div class="auth-bg fixed inset-x-0 top-16 bottom-0 z-10 flex items-center justify-center px-4 py-8 overflow-auto">
<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)}
</div>
</div>
</div>
</LayoutWrapper.app_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