Display sender warning on settings page

[MAILPOET-1573]
This commit is contained in:
Pavel Dohnal
2019-01-21 16:03:37 +01:00
parent 82c238fe81
commit cdbb8d7c62
5 changed files with 103 additions and 28 deletions

View File

@ -0,0 +1,79 @@
import React from 'react';
import PropTypes from 'prop-types';
import { partial } from 'underscore';
import MailPoet from 'mailpoet';
import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
class DefaultSender extends React.Component {
constructor(props) {
super(props);
this.state = {
senderAddress: props.senderAddress,
senderName: props.senderName,
replyToName: props.replyToName,
replyToAddress: props.replyToAddress,
};
this.onChange = this.onChange.bind(this);
}
onChange(field, e) {
const newState = {};
newState[field] = e.target.value;
this.setState(newState);
}
render() {
return (<React.Fragment>
<p>
<label htmlFor="settings[from_name]">{MailPoet.I18n.t('from')}</label>
<input
type="text"
id="settings[from_name]"
name="sender[name]"
value={this.state.senderName}
onChange={partial(this.onChange, 'senderName')}
placeholder={MailPoet.I18n.t('yourName')}
/>
<input
type="email"
id="settings[from_email]"
name="sender[address]"
value={this.state.senderAddress}
onChange={partial(this.onChange, 'senderAddress')}
placeholder="from@mydomain.com"
/>
</p>
<p>
<label htmlFor="settings[reply_name]">{MailPoet.I18n.t('replyTo')}</label>
<input
type="text"
id="settings[reply_name]"
name="reply_to[name]"
value={this.state.replyToName}
onChange={partial(this.onChange, 'replyToName')}
placeholder={MailPoet.I18n.t('yourName')}
/>
<input
type="email"
id="settings[reply_email]"
name="reply_to[address]"
value={this.state.replyToAddress}
onChange={partial(this.onChange, 'replyToAddress')}
placeholder="reply_to@mydomain.com"
/>
</p>
<div className="regular-text">
<SenderEmailAddressWarning emailAddress={this.state.senderAddress} />
</div>
</React.Fragment>);
}
}
DefaultSender.propTypes = {
senderAddress: PropTypes.string.isRequired,
senderName: PropTypes.string.isRequired,
replyToAddress: PropTypes.string.isRequired,
replyToName: PropTypes.string.isRequired,
};
export default DefaultSender;

View File

@ -0,0 +1,13 @@
const React = require('react');
const ReactDOM = require('react-dom');
const DefaultSender = require('settings/default_sender.jsx').default;
ReactDOM.render(
React.createElement(DefaultSender, {
senderAddress: window.mailpoet_settings_sender_adddress,
senderName: window.mailpoet_settings_sender_name,
replyToAddress: window.mailpoet_settings_reply_to_address,
replyToName: window.mailpoet_settings_reply_to_name,
}),
document.getElementById('settings_sender_container')
);

View File

@ -7,6 +7,7 @@
import 'subscribers/subscribers.jsx'; // side effect - renders ReactDOM to document
import 'newsletters/newsletters.jsx'; // side effect - renders ReactDOM to window
import 'segments/segments.jsx'; // side effect - renders ReactDOM to document
import 'settings/settings.jsx'; // side effect - renders ReactDOM to document
import 'forms/forms.jsx'; // side effect - renders ReactDOM to document
import 'settings/tabs.js'; // side effect - assigns to MailPoet.Router, executes code on doc ready
import 'help/help.jsx'; // side effect - renders ReactDOM to document

View File

@ -220,5 +220,8 @@
'announcementHeader': __('Get notified when someone subscribes'),
'announcementParagraph1': __('Its been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),
'announcementParagraph2': __('(You can turn this feature off if its too many emails.)'),
'yourName': __('Your name'),
'from': __('From'),
'replyTo': __('Reply-to'),
}) %>
<% endblock %>

View File

@ -10,34 +10,13 @@
</p>
</th>
<td>
<!-- default from name & email -->
<p>
<label for="settings[from_name]"><%= __('From') %></label>
<input type="text"
id="settings[from_name]"
name="sender[name]"
value="<%= settings.sender.name %>"
placeholder="<%= __('Your name') %>" />
<input type="email"
id="settings[from_email]"
name="sender[address]"
value="<%= settings.sender.address %>"
placeholder="from@mydomain.com" />
</p>
<!-- default reply_to name & email -->
<p>
<label for="settings[reply_name]"><%= __('Reply-to') %></label>
<input type="text"
id="settings[reply_name]"
name="reply_to[name]"
value="<%= settings.reply_to.name %>"
placeholder="<%= __('Your name') %>" />
<input type="email"
id="settings[reply_email]"
name="reply_to[address]"
value="<%= settings.reply_to.address %>"
placeholder="reply_to@mydomain.com" />
</p>
<div id="settings_sender_container"></div>
<script type="text/javascript">
var mailpoet_settings_sender_name = "<%= settings.sender.name %>";
var mailpoet_settings_sender_adddress = "<%= settings.sender.address %>";
var mailpoet_settings_reply_to_name = "<%= settings.reply_to.name %>";
var mailpoet_settings_reply_to_address = "<%= settings.reply_to.address %>";
</script>
</td>
</tr>
<!-- email addresses receiving notifications -->