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

Implement web ui

Browse source
This commit is contained in:
nemunaire 2025-10-17 18:45:53 +07:00
commit 4b9733531e
13 changed files with 1141 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

150
web/src/routes/+error.svelte Normal file
View file

@ -0,0 +1,150 @@
<script lang="ts">
import { page } from "$app/stores";
let status = $derived($page.status);
let message = $derived($page.error?.message || "An unexpected error occurred");
function getErrorTitle(status: number): string {
switch (status) {
case 404:
return "Page Not Found";
case 403:
return "Access Denied";
case 500:
return "Server Error";
case 503:
return "Service Unavailable";
default:
return "Something Went Wrong";
}
}
function getErrorDescription(status: number): string {
switch (status) {
case 404:
return "The page you're looking for doesn't exist or has been moved.";
case 403:
return "You don't have permission to access this resource.";
case 500:
return "Our server encountered an error while processing your request.";
case 503:
return "The service is temporarily unavailable. Please try again later.";
default:
return "An unexpected error occurred. Please try again.";
}
}
function getErrorIcon(status: number): string {
switch (status) {
case 404:
return "bi-search";
case 403:
return "bi-shield-lock";
case 500:
return "bi-exclamation-triangle";
case 503:
return "bi-clock-history";
default:
return "bi-exclamation-circle";
}
}
</script>
<svelte:head>
<title>{status} - {getErrorTitle(status)} | happyDeliver</title>
</svelte:head>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-6 text-center fade-in">
<!-- Error Icon -->
<div class="error-icon-wrapper mb-4">
<i class="bi {getErrorIcon(status)} text-danger"></i>
</div>
<!-- Error Status -->
<h1 class="display-1 fw-bold text-primary mb-3">{status}</h1>
<!-- Error Title -->
<h2 class="fw-bold mb-3">{getErrorTitle(status)}</h2>
<!-- Error Description -->
<p class="text-muted mb-4">{getErrorDescription(status)}</p>
<!-- Error Message (if available) -->
{#if message !== getErrorDescription(status)}
<div class="alert alert-light border mb-4" role="alert">
<i class="bi bi-info-circle me-2"></i>
{message}
</div>
{/if}
<!-- Action Buttons -->
<div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
<a href="/" class="btn btn-primary btn-lg px-4">
<i class="bi bi-house-door me-2"></i>
Go Home
</a>
<button
class="btn btn-outline-primary btn-lg px-4"
onclick={() => window.history.back()}
>
<i class="bi bi-arrow-left me-2"></i>
Go Back
</button>
</div>
<!-- Additional Help -->
{#if status === 404}
<div class="mt-5">
<p class="text-muted small mb-2">Looking for something specific?</p>
<div class="d-flex flex-wrap gap-2 justify-content-center">
<a href="/" class="badge bg-light text-dark text-decoration-none">Home</a>
<a href="/#features" class="badge bg-light text-dark text-decoration-none"
>Features</a
>
<a
href="https://github.com/happyDomain/happydeliver"
class="badge bg-light text-dark text-decoration-none"
>
Documentation
</a>
</div>
</div>
{/if}
</div>
</div>
</div>
<style>
.error-icon-wrapper {
font-size: 6rem;
line-height: 1;
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.badge {
padding: 0.5rem 1rem;
font-weight: normal;
transition: all 0.2s ease;
}
.badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>

51
web/src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,51 @@
<script lang="ts">
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import "../app.css";
interface Props {
children?: import("svelte").Snippet;
}
let { children }: Props = $props();
</script>
<div class="min-vh-100 d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
<div class="container">
<a class="navbar-brand fw-bold" href="/">
<i class="bi bi-envelope-check me-2"></i>
happyDeliver
</a>
<span class="navbar-text text-white-50 small">
Open-Source Email Deliverability Tester
</span>
</div>
</nav>
<main class="flex-grow-1">
{@render children?.()}
</main>
<footer class="bg-dark text-light py-4">
<div class="container text-center">
<p class="mb-1">
<small class="d-flex justify-content-center gap-2">
Open-Source Email Deliverability Testing Platform
<span class="mx-1">&bull;</span>
<a
href="https://github.com/happyDomain/happyDeliver"
class="text-decoration-none"
>
<i class="bi bi-github"></i> GitHub
</a>
<a
href="https://framagit.com/happyDomain/happyDeliver"
class="text-decoration-none"
>
<i class="bi bi-gitlab"></i> GitLab
</a>
</small>
</p>
</div>
</footer>
</div>

216
web/src/routes/+page.svelte Normal file
View file

@ -0,0 +1,216 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { createTest as apiCreateTest } from "$lib/api";
import { FeatureCard, HowItWorksStep } from "$lib/components";
let loading = $state(false);
let error = $state<string | null>(null);
async function createTest() {
loading = true;
error = null;
try {
const response = await apiCreateTest();
if (response.data) {
goto(`/test/${response.data.id}`);
}
} catch (err) {
error = err instanceof Error ? err.message : "Failed to create test";
loading = false;
}
}
const features = [
{
icon: "bi-shield-check",
title: "Authentication",
description:
"SPF, DKIM, and DMARC validation with detailed results and recommendations.",
variant: "primary" as const,
},
{
icon: "bi-globe",
title: "DNS Records",
description: "Verify MX, SPF, DKIM, and DMARC records are properly configured.",
variant: "success" as const,
},
{
icon: "bi-bug",
title: "Spam Score",
description: "SpamAssassin analysis with detailed test results and scoring.",
variant: "warning" as const,
},
{
icon: "bi-list-check",
title: "Blacklists",
description: "Check if your IP is listed in major DNS-based blacklists (RBLs).",
variant: "danger" as const,
},
{
icon: "bi-file-text",
title: "Content Analysis",
description: "HTML structure, link validation, image analysis, and more.",
variant: "info" as const,
},
{
icon: "bi-card-heading",
title: "Header Quality",
description: "Validate required headers, check for missing fields and alignment.",
variant: "secondary" as const,
},
{
icon: "bi-bar-chart",
title: "Detailed Scoring",
description:
"0-10 deliverability score with breakdown by category and recommendations.",
variant: "primary" as const,
},
{
icon: "bi-lock",
title: "Privacy First",
description: "Self-hosted solution, your data never leaves your infrastructure.",
variant: "success" as const,
},
];
const steps = [
{
step: 1,
title: "Create Test",
description: "Click the button to generate a unique test email address.",
},
{
step: 2,
title: "Send Email",
description: "Send a test email from your mail server to the provided address.",
},
{
step: 3,
title: "View Results",
description: "Get instant detailed analysis with actionable recommendations.",
},
];
</script>
<svelte:head>
<title>happyDeliver - Email Deliverability Testing</title>
</svelte:head>
<!-- Hero Section -->
<section class="hero py-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-8 mx-auto text-center fade-in">
<h1 class="display-3 fw-bold mb-4">Test Your Email Deliverability</h1>
<p class="lead mb-4 opacity-90">
Get detailed insights into your email configuration, authentication, spam score,
and more. Open-source, self-hosted, and privacy-focused.
</p>
<button
class="btn btn-light btn-lg px-5 py-3 shadow"
onclick={createTest}
disabled={loading}
>
{#if loading}
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Creating Test...
{:else}
<i class="bi bi-envelope-plus me-2"></i>
Start Free Test
{/if}
</button>
{#if error}
<div class="alert alert-danger mt-4 d-inline-block" role="alert">
<i class="bi bi-exclamation-triangle me-2"></i>
{error}
</div>
{/if}
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-5">
<div class="container py-4">
<div class="row text-center mb-5">
<div class="col-lg-8 mx-auto">
<h2 class="display-5 fw-bold mb-3">Comprehensive Email Analysis</h2>
<p class="text-muted">
Your favorite deliverability tester, open-source and self-hostable for complete
privacy and control.
</p>
</div>
</div>
<div class="row g-4">
{#each features as feature}
<div class="col-md-6 col-lg-3">
<FeatureCard {...feature} />
</div>
{/each}
</div>
</div>
</section>
<!-- How It Works -->
<section class="bg-light py-5">
<div class="container py-4">
<div class="row text-center mb-5">
<div class="col-lg-8 mx-auto">
<h2 class="display-5 fw-bold mb-3">How It Works</h2>
<p class="text-muted">
Simple three-step process to test your email deliverability
</p>
</div>
</div>
<div class="row g-4">
{#each steps as stepData}
<div class="col-md-4">
<HowItWorksStep {...stepData} />
</div>
{/each}
</div>
<div class="text-center mt-5">
<button
class="btn btn-primary btn-lg px-5 py-3"
onclick={createTest}
disabled={loading}
>
{#if loading}
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Creating Test...
{:else}
<i class="bi bi-rocket-takeoff me-2"></i>
Get Started Now
{/if}
</button>
</div>
</div>
</section>
<style>
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

143
web/src/routes/test/[test]/+page.svelte Normal file
View file

@ -0,0 +1,143 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import { page } from "$app/state";
import { getTest, getReport } from "$lib/api";
import type { Test, Report } from "$lib/api/types.gen";
import { ScoreCard, CheckCard, SpamAssassinCard, PendingState } from "$lib/components";
let testId = $derived(page.params.test);
let test = $state<Test | null>(null);
let report = $state<Report | null>(null);
let loading = $state(true);
let error = $state<string | null>(null);
let pollInterval: ReturnType<typeof setInterval> | null = null;
async function fetchTest() {
try {
const testResponse = await getTest({ path: { id: testId } });
if (testResponse.data) {
test = testResponse.data;
if (test.status === "analyzed") {
const reportResponse = await getReport({ path: { id: testId } });
if (reportResponse.data) {
report = reportResponse.data;
}
stopPolling();
}
}
loading = false;
} catch (err) {
error = err instanceof Error ? err.message : "Failed to fetch test";
loading = false;
stopPolling();
}
}
function startPolling() {
pollInterval = setInterval(fetchTest, 3000);
}
function stopPolling() {
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
}
onMount(() => {
fetchTest();
startPolling();
});
onDestroy(() => {
stopPolling();
});
</script>
<svelte:head>
<title>{test ? `Test ${test.id.slice(0, 8)} - happyDeliver` : "Loading..."}</title>
</svelte:head>
<div class="container py-5">
{#if loading}
<div class="text-center py-5">
<div
class="spinner-border text-primary"
role="status"
style="width: 3rem; height: 3rem;"
>
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-muted">Loading test...</p>
</div>
{:else if error}
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="alert alert-danger" role="alert">
<i class="bi bi-exclamation-triangle me-2"></i>
{error}
</div>
</div>
</div>
{:else if test && test.status !== "analyzed"}
<!-- Pending State -->
<PendingState {test} />
{:else if report}
<!-- Results State -->
<div class="fade-in">
<!-- Score Header -->
<div class="row mb-4">
<div class="col-12">
<ScoreCard score={report.score} summary={report.summary} />
</div>
</div>
<!-- Detailed Checks -->
<div class="row mb-4">
<div class="col-12">
<h3 class="fw-bold mb-3">Detailed Checks</h3>
{#each report.checks as check}
<CheckCard {check} />
{/each}
</div>
</div>
<!-- Additional Information -->
{#if report.spamassassin}
<div class="row mb-4">
<div class="col-12">
<SpamAssassinCard spamassassin={report.spamassassin} />
</div>
</div>
{/if}
<!-- Test Again Button -->
<div class="row">
<div class="col-12 text-center">
<a href="/" class="btn btn-primary btn-lg">
<i class="bi bi-arrow-repeat me-2"></i>
Test Another Email
</a>
</div>
</div>
</div>
{/if}
</div>
<style>
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>