Tweak structure of mail settings page

Refs #258 and #933.

framework/core/js/admin/dist/app.js

@@ -18993,14 +18993,15 @@ System.register('flarum/components/MailPage', ['flarum/components/Page', 'flarum
                 m(
                   'form',
                   { onsubmit: this.onsubmit.bind(this) },
-                  FieldSet.component({
+                  m(
-                    label: app.translator.trans('core.admin.email.heading'),
-                    className: 'MailPage-MailSettings',
-                    children: [m(
                     'div',
                     { className: 'helpText' },
                     app.translator.trans('core.admin.email.text')
-                    ), m(
+                  ),
+                  FieldSet.component({
+                    label: app.translator.trans('core.admin.email.server_heading'),
+                    className: 'MailPage-MailSettings',
+                    children: [m(
                       'div',
                       { className: 'MailPage-MailSettings-input' },
                       m(
@@ -19015,18 +19016,26 @@ System.register('flarum/components/MailPage', ['flarum/components/Page', 'flarum
                         app.translator.trans('core.admin.email.host_label')
                       ),
                       m('input', { className: 'FormControl', value: this.values.mail_host() || '', oninput: m.withAttr('value', this.values.mail_host) }),
-                      m(
-                        'label',
-                        null,
-                        app.translator.trans('core.admin.email.from_label')
-                      ),
-                      m('input', { className: 'FormControl', value: this.values.mail_from() || '', oninput: m.withAttr('value', this.values.mail_from) }),
                       m(
                         'label',
                         null,
                         app.translator.trans('core.admin.email.port_label')
                       ),
                       m('input', { className: 'FormControl', value: this.values.mail_port() || '', oninput: m.withAttr('value', this.values.mail_port) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.email.encryption_label')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_encryption() || '', oninput: m.withAttr('value', this.values.mail_encryption) })
+                    )]
+                  }),
+                  FieldSet.component({
+                    label: app.translator.trans('core.admin.email.account_heading'),
+                    className: 'MailPage-MailSettings',
+                    children: [m(
+                      'div',
+                      { className: 'MailPage-MailSettings-input' },
                       m(
                         'label',
                         null,
@@ -19038,13 +19047,21 @@ System.register('flarum/components/MailPage', ['flarum/components/Page', 'flarum
                         null,
                         app.translator.trans('core.admin.email.password_label')
                       ),
-                      m('input', { className: 'FormControl', value: this.values.mail_password() || '', oninput: m.withAttr('value', this.values.mail_password) }),
+                      m('input', { className: 'FormControl', value: this.values.mail_password() || '', oninput: m.withAttr('value', this.values.mail_password) })
+                    )]
+                  }),
+                  FieldSet.component({
+                    label: app.translator.trans('core.admin.email.addresses_heading'),
+                    className: 'MailPage-MailSettings',
+                    children: [m(
+                      'div',
+                      { className: 'MailPage-MailSettings-input' },
                       m(
                         'label',
                         null,
-                        app.translator.trans('core.admin.email.encryption_label')
+                        app.translator.trans('core.admin.email.from_label')
                       ),
-                      m('input', { className: 'FormControl', value: this.values.mail_encryption() || '', oninput: m.withAttr('value', this.values.mail_encryption) })
+                      m('input', { className: 'FormControl', value: this.values.mail_from() || '', oninput: m.withAttr('value', this.values.mail_from) })
                     )]
                   }),
                   Button.component({

framework/core/js/admin/src/components/MailPage.js

@@ -36,28 +36,47 @@ export default class MailPage extends Page {
       <div className="MailPage">
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.heading'),
-              className: 'MailPage-MailSettings',
-              children: [
             <div className="helpText">
               {app.translator.trans('core.admin.email.text')}
-                </div>,
+            </div>
+
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.server_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
                 <div className="MailPage-MailSettings-input">
                   <label>{app.translator.trans('core.admin.email.driver_label')}</label>
                   <input className="FormControl" value={this.values.mail_driver() || ''} oninput={m.withAttr('value', this.values.mail_driver)} />
                   <label>{app.translator.trans('core.admin.email.host_label')}</label>
                   <input className="FormControl" value={this.values.mail_host() || ''} oninput={m.withAttr('value', this.values.mail_host)} />
-                  <label>{app.translator.trans('core.admin.email.from_label')}</label>
-                  <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
                   <label>{app.translator.trans('core.admin.email.port_label')}</label>
                   <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} />
+                  <label>{app.translator.trans('core.admin.email.encryption_label')}</label>
+                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
+                </div>
+              ]
+            })}
+
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.account_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
                   <label>{app.translator.trans('core.admin.email.username_label')}</label>
                   <input className="FormControl" value={this.values.mail_username() || ''} oninput={m.withAttr('value', this.values.mail_username)} />
                   <label>{app.translator.trans('core.admin.email.password_label')}</label>
                   <input className="FormControl" value={this.values.mail_password() || ''} oninput={m.withAttr('value', this.values.mail_password)} />
-                  <label>{app.translator.trans('core.admin.email.encryption_label')}</label>
+                </div>
-                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
+              ]
+            })}
+
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.addresses_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.email.from_label')}</label>
+                  <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
                 </div>
               ]
             })}