Current section
Files
Jump to
Current section
Files
lib/phoenix_kit/modules/emails/web/settings.html.heex
<div class="container flex flex-col mx-auto px-4 py-6">
<%!-- Main Content --%>
<div class="space-y-8">
<%= if @email_enabled do %>
<%!-- Sender Configuration Card --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-envelope" class="w-6 h-6" /> {gettext("Sender Configuration")}
</h2>
<form phx-submit="save_sender_settings">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<%!-- From Email --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">{gettext("From Email")}</span>
</label>
<input
name="sender[from_email]"
type="email"
placeholder="noreply@example.com"
value={@sender_settings.from_email}
class="input input-bordered focus:input-primary"
required
/>
<label class="label">
<span class="label-text-alt">
{gettext("Email address used as sender for all outgoing emails")}
</span>
</label>
</div>
<%!-- From Name --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">{gettext("From Name")}</span>
</label>
<input
name="sender[from_name]"
type="text"
placeholder="My Application"
value={@sender_settings.from_name}
class="input input-bordered focus:input-primary"
required
/>
<label class="label">
<span class="label-text-alt">
{gettext("Sender name displayed to recipients")}
</span>
</label>
</div>
</div>
<%!-- Save Button --%>
<div class="card-actions justify-end">
<button
type="submit"
class={[
"btn btn-primary",
if(@saving_sender, do: "loading", else: "")
]}
disabled={@saving_sender}
>
<%= if @saving_sender do %>
{gettext("Saving...")}
<% else %>
<.icon name="hero-check" class="w-4 h-4 mr-2" /> {gettext(
"Save Sender Settings"
)}
<% end %>
</button>
</div>
</form>
</div>
</div>
<%!-- Options Card --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-adjustments-horizontal" class="w-6 h-6" /> {gettext("Options")}
</h2>
<%!-- Save Email Bodies --%>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("Save Email Bodies")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext("Store the full content of sent emails for debugging and analysis")}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-secondary"
checked={@email_save_body}
phx-click="toggle_email_save_body"
/>
</label>
</div>
<div class="divider"></div>
<%!-- Save Email Headers --%>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("Save Email Headers")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext(
"Store email headers for debugging and analysis (increases storage usage)"
)}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-secondary"
checked={@email_save_headers}
phx-click="toggle_email_save_headers"
/>
</label>
</div>
<div class="divider"></div>
<%!-- AWS SES Events --%>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("AWS SES Events Options")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext("Track delivery, bounce, and complaint events from Amazon SES")}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-accent"
checked={@email_ses_events}
phx-click="toggle_email_ses_events"
/>
</label>
</div>
<div class="divider"></div>
<%!-- Sampling Rate --%>
<div class="form-control">
<label class="label">
<span class="label-text text-lg font-semibold">
{gettext("Emails Sampling Rate")}
</span>
</label>
<div class="input-group">
<input
name="sampling_rate"
type="number"
placeholder={gettext("Enter sampling rate")}
class="input input-bordered w-full max-w-xs"
value={@email_sampling_rate}
min="0"
max="100"
phx-blur="update_email_sampling_rate"
/>
<span class="bg-base-200 px-4 py-3 text-sm">%</span>
</div>
<label class="label">
<span class="label-text-alt text-base-content/70">
{gettext("Percentage of emails to fully track for analytics (0-100%)")}
</span>
</label>
</div>
</div>
</div>
<%!-- Data Retention Card --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-archive-box" class="w-6 h-6" /> {gettext("Data Retention")}
</h2>
<div class="form-control">
<label class="label">
<span class="label-text text-lg font-semibold">
{gettext("Email Retention Period")}
</span>
</label>
<div class="flex gap-2 items-start">
<div class="input-group flex-1">
<input
name="retention_days"
type="number"
placeholder={gettext("Enter retention days")}
class="input input-bordered w-full max-w-xs"
value={@email_retention_days}
min="1"
max="365"
phx-blur="update_email_retention"
/>
<span class="bg-base-200 px-4 py-3 text-sm">{gettext("days")}</span>
</div>
<button
type="button"
phx-click="run_cleanup_now"
class={[
"btn btn-warning btn-sm",
if(assigns[:running_cleanup], do: "loading", else: "")
]}
disabled={assigns[:running_cleanup]}
>
<%= if assigns[:running_cleanup] do %>
{gettext("Running...")}
<% else %>
<.icon name="hero-trash" class="w-4 h-4 mr-1" /> {gettext("Run Cleanup Now")}
<% end %>
</button>
</div>
<label class="label">
<span class="label-text-alt text-base-content/70">
{gettext("How long to keep emails data before automatic cleanup (1-365 days)")}
</span>
</label>
</div>
<div class="divider"></div>
<%= if @email_save_body do %>
<%!-- Compress Body After Days --%>
<div class="form-control">
<label class="label">
<span class="label-text text-lg font-semibold">
{gettext("Compress Email Bodies After")}
</span>
<span class="label-text-alt text-base-content/70">
{gettext("Auto-saves when you click outside the input field")}
</span>
</label>
<div class="flex gap-2 items-start">
<div class="input-group flex-1">
<input
name="compress_days"
type="number"
placeholder={gettext("Enter compression days")}
class={[
"input input-bordered w-full max-w-xs",
"transition-colors duration-200",
"focus:input-primary",
if(assigns[:updating_compress_days],
do: "input-warning loading",
else: ""
)
]}
value={@email_compress_body}
min="7"
max="365"
phx-blur="update_compress_days"
phx-focus="set_compress_days_focused"
phx-keydown="set_compress_days_changed"
/>
<span class="bg-base-200 px-4 py-3 text-sm">{gettext("days")}</span>
</div>
<button
type="button"
phx-click="run_compression_now"
class={[
"btn btn-info btn-sm",
if(assigns[:running_compression], do: "loading", else: "")
]}
disabled={assigns[:running_compression]}
>
<%= if assigns[:running_compression] do %>
{gettext("Compressing...")}
<% else %>
<.icon name="hero-archive-box-arrow-down" class="w-4 h-4 mr-1" />
{gettext("Compress Now")}
<% end %>
</button>
</div>
<label class="label">
<span class="label-text-alt text-base-content/70">
<span class="flex items-center gap-1">
<.icon name="hero-information-circle" class="w-3 h-3" />
{gettext(
"Compress old email bodies to save storage space (7-365 days). Changes are saved automatically."
)}
</span>
</span>
</label>
</div>
<div class="divider"></div>
<% end %>
<%!-- S3 Archival Toggle --%>
<div class="form-control mb-4">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("Enable S3 Archival")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext("Move old email data to AWS S3 for long-term cold storage")}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-warning"
checked={@email_archive_to_s3}
phx-click="toggle_s3_archival"
/>
</label>
</div>
<%= if @email_archive_to_s3 do %>
<%!-- S3 Archival Action Button --%>
<div class="form-control mt-2">
<div class="flex gap-2 items-start">
<div class="flex-1">
<span class="text-sm text-base-content/70">
{gettext(
"Manually trigger S3 archival for emails older than retention period"
)}
</span>
</div>
<button
type="button"
phx-click="run_s3_archival_now"
class={[
"btn btn-warning btn-sm",
if(assigns[:running_archival], do: "loading", else: "")
]}
disabled={assigns[:running_archival]}
>
<%= if assigns[:running_archival] do %>
{gettext("Archiving...")}
<% else %>
<.icon name="hero-cloud-arrow-up" class="w-4 h-4 mr-1" />
{gettext("Archive to S3 Now")}
<% end %>
</button>
</div>
</div>
<% end %>
<div class="alert alert-warning mt-4">
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Data Privacy Notice")}</h3>
<p class="text-sm mt-1">
{gettext(
"Email data will be automatically deleted after the retention period expires. This helps maintain privacy compliance and reduces storage requirements."
)}
</p>
</div>
</div>
</div>
</div>
<%!-- AWS Configuration Card --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-cog-6-tooth" class="w-6 h-6" /> {gettext("AWS Configuration")}
</h2>
<%!-- AWS Setup Guide (daisyUI collapse) --%>
<div class="collapse collapse-arrow bg-base-200 mb-6">
<input type="checkbox" class="peer" />
<div class="collapse-title text-sm font-medium">
<span class="flex items-center gap-2">
<.icon name="hero-book-open" class="w-5 h-5" /> {gettext("AWS Setup Guide")}
</span>
</div>
<div class="collapse-content text-sm space-y-4">
<%!-- Step 1: Create IAM User --%>
<div class="bg-base-100 border border-base-300 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-base-content">{gettext("1. Create IAM User")}</h4>
<ol class="list-decimal list-inside space-y-2 text-base-content/80">
<li>
{gettext("Visit")}
<a
href="https://console.aws.amazon.com/iam/"
target="_blank"
class="link link-primary"
>
{gettext("AWS IAM Console")}
</a>
</li>
<li>{gettext("Create new user with programmatic access")}</li>
<li>
{gettext("Attach policies:")}
<strong>SES</strong>, <strong>SQS</strong>, <strong>SNS</strong>,
<strong>STS:GetCallerIdentity</strong>
</li>
<li>{gettext("Save Access Key ID and Secret Access Key")}</li>
</ol>
</div>
<%!-- Step 2: Configure Credentials --%>
<div class="bg-base-100 border border-base-300 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-base-content">{gettext("2. Configure Credentials")}</h4>
<ol class="list-decimal list-inside space-y-2 text-base-content/80">
<li>
{Phoenix.HTML.raw(
gettext("Enter Access Key ID (20 characters, e.g., <code>%{example}</code>)",
example: "AKIAIOSFODNN7EXAMPLE"
)
)}
</li>
<li>{gettext("Enter Secret Access Key")}</li>
<li>{gettext("Enter AWS Region manually (e.g., eu-north-1)")}</li>
<li>
{Phoenix.HTML.raw(
gettext("Click <strong>\"%{button}\"</strong> to test connectivity",
button: gettext("Verify Credentials")
)
)}
</li>
<li>
<em>{gettext("Optional:")}</em>
{Phoenix.HTML.raw(
gettext("Click <strong>\"%{button}\"</strong> to see all available regions",
button: gettext("Load regions")
)
)}
</li>
</ol>
</div>
<%!-- Step 3: Setup Infrastructure --%>
<div class="bg-base-100 border border-base-300 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-base-content">
{gettext("3. Setup Infrastructure")}
</h4>
<ol class="list-decimal list-inside space-y-2 text-base-content/80">
<li>
{Phoenix.HTML.raw(
gettext("Click <strong>\"%{button}\"</strong> to create SNS/SQS resources",
button: gettext("Setup AWS Infrastructure")
)
)}
</li>
<li>{gettext("Wait for setup completion (typically 30-60 seconds)")}</li>
<li>
{gettext("All created resources will be automatically filled in the form below")}
</li>
<li>
{Phoenix.HTML.raw(
gettext("Click <strong>\"%{button}\"</strong> one more time to persist everything",
button: gettext("Save AWS Settings")
)
)}
</li>
</ol>
</div>
<%!-- Step 4: Verify Email --%>
<div class="bg-base-100 border border-base-300 rounded-lg p-4">
<h4 class="font-semibold mb-2 text-base-content">
{gettext("4. Verify Email/Domain in SES")}
</h4>
<ol class="list-decimal list-inside space-y-2 text-base-content/80">
<li>
{gettext("Go to")}
<a
href="https://console.aws.amazon.com/ses/"
target="_blank"
class="link link-primary"
>
{gettext("AWS SES Console")}
</a>
</li>
<li>{gettext("Verify your sender email address or domain")}</li>
<li>{gettext("Request production access (if needed to exit sandbox mode)")}</li>
</ol>
</div>
<%!-- Required Permissions --%>
<div class="bg-base-200 border border-base-300 rounded-lg p-3 text-xs">
<div class="flex items-start gap-2">
<.icon
name="hero-information-circle"
class="h-4 w-4 text-info shrink-0 mt-0.5"
/>
<div class="text-base-content/80">
<strong class="text-base-content">{gettext("Required IAM Permissions:")}</strong>
<ul class="list-disc list-inside mt-1 space-y-1">
<li><code>sqs:*</code> - {gettext("Simple Queue Service")}</li>
<li><code>sns:*</code> - {gettext("Simple Notification Service")}</li>
<li><code>ses:*</code> - {gettext("Simple Email Service")}</li>
<li><code>sts:GetCallerIdentity</code> - {gettext("Credential verification")}</li>
</ul>
</div>
</div>
</div>
<%!-- Full Documentation Link --%>
<div class="bg-base-200 border border-base-300 rounded-lg p-3 text-xs">
<div class="flex items-start gap-2">
<.icon
name="hero-book-open"
class="h-4 w-4 text-success shrink-0 mt-0.5"
/>
<div class="text-base-content/80">
<strong class="text-base-content">{gettext("Need more help?")}</strong>
<p class="mt-1">
{Phoenix.HTML.raw(
gettext("See <code>guides/aws_email_setup.md</code> for comprehensive documentation including security best practices, cost optimization, and troubleshooting.")
)}
</p>
</div>
</div>
</div>
</div>
</div>
<%!-- Credentials Verification Section --%>
<.aws_credentials_verify
access_key_id={@aws_settings.access_key_id}
secret_access_key={@aws_settings.secret_access_key}
region={@aws_settings.region}
verifying={@verifying_credentials}
verified={@credential_verification_status}
message={@credential_verification_message}
permissions={@aws_permissions}
phx_click="verify_aws_credentials"
disabled={@saving or @setting_up_aws}
/>
<form phx-submit="save_aws_settings">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<%!-- AWS Access Key ID --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">{gettext("AWS Access Key ID")}</span>
</label>
<input
name="aws_settings[access_key_id]"
type="text"
placeholder="AKIAIOSFODNN7EXAMPLE"
value={@aws_settings.access_key_id}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt text-sm text-base-content/70">
{gettext("Example: AKIAIOSFODNN7EXAMPLE (20 characters)")}
</span>
</label>
</div>
<%!-- AWS Secret Access Key --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">{gettext("AWS Secret Access Key")}</span>
</label>
<input
name="aws_settings[secret_access_key]"
type="password"
placeholder="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
value={@aws_settings.secret_access_key}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt text-sm text-base-content/70">
{gettext("Example: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY")}
</span>
</label>
</div>
<%!-- AWS Region --%>
<div class="form-control md:col-span-2">
<div class="flex gap-2">
<.aws_region_select
id="aws-region-select"
name="aws_settings[region]"
value={@aws_settings.region}
regions={@available_regions}
regions_loaded={@regions_loaded}
selected_region={@selected_region}
verifying={@verifying_credentials}
verified={@credential_verification_status}
phx_change="select_region"
class="flex-1"
/>
<%!-- Button to load/refresh regions --%>
<button
type="button"
phx-click="fetch_available_regions"
disabled={
@verifying_credentials or String.trim(@aws_settings.access_key_id) == "" or
String.trim(@aws_settings.secret_access_key) == ""
}
class="btn btn-outline btn-sm h-fit"
title={
if @regions_loaded,
do: gettext("Refresh regions list"),
else: gettext("Load available regions")
}
>
<%= if @verifying_credentials do %>
<span class="loading loading-spinner loading-xs"></span>
<% else %>
<.icon name="hero-arrow-path" class="w-4 h-4" />
<% end %>
</button>
</div>
<%!-- Helper text is now in the component itself --%>
</div>
</div>
<%= if @email_ses_events do %>
<%!-- Advanced AWS Settings (collapse) --%>
<div class="collapse collapse-arrow bg-base-200 mt-4">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">
<span class="flex items-center gap-2">
<.icon name="hero-cog-6-tooth" class="w-5 h-5" /> {gettext(
"Advanced AWS Settings"
)}
</span>
</div>
<div class="collapse-content text-sm space-y-4">
<p class="text-base-content/70 mb-4">
{gettext(
"These settings are automatically configured when you run \"Setup AWS Infrastructure\". Manual changes may break the integration."
)}
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<%!-- SES Configuration Set --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">
{gettext("SES Configuration Set")}
</span>
</label>
<input
name="aws_settings[ses_configuration_set]"
type="text"
placeholder="phoenixkit-emails"
value={@aws_settings.ses_configuration_set}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt">
{gettext("SES configuration set name")}
</span>
</label>
</div>
<%!-- SNS Topic ARN --%>
<div class="form-control md:col-span-2">
<label class="label">
<span class="label-text font-medium">{gettext("SNS Topic ARN")}</span>
</label>
<input
name="aws_settings[sns_topic_arn]"
type="text"
placeholder="arn:aws:sns:eu-north-1:123456789012:email-events"
value={@aws_settings.sns_topic_arn}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt">
{gettext("SNS topic for email events")}
</span>
</label>
</div>
<%!-- SQS Queue URL --%>
<div class="form-control md:col-span-2">
<label class="label">
<span class="label-text font-medium">{gettext("SQS Queue URL")}</span>
</label>
<input
name="aws_settings[sqs_queue_url]"
type="url"
placeholder="https://sqs.eu-north-1.amazonaws.com/123456789012/email-events"
value={@aws_settings.sqs_queue_url}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt">
{gettext("Main queue for email events")}
</span>
</label>
</div>
<%!-- SQS Queue ARN --%>
<div class="form-control md:col-span-1">
<label class="label">
<span class="label-text font-medium">{gettext("SQS Queue ARN")}</span>
</label>
<input
name="aws_settings[sqs_queue_arn]"
type="text"
placeholder="arn:aws:sqs:eu-north-1:123456789012:email-events"
value={@aws_settings.sqs_queue_arn}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt">
{gettext("SQS queue ARN for permissions")}
</span>
</label>
</div>
<%!-- SQS DLQ URL --%>
<div class="form-control md:col-span-1">
<label class="label">
<span class="label-text font-medium">
{gettext("SQS Dead Letter Queue URL")}
</span>
</label>
<input
name="aws_settings[sqs_dlq_url]"
type="url"
placeholder="https://sqs.eu-north-1.amazonaws.com/123456789012/email-events-dlq"
value={@aws_settings.sqs_dlq_url}
class="input input-bordered focus:input-primary"
/>
<label class="label">
<span class="label-text-alt">
{gettext("Dead letter queue for failed messages")}
</span>
</label>
</div>
</div>
</div>
</div>
<%!-- SQS Worker Settings (collapse) --%>
<div class="collapse collapse-arrow bg-base-200 mt-4">
<input type="checkbox" />
<div class="collapse-title text-sm font-medium">
<span class="flex items-center gap-2">
<.icon name="hero-cog-6-tooth" class="w-5 h-5" /> {gettext(
"SQS Worker Settings"
)}
</span>
</div>
<div class="collapse-content text-sm space-y-4">
<%!-- Enable SQS Polling --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">{gettext("Enable SQS Polling")}</span>
<div class="text-sm text-base-content/70 mt-1">
{gettext(
"Automatically poll SQS queue for email events in background"
)}
</div>
</span>
<input
type="checkbox"
class="toggle toggle-info"
checked={@sqs_polling_enabled}
phx-click="toggle_sqs_polling"
/>
</label>
</div>
<%!-- SQS Polling Interval --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">
{gettext("SQS Polling Interval")}
</span>
</label>
<div class="input-group">
<input
name="aws_settings[sqs_polling_interval_ms]"
type="number"
placeholder="5000"
value={@aws_settings.sqs_polling_interval_ms}
class="input input-bordered focus:input-primary w-full max-w-xs"
min="1000"
max="60000"
/>
<span class="bg-base-200 px-4 py-3 text-sm">ms</span>
</div>
<label class="label">
<span class="label-text-alt">
{gettext("How often to check for SQS messages (1-60 seconds)")}
</span>
</label>
</div>
<%= if @sqs_polling_enabled do %>
<%!-- SQS Max Messages Per Poll --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">
{gettext("Max Messages Per Poll")}
</span>
</label>
<div class="input-group">
<input
name="max_messages"
type="number"
placeholder={gettext("Enter max messages")}
class="input input-bordered w-full max-w-xs"
value={@sqs_max_messages_per_poll}
min="1"
max="10"
phx-blur="update_max_messages"
/>
<span class="bg-base-200 px-4 py-3 text-sm">{gettext("messages")}</span>
</div>
<label class="label">
<span class="label-text-alt text-base-content/70">
{gettext(
"Maximum number of messages to process in each polling cycle (1-10)"
)}
</span>
</label>
</div>
<%!-- SQS Visibility Timeout --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">
{gettext("Visibility Timeout")}
</span>
</label>
<div class="input-group">
<input
name="timeout"
type="number"
placeholder={gettext("Enter timeout")}
class="input input-bordered w-full max-w-xs"
value={@sqs_visibility_timeout}
min="30"
max="43200"
phx-blur="update_visibility_timeout"
/>
<span class="bg-base-200 px-4 py-3 text-sm">{gettext("seconds")}</span>
</div>
<label class="label">
<span class="label-text-alt text-base-content/70">
{gettext(
"How long messages remain invisible after being received (30-43200 seconds)"
)}
</span>
</label>
</div>
<% end %>
<%!-- Performance Optimization Tips --%>
<div class="p-4 bg-blue-50 border border-blue-200 rounded-md">
<h4 class="font-semibold text-blue-900 mb-2 flex items-center gap-2">
<.icon name="hero-light-bulb" class="w-4 h-4" /> {gettext(
"Performance Tips"
)}
</h4>
<ul class="text-sm text-blue-800 space-y-1">
<li>
• {gettext(
"Use longer polling intervals (5-10 seconds) to reduce API calls"
)}
</li>
<li>• {gettext("Set visibility timeout to match processing time")}</li>
<li>
• {gettext("Monitor queue depth and adjust max messages accordingly")}
</li>
<li>• {gettext("Enable compression to reduce storage requirements")}</li>
</ul>
</div>
</div>
</div>
<% end %>
<%!-- Warning for credentials changes --%>
<%= if String.trim(@aws_settings.access_key_id) != "" or String.trim(@aws_settings.secret_access_key) != "" do %>
<div class="alert alert-warning mb-4">
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Configuration Changes Detected")}</h3>
<p class="text-sm mt-1">
{gettext(
"You've modified your AWS credentials. Click \"Save AWS Settings\" first, then use \"Setup AWS Infrastructure\" to create the required resources."
)}
</p>
</div>
</div>
<% end %>
<%!-- Action Buttons --%>
<div class="flex flex-col sm:flex-row gap-4 mt-6">
<div class="flex-1">
<button
type="submit"
class={[
"btn btn-primary w-full sm:w-auto",
if(@saving, do: "loading", else: "")
]}
disabled={@saving or @verifying_credentials}
>
<%= if @saving do %>
{gettext("Saving...")}
<% else %>
<.icon name="hero-check" class="w-4 h-4 mr-2" /> {gettext(
"Save AWS Settings"
)}
<% end %>
</button>
</div>
<div class="flex-1">
<button
type="button"
phx-click="setup_aws_infrastructure"
class={[
"btn btn-accent w-full sm:w-auto",
if(@setting_up_aws, do: "loading", else: "")
]}
disabled={
@setting_up_aws or @saving or String.trim(@aws_settings.access_key_id) == "" or
String.trim(@aws_settings.secret_access_key) == ""
}
>
<%= if @setting_up_aws do %>
{gettext("Setting up...")}
<% else %>
<.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-2" />
{gettext("Setup AWS Infrastructure")}
<% end %>
</button>
</div>
</div>
</form>
</div>
</div>
<%!-- Current Configuration Summary --%>
<div class="alert alert-info">
<.icon name="hero-information-circle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Current Configuration")}</h3>
<div class="text-sm mt-1">
<p>{gettext("Status:")} <span class="font-semibold">{gettext("Enabled")}</span></p>
<p>
{gettext("Save email bodies:")}
<span class="font-semibold">
{if @email_save_body, do: gettext("Yes"), else: gettext("No")}
</span>
</p>
<p>
{gettext("AWS SES events:")}
<span class="font-semibold">
{if @email_ses_events, do: gettext("Yes"), else: gettext("No")}
</span>
</p>
<p>
{gettext("Retention period:")}
<span class="font-semibold">
{gettext("%{days} days", days: @email_retention_days)}
</span>
</p>
<p>
{gettext("Sampling rate:")}
<span class="font-semibold">{@email_sampling_rate}%</span>
</p>
<p>
{gettext("SQS polling:")}
<span class="font-semibold">
{if @sqs_polling_enabled, do: gettext("Enabled"), else: gettext("Disabled")}
</span>
</p>
</div>
</div>
</div>
<% else %>
<%!-- Disabled State Information --%>
<div class="alert alert-warning">
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
<div>
<h3 class="font-bold">{gettext("Emails Disabled")}</h3>
<p class="text-sm mt-1">
{gettext(
"Enable the emails above to access configuration options and start managing email delivery events."
)}
</p>
</div>
</div>
<%!-- Benefits Card when Disabled --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-light-bulb" class="w-6 h-6" /> {gettext("Emails Benefits")}
</h2>
<div class="space-y-3">
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("Delivery Monitoring")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Track successful email deliveries and identify issues")}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("Engagement Analytics")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Monitor email opens, clicks, and user engagement")}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("Debugging Support")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Store email content for troubleshooting delivery issues")}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<.icon name="hero-check-circle" class="w-5 h-5 text-success mt-0.5" />
<div>
<h3 class="font-semibold">{gettext("AWS SES Integration")}</h3>
<p class="text-sm text-base-content/70">
{gettext("Automatic webhook handling for bounce and complaint events")}
</p>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>