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

Make email relay provider info more usable in other components

Browse Source
This commit is contained in:
Johannes Zellner
2025-10-09 15:56:00 +02:00
parent 63b51d2fca
commit 47ae1443d1
3 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/MailRelaySettingsItem.vue
+19 -25
View File
@@ -1,33 +1,18 @@
<script setup>
import { ref, useTemplateRef, computed } from 'vue';
import { ref, useTemplateRef, computed, onMounted } from 'vue';
import { Button, Dialog, FormGroup, SingleSelect, TextInput, NumberInput, Checkbox, MaskedInput } from '@cloudron/pankow';
import SettingsItem from './SettingsItem.vue';
import MailModel from '../models/MailModel.js';
import { RELAY_PROVIDERS } from '../constants.js';
import { prettyRelayProviderName } from '../utils';
const props = defineProps(['domain']);
const mailModel = MailModel.create();
const providers = [
{ provider: 'cloudron-smtp', name: 'Built-in SMTP server' },
{ provider: 'external-smtp', name: 'External SMTP server', host: '', port: 587 },
{ provider: 'external-smtp-noauth', name: 'External SMTP server (No Authentication)', host: '', port: 587 },
{ provider: 'ses-smtp', name: 'Amazon SES', host: 'email-smtp.us-east-1.amazonaws.com', port: 587, spfDoc: 'https://docs.aws.amazon.com/ses/latest/DeveloperGuide/spf.html' },
{ provider: 'brevo-smtp', name: 'Brevo', host: 'smtp-relay.brevo.com', port: 587, spfDoc: 'https://help.brevo.com/hc/en-us/articles/12163873383186-Authenticate-your-domain-with-Brevo-Brevo-code-DKIM-DMARC' },
{ provider: 'elasticemail-smtp', name: 'Elastic Email', host: 'smtp.elasticemail.com', port: 587, spfDoc: 'https://elasticemail.com/blog/marketing_tips/common-spf-errors' },
{ provider: 'google-smtp', name: 'Google', host: 'smtp.gmail.com', port: 587, spfDoc: 'https://support.google.com/a/answer/33786?hl=en' },
{ provider: 'mailgun-smtp', name: 'Mailgun', host: 'smtp.mailgun.org', port: 587, spfDoc: 'https://www.mailgun.com/blog/white-labeling-dns-records-your-customers-tips-tricks' },
{ provider: 'mailjet-smtp', name: 'Mailjet', host: 'in-v3.mailjet.com', port: 587, spfDoc: 'https://app.mailjet.com/docs/spf-dkim-guide' },
{ provider: 'office365-legacy-smtp', name: 'Office 365', host: 'smtp-legacy.office365.com', port: 587 }, // uses "login" AUTH instead of "plain"
{ provider: 'postmark-smtp', name: 'Postmark', host: 'smtp.postmarkapp.com', port: 587, spfDoc: 'https://postmarkapp.com/support/article/1092-how-do-i-set-up-spf-for-postmark' },
{ provider: 'sendgrid-smtp', name: 'SendGrid', host: 'smtp.sendgrid.net', port: 587, username: 'apikey', spfDoc: 'https://sendgrid.com/docs/ui/account-and-settings/spf-records/' },
{ provider: 'sparkpost-smtp', name: 'SparkPost', host: 'smtp.sparkpostmail.com', port: 587, username: 'SMTP_Injection', spfDoc: 'https://www.sparkpost.com/resources/email-explained/spf-sender-policy-framework/' },
{ provider: 'noop', name: 'Disable' },
];
const providerSpfDoc = computed(() => {
const tmp = providers.find(p => p.provider === provider.value);
const tmp = RELAY_PROVIDERS.find(p => p.provider === provider.value);
return (tmp ? tmp.spfDoc : '') || '';
});
@@ -79,7 +64,7 @@ function onProviderChange() {
password.value = '';
// prefill from preset
const tmp = providers.find(p => p.provider === provider.value);
const tmp = RELAY_PROVIDERS.find(p => p.provider === provider.value);
if (!tmp) return;
if (tmp.host) host.value = tmp.host;
@@ -150,6 +135,13 @@ async function onSubmit() {
busy.value = false;
}
onMounted(async () => {
const [error, result] = await mailModel.config(props.domain);
if (error) return console.error(error);
provider.value = result.relay.provider;
});
</script>
<template>
@@ -164,14 +156,14 @@ async function onSubmit() {
@confirm="onSubmit()"
>
<div>
<SingleSelect v-model="provider" :options="providers" option-key="provider" option-label="name" @select="onProviderChange()" style="display: flex;"/>
<SingleSelect v-model="provider" :options="RELAY_PROVIDERS" option-key="provider" option-label="name" @select="onProviderChange()" style="display: flex;"/>
<!-- set max-width here until Dialog supports that -->
<div v-if="providerSpfDoc" class="text-warning" style="margin: 10px 0; max-width: 600px" v-html="$t('email.outbound.mailRelay.spfDocInfo', { name: provider, spfDocsLink: providerSpfDoc })"></div>
<div class="text-danger" style="margin: 10px 0;" v-if="provider === 'noop'">{{ $t(domain === adminDomain ? 'email.outbound.noopAdminDomainWarning' : 'email.outbound.noopNonAdminDomainWarning') }}</div>
<div class="error-label" style="margin: 10px 0;" v-if="provider === 'noop'">{{ $t(domain === adminDomain ? 'email.outbound.noopAdminDomainWarning' : 'email.outbound.noopNonAdminDomainWarning') }}</div>
<div class="text-danger" v-if="formError">{{ formError }}</div>
<div class="error-label" v-if="formError">{{ formError }}</div>
<form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
<fieldset :disabled="busy" v-if="usesExternalServer(provider)">
@@ -214,9 +206,11 @@ async function onSubmit() {
<SettingsItem>
<FormGroup>
<label>{{ $t('email.outbound.title') }} <sup><a href="https://docs.cloudron.io/email/#relay-outbound-mails" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div v-html="$t('email.outbound.description')"></div>
<div>
<b>{{ prettyRelayProviderName(provider) }}</b> - <span v-html="$t('email.outbound.description')"></span>
</div>
</FormGroup>
<div style="display: flex; align-items: center">
<div style="display: flex; align-items: center;">
<Button tool plain @click="onShowDialog()">{{ $t('main.dialog.edit') }}</Button>
</div>
</SettingsItem>