Use ItemList for signup and login modals (#1420)

* Remove unused imports

* Use body and footer methods

* Use ItemList for signup and login inputs

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

@@ -1,10 +1,10 @@
 import Modal from 'flarum/components/Modal';
 import ForgotPasswordModal from 'flarum/components/ForgotPasswordModal';
 import SignUpModal from 'flarum/components/SignUpModal';
-import Alert from 'flarum/components/Alert';
 import Button from 'flarum/components/Button';
 import LogInButtons from 'flarum/components/LogInButtons';
 import extractText from 'flarum/utils/extractText';
+import ItemList from 'flarum/utils/ItemList';
 
 /**
  * The `LogInModal` component displays a modal dialog with a login form.
@@ -51,54 +51,74 @@ export default class LogInModal extends Modal {
   content() {
     return [
       <div className="Modal-body">
-        <LogInButtons/>
-
-        <div className="Form Form--centered">
-          <div className="Form-group">
-            <input className="FormControl" name="identification" type="text" placeholder={extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'))}
-              bidi={this.identification}
-              disabled={this.loading} />
-          </div>
-
-          <div className="Form-group">
-            <input className="FormControl" name="password" type="password" placeholder={extractText(app.translator.trans('core.forum.log_in.password_placeholder'))}
-              bidi={this.password}
-              disabled={this.loading} />
-          </div>
-
-          <div className="Form-group">
-            <div>
-              <label className="checkbox">
-                <input type="checkbox" bidi={this.remember} disabled={this.loading} />
-                {app.translator.trans('core.forum.log_in.remember_me_label')}
-              </label>
-            </div>
-          </div>
-
-          <div className="Form-group">
-            {Button.component({
-              className: 'Button Button--primary Button--block',
-              type: 'submit',
-              loading: this.loading,
-              children: app.translator.trans('core.forum.log_in.submit_button')
-            })}
-          </div>
-        </div>
+        {this.body()}
       </div>,
       <div className="Modal-footer">
-        <p className="LogInModal-forgotPassword">
-          <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
-        </p>
-
-        {app.forum.attribute('allowSignUp') ? (
-          <p className="LogInModal-signUp">
-            {app.translator.trans('core.forum.log_in.sign_up_text', {a: <a onclick={this.signUp.bind(this)}/>})}
-          </p>
-        ) : ''}
+        {this.footer()}
       </div>
     ];
   }
 
+  body() {
+    return [
+      <LogInButtons/>,
+
+      <div className="Form Form--centered">
+        {this.fields().toArray()}
+      </div>
+    ];
+  }
+
+  fields() {
+    const items = new ItemList();
+
+    items.add('identification', <div className="Form-group">
+      <input className="FormControl" name="identification" type="text" placeholder={extractText(app.translator.trans('core.forum.log_in.username_or_email_placeholder'))}
+        bidi={this.identification}
+        disabled={this.loading} />
+    </div>, 30);
+
+    items.add('password', <div className="Form-group">
+      <input className="FormControl" name="password" type="password" placeholder={extractText(app.translator.trans('core.forum.log_in.password_placeholder'))}
+        bidi={this.password}
+        disabled={this.loading} />
+    </div>, 20);
+
+    items.add('remember', <div className="Form-group">
+      <div>
+        <label className="checkbox">
+          <input type="checkbox" bidi={this.remember} disabled={this.loading} />
+          {app.translator.trans('core.forum.log_in.remember_me_label')}
+        </label>
+      </div>
+    </div>, 10);
+
+    items.add('submit', <div className="Form-group">
+      {Button.component({
+        className: 'Button Button--primary Button--block',
+        type: 'submit',
+        loading: this.loading,
+        children: app.translator.trans('core.forum.log_in.submit_button')
+      })}
+    </div>, -10);
+
+    return items;
+  }
+
+  footer() {
+    return [
+      <p className="LogInModal-forgotPassword">
+        <a onclick={this.forgotPassword.bind(this)}>{app.translator.trans('core.forum.log_in.forgot_password_link')}</a>
+      </p>,
+
+      app.forum.attribute('allowSignUp') ? (
+        <p className="LogInModal-signUp">
+          {app.translator.trans('core.forum.log_in.sign_up_text', {a: <a onclick={this.signUp.bind(this)}/>})}
+        </p>
+      ) : ''
+    ];
+  }
+
   /**
    * Open the forgot password modal, prefilling it with an email if the user has
    * entered one.

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

@@ -1,9 +1,9 @@
 import Modal from 'flarum/components/Modal';
 import LogInModal from 'flarum/components/LogInModal';
-import avatar from 'flarum/helpers/avatar';
 import Button from 'flarum/components/Button';
 import LogInButtons from 'flarum/components/LogInButtons';
 import extractText from 'flarum/utils/extractText';
+import ItemList from 'flarum/utils/ItemList';
 
 /**
  * The `SignUpModal` component displays a modal dialog with a singup form.
@@ -69,41 +69,49 @@ export default class SignUpModal extends Modal {
       this.props.token ? '' : <LogInButtons/>,
 
       <div className="Form Form--centered">
-        <div className="Form-group">
-          <input className="FormControl" name="username" type="text" placeholder={extractText(app.translator.trans('core.forum.sign_up.username_placeholder'))}
-            value={this.username()}
-            onchange={m.withAttr('value', this.username)}
-            disabled={this.loading || this.isProvided('username')} />
-        </div>
-
-        <div className="Form-group">
-          <input className="FormControl" name="email" type="email" placeholder={extractText(app.translator.trans('core.forum.sign_up.email_placeholder'))}
-            value={this.email()}
-            onchange={m.withAttr('value', this.email)}
-            disabled={this.loading || this.isProvided('email')} />
-        </div>
-
-        {this.props.token ? '' : (
-          <div className="Form-group">
-            <input className="FormControl" name="password" type="password" placeholder={extractText(app.translator.trans('core.forum.sign_up.password_placeholder'))}
-              value={this.password()}
-              onchange={m.withAttr('value', this.password)}
-              disabled={this.loading} />
-          </div>
-        )}
-
-        <div className="Form-group">
-          <Button
-            className="Button Button--primary Button--block"
-            type="submit"
-            loading={this.loading}>
-            {app.translator.trans('core.forum.sign_up.submit_button')}
-          </Button>
-        </div>
+        {this.fields().toArray()}
       </div>
     ];
   }
 
+  fields() {
+    const items = new ItemList();
+
+    items.add('username', <div className="Form-group">
+      <input className="FormControl" name="username" type="text" placeholder={extractText(app.translator.trans('core.forum.sign_up.username_placeholder'))}
+        value={this.username()}
+        onchange={m.withAttr('value', this.username)}
+        disabled={this.loading || this.isProvided('username')} />
+    </div>, 30);
+
+    items.add('email', <div className="Form-group">
+      <input className="FormControl" name="email" type="email" placeholder={extractText(app.translator.trans('core.forum.sign_up.email_placeholder'))}
+        value={this.email()}
+        onchange={m.withAttr('value', this.email)}
+        disabled={this.loading || this.isProvided('email')} />
+    </div>, 20);
+
+    if (!this.props.token) {
+      items.add('password', <div className="Form-group">
+        <input className="FormControl" name="password" type="password" placeholder={extractText(app.translator.trans('core.forum.sign_up.password_placeholder'))}
+          value={this.password()}
+          onchange={m.withAttr('value', this.password)}
+          disabled={this.loading} />
+      </div>, 10);
+    }
+
+    items.add('submit', <div className="Form-group">
+      <Button
+        className="Button Button--primary Button--block"
+        type="submit"
+        loading={this.loading}>
+        {app.translator.trans('core.forum.sign_up.submit_button')}
+      </Button>
+    </div>, -10);
+
+    return items;
+  }
+
   footer() {
     return [
       <p className="SignUpModal-logIn">