Split DnsRecordsCard in several components
This commit is contained in:
parent
e5c678174c
commit
a6448a1533
6 changed files with 310 additions and 195 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue