Feat: Expose SMTP DKIM settings

server/notification-providers/smtp.js

@@ -15,6 +15,14 @@ class SMTP extends NotificationProvider {
             tls: {
                 rejectUnauthorized: notification.smtpIgnoreTLSError || false,
             },
+            dkim: {
+                domainName: notification.smtpDkimDomain,
+                keySelector: notification.smtpDkimKeySelector,
+                privateKey: notification.smtpDkimPrivateKey,
+                hashAlgo: notification.smtpDkimHashAlgo,
+                headerFieldNames: notification.smtpDkimheaderFieldNames,
+                skipFields: notification.smtpDkimskipFields,
+            }
         };
 
         // Should fix the issue in https://github.com/louislam/uptime-kuma/issues/26#issuecomment-896373904

src/assets/app.scss

@@ -313,6 +313,20 @@ textarea.form-control {
     opacity: 0;
 }
 
+.slide-fade-up-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-up-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-up-enter-from,
+.slide-fade-up-leave-to {
+    transform: translateY(-50px);
+    opacity: 0;
+}
+
 .monitor-list {
     &.scrollbar {
         min-height: calc(100vh - 240px);

src/components/ToggleSection.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="my-3 py-3">
+        <h5 @click="isOpen = !isOpen">
+            <div
+                class="
+                    w-50
+                    d-flex
+                    justify-content-between
+                    align-items-center
+                    pe-2
+                "
+            >
+                <span class="pb-2">{{ heading }}</span>
+                <font-awesome-icon
+                    icon="chevron-down"
+                    class="animated"
+                    :class="{ open: isOpen }"
+                />
+            </div>
+        </h5>
+        <transition name="slide-fade-up">
+            <div v-if="isOpen" class="mt-3">
+                <slot></slot>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        heading: {
+            type: String,
+            default: "",
+        },
+        defaultOpen: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            isOpen: this.defaultOpen,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+h5:after {
+    content: "";
+    display: block;
+    width: 50%;
+    padding-top: 8px;
+    border-bottom: 1px solid $dark-border-color;
+}
+
+.open {
+    transform: rotate(180deg);
+}
+
+.animated {
+    transition: all 0.2s $easing-in;
+}
+</style>

src/components/notifications/SMTP.vue

@@ -1,82 +1,117 @@
 <template>
-    <div class="mb-3">
-        <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
-        <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
-    </div>
-
-    <div class="mb-3">
-        <label for="port" class="form-label">{{ $t("Port") }}</label>
-        <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
-    </div>
-
-    <div class="mb-3">
-        <label for="secure" class="form-label">{{ $t("Security") }}</label>
-        <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
-            <option :value="false">{{ $t("secureOptionNone") }}</option>
-            <option :value="true">{{ $t("secureOptionTLS") }}</option>
-        </select>
-    </div>
-
-    <div class="mb-3">
-        <div class="form-check">
-            <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
-            <label class="form-check-label" for="ignore-tls-error">
-                {{ $t("Ignore TLS Error") }}
-            </label>
+    <div>
+        <div class="mb-3">
+            <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
+            <input id="hostname" v-model="$parent.notification.smtpHost" type="text" class="form-control" required>
         </div>
-    </div>
 
-    <div class="mb-3">
-        <label for="username" class="form-label">{{ $t("Username") }}</label>
-        <input id="username" v-model="$parent.notification.smtpUsername" type="text" class="form-control" autocomplete="false">
-    </div>
-
-    <div class="mb-3">
-        <label for="password" class="form-label">{{ $t("Password") }}</label>
-        <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="one-time-code"></HiddenInput>
-    </div>
-
-    <div class="mb-3">
-        <label for="from-email" class="form-label">{{ $t("From Email") }}</label>
-        <input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;">
-        <div class="form-text">
+        <div class="mb-3">
+            <label for="port" class="form-label">{{ $t("Port") }}</label>
+            <input id="port" v-model="$parent.notification.smtpPort" type="number" class="form-control" required min="0" max="65535" step="1">
         </div>
-    </div>
 
-    <div class="mb-3">
-        <label for="to-email" class="form-label">{{ $t("To Email") }}</label>
-        <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient">
-    </div>
+        <div class="mb-3">
+            <label for="secure" class="form-label">{{ $t("Security") }}</label>
+            <select id="secure" v-model="$parent.notification.smtpSecure" class="form-select">
+                <option :value="false">{{ $t("secureOptionNone") }}</option>
+                <option :value="true">{{ $t("secureOptionTLS") }}</option>
+            </select>
+        </div>
 
-    <div class="mb-3">
-        <label for="to-cc" class="form-label">{{ $t("smtpCC") }}</label>
-        <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
-    </div>
+        <div class="mb-3">
+            <div class="form-check">
+                <input id="ignore-tls-error" v-model="$parent.notification.smtpIgnoreTLSError" class="form-check-input" type="checkbox" value="">
+                <label class="form-check-label" for="ignore-tls-error">
+                    {{ $t("Ignore TLS Error") }}
+                </label>
+            </div>
+        </div>
 
-    <div class="mb-3">
-        <label for="to-bcc" class="form-label">{{ $t("smtpBCC") }}</label>
-        <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
-    </div>
+        <div class="mb-3">
+            <label for="username" class="form-label">{{ $t("Username") }}</label>
+            <input id="username" v-model="$parent.notification.smtpUsername" type="text" class="form-control" autocomplete="false">
+        </div>
 
-    <div class="mb-3">
-        <label for="subject-email" class="form-label">{{ $t("emailCustomSubject") }}</label>
-        <input id="subject-email" v-model="$parent.notification.customSubject" type="text" class="form-control" autocomplete="false" placeholder="">
-        <div v-pre class="form-text">
-            (leave blank for default one)<br />
-            {{NAME}}: Service Name<br />
-            {{HOSTNAME_OR_URL}}: Hostname or URL<br />
-            {{URL}}: URL<br />
-            {{STATUS}}: Status<br />
+        <div class="mb-3">
+            <label for="password" class="form-label">{{ $t("Password") }}</label>
+            <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="one-time-code"></HiddenInput>
+        </div>
+
+        <div class="mb-3">
+            <label for="from-email" class="form-label">{{ $t("From Email") }}</label>
+            <input id="from-email" v-model="$parent.notification.smtpFrom" type="text" class="form-control" required autocomplete="false" placeholder="&quot;Uptime Kuma&quot; &lt;example@kuma.pet&gt;">
+            <div class="form-text">
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="to-email" class="form-label">{{ $t("To Email") }}</label>
+            <input id="to-email" v-model="$parent.notification.smtpTo" type="text" class="form-control" autocomplete="false" placeholder="example2@kuma.pet, example3@kuma.pet" :required="!hasRecipient">
+        </div>
+
+        <div class="mb-3">
+            <label for="to-cc" class="form-label">{{ $t("smtpCC") }}</label>
+            <input id="to-cc" v-model="$parent.notification.smtpCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
+        </div>
+
+        <div class="mb-3">
+            <label for="to-bcc" class="form-label">{{ $t("smtpBCC") }}</label>
+            <input id="to-bcc" v-model="$parent.notification.smtpBCC" type="text" class="form-control" autocomplete="false" :required="!hasRecipient">
+        </div>
+
+        <ToggleSection :heading="$t('smtpDkimSettings')">
+            <i18n-t tag="div" keypath="smtpDkimDesc" class="form-text mb-3">
+                <a href="https://nodemailer.com/dkim/" target="_blank">{{ $t("documentation") }}</a>
+            </i18n-t>
+
+            <div class="mb-3">
+                <label for="dkim-domain" class="form-label">{{ $t("smtpDkimDomain") }}</label>
+                <input id="dkim-domain" v-model="$parent.notification.smtpDkimDomain" type="text" class="form-control" autocomplete="false" placeholder="example.com">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-key-selector" class="form-label">{{ $t("smtpDkimKeySelector") }}</label>
+                <input id="dkim-key-selector" v-model="$parent.notification.smtpDkimKeySelector" type="text" class="form-control" autocomplete="false" placeholder="2017">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-private-key" class="form-label">{{ $t("smtpDkimPrivateKey") }}</label>
+                <textarea id="dkim-private-key" v-model="$parent.notification.smtpDkimPrivateKey" rows="5" type="text" class="form-control" autocomplete="false" placeholder="-----BEGIN PRIVATE KEY-----"></textarea>
+            </div>
+            <div class="mb-3">
+                <label for="dkim-hash-algo" class="form-label">{{ $t("smtpDkimHashAlgo") }}</label>
+                <input id="dkim-hash-algo" v-model="$parent.notification.smtpDkimHashAlgo" type="text" class="form-control" autocomplete="false" placeholder="sha256">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-header-fields" class="form-label">{{ $t("smtpDkimheaderFieldNames") }}</label>
+                <input id="dkim-header-fields" v-model="$parent.notification.smtpDkimheaderFieldNames" type="text" class="form-control" autocomplete="false" placeholder="message-id:date:from:to">
+            </div>
+            <div class="mb-3">
+                <label for="dkim-skip-fields" class="form-label">{{ $t("smtpDkimskipFields") }}</label>
+                <input id="dkim-skip-fields" v-model="$parent.notification.smtpDkimskipFields" type="text" class="form-control" autocomplete="false" placeholder="message-id:date">
+            </div>
+        </ToggleSection>
+
+        <div class="mb-3">
+            <label for="subject-email" class="form-label">{{ $t("emailCustomSubject") }}</label>
+            <input id="subject-email" v-model="$parent.notification.customSubject" type="text" class="form-control" autocomplete="false" placeholder="">
+            <div v-pre class="form-text">
+                (leave blank for default one)<br />
+                {{NAME}}: Service Name<br />
+                {{HOSTNAME_OR_URL}}: Hostname or URL<br />
+                {{URL}}: URL<br />
+                {{STATUS}}: Status<br />
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import HiddenInput from "../HiddenInput.vue";
+import ToggleSection from "../ToggleSection.vue";
 
 export default {
     components: {
         HiddenInput,
+        ToggleSection,
     },
     computed: {
         hasRecipient() {

src/icon.js

@@ -33,6 +33,7 @@ import {
     faFile,
     faAward,
     faLink,
+    faChevronDown,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -65,6 +66,7 @@ library.add(
     faFile,
     faAward,
     faLink,
+    faChevronDown,
 );
 
 export { FontAwesomeIcon };

src/languages/en.js

@@ -339,7 +339,6 @@ export default {
     "No monitors available.": "No monitors available.",
     "Add one": "Add one",
     "No Monitors": "No Monitors",
-    "Add one": "Add one",
     "Untitled Group": "Untitled Group",
     Services: "Services",
     Discard: "Discard",
@@ -352,4 +351,13 @@ export default {
     serwersmsPhoneNumber: "Phone number",
     serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
     "stackfield": "Stackfield",
+    smtpDkimSettings: "DKIM Settings",
+    smtpDkimDesc: "Please refer to the Nodemailer DKIM {0} for usage.",
+    documentation: "documentation",
+    smtpDkimDomain: "Domain Name",
+    smtpDkimKeySelector: "Key Selector",
+    smtpDkimPrivateKey: "Private Key",
+    smtpDkimHashAlgo: "Hash Algorithm (Optional)",
+    smtpDkimheaderFieldNames: "Header Keys to sign (Optional)",
+    smtpDkimskipFields: "Header Keys not to sign (Optional)",
 };