This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/admin/pages/EmailDNS.svelte

148 lines
3.9 KiB

<script>
import api from "$/client/api.js";
import Spinner from "$/client/components/Spinner.svelte";
import Icon from "$/client/components/Icon.svelte";
let dns;
let domain_name;
let error = "";
let tests;
let querying = false;
const activate = (id) => {
tests = tests.map(r => {
r.active = r.id == id;
return r;
});
}
const run_test = async () => {
if(domain_name) {
querying = true;
const [status, data] = await api.get('/api/admin/email', {domain_name});
querying = false;
if(status === 200) {
dns = data.dns;
tests = data.tests;
error = "";
} else {
error = data.message || data._errors.domain_name[0];
dns = undefined;
tests = undefined; // clear the test results
}
} else {
error = "You must enter a valid domain name.";
}
}
</script>
<style>
domain-input {
display: flex;
}
form {
display: flex;
flex-direction: row;
width: 100%;
}
tr.error {
color: var(--red);
}
td {
text-align: left;
max-width: 20%;
min-width: 20%;
width: 20%;
}
td.data {
width: 80%;
word-break: break-all;
word-wrap: normal;
white-space: normal;
}
table {
width: 100%;
}
</style>
<domain-input data-testid="domain-input">
<form on:submit|preventDefault={ run_test } action="/api/admin/email" method="GET">
<input name="domain_name" bind:value={ domain_name } id="domain_name" placeholder="Domain Name" />
{#if querying}<Spinner />{/if}
</form>
</domain-input>
<h2>DNS Results { domain_name || "" }</h2>
{#if dns }
<table data-testid="domain-result">
<thead>
<tr><th>Result</th><th>Value</th></tr>
</thead>
<tbody>
{#if dns.ip4.host }
<tr><td>IP4 Host</td><td class="data">{ dns.ip4.host[0] }</td></tr>
<tr><td>IP4 Reverse</td><td class="data">{ dns.ip4.reverse[0] }</td></tr>
{:else}
<tr data-testid="error-dns" class="error"><td>IP4 Error</td><td class="data">{ dns.ip4.error.message }</td></tr>
{/if}
{#if dns.ip6.host}
<tr><td>IP6 Host</td><td class="data">{ dns.ip6.host[0] }</td></tr>
<tr><td>IP6 Reverse</td><td class="data">{ dns.ip6.reverse[0] }</td></tr>
{:else}
<tr class="error"><td>IP6 Error</td><td class="data">{ dns.ip6.error.message }</td></tr>
{/if}
{#if dns.mx}
<tr><td>MX Exchange</td><td class="data">{ dns.mx[0].exchange }</td></tr>
<tr><td>MX Priority</td><td class="data">{ dns.mx[0].priority }</td></tr>
{:else}
<tr class="error"><td>MX Error</td><td class="data">{ dns.mx_error.message }</td></tr>
{/if}
{#if dns.spf}
<tr><td>SPF</td><td class="data">{ dns.spf[0] }</td></tr>
{:else}
<tr class="error"><td>SPF</td><td class="data">{ dns.spf_error.message }</td></tr>
{/if}
{#if dns.dmarc}
<tr><td>DMARC</td><td class="data">{ dns.dmarc[0] }</td></tr>
{:else}
<tr class="error"><td>DMARC</td><td class="data">{ dns.dmarc_error.message }</td></tr>
{/if}
</tbody>
</table>
{:else if error}
<callout class="error">{ error }</callout>
{:else}
<callout>Enter a domain name to see the results.</callout>
{/if}
{#if tests && tests.length > 0}
<h2>DNS Analysis</h2>
<p>The following are recommendations based on errors found in your DNS records for { domain_name }.</p>
<tabs class="vertical">
{#each tests as result}
<a class:active={ result.active } on:click={() => activate(result.id)}><Icon name="alert-triangle" /> { result.title }</a>
<component>
{#if result.active}
<p>{ result.text }</p>
{/if}
</component>
{/each}
</tabs>
{:else if tests && tests.length == 0}
<h2>DNS Is Good</h2>
<p>No common errors found so far in your DNS records. You should try sending yourself
an email to test if it will deliver. These tests are performed against Googles public DNS at 8.8.8.8 so they should be visible in Gmail now.
</p>
{/if}