happyDomain/happyDeliver
2
0
Fork 0
Code Issues 6 Pull requests 10 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

77
web/src/lib/components/BimiRecordDisplay.svelte Normal file
View file

@ -0,0 +1,77 @@
<script lang="ts">
import type { BIMIRecord } from "$lib/api/types.gen";
interface Props {
bimiRecord?: BIMIRecord;
}
let { bimiRecord }: Props = $props();
</script>
{#if bimiRecord}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="text-muted mb-0">
<i
class="bi"
class:bi-check-circle-fill={bimiRecord.valid}
class:text-success={bimiRecord.valid}
class:bi-x-circle-fill={!bimiRecord.valid}
class:text-danger={!bimiRecord.valid}
></i>
Brand Indicators for Message Identification
</h5>
<span class="badge bg-secondary">BIMI</span>
</div>
<div class="card-body">
<p class="card-text small text-muted mb-2">
BIMI allows your brand logo to be displayed next to your emails in supported mail
clients. Requires strong DMARC enforcement (quarantine or reject policy) and
optionally a Verified Mark Certificate (VMC).
</p>
<hr />
<div class="mb-2">
<strong>Selector:</strong> <code>{bimiRecord.selector}</code>
<strong class="ms-3">Domain:</strong> <code>{bimiRecord.domain}</code>
</div>
<div class="mb-2">
<strong>Status:</strong>
{#if bimiRecord.valid}
<span class="badge bg-success">Valid</span>
{:else}
<span class="badge bg-danger">Invalid</span>
{/if}
</div>
{#if bimiRecord.logo_url}
<div class="mb-2">
<strong>Logo URL:</strong>
<a href={bimiRecord.logo_url} target="_blank" rel="noopener noreferrer"
>{bimiRecord.logo_url}</a
>
</div>
{/if}
{#if bimiRecord.vmc_url}
<div class="mb-2">
<strong>VMC URL:</strong>
<a href={bimiRecord.vmc_url} target="_blank" rel="noopener noreferrer"
>{bimiRecord.vmc_url}</a
>
</div>
{/if}
{#if bimiRecord.record}
<div class="mb-2">
<strong>Record:</strong><br />
<code class="d-block mt-1 text-break">{bimiRecord.record}</code>
</div>
{/if}
{#if bimiRecord.error}
<div class="text-danger">
<strong>Error:</strong>
{bimiRecord.error}
</div>
{/if}
</div>
</div>
{/if}

64
web/src/lib/components/DkimRecordsDisplay.svelte Normal file
View file

@ -0,0 +1,64 @@
<script lang="ts">
import type { DKIMRecord } from "$lib/api/types.gen";
interface Props {
dkimRecords?: DKIMRecord[];
}
let { dkimRecords }: Props = $props();
// Compute overall validity
const dkimIsValid = $derived(
dkimRecords?.reduce((acc, r) => acc && r.valid, true) ?? false
);
</script>
{#if dkimRecords && dkimRecords.length > 0}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="text-muted mb-0">
<i
class="bi"
class:bi-check-circle-fill={dkimIsValid}
class:text-success={dkimIsValid}
class:bi-x-circle-fill={!dkimIsValid}
class:text-danger={!dkimIsValid}
></i>
DomainKeys Identified Mail
</h5>
<span class="badge bg-secondary">DKIM</span>
</div>
<div class="card-body">
<p class="card-text small text-muted mb-0">DKIM cryptographically signs your emails, proving they haven't been tampered with in transit. Receiving servers verify this signature against your DNS records.</p>
</div>
<div class="list-group list-group-flush">
{#each dkimRecords as dkim}
<div class="list-group-item">
<div class="mb-2">
<strong>Selector:</strong> <code>{dkim.selector}</code>
<strong class="ms-3">Domain:</strong> <code>{dkim.domain}</code>
</div>
<div class="mb-2">
<strong>Status:</strong>
{#if dkim.valid}
<span class="badge bg-success">Valid</span>
{:else}
<span class="badge bg-danger">Invalid</span>
{/if}
</div>
{#if dkim.record}
<div class="mb-2">
<strong>Record:</strong><br>
<code class="d-block mt-1 text-break small text-truncate">{dkim.record}</code>
</div>
{/if}
{#if dkim.error}
<div class="text-danger">
<strong>Error:</strong> {dkim.error}
</div>
{/if}
</div>
{/each}
</div>
</div>
{/if}

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>

166
web/src/lib/components/DnsRecordsCard.svelte
View file

@ -3,7 +3,10 @@
import { getScoreColorClass } from "$lib/score";
import GradeDisplay from "./GradeDisplay.svelte";
import MxRecordsDisplay from "./MxRecordsDisplay.svelte";
import SpfRecordsDisplay from "./SpfRecordsDisplay.svelte";
import DkimRecordsDisplay from "./DkimRecordsDisplay.svelte";
import DmarcRecordDisplay from "./DmarcRecordDisplay.svelte";
import BimiRecordDisplay from "./BimiRecordDisplay.svelte";
interface Props {
dnsResults?: DNSResults;
@ -75,61 +78,7 @@
{/if}
<!-- SPF Records (for Return-Path Domain) -->
{#if dnsResults.spf_records && dnsResults.spf_records.length > 0}
{@const spfIsValid = dnsResults.spf_records.reduce((acc, r) => acc && r.valid, true)}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="text-muted mb-2">
<i
class="bi"
class:bi-check-circle-fill={spfIsValid}
class:text-success={spfIsValid}
class:bi-x-circle-fill={!spfIsValid}
class:text-danger={!spfIsValid}
></i>
Sender Policy Framework
</h5>
<span class="badge bg-secondary">SPF</span>
</div>
<div class="card-body pb-0">
<p class="card-text small text-muted mb-0">SPF specifies which mail servers are authorized to send emails on behalf of your domain. Receiving servers check the sender's IP address against your SPF record to prevent email spoofing.</p>
</div>
<div class="list-group list-group-flush">
{#each dnsResults.spf_records as spf, index}
<div class="list-group-item">
{#if spf.domain}
<div class="mb-2">
<strong>Domain:</strong> <code>{spf.domain}</code>
{#if index > 0}
<span class="badge bg-info ms-2">Included</span>
{/if}
</div>
{/if}
<div class="mb-2">
<strong>Status:</strong>
{#if spf.valid}
<span class="badge bg-success">Valid</span>
{:else}
<span class="badge bg-danger">Invalid</span>
{/if}
</div>
{#if spf.record}
<div class="mb-2">
<strong>Record:</strong><br>
<code class="d-block mt-1 text-break">{spf.record}</code>
</div>
{/if}
{#if spf.error}
<div class="alert alert-{spf.valid ? 'warning' : 'danger'} mb-0 mt-2">
<i class="bi bi-{spf.valid ? 'exclamation-triangle' : 'x-circle'} me-1"></i>
<strong>{spf.valid ? 'Warning:' : 'Error:'}</strong> {spf.error}
</div>
{/if}
</div>
{/each}
</div>
</div>
{/if}
<SpfRecordsDisplay spfRecords={dnsResults.spf_records} />
<hr class="my-4">
@ -154,116 +103,13 @@
{/if}
<!-- DKIM Records -->
{#if dnsResults.dkim_records && dnsResults.dkim_records.length > 0}
{@const dkimIsValid = dnsResults.dkim_records.reduce((acc, r) => acc && r.valid, true)}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="text-muted mb-0">
<i
class="bi"
class:bi-check-circle-fill={dkimIsValid}
class:text-success={dkimIsValid}
class:bi-x-circle-fill={!dkimIsValid}
class:text-danger={!dkimIsValid}
></i>
DomainKeys Identified Mail
</h5>
<span class="badge bg-secondary">DKIM</span>
</div>
<div class="card-body pb-0">
<p class="card-text small text-muted mb-0">DKIM cryptographically signs your emails, proving they haven't been tampered with in transit. Receiving servers verify this signature against your DNS records.</p>
</div>
<div class="list-group list-group-flush">
{#each dnsResults.dkim_records as dkim}
<div class="list-group-item">
<div class="mb-2">
<strong>Selector:</strong> <code>{dkim.selector}</code>
<strong class="ms-3">Domain:</strong> <code>{dkim.domain}</code>
</div>
<div class="mb-2">
<strong>Status:</strong>
{#if dkim.valid}
<span class="badge bg-success">Valid</span>
{:else}
<span class="badge bg-danger">Invalid</span>
{/if}
</div>
{#if dkim.record}
<div class="mb-2">
<strong>Record:</strong><br>
<code class="d-block mt-1 text-break small text-truncate">{dkim.record}</code>
</div>
{/if}
{#if dkim.error}
<div class="text-danger">
<strong>Error:</strong> {dkim.error}
</div>
{/if}
</div>
{/each}
</div>
</div>
{/if}
<DkimRecordsDisplay dkimRecords={dnsResults.dkim_records} />
<!-- DMARC Record -->
<DmarcRecordDisplay dmarcRecord={dnsResults.dmarc_record} />
<!-- BIMI Record -->
{#if dnsResults.bimi_record}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="text-muted mb-0">
<i
class="bi"
class:bi-check-circle-fill={dnsResults.bimi_record.valid}
class:text-success={dnsResults.bimi_record.valid}
class:bi-x-circle-fill={!dnsResults.bimi_record.valid}
class:text-danger={!dnsResults.bimi_record.valid}
></i>
Brand Indicators for Message Identification
</h5>
<span class="badge bg-secondary">BIMI</span>
</div>
<div class="card">
<div class="card-body">
<p class="card-text small text-muted mb-2">BIMI allows your brand logo to be displayed next to your emails in supported mail clients. Requires strong DMARC enforcement (quarantine or reject policy) and optionally a Verified Mark Certificate (VMC).</p>
<div class="mb-2">
<strong>Selector:</strong> <code>{dnsResults.bimi_record.selector}</code>
<strong class="ms-3">Domain:</strong> <code>{dnsResults.bimi_record.domain}</code>
</div>
<div class="mb-2">
<strong>Status:</strong>
{#if dnsResults.bimi_record.valid}
<span class="badge bg-success">Valid</span>
{:else}
<span class="badge bg-danger">Invalid</span>
{/if}
</div>
{#if dnsResults.bimi_record.logo_url}
<div class="mb-2">
<strong>Logo URL:</strong> <a href={dnsResults.bimi_record.logo_url} target="_blank" rel="noopener noreferrer">{dnsResults.bimi_record.logo_url}</a>
</div>
{/if}
{#if dnsResults.bimi_record.vmc_url}
<div class="mb-2">
<strong>VMC URL:</strong> <a href={dnsResults.bimi_record.vmc_url} target="_blank" rel="noopener noreferrer">{dnsResults.bimi_record.vmc_url}</a>
</div>
{/if}
{#if dnsResults.bimi_record.record}
<div class="mb-2">
<strong>Record:</strong><br>
<code class="d-block mt-1 text-break">{dnsResults.bimi_record.record}</code>
</div>
{/if}
{#if dnsResults.bimi_record.error}
<div class="text-danger">
<strong>Error:</strong> {dnsResults.bimi_record.error}
</div>
{/if}
</div>
</div>
</div>
{/if}
<BimiRecordDisplay bimiRecord={dnsResults.bimi_record} />
{/if}
</div>
</div>

2
web/src/lib/components/MxRecordsDisplay.svelte
View file

@ -28,7 +28,7 @@
</h5>
<span class="badge bg-secondary">MX</span>
</div>
<div class="card-body pb-0">
<div class="card-body">
{#if description}
<p class="card-text small text-muted mb-0">{description}</p>
{/if}

69
web/src/lib/components/SpfRecordsDisplay.svelte Normal file
View file

@ -0,0 +1,69 @@
<script lang="ts">
import type { SPFRecord } from "$lib/api/types.gen";
interface Props {
spfRecords?: SPFRecord[];
}
let { spfRecords }: Props = $props();
// Compute overall validity
const spfIsValid = $derived(
spfRecords?.reduce((acc, r) => acc && r.valid, true) ?? false
);
</script>
{#if spfRecords && spfRecords.length > 0}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="text-muted mb-2">
<i
class="bi"
class:bi-check-circle-fill={spfIsValid}
class:text-success={spfIsValid}
class:bi-x-circle-fill={!spfIsValid}
class:text-danger={!spfIsValid}
></i>
Sender Policy Framework
</h5>
<span class="badge bg-secondary">SPF</span>
</div>
<div class="card-body">
<p class="card-text small text-muted mb-0">SPF specifies which mail servers are authorized to send emails on behalf of your domain. Receiving servers check the sender's IP address against your SPF record to prevent email spoofing.</p>
</div>
<div class="list-group list-group-flush">
{#each spfRecords as spf, index}
<div class="list-group-item">
{#if spf.domain}
<div class="mb-2">
<strong>Domain:</strong> <code>{spf.domain}</code>
{#if index > 0}
<span class="badge bg-info ms-2">Included</span>
{/if}
</div>
{/if}
<div class="mb-2">
<strong>Status:</strong>
{#if spf.valid}
<span class="badge bg-success">Valid</span>
{:else}
<span class="badge bg-danger">Invalid</span>
{/if}
</div>
{#if spf.record}
<div class="mb-2">
<strong>Record:</strong><br>
<code class="d-block mt-1 text-break">{spf.record}</code>
</div>
{/if}
{#if spf.error}
<div class="alert alert-{spf.valid ? 'warning' : 'danger'} mb-0 mt-2">
<i class="bi bi-{spf.valid ? 'exclamation-triangle' : 'x-circle'} me-1"></i>
<strong>{spf.valid ? 'Warning:' : 'Error:'}</strong> {spf.error}
</div>
{/if}
</div>
{/each}
</div>
</div>
{/if}