Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Feat: Add SMTP DKIM settings #1080

Merged
merged 1 commit into from
Dec 22, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions server/notification-providers/smtp.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 14 additions & 0 deletions src/assets/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
67 changes: 67 additions & 0 deletions src/components/ToggleSection.vue
Original file line number Diff line number Diff line change
@@ -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>
147 changes: 91 additions & 56 deletions src/components/notifications/SMTP.vue
Original file line number Diff line number Diff line change
@@ -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>
<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="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">
<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 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>

<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="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="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="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>

<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-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-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>
<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 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() {
Expand Down
2 changes: 2 additions & 0 deletions src/icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
faFile,
faAward,
faLink,
faChevronDown,
} from "@fortawesome/free-solid-svg-icons";

library.add(
Expand Down Expand Up @@ -65,6 +66,7 @@ library.add(
faFile,
faAward,
faLink,
faChevronDown,
);

export { FontAwesomeIcon };
Expand Down
10 changes: 9 additions & 1 deletion src/languages/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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)",
};