updated send with tab

This commit is contained in:
Jonathan Labreuille
2015-12-04 15:31:04 +01:00
parent 1950d6661f
commit beb939df9e
3 changed files with 262 additions and 138 deletions

View File

@@ -15,10 +15,10 @@ define(
MailPoet.Router = new (Backbone.Router.extend({ MailPoet.Router = new (Backbone.Router.extend({
routes: { routes: {
'mta(/:method)': 'sendingMethod', 'mta(/:group)': 'sendingMethodGroup',
'(:tab)': 'tabs', '(:tab)': 'tabs',
}, },
sendingMethod: function(method) { sendingMethodGroup: function(group) {
// display mta tab // display mta tab
this.tabs('mta'); this.tabs('mta');
@@ -30,13 +30,13 @@ define(
// hide "save settings" button // hide "save settings" button
jQuery('.mailpoet_settings_submit').hide(); jQuery('.mailpoet_settings_submit').hide();
if(method === null) { if(group === null) {
// show sending methods // show sending methods
jQuery('.mailpoet_sending_methods').fadeIn(); jQuery('.mailpoet_sending_methods').fadeIn();
} else { } else {
// hide DKIM option when using MailPoet's API // hide DKIM option when using MailPoet's API
jQuery('#mailpoet_mta_dkim')[ jQuery('#mailpoet_mta_dkim')[
(method === 'MailPoet') (group === 'mailpoet')
? 'hide' ? 'hide'
: 'show' : 'show'
](); ]();
@@ -45,7 +45,7 @@ define(
jQuery('.mailpoet_sending_methods').hide(); jQuery('.mailpoet_sending_methods').hide();
// display selected sending method's settings // display selected sending method's settings
jQuery('.mailpoet_sending_method[data-method="'+ method +'"]').show(); jQuery('.mailpoet_sending_method[data-group="'+ group +'"]').show();
jQuery('#mailpoet_sending_method_setup').fadeIn(); jQuery('#mailpoet_sending_method_setup').fadeIn();
} }
}, },

View File

@@ -5,27 +5,43 @@ class Hosts {
private static $_smtp = array( private static $_smtp = array(
'AmazonSES' => array( 'AmazonSES' => array(
'name' => 'Amazon SES', 'name' => 'Amazon SES',
'api' => false,
'emails' => 100, 'emails' => 100,
'interval' => 5 'interval' => 5,
'fields' => array(
'region',
'access_key',
'secret_key'
),
'regions' => array(
'US East (N. Virginia)' => 'us-east-1.amazonaws.com',
'US West (Oregon)' => 'us-west-2.amazonaws.com',
'EU (Ireland)' => 'eu-west-1.amazonaws.com'
)
), ),
'ElasticEmail' => array( 'ElasticEmail' => array(
'name' => 'ElasticEmail', 'name' => 'ElasticEmail',
'api' => true,
'emails' => 100, 'emails' => 100,
'interval' => 5 'interval' => 5,
'fields' => array(
'api_key'
)
), ),
'MailGun' => array( 'MailGun' => array(
'name' => 'MailGun', 'name' => 'MailGun',
'api' => false,
'emails' => 100, 'emails' => 100,
'interval' => 5 'interval' => 5,
'fields' => array(
'domain',
'api_key'
)
), ),
'SendGrid' => array( 'SendGrid' => array(
'name' => 'SendGrid', 'name' => 'SendGrid',
'api' => true,
'emails' => 100, 'emails' => 100,
'interval' => 5 'interval' => 5,
'fields' => array(
'api_key'
)
) )
); );

View File

@@ -10,7 +10,14 @@
} }
} %> } %>
<!-- smtp: method --> <!-- mta: group -->
<input
type="hidden"
id="mta_group"
name="mta_group"
value="<%= settings.mta_group %>"
/>
<!-- mta: method -->
<input <input
type="hidden" type="hidden"
id="mta_method" id="mta_method"
@@ -52,8 +59,8 @@
<!-- smtp: available sending methods --> <!-- smtp: available sending methods -->
<ul class="mailpoet_sending_methods clearfix"> <ul class="mailpoet_sending_methods clearfix">
<li <li
data-method="MailPoet" data-group="mailpoet"
<% if(settings.mta.method == 'MailPoet') %>class="mailpoet_active"<% endif %> <% if(settings.mta_group == 'mailpoet') %>class="mailpoet_active"<% endif %>
> >
<h3> <h3>
<img <img
@@ -77,12 +84,12 @@
<div class="mailpoet_actions"> <div class="mailpoet_actions">
<a <a
class="button-secondary" class="button-secondary"
href="#mta/MailPoet"><%= __('Configure') %></a> href="#mta/mailpoet"><%= __('Configure') %></a>
</div> </div>
</li> </li>
<li <li
data-method="website" data-group="website"
<% if(settings.mta.method == 'website') %>class="mailpoet_active"<% endif %> <% if(settings.mta_group == 'website') %>class="mailpoet_active"<% endif %>
> >
<h3><%= __('Your own website') %></h3> <h3><%= __('Your own website') %></h3>
@@ -101,8 +108,8 @@
</div> </div>
</li> </li>
<li <li
data-method="smtp" data-group="smtp"
<% if(settings.mta.method == 'smtp') %>class="mailpoet_active"<% endif %> <% if(settings.mta_group == 'smtp') %>class="mailpoet_active"<% endif %>
> >
<h3><%= __('Third party') %></h3> <h3><%= __('Third party') %></h3>
@@ -126,7 +133,7 @@
<!-- Sending Method: MailPoet --> <!-- Sending Method: MailPoet -->
<div <div
class="mailpoet_sending_method" class="mailpoet_sending_method"
data-method="MailPoet" data-group="mailpoet"
style="display:none;" style="display:none;"
> >
<h3><%= __('Open a free account with MailPoet, and get:') %></h3> <h3><%= __('Open a free account with MailPoet, and get:') %></h3>
@@ -164,10 +171,12 @@
<td> <td>
<input <input
type="text" type="text"
class="regular-text"
id="mailpoet_api_key" id="mailpoet_api_key"
size="40"
name="mta[api_key]" name="mta[api_key]"
value="<%= settings.mta.api_key %>" value="<% if(settings.mta_group == 'mailpoet')%>
<%=- settings.mta.api_key -%>
<% endif %>"
/> />
</td> </td>
</tr> </tr>
@@ -178,60 +187,11 @@
<!-- Sending Method: Website --> <!-- Sending Method: Website -->
<div <div
class="mailpoet_sending_method" class="mailpoet_sending_method"
data-method="website" data-group="website"
style="display:none;" style="display:none;"
> >
<table class="form-table"> <table class="form-table">
<tbody> <tbody>
<tr>
<th scope="row">
<label for="mailpoet_mta_local_method">
<%= __('Delivery method') %>
</label>
</th>
<td>
<!-- local sending method: mail / sendmail / wp_mail -->
<p>
<label>
<input type="radio"
name="mta[local_method]"
value="mail"
<%
if not(settings.mta.local_method)
or (settings.mta.local_method == 'mail')
%>checked="checked"<% endif %>
/>PHP Mail
</label>
</p>
<p class="description"><%= __('This email engine works on 95&#37; of servers.') %></p>
<p>
<label>
<input type="radio"
name="mta[local_method]"
value="sendmail"
<%
if(settings.mta.local_method == 'sendmail')
%>checked="checked"<% endif %>
/>Sendmail
</label>
</p>
<p class="description"><%= __('This method works on 5&#37; of servers.') %></p>
<p>
<label>
<input type="radio"
name="mta[local_method]"
value="wp_mail"
<%
if(settings.mta.local_method == 'wp_mail')
%>checked="checked"<% endif %>
/>WP Mail
</label>
</p>
</td>
</tr>
<tr>
<th scope="row"> <th scope="row">
<label for="mailpoet_web_host"> <label for="mailpoet_web_host">
<%= __('Sending frequency') %> <%= __('Sending frequency') %>
@@ -328,7 +288,7 @@
</div> </div>
<!-- Sending Method: SMTP --> <!-- Sending Method: SMTP -->
<div class="mailpoet_sending_method" data-method="smtp" style="display:none;"> <div class="mailpoet_sending_method" data-group="smtp" style="display:none;">
<table class="form-table"> <table class="form-table">
<tbody> <tbody>
<tr> <tr>
@@ -353,6 +313,7 @@
value="<%= host_key %>" value="<%= host_key %>"
data-emails="<%= host.emails %>" data-emails="<%= host.emails %>"
data-interval="<%= host.interval %>" data-interval="<%= host.interval %>"
data-fields="<%= host.fields | join(',') %>"
<% if(settings.smtp_provider == host_key) %> <% if(settings.smtp_provider == host_key) %>
selected="selected" selected="selected"
<% endif %> <% endif %>
@@ -414,9 +375,9 @@
</td> </td>
</tr> </tr>
<!-- smtp: host --> <!-- smtp: host -->
<tr class="mailpoet_smtp_field"> <tr class="mailpoet_smtp_field" data-field="host">
<th scope="row"> <th scope="row">
<label for="settings[mta_smtp_host]"> <label for="settings[mta_host]">
<%= __('SMTP Hostname') %> <%= __('SMTP Hostname') %>
<p class="description"> <p class="description">
<%= __('e.g.:smtp.mydomain.com') %> <%= __('e.g.:smtp.mydomain.com') %>
@@ -426,78 +387,193 @@
<td> <td>
<input <input
type="text" type="text"
id="settings[mta_smtp_host]" class="regular-text"
name="mta[smtp][host]" id="settings[mta_host]"
value="<%= settings.mta.smtp.host %>" /> name="mta[host]"
value="<%= settings.mta.host %>" />
</td> </td>
</tr> </tr>
<!-- smtp: login --> <!-- smtp: port -->
<tr id="mta_smtp_login" class="mailpoet_smtp_field"> <tr class="mailpoet_smtp_field" data-field="port">
<th scope="row"> <th scope="row">
<label for="settings[mta_smtp_login]"> <label for="settings[mta_port]">
<%= __('SMTP Port') %>
<p class="description">
</p>
</label>
</th>
<td>
<input
type="number"
max="65535"
min="1"
maxlength="5"
style="width:5em;"
id="settings[mta_port]"
name="mta[port]"
value="<%= settings.mta.port %>"
/>
</td>
</tr>
<!-- smtp: amazon region -->
<tr class="mailpoet_smtp_field" data-field="region">
<th scope="row">
<label for="settings[mta_region]">
<%= __('Region') %>
</label>
</th>
<td>
<select
id="settings[mta_region]"
name="mta[region]"
value="<% if(settings.mta_group == 'smtp') %>
<%=- settings.mta.region -%>
<% endif %>"
>
<% for region, server in hosts.smtp.AmazonSES.regions %>
<option value="<%= server %>"><%= region %></option>
<% endfor %>
</select>
</td>
</tr>
<!-- smtp: amazon access_key -->
<tr class="mailpoet_smtp_field" data-field="access_key">
<th scope="row">
<label for="settings[mta_access_key]">
<%= __('Access Key') %>
</label>
</th>
<td>
<input
type="text"
class="regular-text"
id="settings[mta_access_key]"
name="mta[access_key]"
value="<% if(settings.mta_group == 'smtp') %>
<%=- settings.mta.access_key -%>
<% endif %>"
/>
</td>
</tr>
<!-- smtp: amazon secret_key -->
<tr class="mailpoet_smtp_field" data-field="secret_key">
<th scope="row">
<label for="settings[mta_secret_key]">
<%= __('Secret Key') %>
</label>
</th>
<td>
<input
type="text"
class="regular-text"
id="settings[mta_secret_key]"
name="mta[secret_key]"
value="<% if(settings.mta_group == 'smtp') %>
<%=- settings.mta.secret_key -%>
<% endif %>"
/>
</td>
</tr>
<!-- smtp: domain -->
<tr class="mailpoet_smtp_field" data-field="domain">
<th scope="row">
<label for="settings[mta_domain]">
<%= __('Domain') %>
<p class="description">
<%= __('e.g.:smtp.mydomain.com') %>
</p>
</label>
</th>
<td>
<input
type="text"
class="regular-text"
id="settings[mta_host]"
name="mta[host]"
value="<%= settings.mta.host %>" />
</td>
</tr>
<!-- smtp: api key -->
<tr class="mailpoet_smtp_field" data-field="api_key">
<th scope="row">
<label for="settings[mta_api_key]">
<%= __('API Key') %>
</label>
</th>
<td>
<input
type="text"
class="regular-text"
id="settings[mta_api_key]"
name="mta[api_key]"
value="<% if(settings.mta_group == 'smtp') %>
<%=- settings.mta.api_key -%>
<% endif %>"
/>
</td>
</tr>
<!-- smtp: login -->
<tr id="mta_login" class="mailpoet_smtp_field" data-field="login">
<th scope="row">
<label for="settings[mta_login]">
<%= __('Login') %> <%= __('Login') %>
</label> </label>
</th> </th>
<td> <td>
<input <input
type="text" type="text"
id="settings[mta_smtp_login]" class="regular-text"
name="mta[smtp][login]" id="settings[mta_login]"
value="<%= settings.mta.smtp.login %>" name="mta[login]"
value="<%= settings.mta.login %>"
/> />
</td> </td>
</tr> </tr>
<!-- smtp: password --> <!-- smtp: password -->
<tr id="mta_smtp_password" class="mailpoet_smtp_field"> <tr id="mta_password" class="mailpoet_smtp_field" data-field="password">
<th scope="row"> <th scope="row">
<label for="settings[mta_smtp_password]"> <label for="settings[mta_password]">
<%= __('Password / API key') %> <%= __('Password') %>
</label> </label>
</th> </th>
<td> <td>
<input <input
type="password" type="password"
id="settings[mta_smtp_password]" class="regular-text"
name="mta[smtp][password]" id="settings[mta_password]"
value="<%= settings.mta.smtp.password %>" name="mta[password]"
/> value="<%= settings.mta.password %>"
</td>
</tr>
<!-- smtp: port -->
<tr class="mailpoet_smtp_field">
<th scope="row">
<label for="settings[mta_smtp_port]">
<%= __('SMTP Port') %>
</label>
</th>
<td>
<input
type="text"
id="settings[mta_smtp_port]"
name="mta[smtp][port]"
value="<%= settings.mta.smtp.port %>"
/> />
</td> </td>
</tr> </tr>
<!-- smtp: security protocol --> <!-- smtp: security protocol -->
<tr class="mailpoet_smtp_field"> <tr class="mailpoet_smtp_field" data-field="encryption">
<th scope="row"> <th scope="row">
<label for="settings[mta_smtp_secure]"> <label for="settings[mta_encryption]">
<%= __('Secure connection') %> <%= __('Secure connection') %>
</label> </label>
</th> </th>
<td> <td>
<select id="settings[mta_smtp_secure]" name="mta[smtp][secure]"> <select id="settings[mta_encryption]" name="mta[encryption]">
<option value=""><%= __('No') %></option> <option value=""><%= __('No') %></option>
<option <option
value="ssl" value="ssl"
<% if(settings.mta.smtp.secure == 'ssl') %> <% if(settings.mta.encryption == 'ssl') %>
selected="selected" selected="selected"
<% endif %> <% endif %>
>SSL</option> >SSL</option>
<option <option
value="tls" value="tls"
<% if(settings.mta.smtp.secure == 'tls') %> <% if(settings.mta.encryption == 'tls') %>
selected="selected" selected="selected"
<% endif %> <% endif %>
>TLS</option> >TLS</option>
@@ -505,7 +581,7 @@
</td> </td>
</tr> </tr>
<!-- smtp: authentication --> <!-- smtp: authentication -->
<tr class="mailpoet_smtp_field"> <tr class="mailpoet_smtp_field" data-field="authentication">
<th scope="row"> <th scope="row">
<label> <label>
<%= __('Authentication') %> <%= __('Authentication') %>
@@ -519,8 +595,10 @@
<input <input
type="radio" type="radio"
value="1" value="1"
name="mta[smtp][authenticate]" name="mta[authentication]"
<% if(settings.mta.smtp.authenticate) %> <%
if not(settings.mta.authentication)
or (settings.mta.authentication == "1") %>
checked="checked" checked="checked"
<% endif %> <% endif %>
/><%= __('Yes') %> /><%= __('Yes') %>
@@ -529,9 +607,9 @@
<label> <label>
<input <input
type="radio" type="radio"
value="" value="-1"
name="mta[smtp][authenticate]" name="mta[authentication]"
<% if not(settings.mta.smtp.authenticate) %> <% if(settings.mta.authentication == "-1") %>
checked="checked" checked="checked"
<% endif %> <% endif %>
/><%= __('No') %> /><%= __('No') %>
@@ -584,6 +662,7 @@
<%= __('Key') %> <%= __('Key') %>
<input <input
type="text" type="text"
class="regular-text"
onClick="this.focus();this.select();" onClick="this.focus();this.select();"
readonly="readonly" readonly="readonly"
value="wys._domainkey" value="wys._domainkey"
@@ -595,7 +674,8 @@
<%= __('Value') %> <%= __('Value') %>
<input <input
type="text" type="text"
size="40" class="regular-text"
onClick="this.focus();this.select();" onClick="this.focus();this.select();"
readonly="readonly" readonly="readonly"
value="v=DKIM1;s=email;t=s;p=<%= settings.dkim.public_key %>" value="v=DKIM1;s=email;t=s;p=<%= settings.dkim.public_key %>"
@@ -695,18 +775,18 @@
// save configuration of a sending method // save configuration of a sending method
$('.mailpoet_mta_setup_save').on('click', function() { $('.mailpoet_mta_setup_save').on('click', function() {
// get selected method // get selected method
var method = $('.mailpoet_sending_method:visible').data('method'), var group = $('.mailpoet_sending_method:visible').data('group'),
emails = $('#'+method+'_frequency_emails').val(), emails = $('#'+group+'_frequency_emails').val(),
interval = $('#'+method+'_frequency_interval').val(); interval = $('#'+group+'_frequency_interval').val();
// set sending method // set sending method
if(method === undefined) { if(group === undefined) {
MailPoet.Notice.error( MailPoet.Notice.error(
"<%= __('You have selected an invalid sending method.') %>" "<%= __('You have selected an invalid sending method.') %>"
); );
} else { } else {
if( if(
method === 'mailpoet' group === 'mailpoet'
&& $('#mailpoet_api_key').val().trim().length === 0 && $('#mailpoet_api_key').val().trim().length === 0
) { ) {
MailPoet.Notice.error( MailPoet.Notice.error(
@@ -716,7 +796,7 @@
} }
// set new sending method active // set new sending method active
setSendingMethod(method); setSendingMethodGroup(group);
// update sending frequency values // update sending frequency values
$('#mta_frequency_emails').val(emails); $('#mta_frequency_emails').val(emails);
@@ -730,16 +810,35 @@
} }
}); });
function setSendingMethod(method) { function setSendingMethodGroup(group) {
// deactivate other sending methods // deactivate other sending methods
$('.mailpoet_sending_methods .mailpoet_active') $('.mailpoet_sending_methods .mailpoet_active')
.removeClass('mailpoet_active'); .removeClass('mailpoet_active');
// set active sending method // set active sending method
$('.mailpoet_sending_methods li[data-method="'+method+'"]') $('.mailpoet_sending_methods li[data-group="'+group+'"]')
.addClass('mailpoet_active'); .addClass('mailpoet_active');
// set smtp method value // set smtp method value
$('#mta_group').val(group);
var method = '';
switch(group) {
case 'mailpoet':
method = 'MailPoet';
break;
case 'website':
method = 'WPMail';
break;
case 'smtp':
method = $('#mailpoet_smtp_provider').val();
if(method === 'manual') {
method = 'SMTP';
}
break;
}
$('#mta_method').val(method); $('#mta_method').val(method);
} }
@@ -757,20 +856,27 @@
function setProviderForm() { function setProviderForm() {
// check provider // check provider
var provider = $(this).find('option:selected').first(); var provider = $(this).find('option:selected').first();
var fields = provider.data('fields');
if(provider.val() === 'sendgrid') { if(fields === undefined) {
$('.mailpoet_smtp_field').hide(); fields = [
// show only login & password fields 'host',
$('#mta_smtp_login, #mta_smtp_password').show(); 'port',
} else if(provider.val() === 'elasticemail') { 'login',
$('.mailpoet_smtp_field').hide(); 'password',
// show only password field 'authentication',
$('#mta_smtp_password').show(); 'encryption'
];
} else { } else {
// display all fields fields = fields.split(',');
$('.mailpoet_smtp_field').show();
} }
$('.mailpoet_smtp_field').hide();
fields.map(function(field) {
$('.mailpoet_smtp_field[data-field="'+field+'"]').show();
});
// update sending frequency // update sending frequency
renderSMTPSendingFrequency(provider); renderSMTPSendingFrequency(provider);
} }
@@ -791,6 +897,8 @@
host.data('emails') || <%= default_frequency.website.emails %>; host.data('emails') || <%= default_frequency.website.emails %>;
var interval = var interval =
host.data('interval') || <%= default_frequency.website.interval %>; host.data('interval') || <%= default_frequency.website.interval %>;
var fields =
host.data('fields') || '';
if(host.val() === 'manual' ) { if(host.val() === 'manual' ) {
// hide sending frequency // hide sending frequency