From 19e08942ed4d9696ba566c19d462d60b281c3e7e Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 12 Mar 2025 15:05:46 +0100
Subject: [PATCH] Add mail relay settings

---
 .../src/components/MailRelaySettingsItem.vue  | 194 ++++++++++++++++++
 dashboard/src/models/MailModel.js             |  11 +
 dashboard/src/views/EmailDomainView.vue       |   3 +
 3 files changed, 208 insertions(+)
 create mode 100644 dashboard/src/components/MailRelaySettingsItem.vue

diff --git a/dashboard/src/components/MailRelaySettingsItem.vue b/dashboard/src/components/MailRelaySettingsItem.vue
new file mode 100644
index 000000000..4c61764f9
--- /dev/null
+++ b/dashboard/src/components/MailRelaySettingsItem.vue
@@ -0,0 +1,194 @@
+<script setup>
+
+import { ref, useTemplateRef, computed } from 'vue';
+import { Button, Dialog, FormGroup, SingleSelect, TextInput, NumberInput, Checkbox, PasswordInput } from 'pankow';
+import SettingsItem from './SettingsItem.vue';
+import MailModel from '../models/MailModel.js';
+
+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: '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: '', 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);
+  return (tmp ? tmp.spfDoc : '') || '';
+});
+
+const mailConfig = ref({});
+const dialog = useTemplateRef('dialog');
+const busy = ref(false);
+const formError = ref('');
+const adminDomain = ref('');
+const provider = ref('cloudron-smtp');
+const host = ref('');
+const port = ref(1);
+const acceptSelfSignedCerts = ref(true);
+const serverApiToken = ref('');
+const username = ref('');
+const password = ref('');
+
+function usesExternalServer(provider) {
+  return provider !== 'cloudron-smtp' && provider !== 'noop';
+}
+
+function usesTokenAuth(provider) {
+  return provider === 'postmark-smtp' || provider === 'sendgrid-smtp' || provider === 'sparkpost-smtp';
+}
+
+function usesPasswordAuth(provider) {
+  return provider === 'external-smtp'
+    || provider === 'ses-smtp'
+    || provider === 'google-smtp'
+    || provider === 'mailgun-smtp'
+    || provider === 'elasticemail-smtp'
+    || provider === 'office365-legacy-smtp'
+    || provider === 'mailjet-smtp';
+}
+
+async function onShowDialog() {
+  formError.value = '';
+  busy.value = false;
+
+  const [error, result] = await mailModel.config(props.domain);
+  if (error) return console.error(error);
+
+  mailConfig.value = result;
+  provider.value = result.relay.provider;
+  host.value = result.relay.host;
+  port.value = result.relay.port;
+  username.value = result.relay.username;
+  password.value = result.relay.password;
+  acceptSelfSignedCerts.value = result.relay.acceptSelfSignedCerts;
+  serverApiToken.value = result.relay.serverApiToken;
+
+  dialog.value.open();
+}
+
+async function onSubmit() {
+  busy.value = true;
+  formError.value = '';
+
+  const data = {
+    provider: provider.value,
+  };
+
+  if (usesExternalServer(data.provider)) {
+    data.username = username.value;
+    data.password = password.value;
+    data.host = host.value;
+    data.port = parseInt(port.value);
+    data.acceptSelfSignedCerts = acceptSelfSignedCerts.value;
+    data.forceFromAddress = false;
+  }
+
+  // fill in provider specific username/password usage
+  if (data.provider === 'postmark-smtp') {
+    data.username = serverApiToken.value;
+    data.password = serverApiToken.value;
+    data.forceFromAddress = true; // postmark requires the "From:" in mail to be a Sender Signature
+  } else if (data.provider === 'sendgrid-smtp') {
+    data.username = 'apikey';
+    data.password = serverApiToken.value;
+  } else if (data.provider === 'sparkpost-smtp') {
+    data.username = 'SMTP_Injection';
+    data.password = serverApiToken.value;
+  }
+
+  const [error] = await mailModel.setMailRelay(props.domain, data);
+  if (error) {
+    formError.value = error.body ? error.body.message : 'Internal error';
+    busy.value = false;
+    return console.error(error);
+  }
+
+  dialog.value.close();
+
+  busy.value = false;
+}
+
+</script>
+
+<template>
+  <div>
+    <Dialog ref="dialog"
+      :title="$t('email.outbound.title')"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="busy"
+      :reject-label="busy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onSubmit()"
+    >
+      <div>
+        <SingleSelect v-model="provider" :options="providers" option-key="provider" option-label="name"/>
+
+        <div class="text-danger" 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>
+
+        <form @submit.prevent="onSubmit()" autocomplete="off" v-if="usesExternalServer(provider)">
+          <fieldset :disabled="busy">
+            <input type="submit" style="display: none"/>
+
+            <FormGroup>
+              <label for="hostInput">{{ $t('email.outbound.mailRelay.host') }}</label>
+              <TextInput id="hostInput" v-model="host" required />
+            </FormGroup>
+
+            <FormGroup>
+              <label for="portInput">{{ $t('email.outbound.mailRelay.port') }}</label>
+              <NumberInput id="portInput" v-model="port" min="1" required />
+            </FormGroup>
+
+            <Checkbox v-model="acceptSelfSignedCerts" :label="$t('email.outbound.mailRelay.selfsignedCheckbox')" v-if="provider === 'external-smtp' || provider === 'external-smtp-noauth'"/>
+
+            <!-- Postmark, Sendgrid, SparkPost -->
+            <FormGroup v-if="usesTokenAuth(provider)">
+              <label for="serverApiTokenInput">{{ $t('email.outbound.mailRelay.apiTokenOrKey') }}</label>
+              <TextInput id="serverApiTokenInput" v-model="serverApiToken" required />
+            </FormGroup>
+
+            <!-- Other -->
+            <FormGroup v-if="usesPasswordAuth(provider)">
+              <label for="usernameInput">{{ $t('email.outbound.mailRelay.username') }}</label>
+              <TextInput id="usernameInput" v-model="username" required />
+            </FormGroup>
+
+            <FormGroup v-if="usesPasswordAuth(provider)">
+              <label for="passwordInput">{{ $t('email.outbound.mailRelay.password') }}</label>
+              <PasswordInput id="passwordInput" v-model="password" required />
+            </FormGroup>
+          </fieldset>
+        </form>
+
+        <div v-if="providerSpfDoc" class="text-danger" style="margin: 10px 0; " v-html="$t('email.outbound.mailRelay.spfDocInfo', { name: provider, spfDocsLink: providerSpfDoc })"></div>
+      </div>
+    </Dialog>
+
+    <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>
+      </FormGroup>
+      <div style="display: flex; align-items: center">
+        <!-- TODO translate -->
+        <Button tool plain @click="onShowDialog()">Edit</Button>
+      </div>
+    </SettingsItem>
+  </div>
+</template>
diff --git a/dashboard/src/models/MailModel.js b/dashboard/src/models/MailModel.js
index efdb55fc0..3c9693bdd 100644
--- a/dashboard/src/models/MailModel.js
+++ b/dashboard/src/models/MailModel.js
@@ -314,6 +314,17 @@ function create() {
       if (result.status !== 200) return [result];
       return [null, result.body.eventlogs];
     },
+    async setMailRelay(domain, data) {
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/mail/${domain}/relay`, data, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 202) return [result];
+      return [null];
+    },
   };
 }
 
diff --git a/dashboard/src/views/EmailDomainView.vue b/dashboard/src/views/EmailDomainView.vue
index 0d1130135..602ab31fc 100644
--- a/dashboard/src/views/EmailDomainView.vue
+++ b/dashboard/src/views/EmailDomainView.vue
@@ -9,6 +9,7 @@ import { Button, Checkbox, InputDialog, Dialog, FormGroup, Switch } from 'pankow
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import CatchAllSettingsItem from '../components/CatchAllSettingsItem.vue';
+import MailRelaySettingsItem from '../components/MailRelaySettingsItem.vue';
 import MailDomainStatus from '../components/MailDomainStatus.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import DomainsModel from '../models/DomainsModel.js';
@@ -245,6 +246,8 @@ onMounted(async () => {
         <Switch v-model="incomingEnabled" :disabled="refreshBusy" @change="onAskIncomingToggle"/>
       </SettingsItem>
 
+      <MailRelaySettingsItem v-if="domain" :domain="domain"/>
+
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('email.masquerading.title') }}</label>