beenull/listmonk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add SMTP config shortcuts for popular providers in the settings UI.

Browse source
This commit is contained in:
Kailash Nadh 2022-07-11 21:17:23 +05:30
parent 278d5bf74e
commit 9107edf867
2 changed files with 54 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/assets/style.scss
View file

@ -828,6 +828,10 @@ section.analytics {
height: auto;
min-height: 350px;
}
.smtp-shortcuts a {
margin-right: 15px;
display: inline-block;
}
}
/* Logs */
@ -1034,6 +1038,10 @@ section.analytics {
.page-header .buttons {
display: block;
}
.b-tabs .tab-content {
padding: 15px 0 0 0;
}
}
/* On big sizes, keep the header buttons small and non-expanded. */

47
frontend/src/views/settings/smtp.vue
View file

@ -52,7 +52,7 @@
<b-field grouped>
<b-field :label="$t('settings.mailserver.username')"
label-position="on-border" expanded>
<b-input v-model="item.username"
<b-input v-model="item.username" :custom-class="`smtp-username-${n}`"
:disabled="item.auth_protocol === 'none'"
name="username" placeholder="mysmtp" :maxlength="200" />
</b-field>
@ -68,6 +68,15 @@
</b-field>
</div>
</div><!-- auth -->
<div class="smtp-shortcuts is-size-7">
<a href="" @click.prevent="() => fillSettings(n, 'gmail')">Gmail</a>
<a href="" @click.prevent="() => fillSettings(n, 'ses')">Amazon SES</a>
<a href="" @click.prevent="() => fillSettings(n, 'mailgun')">Mailgun</a>
<a href="" @click.prevent="() => fillSettings(n, 'mailjet')">Mailjet</a>
<a href="" @click.prevent="() => fillSettings(n, 'sendgrid')">Sendgrid</a>
<a href="" @click.prevent="() => fillSettings(n, 'postmark')">Postmark</a>
<a href="" @click.prevent="() => fillSettings(n, 'mailersend')">MailerSend</a>
</div>
<hr />
<div class="columns">
@ -205,6 +214,27 @@ import Vue from 'vue';
import { mapState } from 'vuex';
import { regDuration } from '../../constants';
const smtpTemplates = {
gmail: {
host: 'smtp.gmail.com', port: 465, auth_protocol: 'login', tls_type: 'TLS',
},
ses: {
host: 'email-smtp.YOUR-REGION.amazonaws.com', port: 465, auth_protocol: 'login', tls_type: 'TLS',
},
mailjet: {
host: 'in-v3.mailjet.com', port: 465, auth_protocol: 'cram', tls_type: 'TLS',
},
mailgun: {
host: 'smtp.mailgun.org', port: 465, auth_protocol: 'login', tls_type: 'TLS',
},
sendgrid: {
host: 'smtp.sendgrid.net', port: 465, auth_protocol: 'login', tls_type: 'TLS',
},
postmark: {
host: 'smtp.postmarkapp.com', port: 587, auth_protocol: 'cram', tls_type: 'STARTTLS',
},
};
export default Vue.extend({
props: {
form: {
@ -297,6 +327,21 @@ export default Vue.extend({
return false;
},
fillSettings(n, key) {
this.data.smtp.splice(n, 1, {
...this.data.smtp[n],
...smtpTemplates[key],
username: '',
password: '',
hello_hostname: '',
tls_skip_verify: false,
});
this.$nextTick(() => {
document.querySelector(`.smtp-username-${n}`).focus();
});
},
},
computed: {