Add app configure sendmail ui

dashboard/src/components/app/Email.vue

@@ -0,0 +1,113 @@
+<script setup>
+
+const props = defineProps([ 'app' ]);
+
+import { Button, Radiobutton, InputGroup, FormGroup, TextInput, SingleSelect } from 'pankow';
+import { ref, onMounted } from 'vue';
+import AppsModel from '../../models/AppsModel.js';
+import DomainsModel from '../../models/DomainsModel.js';
+
+const appsModel = AppsModel.create();
+const domainsModel = DomainsModel.create();
+
+const domains = ref([]);
+const hasRecvmail = ref(false);
+const hasSendmail = ref(false);
+const sendmailBusy = ref(false);
+const sendmailError = ref('');
+const sendmailSupportsDisplayName = ref(false);
+const sendmailOptional = ref(false);
+const sendmailMailboxName = ref('');
+const sendmailDisplayName = ref('');
+const sendmailDomain = ref('');
+const enableMailbox = ref(0);
+
+async function onSendmailSubmit() {
+  if (!sendmailMailboxName.value) return;
+
+  sendmailBusy.value = true;
+
+  const data = {
+    enable: !!enableMailbox.value
+  };
+
+  if (data.enable) {
+    data.mailboxName = sendmailMailboxName.value;
+    data.mailboxDomain = sendmailDomain.value;
+    data.mailboxDisplayName = sendmailDisplayName.value;
+  }
+
+  const [error] = await appsModel.configure(props.app.id, 'mailbox', data);
+  if (error) {
+    sendmailError.value = error.body ? error.body.message : 'Internal error';
+    sendmailBusy.value = false;
+    return console.error(error);
+  }
+
+  sendmailBusy.value = false;
+}
+
+onMounted(async () => {
+  const [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result.map(d => {
+    return {
+      id: d.domain,
+      label: d.domain
+    };
+  });
+
+  hasRecvmail.value = props.app.manifest?.addons?.recvmail;
+  hasSendmail.value = props.app.manifest?.addons?.sendmail;
+  sendmailSupportsDisplayName.value = props.app.manifest?.addons?.sendmail?.supportsDisplayName;
+  sendmailOptional.value = props.app.manifest?.addons?.sendmail?.optional;
+  sendmailMailboxName.value = props.app.mailboxName || '';
+  sendmailDisplayName.value = props.app.mailboxDisplayName || '';
+  sendmailDomain.value = props.app.mailboxDomain || props.app.domain;
+  enableMailbox.value = props.app.enableMailbox ? 1 : 0;
+});
+
+</script>
+
+<template>
+  <div>
+    <div v-if="hasSendmail">
+      <FormGroup>
+        <label>{{ $t('app.email.from.title') }} <sup><a href="https://docs.cloudron.io/apps/#mail-from-address" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+
+        <Radiobutton v-if="sendmailOptional" v-model="enableMailbox" :value="1" :label="$t('app.email.from.enable')"/>
+
+        <div style="margin-bottom: 18px;" :style="{ 'padding-left': sendmailOptional ? '20px' : '0' }">
+          <p v-html="$t('app.email.from.enableDescription', { domain: app.domain, domainConfigLink: ('/#/email/' + app.domain) })"></p>
+
+          <form @submit.prevent="onSendmailSubmit()" autocomplete="off">
+            <fieldset :disabled="enableMailbox === 0 || sendmailBusy || app.error || app.taskId">
+              <input type="submit" style="display: none;" :disabled="!sendmailMailboxName"/>
+
+              <FormGroup>
+                <div class="has-error" v-if="sendmailError">{{ sendmailError }}</div>
+
+                <InputGroup>
+                  <TextInput v-if="sendmailSupportsDisplayName" v-model="sendmailDisplayName" :placeholder="$t('app.email.from.displayName')"/>
+                  <TextInput v-model="sendmailMailboxName" :placeholder="$t('app.email.from.mailboxPlaceholder')"/>
+                  <label>@</label>
+                  <SingleSelect v-model="sendmailDomain" :options="domains" option-key="id"/>
+                </InputGroup>
+              </FormGroup>
+            </fieldset>
+          </form>
+        </div>
+
+        <Radiobutton v-if="sendmailOptional" v-model="enableMailbox" :value="0" :label="$t('app.email.from.disable')"/>
+        <p v-if="sendmailOptional" style="padding-left: 20px;">{{ $t('app.email.from.disableDescription') }}</p>
+      </FormGroup>
+
+      <br/>
+
+      <Button @click="onSendmailSubmit()" :loading="sendmailBusy" :disabled="sendmailBusy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.email.from.saveAction') }}</Button>
+    </div>
+
+    <hr v-if="hasSendmail && hasRecvmail"/>
+  </div>
+</template>

dashboard/src/views/AppConfigureView.vue

@@ -8,16 +8,17 @@ const t = i18n.t;
 
 import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 import { Button, ButtonGroup } from 'pankow';
-import Info from '../components/app/Info.vue';
-import Display from '../components/app/Display.vue';
-import Security from '../components/app/Security.vue';
-import Cron from '../components/app/Cron.vue';
-import Resources from '../components/app/Resources.vue';
 import Backups from '../components/app/Backups.vue';
-import Repair from '../components/app/Repair.vue';
+import Cron from '../components/app/Cron.vue';
+import Display from '../components/app/Display.vue';
+import Email from '../components/app/Email.vue';
 import Eventlog from '../components/app/Eventlog.vue';
-import Updates from '../components/app/Updates.vue';
+import Info from '../components/app/Info.vue';
+import Resources from '../components/app/Resources.vue';
+import Repair from '../components/app/Repair.vue';
+import Security from '../components/app/Security.vue';
 import Uninstall from '../components/app/Uninstall.vue';
+import Updates from '../components/app/Updates.vue';
 import AppsModel from '../models/AppsModel.js';
 import { APP_TYPES, ISTATES, RSTATES, HSTATES } from '../constants.js';
 
@@ -199,7 +200,7 @@ onBeforeUnmount(() => {
           <div v-if="view === 'storage'"></div>
           <div v-if="view === 'graphs'"></div>
           <Security :app="app" v-if="view === 'security'"/>
-          <div v-if="view === 'email'"></div>
+          <Email :app="app" v-if="view === 'email'"/>
           <Cron :app="app" v-if="view === 'cron'"/>
           <Updates :app="app" v-if="view === 'updates'"/>
           <Backups :app="app" v-if="view === 'backups'"/>