diff options
Diffstat (limited to 'src/components/notifications/SMTP.vue')
| -rw-r--r-- | src/components/notifications/SMTP.vue | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/src/components/notifications/SMTP.vue b/src/components/notifications/SMTP.vue new file mode 100644 index 0000000..003f905 --- /dev/null +++ b/src/components/notifications/SMTP.vue @@ -0,0 +1,149 @@ +<template> + <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> + + <i18n-t tag="div" keypath="Either enter the hostname of the server you want to connect to or localhost if you intend to use a locally configured mail transfer agent" class="form-text"> + <template #localhost> + <code>localhost</code> + </template> + <template #local_mta> + <a href="https://wikipedia.org/wiki/Mail_Transfer_Agent" target="_blank">{{ $t("locally configured mail transfer agent") }}</a> + </template> + </i18n-t> + <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> + + <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="new-password"></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=""Uptime Kuma" <example@kuma.pet>"> + <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> + + <p class="form-text"> + <i18n-t tag="div" keypath="smtpLiquidIntroduction" class="form-text mb-3"> + <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a> + </i18n-t> + <code v-pre>{{name}}</code>: {{ $t("emailTemplateServiceName") }}<br /> + <code v-pre>{{msg}}</code>: {{ $t("emailTemplateMsg") }}<br /> + <code v-pre>{{status}}</code>: {{ $t("emailTemplateStatus") }}<br /> + <code v-pre>{{heartbeatJSON}}</code>: {{ $t("emailTemplateHeartbeatJSON") }}<b>{{ $t("emailTemplateLimitedToUpDownNotification") }}</b><br /> + <code v-pre>{{monitorJSON}}</code>: {{ $t("emailTemplateMonitorJSON") }} <b>{{ $t("emailTemplateLimitedToUpDownNotification") }}</b><br /> + <code v-pre>{{hostnameOrURL}}</code>: {{ $t("emailTemplateHostnameOrURL") }}<br /> + </p> + <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 class="form-text">{{ $t("leave blank for default subject") }}</div> + </div> + <div class="mb-3"> + <label for="body-email" class="form-label">{{ $t("emailCustomBody") }}</label> + <textarea id="body-email" v-model="$parent.notification.customBody" type="text" class="form-control" autocomplete="false" placeholder=""></textarea> + <div class="form-text">{{ $t("leave blank for default body") }}</div> + </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> +</template> + +<script> +import HiddenInput from "../HiddenInput.vue"; +import ToggleSection from "../ToggleSection.vue"; + +export default { + components: { + HiddenInput, + ToggleSection, + }, + computed: { + hasRecipient() { + if (this.$parent.notification.smtpTo || this.$parent.notification.smtpCC || this.$parent.notification.smtpBCC) { + return true; + } else { + return false; + } + } + }, + mounted() { + if (typeof this.$parent.notification.smtpSecure === "undefined") { + this.$parent.notification.smtpSecure = false; + } + } +}; +</script> |