cloudron-box/dashboard/src/components/MailDomainStatus.vue

<script setup>

import { ref, onMounted } from 'vue';
import { Button } from 'pankow';
import MailModel from '../models/MailModel.js';

const props = defineProps([ 'domain' ]);

const mailModel = MailModel.create();

const dnsRecordLabels = {
  'mx': 'MX',
  'dkim': 'DKIM',
  'spf': 'SPF',
  'dmarc': 'DMARC',
  'ptr4': 'PTR4',
  'ptr6': 'PTR6',
};

const busy = ref(false);
const mailConfig = ref({});
const domainStatus = ref({});

async function refresh() {
  busy.value = true;

  let [error, result] = await mailModel.status(props.domain);
  if (error) return console.error(error);

  domainStatus.value = result;

  [error, result] = await mailModel.config(props.domain);
  if (error) return console.error(error);

  mailConfig.value = result;

  busy.value = false;
}

onMounted(async () => {
  await refresh();
});

</script>

<template>
  <div v-if="domainStatus.mx">
    <h4>{{ $t('email.dnsStatus.title') }} &nbsp; <Button @click="refresh()" small tool icon="fa fa-sync-alt" :disabled="busy" :loading="busy"/></h4>
    <div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
    <br/>
    <div v-for="(label, type) in dnsRecordLabels" :key="type">
      <div class="text-muted">
        <i v-if="!busy" class="fa-solid" :class="{
          'fa-check-circle text-success': domainStatus[type].status === 'passed',
          'fa-exclamation-triangle text-danger': domainStatus[type].status === 'failed',
          'fa-minus text-success': domainStatus[type].status === 'skipped',
          }"></i>
        <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
        &nbsp;
        <span>{{ label }} record</span>
      </div>

      <div class="record-details">
        <div v-if="type === 'mx' && domain.provider === 'namecheap'">{{ $t('email.dnsStatus.namecheapInfo') }} <sup><a href="https://docs.cloudron.io/domains/#namecheap-dns" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
        <div v-if="type === 'ptr4' || type === 'ptr6'">{{ $t('email.dnsStatus.ptrInfo') }} <sup><a href="https://docs.cloudron.io/email/#ptr-record" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
        <div v-if="domainStatus[type].status === 'skipped'">{{ domainStatus[type].message }}</div>
        <div v-else>
          <table>
            <tbody>
              <tr>
                <td>{{ $t('email.dnsStatus.hostname') }}:</td>
                <td>{{ domainStatus[type].name }}</td>
              </tr>
              <tr>
                <td>{{ $t('email.dnsStatus.domain') }}:</td>
                <td>{{ domainStatus[type].domain }}</td>
              </tr>
              <tr>
                <td style="width: 10px;">{{ $t('email.dnsStatus.type') }}:</td>
                <td>{{ domainStatus[type].type }}</td>
              </tr>
              <tr>
                <td>{{ $t('email.dnsStatus.expected') }}:</td>
                <td>{{ domainStatus[type].expected }}</td>
              </tr>
              <tr>
                <td>{{ $t('email.dnsStatus.current') }}:</td>
                <td>{{ domainStatus[type].value ? domainStatus[type].value : ('['+$t('email.dnsStatus.recordNotSet')+']') }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <br/>

    <h4>{{ $t('email.smtpStatus.title') }} <sup><a href="https://docs.cloudron.io/email/#smtp-status" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></h4>

    <div v-if="domainStatus.relay">
      <div class="text-muted">
        <i v-if="!busy" class="fa" :class="{
          'fa-check-circle text-success': domainStatus.relay.status === 'passed',
          'fa-exclamation-triangle text-danger': domainStatus.relay.status === 'failed',
          'fa-minus text-success': domainStatus.relay.status === 'skipped',
          }"></i>
        <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
        &nbsp;
        <span>{{ $t('email.smtpStatus.outboundSmtp') }}</span>
      </div>
      <div class="record-details">
        {{ domainStatus.relay.message }}
      </div>
    </div>

    <div v-if="domainStatus.rbl4">
      <div class="text-muted">
        <i v-if="!busy" class="fa" :class="{
          'fa-check-circle text-success': domainStatus.rbl4.status === 'passed',
          'fa-exclamation-triangle text-danger': domainStatus.rbl4.status === 'failed',
          'fa-minus text-success': domainStatus.rbl4.status === 'skipped',
          }"></i>
        <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
        &nbsp;
        <span>{{ $t('email.smtpStatus.blacklistCheck') }}</span>
      </div>
      <div class="record-details">
        <div v-if="domainStatus.rbl4.status !== 'failed'">{{ domainStatus.rbl4.message }}</div>
        <div v-else>
          <div v-if="domainStatus.rbl4.servers.length" v-html="$t('email.smtpStatus.blacklisted', { ip: domainStatus.rbl4.ip })"></div>
          <div v-else v-html="$t('email.smtpStatus.notBlacklisted', { ip: domainStatus.rbl4.ip })"></div>

          <div v-for="server in domainStatus.rbl4.servers" :key="server.name">
            <a :href="server.site" target="_blank">{{ server.name }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

.record-details {
  padding: 10px 25px;
  overflow: hidden;
}

.record-details > table {
  table-layout: fixed;
  width: 100%;
}

.record-details > table > tr > td:nth-child(1) {
  width: 150px;
}

.record-details > table > tr > td:nth-child(2) {
  display: block;
  overflow: scroll;
  white-space: nowrap;
  text-overflow: auto;
  font-weight: bold;
}

</style>