added all pages + started implementing basics

This commit is contained in:
Jonathan Labreuille
2015-10-09 19:08:13 +02:00
parent 34e75b9b13
commit 602e630e42
10 changed files with 551 additions and 121 deletions

View File

@@ -1,118 +0,0 @@
define('settings', ['react/addons', 'jquery', 'mailpoet'], function(React, jQuery, MailPoet) {
var SettingsForm = React.createClass({
mixins: [React.addons.LinkedStateMixin],
load: function() {
this.setState({ loading: true });
MailPoet.Ajax.post({
endpoint: 'settings',
action: 'get',
onSuccess: function(response) {
// index settings by key
var settings = {};
jQuery.each(response, function(i, setting) {
settings[setting.name] = setting.value;
});
this.setState({
loading: false,
settings: settings
});
}.bind(this)
});
},
handleSubmit: function(e) {
this.setState({ loading: true });
e.preventDefault();
// format data
var settings = [];
jQuery.each(this.state.settings, function(name, value) {
settings.push({
name: name,
value: value
});
});
MailPoet.Ajax.post({
endpoint: 'settings',
action: 'set',
data: settings,
onSuccess: function(response) {
this.setState({ loading: false });
}.bind(this)
})
},
getInitialState: function() {
return {
loading: false,
settings: {}
};
},
linkSettingValue: function(key) {
return {
value: this.state['settings'][key],
requestChange: function(newValue) {
var settings = this.state.settings;
settings[key] = newValue;
this.setState({ 'settings': settings });
}.bind(this)
};
},
componentDidMount: function() {
this.load();
},
render: function() {
return (
<form onSubmit={this.handleSubmit} className="mailpoet_settings_form">
<p>
<label>
From name:
<input
type="text"
valueLink={this.linkSettingValue('from_name')} />
</label>
</p>
<p>
<label>
From email:
<input
type="text"
valueLink={this.linkSettingValue('from_address')} />
</label>
</p>
<p>
<label>
API key:
<input
type="text"
valueLink={this.linkSettingValue('api_key')} />
</label>
</p>
<input
ref="submit"
type="submit"
className="button button-primary"
disabled={this.state.loading}
value="Save" />
</form>
);
}
});
var element = jQuery('#mailpoet_settings');
if(element.length > 0) {
React.render(
<SettingsForm />,
element[0]
);
}
});

View File

@@ -0,0 +1,37 @@
define(
[
'react',
'mailpoet',
'form/form.jsx'
],
function(
React,
MailPoet,
Form
) {
var fields = [
];
var messages = {
updated: function() {
MailPoet.Notice.success('Settings succesfully updated!');
}
};
var SettingsForm = React.createClass({
render: function() {
return (
<Form
endpoint="settings"
fields={ fields }
params={ this.props.params }
messages={ messages } />
);
}
});
return SettingsForm;
}
);

View File

@@ -0,0 +1,243 @@
define(
[
'react',
'mailpoet',
'form/form.jsx',
'form/fields/field.jsx'
],
function(
React,
MailPoet
) {
var BasicsForm = React.createClass({
selectInput: function(input) {
input.focus();
input.select();
},
render: function() {
console.log(this.props);
return (
<table className="form-table">
<tbody>
<tr>
<th scope="row">
<label htmlFor="settings[notification_email]">
Email notifications
<p className="description">
Enter the email addresses that should receive
notifications (separate by comma).
</p>
</label>
</th>
<td>
<p>
<input
type="text"
className="regular-text"
id="settings[notification_email]"
name="mailpoet[settings][notification_email]"
defaultValue={ this.props.settings.notification_email }
placeholder="notification@mydomain.com" />
</p>
<p>
<label htmlFor="settings[notification_on_subscribe]">
<input
type="checkbox"
id="settings[notification_on_subscribe]"
name="mailpoet[settings][notification_on_subscribe]"
value="1" />
When someone subscribes
</label>
</p>
<p>
<label htmlFor="settings[notification_on_unsubscribe]">
<input type="checkbox"
id="settings[notification_on_unsubscribe]"
name="mailpoet[settings][notification_on_unsubscribe]"
value="1" />
When someone unsubscribes
</label>
</p>
<p>
<label htmlFor="settings[notification_daily_report]">
<input type="checkbox"
id="settings[notification_daily_report]"
name="mailpoet[settings][notification_daily_report]"
value="1" />
Daily summary of emails sent
</label>
</p>
<p>
<label htmlFor="settings[from_name]">
From
</label>
<input
type="text"
id="settings[from_name]"
name="mailpoet[settings][from_name]"
defaultValue={ this.props.settings.from_name }
placeholder="Your name" />
<input
type="text"
id="settings[from_email]"
name="mailpoet[settings][from_email]"
defaultValue={ this.props.settings.from_email }
placeholder="info@mydomain.com" />
</p>
<p>
<label htmlFor="settings[notification_reply_name]">
Reply-to
</label>
<input
type="text"
id="settings[notification_reply_name]"
name="mailpoet[settings][notification_reply_name]"
defaultValue={
this.props.settings.notification_reply_name
}
placeholder="Your name" />
<input
type="text"
id="settings[notification_reply_email]"
name="mailpoet[settings][notification_reply_email]"
defaultValue={
this.props.settings.notification_reply_email
}
placeholder="info@mydomain.com" />
</p>
</td>
</tr>
<tr>
<th scope="row">
<label htmlFor="settings[subscribe_on_comment]">
Subscribe in comments
<p className="description">
Visitors who submit a comment on a post can click on
a checkbox to subscribe.
</p>
</label>
</th>
<td>
<div id="mailpoet_subscribe_on_comment">
<p>
subscribe_on_comment_label
</p>
</div>
</td>
</tr>
<tr>
<th scope="row">
<label htmlFor="settings[subscribe_on_register]">
Subscribe in registration form
<p className="description">
Allow users who register to your site to subscribe on
a list of your choice.
</p>
</label>
</th>
<td>
<p>
<input
data-toggle="mailpoet_subscribe_in_form"
type="checkbox"
value="1"
id="settings[subscribe_on_register]"
name="mailpoet[settings][subscribe_on_register]" />
</p>
<div id="mailpoet_subscribe_in_form">
<p>
<input
type="text"
id="settings[subscribe_on_register_label]"
name="mailpoet[settings][subscribe_on_register_label]"
value={ this.props.settings.subscribe_on_register_label } />
</p>
<p>
subscribe_on_register_lists
</p>
</div>
<em>Registration is disabled on this site.</em>
</td>
</tr>
<tr>
<th scope="row">
<label htmlFor="settings[subscription_edit]">
Unsubscribe & Manage Subscription page
<p className="description">
The page your subscribers see when they click to "Unsubscribe" or "Manage your subscription" in your emails.
</p>
</label>
</th>
<td>
<p>
subscription_edit_page
</p>
<p>
<label>Subscribers can choose from these lists :</label>
</p>
<p>
subscription_edit_lists
</p>
</td>
</tr>
<tr>
<th scope="row">
<label>
Archive page shortcode
<p className="description">
Paste this shortcode in a page to display a list of past newsletters.
</p>
</label>
</th>
<td>
<p>
<input
type="text"
id="mailpoet_shortcode_archives"
value="[mailpoet_archive]"
onClick={ this.selectInput.bind(null, this) }
readOnly={ true } />
</p>
<p>
mailpoet_shortcode_archives_list
</p>
</td>
</tr>
<tr>
<th scope="row">
<label>
Shortcode to display total number of subscribers
<p className="description">
Paste this shortcode to display the number of confirmed subscribers in post or page.
</p>
</label>
</th>
<td>
<p>
<input
type="text"
id="mailpoet_shortcode_subscribers"
value="[mailpoet_subscribers_count]"
onClick={ this.selectInput.bind(null, this) }
readOnly={ true } />
</p>
<p>
mailpoet_shortcode_subscribers_list
</p>
</td>
</tr>
</tbody>
</table>
);
}
});
return BasicsForm;
}
);

View File

@@ -0,0 +1,37 @@
define(
[
'react',
'mailpoet',
'form/form.jsx'
],
function(
React,
MailPoet,
Form
) {
var fields = [
];
var messages = {
updated: function() {
MailPoet.Notice.success('Settings succesfully updated!');
}
};
var SettingsForm = React.createClass({
render: function() {
return (
<Form
endpoint="settings"
fields={ fields }
params={ this.props.params }
messages={ messages } />
);
}
});
return SettingsForm;
}
);

View File

@@ -0,0 +1,37 @@
define(
[
'react',
'mailpoet',
'form/form.jsx'
],
function(
React,
MailPoet,
Form
) {
var fields = [
];
var messages = {
updated: function() {
MailPoet.Notice.success('Settings succesfully updated!');
}
};
var SettingsForm = React.createClass({
render: function() {
return (
<Form
endpoint="settings"
fields={ fields }
params={ this.props.params }
messages={ messages } />
);
}
});
return SettingsForm;
}
);

View File

@@ -0,0 +1,122 @@
define(
[
'react',
'react-router',
'classnames',
'settings/basics.jsx',
'settings/signup.jsx',
'settings/mta.jsx',
'settings/advanced.jsx',
'settings/bounce.jsx'
],
function(
React,
Router,
classNames,
Basics,
Signup,
Mta,
Advanced,
Bounce
) {
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var NotFoundRoute = Router.NotFoundRoute;
var settings = mailpoet_settings || {};
var Tabs = React.createClass({
render: function() {
var current_tab = window.location.hash.split('/')[1];
var tabs = this.props.tabs.map(function(tab, index) {
var tabClasses = classNames(
'nav-tab',
{ 'nav-tab-active': (current_tab === tab.to) }
);
return (
<Link
key={ 'tab-' + index }
to={ tab.to }
className={ tabClasses }
>
{ tab.label }
</Link>
);
});
return (
<h2
id="mailpoet_settings_tabs"
className="nav-tab-wrapper"
>
{ tabs }
</h2>
);
}
});
var App = React.createClass({
getInitialState: function() {
return {
loading: false
}
},
render: function() {
return (
<div>
<h1>{ MailPoetI18n.pageTitle }</h1>
<Tabs tabs={ [
{ to: 'basics', label: 'Basics'},
{ to: 'signup', label: 'Signup Confirmation'},
{ to: 'mta', label: 'Send With...'},
{ to: 'advanced', label: 'Advanced'},
{ to: 'bounce', label: 'Bounce Handling'}
]} />
<form
id="mailpoet_settings_form"
name="mailpoet_settings_form"
autoComplete="off"
noValidate
>
<RouteHandler settings={ settings } />
<input
className="button button-primary"
type="submit"
value="Save"
disabled={this.state.loading} />
</form>
</div>
);
}
});
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="basics" path="/basics" handler={Basics} />
<Route name="signup" path="/signup" handler={Signup} />
<Route name="mta" path="/mta" handler={Mta} />
<Route name="advanced" path="/advanced" handler={Advanced} />
<Route name="bounce" path="/bounce" handler={Bounce} />
<NotFoundRoute handler={Basics} />
<DefaultRoute handler={Basics} />
</Route>
);
var hook = document.getElementById('mailpoet_settings');
if(hook) {
Router.run(routes, function(Handler, state) {
React.render(
<Handler
params={state.params}
query={state.query} />,
hook
);
});
}
}
);

View File

@@ -0,0 +1,36 @@
define(
[
'react',
'mailpoet',
'form/form.jsx'
],
function(
React,
MailPoet,
Form
) {
var fields = [
];
var messages = {
updated: function() {
MailPoet.Notice.success('Settings succesfully updated!');
}
};
var SignupForm = React.createClass({
render: function() {
return (
<Form
endpoint="settings"
fields={ fields }
params={ this.props.params }
messages={ messages } />
);
}
});
return SignupForm;
}
);

View File

@@ -93,7 +93,35 @@ class Menu {
function settings() { function settings() {
$data = array(); $data = array();
$flags = array();
// check if registration is enabled
if(is_multisite()) {
// get multisite registration option
$registration = apply_filters(
'wpmu_registration_enabled',
get_site_option('registration', 'all')
);
// check if users can register
$flags['registration_enabled'] = !(in_array($registration, array('none', 'blog')));
} else {
// check if users can register
$flags['registration_enabled'] = (bool)get_option('users_can_register', false);
}
$data['flags'] = $flags;
$data['segments'] = Segment::findArray();
$settings = Setting::findMany();
$data['settings'] = array();
foreach($settings as $setting) {
$data['settings'][$setting->name] = $setting->value;
}
echo $this->renderer->render('settings.html', $data); echo $this->renderer->render('settings.html', $data);
} }
function subscribers() { function subscribers() {

View File

@@ -1,7 +1,15 @@
<% extends 'layout.html' %> <% extends 'layout.html' %>
<% block content %> <% block content %>
<h1><%= __('Settings') %></h1>
<div id="mailpoet_settings"></div> <div id="mailpoet_settings"></div>
<%= localize({
'pageTitle': __('Settings')
}) %>
<script type="text/javascript">
var mailpoet_settings = <%= json_encode(settings) %>;
var mailpoet_segments = <%= json_encode(segments) %>;
var mailpoet_flags = <%= json_encode(flags) %>;
</script>
<% endblock %> <% endblock %>

View File

@@ -66,7 +66,7 @@ config.push(_.extend({}, baseConfig, {
'jquery.serialize_object' 'jquery.serialize_object'
], ],
admin: [ admin: [
'settings.jsx', 'settings/settings.jsx',
'subscribers/subscribers.jsx', 'subscribers/subscribers.jsx',
'newsletters/newsletters.jsx', 'newsletters/newsletters.jsx',
'segments/segments.jsx' 'segments/segments.jsx'