Add app configure recvmail ui

dashboard/src/components/app/Email.vue

@@ -6,11 +6,15 @@ import { Button, Radiobutton, InputGroup, FormGroup, TextInput, SingleSelect } f
 import { ref, onMounted } from 'vue';
 import AppsModel from '../../models/AppsModel.js';
 import DomainsModel from '../../models/DomainsModel.js';
+import MailboxesModel from '../../models/MailboxesModel.js';
 
 const appsModel = AppsModel.create();
 const domainsModel = DomainsModel.create();
+const mailboxesModel = MailboxesModel.create();
 
 const domains = ref([]);
+const mailboxes = ref([]);
+
 const hasRecvmail = ref(false);
 const hasSendmail = ref(false);
 const sendmailBusy = ref(false);
@@ -22,10 +26,16 @@ const sendmailDisplayName = ref('');
 const sendmailDomain = ref('');
 const enableMailbox = ref(0);
 
+const recvmailBusy = ref(false);
+const recvmailError = ref('');
+const recvmailEnable = ref(0);
+const recvmailMailbox = ref({});
+
 async function onSendmailSubmit() {
   if (!sendmailMailboxName.value) return;
 
   sendmailBusy.value = true;
+  sendmailError.value = '';
 
   const data = {
     enable: !!enableMailbox.value
@@ -47,6 +57,29 @@ async function onSendmailSubmit() {
   sendmailBusy.value = false;
 }
 
+async function onRecvmailSubmit() {
+  recvmailBusy.value = true;
+  recvmailError.value = '';
+
+  const data = {
+    enable: !!recvmailEnable.value
+  };
+
+  if (data.enable) {
+    data.inboxName = recvmailMailbox.value.split('@')[0];
+    data.inboxDomain = recvmailMailbox.value.split('@')[1];
+  }
+
+  const [error] = await appsModel.configure(props.app.id, 'inbox', data);
+  if (error) {
+    recvmailError.value = error.body ? error.body.message : 'Internal error';
+    recvmailBusy.value = false;
+    return console.error(error);
+  }
+
+  recvmailBusy.value = false;
+}
+
 onMounted(async () => {
   const [error, result] = await domainsModel.list();
   if (error) return console.error(error);
@@ -54,18 +87,38 @@ onMounted(async () => {
   domains.value = result.map(d => {
     return {
       id: d.domain,
-      label: d.domain
+      label: d.domain,
+      domain: 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;
+
+  let tmp = [];
+  for (const d of domains.value) {
+    const [error, result] = await mailboxesModel.list(d.domain);
+    if (error) return console.error(error);
+    tmp = tmp.concat(result);
+  }
+
+  mailboxes.value = tmp.map(m => {
+    return {
+      id: m.name + '@' + m.domain,
+      label: m.name + '@' + m.domain,
+    };
+  });
+
+  recvmailEnable.value = props.app.enableInbox ? 1 : 0;
+  recvmailMailbox.value = props.app.inboxName ? props.app.inboxName + '@' + props.app.inboxDomain : '';
+
+  // do this last to avoid ui flicker
+  hasRecvmail.value = props.app.manifest?.addons?.recvmail;
+  hasSendmail.value = props.app.manifest?.addons?.sendmail;
 });
 
 </script>
@@ -109,5 +162,28 @@ onMounted(async () => {
     </div>
 
     <hr v-if="hasSendmail && hasRecvmail"/>
+
+    <div v-if="hasRecvmail">
+      <FormGroup>
+        <label>{{ $t('app.email.inbox.title') }} <sup><a href="https://docs.cloudron.io/apps/#inbox" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+
+        <Radiobutton v-model="recvmailEnable" :value="1" :label="$t('app.email.inbox.enable')"/>
+        <div style="margin-bottom: 18px; padding-left: 20px">
+          <p v-html="$t('app.email.inbox.enableDescription', { domain: app.domain, domainConfigLink: ('/#/email/' + app.domain) })"></p>
+
+          <FormGroup>
+            <div class="has-error" v-if="recvmailError">{{ recvmailError }}</div>
+            <SingleSelect v-model="recvmailMailbox" :disabled="!recvmailEnable" :options="mailboxes" option-key="id"/>
+          </FormGroup>
+        </div>
+
+        <Radiobutton v-model="recvmailEnable" :value="0" :label="$t('app.email.inbox.disable')"/>
+        <p style="padding-left: 20px;">{{ $t('app.email.inbox.disableDescription') }}</p>
+      </FormGroup>
+
+      <br/>
+
+      <Button @click="onRecvmailSubmit()" :disabled="recvmailBusy || app.error || app.taskId" :loading="recvmailBusy" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.email.from.saveAction') }}</Button>
+    </div>
   </div>
 </template>