happyDomain/happyDeliver
2
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Split DnsRecordsCard in several components

Browse source
This commit is contained in:
nemunaire 2025-10-23 12:36:28 +07:00
commit a6448a1533
6 changed files with 310 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

127
web/src/lib/components/DmarcRecordDisplay.svelte
View file

@ -10,7 +10,7 @@
// Helper function to determine policy strength
const policyStrength = (policy: string | undefined): number => {
const strength: Record<string, number> = { none: 0, quarantine: 1, reject: 2 };
return strength[policy || 'none'] || 0;
return strength[policy || "none"] || 0;
};
</script>
@ -22,7 +22,8 @@
class="bi"
class:bi-check-circle-fill={dmarcRecord.valid && dmarcRecord.policy != "none"}
class:text-success={dmarcRecord.valid && dmarcRecord.policy != "none"}
class:bi-arrow-up-circle-fill={dmarcRecord.valid && dmarcRecord.policy == "none"}
class:bi-arrow-up-circle-fill={dmarcRecord.valid &&
dmarcRecord.policy == "none"}
class:text-warning={dmarcRecord.valid && dmarcRecord.policy == "none"}
class:bi-x-circle-fill={!dmarcRecord.valid}
class:text-danger={!dmarcRecord.valid}
@ -32,7 +33,13 @@
<span class="badge bg-secondary">DMARC</span>
</div>
<div class="card-body">
<p class="card-text small text-muted mb-2">DMARC builds on SPF and DKIM by telling receiving servers what to do with emails that fail authentication checks. It also enables reporting so you can monitor your email security.</p>
<p class="card-text small text-muted mb-2">
DMARC builds on SPF and DKIM by telling receiving servers what to do with emails
that fail authentication checks. It also enables reporting so you can monitor your
email security.
</p>
<hr />
<!-- Status -->
<div class="mb-2">
@ -48,32 +55,44 @@
{#if dmarcRecord.policy}
<div class="mb-3">
<strong>Policy:</strong>
<span class="badge {dmarcRecord.policy === 'reject' ? 'bg-success' : dmarcRecord.policy === 'quarantine' ? 'bg-warning' : 'bg-secondary'}">
<span
class="badge {dmarcRecord.policy === 'reject'
? 'bg-success'
: dmarcRecord.policy === 'quarantine'
? 'bg-warning'
: 'bg-secondary'}"
>
{dmarcRecord.policy}
</span>
{#if dmarcRecord.policy === 'reject'}
{#if dmarcRecord.policy === "reject"}
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-shield-check me-1"></i>
<strong>Maximum protection</strong> — emails failing DMARC checks are rejected. This provides the strongest defense against spoofing and phishing.
<strong>Maximum protection</strong> — emails failing DMARC checks are rejected.
This provides the strongest defense against spoofing and phishing.
</div>
{:else if dmarcRecord.policy === 'quarantine'}
{:else if dmarcRecord.policy === "quarantine"}
<div class="alert alert-info mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Good protection</strong> — emails failing DMARC checks are quarantined (sent to spam). This is a safe middle ground.<br>
<strong>Good protection</strong> — emails failing DMARC checks are
quarantined (sent to spam). This is a safe middle ground.<br />
<i class="bi bi-arrow-up-circle me-1"></i>
Once you've validated your configuration and ensured all legitimate mail passes, consider upgrading to <code>p=reject</code> for maximum protection.
Once you've validated your configuration and ensured all legitimate mail
passes, consider upgrading to <code>p=reject</code> for maximum protection.
</div>
{:else if dmarcRecord.policy === 'none'}
{:else if dmarcRecord.policy === "none"}
<div class="alert alert-warning mt-2 mb-0 small">
<i class="bi bi-exclamation-triangle me-1"></i>
<strong>Monitoring only</strong> — emails failing DMARC are delivered normally. This is only recommended during initial setup.<br>
<strong>Monitoring only</strong> — emails failing DMARC are delivered
normally. This is only recommended during initial setup.<br />
<i class="bi bi-arrow-up-circle me-1"></i>
After monitoring reports, upgrade to <code>p=quarantine</code> or <code>p=reject</code> to actively protect your domain.
After monitoring reports, upgrade to <code>p=quarantine</code> or
<code>p=reject</code> to actively protect your domain.
</div>
{:else}
<div class="alert alert-danger mt-2 mb-0 small">
<i class="bi bi-x-circle me-1"></i>
<strong>Unknown policy</strong> — the policy value is not recognized. Valid options are: none, quarantine, or reject.
<strong>Unknown policy</strong> — the policy value is not recognized. Valid
options are: none, quarantine, or reject.
</div>
{/if}
</div>
@ -85,18 +104,27 @@
{@const subStrength = policyStrength(dmarcRecord.subdomain_policy)}
<div class="mb-3">
<strong>Subdomain Policy:</strong>
<span class="badge {dmarcRecord.subdomain_policy === 'reject' ? 'bg-success' : dmarcRecord.subdomain_policy === 'quarantine' ? 'bg-warning' : 'bg-secondary'}">
<span
class="badge {dmarcRecord.subdomain_policy === 'reject'
? 'bg-success'
: dmarcRecord.subdomain_policy === 'quarantine'
? 'bg-warning'
: 'bg-secondary'}"
>
{dmarcRecord.subdomain_policy}
</span>
{#if subStrength >= mainStrength}
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Good configuration</strong> — subdomain policy is equal to or stricter than main policy.
<strong>Good configuration</strong> — subdomain policy is equal to or stricter
than main policy.
</div>
{:else}
<div class="alert alert-warning mt-2 mb-0 small">
<i class="bi bi-exclamation-triangle me-1"></i>
<strong>Weaker subdomain protection</strong> — consider setting <code>sp={dmarcRecord.policy}</code> to match your main policy for consistent protection.
<strong>Weaker subdomain protection</strong> — consider setting
<code>sp={dmarcRecord.policy}</code> to match your main policy for consistent
protection.
</div>
{/if}
</div>
@ -106,7 +134,9 @@
<span class="badge bg-info">Inherits main policy</span>
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Good default</strong> — subdomains inherit the main policy (<code>{dmarcRecord.policy}</code>) which provides consistent protection.
<strong>Good default</strong> — subdomains inherit the main policy (<code
>{dmarcRecord.policy}</code
>) which provides consistent protection.
</div>
</div>
{/if}
@ -115,23 +145,34 @@
{#if dmarcRecord.percentage !== undefined}
<div class="mb-3">
<strong>Enforcement Percentage:</strong>
<span class="badge {dmarcRecord.percentage === 100 ? 'bg-success' : dmarcRecord.percentage >= 50 ? 'bg-warning' : 'bg-danger'}">
<span
class="badge {dmarcRecord.percentage === 100
? 'bg-success'
: dmarcRecord.percentage >= 50
? 'bg-warning'
: 'bg-danger'}"
>
{dmarcRecord.percentage}%
</span>
{#if dmarcRecord.percentage === 100}
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Full enforcement</strong> — all messages are subject to DMARC policy. This provides maximum protection.
<strong>Full enforcement</strong> — all messages are subject to DMARC policy.
This provides maximum protection.
</div>
{:else if dmarcRecord.percentage >= 50}
<div class="alert alert-warning mt-2 mb-0 small">
<i class="bi bi-exclamation-triangle me-1"></i>
<strong>Partial enforcement</strong> — only {dmarcRecord.percentage}% of messages are subject to DMARC policy. Consider increasing to <code>pct=100</code> once you've validated your configuration.
<strong>Partial enforcement</strong> — only {dmarcRecord.percentage}% of
messages are subject to DMARC policy. Consider increasing to
<code>pct=100</code> once you've validated your configuration.
</div>
{:else}
<div class="alert alert-danger mt-2 mb-0 small">
<i class="bi bi-x-circle me-1"></i>
<strong>Low enforcement</strong> — only {dmarcRecord.percentage}% of messages are protected. Gradually increase to <code>pct=100</code> for full protection.
<strong>Low enforcement</strong> — only {dmarcRecord.percentage}% of
messages are protected. Gradually increase to <code>pct=100</code> for full
protection.
</div>
{/if}
</div>
@ -141,7 +182,8 @@
<span class="badge bg-success">100% (default)</span>
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Full enforcement</strong> — all messages are subject to DMARC policy by default.
<strong>Full enforcement</strong> — all messages are subject to DMARC policy
by default.
</div>
</div>
{/if}
@ -150,20 +192,28 @@
{#if dmarcRecord.spf_alignment}
<div class="mb-3">
<strong>SPF Alignment:</strong>
<span class="badge {dmarcRecord.spf_alignment === 'strict' ? 'bg-success' : 'bg-info'}">
<span
class="badge {dmarcRecord.spf_alignment === 'strict'
? 'bg-success'
: 'bg-info'}"
>
{dmarcRecord.spf_alignment}
</span>
{#if dmarcRecord.spf_alignment === 'relaxed'}
{#if dmarcRecord.spf_alignment === "relaxed"}
<div class="alert alert-info mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Recommended for most senders</strong> — ensures legitimate subdomain mail passes.<br>
<strong>Recommended for most senders</strong> — ensures legitimate
subdomain mail passes.<br />
<i class="bi bi-exclamation-triangle me-1"></i>
For maximum brand protection, consider strict alignment (<code>aspf=s</code>) once your sending domains are standardized.
For maximum brand protection, consider strict alignment (<code
>aspf=s</code
>) once your sending domains are standardized.
</div>
{:else}
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-shield-check me-1"></i>
<strong>Maximum brand protection</strong> — only exact domain matches are accepted. Ensure all legitimate mail comes from the exact From domain.
<strong>Maximum brand protection</strong> — only exact domain matches are
accepted. Ensure all legitimate mail comes from the exact From domain.
</div>
{/if}
</div>
@ -173,20 +223,28 @@
{#if dmarcRecord.dkim_alignment}
<div class="mb-3">
<strong>DKIM Alignment:</strong>
<span class="badge {dmarcRecord.dkim_alignment === 'strict' ? 'bg-success' : 'bg-info'}">
<span
class="badge {dmarcRecord.dkim_alignment === 'strict'
? 'bg-success'
: 'bg-info'}"
>
{dmarcRecord.dkim_alignment}
</span>
{#if dmarcRecord.dkim_alignment === 'relaxed'}
{#if dmarcRecord.dkim_alignment === "relaxed"}
<div class="alert alert-info mt-2 mb-0 small">
<i class="bi bi-check-circle me-1"></i>
<strong>Recommended for most senders</strong> — ensures legitimate subdomain mail passes.<br>
<strong>Recommended for most senders</strong> — ensures legitimate
subdomain mail passes.<br />
<i class="bi bi-exclamation-triangle me-1"></i>
For maximum brand protection, consider strict alignment (<code>adkim=s</code>) once your sending domains are standardized.
For maximum brand protection, consider strict alignment (<code
>adkim=s</code
>) once your sending domains are standardized.
</div>
{:else}
<div class="alert alert-success mt-2 mb-0 small">
<i class="bi bi-shield-check me-1"></i>
<strong>Maximum brand protection</strong> — only exact domain matches are accepted. Ensure all DKIM signatures use the exact From domain.
<strong>Maximum brand protection</strong> — only exact domain matches are
accepted. Ensure all DKIM signatures use the exact From domain.
</div>
{/if}
</div>
@ -195,7 +253,7 @@
<!-- Record -->
{#if dmarcRecord.record}
<div class="mb-2">
<strong>Record:</strong><br>
<strong>Record:</strong><br />
<code class="d-block mt-1 text-break">{dmarcRecord.record}</code>
</div>
{/if}
@ -203,7 +261,8 @@
<!-- Error -->
{#if dmarcRecord.error}
<div class="text-danger">
<strong>Error:</strong> {dmarcRecord.error}
<strong>Error:</strong>
{dmarcRecord.error}
</div>
{/if}
</div>