mail status: make the status text selectable

This commit is contained in:
Girish Ramakrishnan
2025-12-18 16:24:58 +01:00
parent b537d73a55
commit 5107cd28c4
+19 -14
View File
@@ -84,9 +84,10 @@ onMounted(async () => {
<div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
<br/>
<!-- DNS records including PTR4/PTR6 -->
<div v-if="domainStatus.mx">
<div v-for="(item, key) in dnsRecordLabels" :key="key" class="record-item" @click="item.isOpen = !item.isOpen">
<div>
<div v-for="(item, key) in dnsRecordLabels" :key="key" class="record-item">
<div class="record-header" @click="item.isOpen = !item.isOpen">
<i v-if="!busy" class="fa-solid" :class="{
'fa-check-circle text-success': domainStatus[key].status === 'passed',
'fa-exclamation-triangle text-danger': domainStatus[key].status === 'failed',
@@ -95,6 +96,7 @@ onMounted(async () => {
<i v-else class="fa-solid fa-circle-notch fa-spin"></i>
&nbsp;
<b>{{ item.label }} record</b>
<i class="fa-solid" :class="item.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
</div>
<div class="record-details" v-if="item.isOpen" @click.stop>
@@ -131,8 +133,9 @@ onMounted(async () => {
</div>
</div>
<div v-if="domainStatus.relay" class="record-item" @click="domainStatus.relay.isOpen = !domainStatus.relay.isOpen">
<div>
<!-- outbound SMTP / Relay status -->
<div v-if="domainStatus.relay" class="record-item">
<div class="record-header" @click="domainStatus.relay.isOpen = !domainStatus.relay.isOpen">
<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',
@@ -141,15 +144,17 @@ onMounted(async () => {
<i v-else class="fa-solid fa-circle-notch fa-spin"></i>
&nbsp;
<b>{{ $t('email.smtpStatus.outboundSmtp') }}</b>
<i class="fa-solid" :class="domainStatus.relay.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
</div>
<div class="record-details" v-if="domainStatus.relay.isOpen">
<div class="record-details" v-if="domainStatus.relay.isOpen" @click.stop>
{{ domainStatus.relay.message }}
</div>
</div>
<div v-for="(item, key) in rblTypes" :key="key" class="record-item" @click="item.isOpen = !item.isOpen">
<!-- Blacklist -->
<div v-for="(item, key) in rblTypes" :key="key" class="record-item">
<div v-if="domainStatus[key]">
<div>
<div class="record-header" @click="item.isOpen = !item.isOpen">
<i v-if="!busy" class="fa" :class="{
'fa-check-circle text-success': domainStatus[key].status === 'passed',
'fa-exclamation-triangle text-danger': domainStatus[key].status === 'failed',
@@ -158,8 +163,9 @@ onMounted(async () => {
<i v-else class="fa-solid fa-circle-notch fa-spin"></i>
&nbsp;
<b>{{ key === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</b>
<i class="fa-solid" :class="item.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
</div>
<div class="record-details" v-if="item.isOpen">
<div class="record-details" v-if="item.isOpen" @click.stop>
<div v-if="domainStatus[key].status === 'passed'">IP: {{ domainStatus[key].ip }}</div>
<div v-else-if="domainStatus[key].status === 'skipped'">{{ domainStatus[key].message }}</div>
<div v-else>
@@ -169,9 +175,9 @@ onMounted(async () => {
<!-- servers is only the blocked servers -->
<br/>
<div v-for="server in domainStatus[key].servers" :key="server.name">
<a :href="server.removal" target="_blank">{{ server.name }}</a>
<a :href="server.removal" target="_blank">{{ server.name }} removal link</a>
&nbsp;
<span v-if="server.txtRecords.length">{{ server.txtRecords.join('. ') }}</span>
<span v-if="server.txtRecords.length">TXT record: {{ server.txtRecords.join('. ') }}</span>
<span v-else>No TXT Records</span>
</div>
</div>
@@ -183,20 +189,19 @@ onMounted(async () => {
<style scoped>
.record-item {
.record-header {
border-radius: var(--pankow-border-radius);
padding: 10px;
gap: 10px;
color: var(--pankow-text-color);
cursor: pointer;
}
.record-item:hover {
.record-header:hover {
background-color: var(--pankow-color-background-hover);
}
.record-details {
padding: 10px 30px;
padding: 10px 40px;
overflow: hidden;
}