77 lines
3.1 KiB
Svelte
77 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import type { BlacklistCheck, ReceivedHop } from "$lib/api/types.gen";
|
|
import { getScoreColorClass } from "$lib/score";
|
|
import { theme } from "$lib/stores/theme";
|
|
import EmailPathCard from "./EmailPathCard.svelte";
|
|
import GradeDisplay from "./GradeDisplay.svelte";
|
|
|
|
interface Props {
|
|
blacklists: Record<string, BlacklistCheck[]>;
|
|
blacklistGrade?: string;
|
|
blacklistScore?: number;
|
|
receivedChain?: ReceivedHop[];
|
|
}
|
|
|
|
let { blacklists, blacklistGrade, blacklistScore, receivedChain }: Props = $props();
|
|
</script>
|
|
|
|
<div class="card shadow-sm" id="rbl-details">
|
|
<div class="card-header" class:bg-white={$theme === "light"} class:bg-dark={$theme !== "light"}>
|
|
<h4 class="mb-0 d-flex justify-content-between align-items-center">
|
|
<span>
|
|
<i class="bi bi-shield-exclamation me-2"></i>
|
|
Blacklist Checks
|
|
</span>
|
|
<span>
|
|
{#if blacklistScore !== undefined}
|
|
<span class="badge bg-{getScoreColorClass(blacklistScore)}">
|
|
{blacklistScore}%
|
|
</span>
|
|
{/if}
|
|
{#if blacklistGrade !== undefined}
|
|
<GradeDisplay grade={blacklistGrade} size="small" />
|
|
{/if}
|
|
</span>
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{#if receivedChain}
|
|
<EmailPathCard {receivedChain} />
|
|
{/if}
|
|
|
|
<div class="row row-cols-1 row-cols-lg-2">
|
|
{#each Object.entries(blacklists) as [ip, checks]}
|
|
<div class="col mb-3">
|
|
<h5 class="text-muted">
|
|
<i class="bi bi-hdd-network me-1"></i>
|
|
{ip}
|
|
</h5>
|
|
<table class="table table-sm table-striped table-hover mb-0">
|
|
<tbody>
|
|
{#each checks as check}
|
|
<tr>
|
|
<td title={check.response || "-"}>
|
|
<span
|
|
class="badge {check.listed
|
|
? 'bg-danger'
|
|
: check.error
|
|
? 'bg-dark'
|
|
: 'bg-success'}"
|
|
>
|
|
{check.error
|
|
? "Error"
|
|
: check.listed
|
|
? "Listed"
|
|
: "Clean"}
|
|
</span>
|
|
</td>
|
|
<td><code>{check.rbl}</code></td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|