Implement email signature setting

dashboard/src/views/EmailDomainView.vue

@@ -94,6 +94,28 @@ async function onToggleMailFromValidation(value) {
   mailFromValidationBusy.value = false;
 }
 
+
+const signatureDialog = useTemplateRef('signatureDialog');
+const signatureBusy = ref(false);
+const signatureText = ref('');
+const signatureHtml = ref('');
+
+function onShowSignatureDialog() {
+  signatureBusy.value = false;
+  signatureDialog.value.open();
+}
+
+async function onSubmitSignature() {
+  signatureBusy.value = true;
+
+  const [error] = await mailModel.setMailBanner(domain.value, signatureText.value, signatureHtml.value);
+  if (error) return console.error(error);
+
+  signatureDialog.value.close();
+  signatureBusy.value = false;
+}
+
+
 async function refreshMailConfig() {
 
   const [error, result] = await mailModel.config(domain.value);
@@ -102,6 +124,8 @@ async function refreshMailConfig() {
   mailConfig.value = result;
   incomingEnabled.value = result.enabled;
   mailFromValidation.value = result.mailFromValidation;
+  signatureText.value = mailConfig.value.banner.text || '';
+  signatureHtml.value = mailConfig.value.banner.html || '';
 
   refreshBusy.value = false;
 }
@@ -123,6 +147,7 @@ onMounted(async () => {
 <template>
   <div>
     <InputDialog ref="inputDialog"/>
+
     <Dialog ref="enableIncomingDialog"
       :title="$t('email.enableEmailDialog.title', { domain: domain })"
       :confirm-label="$t('email.enableEmailDialog.enableAction')"
@@ -143,6 +168,34 @@ onMounted(async () => {
       </div>
     </Dialog>
 
+    <Dialog ref="signatureDialog"
+      :title="$t('email.signature.title')"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="signatureBusy"
+      :reject-label="signatureBusy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onSubmitSignature()"
+    >
+      <div>
+        <form @submit.prevent="onSubmitSignature()" autocomplete="off">
+          <fieldset :disabled="signatureBusy">
+            <input type="submit" style="display: none"/>
+
+            <FormGroup>
+              <label for="sinatureTextInput">{{ $t('email.signature.plainTextFormat') }}</label>
+              <textarea id="sinatureTextInput" v-model="signatureText" rows="4"></textarea>
+            </FormGroup>
+
+            <FormGroup>
+              <label class="sinatureHtmlInput">{{ $t('email.signature.htmlFormat') }}</label>
+              <textarea id="sinatureHtmlInput" v-model="signatureHtml" rows="4"></textarea>
+            </FormGroup>
+
+          </fieldset>
+        </form>
+      </div>
+    </Dialog>
+
     <Section :title="$t('email.config.title', { domain: domain })">
 
     </Section>
@@ -165,6 +218,17 @@ onMounted(async () => {
       </SettingsItem>
 
       <CatchAllSettingsItem :domain-config="mailConfig" />
+
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('email.signature.title') }}</label>
+          <div v-html="$t('email.signature.description')"></div>
+        </FormGroup>
+        <div style="display: flex; align-items: center">
+          <!-- TODO translate -->
+          <Button tool plain @click="onShowSignatureDialog()">Edit</Button>
+        </div>
+      </SettingsItem>
     </Section>
   </div>
 </template>