Move EditUserModal fields into an ItemList to make more extendable (#1593)

framework/core/js/src/forum/components/EditUserModal.js

@@ -3,6 +3,7 @@ import Button from '../../common/components/Button';
 import GroupBadge from '../../common/components/GroupBadge';
 import Group from '../../common/models/Group';
 import extractText from '../../common/utils/extractText';
+import ItemList from '../../common/utils/ItemList';
 
 /**
  * The `EditUserModal` component displays a modal dialog with a login form.
@@ -37,80 +38,91 @@ export default class EditUserModal extends Modal {
     return (
       <div className="Modal-body">
         <div className="Form">
-          <div className="Form-group">
+          {this.fields().toArray()}
-            <label>{app.translator.trans('core.forum.edit_user.username_heading')}</label>
-            <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.username_label'))}
-              bidi={this.username} />
-          </div>
-
-          {app.session.user !== this.props.user ? [
-            <div className="Form-group">
-              <label>{app.translator.trans('core.forum.edit_user.email_heading')}</label>
-              <div>
-                <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.email_label'))}
-                  bidi={this.email} />
-              </div>
-              {!this.isEmailConfirmed() ? (
-                <div>
-                  {Button.component({
-                    className: 'Button Button--block',
-                    children: app.translator.trans('core.forum.edit_user.activate_button'),
-                    loading: this.loading,
-                    onclick: this.activate.bind(this)
-                  })}
-                </div>
-              ) : ''}
-            </div>,
-
-            <div className="Form-group">
-              <label>{app.translator.trans('core.forum.edit_user.password_heading')}</label>
-              <div>
-                <label className="checkbox">
-                  <input type="checkbox" checked={this.setPassword()} onchange={e => {
-                    this.setPassword(e.target.checked);
-                    m.redraw(true);
-                    if (e.target.checked) this.$('[name=password]').select();
-                    m.redraw.strategy('none');
-                  }}/>
-                  {app.translator.trans('core.forum.edit_user.set_password_label')}
-                </label>
-                {this.setPassword() ? (
-                  <input className="FormControl" type="password" name="password" placeholder={extractText(app.translator.trans('core.forum.edit_user.password_label'))}
-                    bidi={this.password} />
-                ) : ''}
-              </div>
-            </div>
-          ] : ''}
-
-          <div className="Form-group EditUserModal-groups">
-            <label>{app.translator.trans('core.forum.edit_user.groups_heading')}</label>
-            <div>
-              {Object.keys(this.groups)
-                .map(id => app.store.getById('groups', id))
-                .map(group => (
-                  <label className="checkbox">
-                    <input type="checkbox"
-                      bidi={this.groups[group.id()]}
-                      disabled={this.props.user.id() === '1' && group.id() === Group.ADMINISTRATOR_ID} />
-                    {GroupBadge.component({group, label: ''})} {group.nameSingular()}
-                  </label>
-                ))}
-            </div>
-          </div>
-
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary',
-              type: 'submit',
-              loading: this.loading,
-              children: app.translator.trans('core.forum.edit_user.submit_button')
-            })}
-          </div>
         </div>
       </div>
     );
   }
 
+  fields() {
+    const items = new ItemList();
+
+    items.add('username', <div className="Form-group">
+      <label>{app.translator.trans('core.forum.edit_user.username_heading')}</label>
+      <input className="FormControl" placeholder={extractText(app.translator.trans('core.forum.edit_user.username_label'))}
+             bidi={this.username} />
+    </div>, 40);
+
+    if (app.session.user !== this.props.user) {
+      items.add('email', <div className="Form-group">
+        <label>{app.translator.trans('core.forum.edit_user.email_heading')}</label>
+        <div>
+          <input className="FormControl"
+                 placeholder={extractText(app.translator.trans('core.forum.edit_user.email_label'))}
+                 bidi={this.email}/>
+        </div>
+        {!this.isEmailConfirmed() ? (
+          <div>
+            {Button.component({
+              className: 'Button Button--block',
+              children: app.translator.trans('core.forum.edit_user.activate_button'),
+              loading: this.loading,
+              onclick: this.activate.bind(this)
+            })}
+          </div>
+        ) : ''}
+      </div>, 30);
+
+      items.add('password', <div className="Form-group">
+        <label>{app.translator.trans('core.forum.edit_user.password_heading')}</label>
+        <div>
+          <label className="checkbox">
+            <input type="checkbox" checked={this.setPassword()} onChange={e => {
+              this.setPassword(e.target.checked);
+              m.redraw(true);
+              if (e.target.checked) this.$('[name=password]').select();
+              m.redraw.strategy('none');
+            }}/>
+            {app.translator.trans('core.forum.edit_user.set_password_label')}
+          </label>
+          {this.setPassword() ? (
+            <input className="FormControl" type="password" name="password"
+                   placeholder={extractText(app.translator.trans('core.forum.edit_user.password_label'))}
+                   bidi={this.password}/>
+          ) : ''}
+        </div>
+      </div>, 20);
+
+    }
+
+    items.add('groups', <div className="Form-group EditUserModal-groups">
+      <label>{app.translator.trans('core.forum.edit_user.groups_heading')}</label>
+      <div>
+        {Object.keys(this.groups)
+          .map(id => app.store.getById('groups', id))
+          .map(group => (
+            <label className="checkbox">
+              <input type="checkbox"
+                     bidi={this.groups[group.id()]}
+                     disabled={this.props.user.id() === '1' && group.id() === Group.ADMINISTRATOR_ID} />
+              {GroupBadge.component({group, label: ''})} {group.nameSingular()}
+            </label>
+          ))}
+      </div>
+    </div>, 10);
+
+    items.add('submit', <div className="Form-group">
+      {Button.component({
+        className: 'Button Button--primary',
+        type: 'submit',
+        loading: this.loading,
+        children: app.translator.trans('core.forum.edit_user.submit_button')
+      })}
+    </div>, -10);
+
+    return items;
+  }
+
   activate() {
     this.loading = true;
     const data = {