Packages
phoenix_kit
1.7.178
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_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)
|> 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.app_layout
flash={@flash}
phoenix_kit_current_scope={@phoenix_kit_current_scope}
page_title={@page_title}
current_path={@current_path}
>
{raw(@bg_style_tag)}
<div class="auth-bg min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 -mx-[calc(50vw-50%)] w-[100vw] -my-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.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