<%!-- Header Section --%>
<%!-- Back Button (Left aligned) --%> <.link navigate={PhoenixKit.Utils.Routes.path("/admin")} class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12" > Back to Dashboard <%!-- Title Section --%>

Settings

Configure system preferences and options

<%!-- Settings Form --%>

System Configuration

<.form :let={_form} for={@changeset} id="settings_form" phx-submit="save_settings" phx-change="validate_settings" class="space-y-6" > <%!-- Hidden fields for required settings from Users page --%> <%!-- Use @saved_settings to preserve database values, not @settings which may have incorrect form state --%> <%!-- Project Title Setting --%>
<%= if @settings["project_title"] != @saved_settings["project_title"] do %> Selected: {@settings["project_title"]} | Saved: {@saved_settings["project_title"]} <% else %> Saved: {@settings["project_title"]} <% end %>
<%!-- Site Address URL Setting --%>
<%= if @settings["site_url"] != @saved_settings["site_url"] do %> Selected: {if @settings["site_url"] != "", do: @settings["site_url"], else: "(empty)"} | Saved: {if @saved_settings["site_url"] != "", do: @saved_settings["site_url"], else: "(empty)"} <% else %> Saved: {if @settings["site_url"] != "", do: @settings["site_url"], else: "(empty)"} <% end %>
<%!-- Authentication Methods Setting --%>
<%!-- Magic Link Methods --%>
Magic Link
Enable Magic Link for login
Enable Magic Link for registration
<%!-- OAuth Methods --%>
OAuth Providers
Enable OAuth (Master Switch)
<%!-- Individual OAuth Providers (disabled if master is off) --%>
Google Sign-In
Apple Sign-In
GitHub Sign-In
Facebook Sign-In
<%!-- OAuth Provider Credential Forms --%> <%= if @settings["oauth_enabled"] == "true" do %> <%!-- Google OAuth Credentials --%>

Google OAuth Credentials

<%!-- Google OAuth Setup Instructions --%>
Setup Instructions
<%!-- Callback URL Section --%>
<.icon name="hero-information-circle" class="stroke-current shrink-0 h-5 w-5 text-info mt-0.5" />
Callback URL
{get_oauth_callback_url(@settings, "google")}
Copy this URL to Google Cloud Console
<%!-- Step-by-step Instructions --%>
  1. Visit Google Cloud Console
  2. Create project or select existing one
  3. Go to Credentials → Create Credentials → OAuth client ID
  4. Select Web application type
  5. Add callback URL above to Authorized redirect URIs
  6. Copy Client ID and Secret to fields above
  7. Click Test Credentials to verify setup
<%!-- Reverse Proxy Notice --%>
<.icon name="hero-information-circle" class="h-4 w-4 text-info shrink-0 mt-0.5" />
Reverse Proxy Users: If behind nginx/apache, ensure X-Forwarded-Proto header is set to https
<%!-- Apple OAuth Credentials --%>

Apple OAuth Credentials

<%!-- Apple OAuth Setup Instructions --%>
Setup Instructions
<%!-- Callback URL Section --%>
<.icon name="hero-information-circle" class="stroke-current shrink-0 h-5 w-5 text-info mt-0.5" />
Callback URL
{get_oauth_callback_url(@settings, "apple")}
Copy this URL to Apple Developer Console
<%!-- Step-by-step Instructions --%>
  1. Visit Apple Developer Console
  2. Create an App ID or select existing one
  3. Enable Sign in with Apple capability
  4. Create a Services ID for web authentication
  5. Configure Sign in with Apple for the Services ID
  6. Add callback URL above to Return URLs
  7. Create a Private Key with Sign in with Apple enabled
  8. Copy Team ID, Key ID, Client ID (Services ID), and Private Key to fields above
  9. Click Test Credentials to verify setup
<%!-- Reverse Proxy Notice --%>
<.icon name="hero-information-circle" class="h-4 w-4 text-info shrink-0 mt-0.5" />
Reverse Proxy Users: If behind nginx/apache, ensure X-Forwarded-Proto header is set to https
<%!-- GitHub OAuth Credentials --%>

GitHub OAuth Credentials

<%!-- GitHub OAuth Setup Instructions --%>
Setup Instructions
<%!-- Callback URL Section --%>
<.icon name="hero-information-circle" class="stroke-current shrink-0 h-5 w-5 text-info mt-0.5" />
Callback URL
{get_oauth_callback_url(@settings, "github")}
Copy this URL to GitHub OAuth Apps
<%!-- Step-by-step Instructions --%>
  1. Visit GitHub Developer Settings
  2. Go to OAuth Apps → New OAuth App
  3. Enter Application name and Homepage URL
  4. Add callback URL above to Authorization callback URL
  5. Click Register application
  6. Copy Client ID and generate/copy Client Secret
  7. Click Test Credentials to verify setup
<%!-- Reverse Proxy Notice --%>
<.icon name="hero-information-circle" class="h-4 w-4 text-info shrink-0 mt-0.5" />
Reverse Proxy Users: If behind nginx/apache, ensure X-Forwarded-Proto header is set to https
<%!-- Facebook OAuth Credentials --%>

Facebook OAuth Credentials

<%!-- Facebook OAuth Setup Instructions --%>
Setup Instructions
<%!-- Callback URL Section --%>
<.icon name="hero-information-circle" class="stroke-current shrink-0 h-5 w-5 text-info mt-0.5" />
Callback URL
{get_oauth_callback_url(@settings, "facebook")}
Copy this URL to Facebook App Settings
<%!-- Step-by-step Instructions --%>
  1. Visit Facebook Developers Console
  2. Create a new app or select existing one
  3. Add Facebook Login product
  4. Go to Facebook Login → Settings
  5. Add callback URL above to Valid OAuth Redirect URIs
  6. Go to Settings → Basic
  7. Copy App ID and App Secret to fields above
  8. Switch app from Development to Live mode
  9. Click Test Credentials to verify setup
<%!-- Reverse Proxy Notice --%>
<.icon name="hero-information-circle" class="h-4 w-4 text-info shrink-0 mt-0.5" />
Reverse Proxy Users: If behind nginx/apache, ensure X-Forwarded-Proto header is set to https
<%!-- OAuth Configuration Notice --%>
<.icon name="hero-information-circle" class="stroke-current shrink-0 h-5 w-5" />
OAuth Setup Instructions

1. Enable the provider above and save settings

2. Enter your OAuth credentials in the form that appears

3. Save settings again to store credentials

4. Click "Test Credentials" to verify configuration

Note: OAuth providers require ueberauth dependencies to be installed.

<%!-- Reload OAuth Configuration Button --%> <% end %>
<%!-- Week Start Day Setting --%>
<%= if @settings["week_start_day"] != @saved_settings["week_start_day"] do %> Selected: {get_option_label( @settings["week_start_day"], @setting_options["week_start_day"] )} | Saved: {get_option_label( @saved_settings["week_start_day"], @setting_options["week_start_day"] )} <% else %> Saved: {get_option_label( @settings["week_start_day"], @setting_options["week_start_day"] )} <% end %>
<%!-- Time Zone Setting --%>
<%= if @settings["time_zone"] != @saved_settings["time_zone"] do %> Selected: {get_timezone_label(@settings["time_zone"], @setting_options)} | Saved: {get_timezone_label(@saved_settings["time_zone"], @setting_options)} <% else %> Saved: {get_timezone_label(@settings["time_zone"], @setting_options)} <% end %>
<%!-- Date Format Setting --%>
<%= if @settings["date_format"] != @saved_settings["date_format"] do %> Selected: {get_option_label( @settings["date_format"], @setting_options["date_format"] )} | Saved: {get_option_label( @saved_settings["date_format"], @setting_options["date_format"] )} <% else %> Saved: {get_option_label( @settings["date_format"], @setting_options["date_format"] )} <% end %>
<%!-- Time Format Setting --%>
<%= if @settings["time_format"] != @saved_settings["time_format"] do %> Selected: {get_option_label( @settings["time_format"], @setting_options["time_format"] )} | Saved: {get_option_label( @saved_settings["time_format"], @setting_options["time_format"] )} <% else %> Saved: {get_option_label( @settings["time_format"], @setting_options["time_format"] )} <% end %>
<%!-- Content Language Section --%>
<%!-- Info Alert --%>
<.icon name="hero-information-circle" class="w-5 h-5" />

Content Language vs Interface Language

Content Language: The language your website content is written in (blog posts, pages, etc.)

Interface Language: The language of buttons, menus, and labels (managed in Languages module)

<%= if @languages_enabled do %> <%!-- Languages Module Enabled - Show Dropdown --%>
Current content language: {@content_language_details.name}
<% else %> <%!-- Languages Module Disabled - Show Greyed Out Field --%>
Enable the <.link navigate={PhoenixKit.Utils.Routes.path("/admin/modules/languages")} class="link link-primary" > Languages module to change or add content languages
<% end %> <%!-- Current Setting Display --%>
Content Language Code
{@content_language}
Used in HTML lang attribute: <html lang="{@content_language}">
<%!-- Admin Navbar Languages Section --%>
<%!-- Info Alert --%>
<.icon name="hero-information-circle" class="w-5 h-5" />

Admin Panel Languages

Select which languages are available in the admin panel navbar language switcher. This is independent from the website's content languages.

<%!-- Admin Languages Selection --%>
<%!-- Multi-select Dropdown for Admin Languages --%>
<%!-- Hidden field to store admin languages as JSON --%> <%!-- Warning if no languages selected --%> <%= if Enum.empty?(@admin_languages || []) do %>
No admin languages selected. At least one language is recommended.
<% end %>
<%!-- Action Buttons --%>
<%!-- Information Panel --%>
Information
💡

About System Settings

  • • Make changes to dropdowns and click "Save All Settings" to apply
  • • Changes show "Selected" vs "Saved" values until you click Save
  • • User settings (registration, defaults, custom fields) are managed separately
  • • Week start day controls which day begins the week (useful for calendar features)
  • • Time zone affects date/time display throughout the system
  • • Date formats control how dates appear (e.g. Users dashboard "Registered" field)
  • • Time formats control 12-hour vs 24-hour time display
  • • Settings are applied system-wide and use Timex for robust formatting
  • • Currently supports 6 date formats including "September 2, 2025" style