bandolier-template/admin/pages/EmailDNS.svelte

<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}