jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add mail connection details dialog

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-12 13:41:07 +01:00
parent 00a5dbf42c
commit 0865b9bbc5
12 changed files with 56 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
dashboard/src/views/EmailDomainView.vue
View File

@@ -10,22 +10,30 @@ import Section from '../components/Section.vue';
import SettingsItem from '../components/SettingsItem.vue';
import CatchAllSettingsItem from '../components/CatchAllSettingsItem.vue';
import MailDomainStatus from '../components/MailDomainStatus.vue';
import DashboardModel from '../models/DashboardModel.js';
import DomainsModel from '../models/DomainsModel.js';
import MailModel from '../models/MailModel.js';
const dashboardModel = DashboardModel.create();
const domainsModel = DomainsModel.create();
const mailModel = MailModel.create();
const inputDialog = useTemplateRef('inputDialog');
const enableIncomingDialog = useTemplateRef('enableIncomingDialog');
const connectionDialog = useTemplateRef('connectionDialog');
const domain = ref('');
const domainProvider = ref('');
const mailConfig = ref({});
const mailFqdn = ref('');
const refreshBusy = ref(false);
const incomingEnabled = ref(false);
const enableIncomeBusy = ref(false);
const enableIncomingSetupDns = ref(false);
const infoMenu = ref([]);
function onShowConnectionDialog() {
connectionDialog.value.open();
}
async function onAskIncomingToggle(value) {
if (value) {
@@ -121,6 +129,16 @@ async function refreshMailConfig() {
signatureText.value = mailConfig.value.banner.text || '';
signatureHtml.value = mailConfig.value.banner.html || '';
infoMenu.value = [{
label: t('app.docsAction'),
// TODO support real href links
action: () => { window.open('https://docs.cloudron.io/email/'); }
}, {
label: t('email.config.clientConfiguration'),
disabled: !mailConfig.value.enabled,
action: onShowConnectionDialog
}];
refreshBusy.value = false;
}
@@ -128,11 +146,16 @@ onMounted(async () => {
domain.value = window.location.hash.slice('#/email/'.length);
if (!domain.value) return;
const [error, result] = await domainsModel.get(domain.value);
let [error, result] = await domainsModel.get(domain.value);
if (error) return console.error(error);
domainProvider.value = result.provider;
[error, result] = await dashboardModel.config();
if (error) return console.error(error);
mailFqdn.value = result.mailFqdn;
await refreshMailConfig();
});
@@ -142,6 +165,21 @@ onMounted(async () => {
<div>
<InputDialog ref="inputDialog"/>
<Dialog ref="connectionDialog"
:title="$t('email.howToConnectInfoModal')"
:reject-label="$t('main.dialog.close')"
>
<div>
<p v-html="$t('email.incoming.howToConnectDescription', { domain: domain })"></p>
<p><b>{{ $t('email.incoming.incomingUserInfo') }}</b><br/><i>mailboxname</i>@{{ domain }}</p>
<p><b>{{ $t('email.incoming.incomingPasswordInfo') }}</b><br/>{{ $t('email.incoming.incomingPasswordUsage') }}</p>
<p><b>{{ $t('email.incoming.incomingServerInfo') }}</b><br/>{{ $t('email.incoming.server') }}: <span>{{ mailFqdn }}</span><br/>{{ $t('email.incoming.port') }}: 993 (TLS)</p>
<p><b>{{ $t('email.incoming.outgointServerInfo') }}</b><br/>{{ $t('email.incoming.server') }}: <span>{{ mailFqdn }}</span><br/>{{ $t('email.incoming.port') }}: 587 (STARTTLS) or 465 (TLS)</p>
<p><b>{{ $t('email.incoming.sieveServerInfo') }}</b><br/>{{ $t('email.incoming.server') }}: <span>{{ mailFqdn }}</span><br/>{{ $t('email.incoming.port') }}: 4190 (STARTTLS)</p>
</div>
</Dialog>
<Dialog ref="enableIncomingDialog"
:title="$t('email.enableEmailDialog.title', { domain: domain })"
:confirm-label="$t('email.enableEmailDialog.enableAction')"
@@ -190,7 +228,10 @@ onMounted(async () => {
</div>
</Dialog>
<h1>{{ $t('email.config.title', { domain: domain }) }}</h1>
<h1 style="display: flex; justify-content: space-between; padding-right: 20px">
{{ $t('email.config.title', { domain: domain }) }}
<Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
</h1>
<!-- v-if here ensures the prop is already set when passed down to MailDomainStatus -->
<MailDomainStatus v-if="domain" :domain="domain"/>