Fixup various vuejs warnings
This commit is contained in:
Johannes Zellner
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Button } from '@cloudron/pankow';
|
||||
import { Button, ProgressBar } from '@cloudron/pankow';
|
||||
import MailModel from '../models/MailModel.js';
|
||||
|
||||
const props = defineProps([ 'domain' ]);
|
||||
@@ -46,94 +46,97 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="domainStatus.mx">
|
||||
<h4>{{ $t('email.dnsStatus.title') }} <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>
|
||||
|
||||
<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')+']') }} {{ domainStatus[type].message }}</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>
|
||||
|
||||
<span>{{ $t('email.smtpStatus.outboundSmtp') }}</span>
|
||||
</div>
|
||||
<div class="record-details">
|
||||
{{ domainStatus.relay.message }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="type in rblTypes" :key="type">
|
||||
<div v-if="domainStatus[type]">
|
||||
<div class="text-muted">
|
||||
<i v-if="!busy" class="fa" :class="{
|
||||
<div>
|
||||
<ProgressBar mode="indeterminate" v-if="busy" slim :show-label="false" />
|
||||
<div v-if="domainStatus.mx">
|
||||
<h4>{{ $t('email.dnsStatus.title') }} <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>
|
||||
<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',
|
||||
'fa-circle-minus text-warning': domainStatus[type].status === 'skipped',
|
||||
}"></i>
|
||||
<i v-else class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
|
||||
<span>{{ type === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</span>
|
||||
<b>{{ label }} record</b>
|
||||
</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 class="domain-status">
|
||||
<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>{{ $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')+']') }} {{ domainStatus[type].message }}</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>
|
||||
<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-circle-minus text-warning': domainStatus.relay.status === 'skipped',
|
||||
}"></i>
|
||||
<i v-else class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
|
||||
<b>{{ $t('email.smtpStatus.outboundSmtp') }}</b>
|
||||
</div>
|
||||
<div class="record-details">
|
||||
<div v-if="domainStatus[type].status !== 'failed'">{{ domainStatus[type].message }}</div>
|
||||
<div v-else>
|
||||
<div v-if="domainStatus[type].servers.length" v-html="$t('email.smtpStatus.blacklisted', { ip: domainStatus[type].ip })"></div>
|
||||
<div v-else v-html="$t('email.smtpStatus.notBlacklisted', { ip: domainStatus[type].ip })"></div>
|
||||
{{ domainStatus.relay.message }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="server in domainStatus[type].servers" :key="server.name">
|
||||
<a :href="server.removal" target="_blank">{{ server.name }}</a>
|
||||
<div v-for="type in rblTypes" :key="type">
|
||||
<div v-if="domainStatus[type]">
|
||||
<div>
|
||||
<i v-if="!busy" class="fa" :class="{
|
||||
'fa-check-circle text-success': domainStatus[type].status === 'passed',
|
||||
'fa-exclamation-triangle text-danger': domainStatus[type].status === 'failed',
|
||||
'fa-circle-minus text-success': domainStatus[type].status === 'skipped',
|
||||
}"></i>
|
||||
<i v-else class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
|
||||
<b>{{ type === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</b>
|
||||
</div>
|
||||
<div class="record-details">
|
||||
<div v-if="domainStatus[type].status !== 'failed'">{{ domainStatus[type].message }}</div>
|
||||
<div v-else>
|
||||
<div v-if="domainStatus[type].servers.length" v-html="$t('email.smtpStatus.blacklisted', { ip: domainStatus[type].ip })"></div>
|
||||
<div v-else v-html="$t('email.smtpStatus.notBlacklisted', { ip: domainStatus[type].ip })"></div>
|
||||
|
||||
<div v-for="server in domainStatus[type].servers" :key="server.name">
|
||||
<a :href="server.removal" target="_blank">{{ server.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,7 +148,7 @@ onMounted(async () => {
|
||||
<style scoped>
|
||||
|
||||
.record-details {
|
||||
padding: 10px 25px;
|
||||
padding: 10px 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -166,4 +169,9 @@ onMounted(async () => {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.domain-status > tbody > tr > td:first-of-type {
|
||||
white-space: nowrap;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user