Display sender warning on settings page

[MAILPOET-1573]

assets/js/src/settings/default_sender.jsx

@@ -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;

assets/js/src/settings/settings.jsx

@@ -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')
+);

assets/js/src/webpack_admin_index.jsx

@@ -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

views/settings.html

@@ -220,5 +220,8 @@
     'announcementHeader': __('Get notified when someone subscribes'),
     'announcementParagraph1': __('It’s 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 it’s too many emails.)'),
+    'yourName': __('Your name'),
+    'from': __('From'),
+    'replyTo': __('Reply-to'),
   }) %>
 <% endblock %>

views/settings/basics.html

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