DEV: avoid making direct HTML changes in controllers

Followup on d5d8db7f, we prefer not to amend DOM directly from controllers.

app/assets/javascripts/discourse/components/honeypot-input.js.es6

@@ -0,0 +1,16 @@
+import { on } from "ember-addons/ember-computed-decorators";
+
+export default Ember.TextField.extend({
+  @on("init")
+  _init() {
+    // Chrome autocomplete is buggy per:
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=987293
+    // work around issue while leaving a semi useable honeypot for
+    // bots that are running full Chrome
+    if (navigator.userAgent.indexOf("Chrome") > -1) {
+      this.set("type", "text");
+    } else {
+      this.set("type", "password");
+    }
+  }
+});

app/assets/javascripts/discourse/controllers/create-account.js.es6

@@ -25,6 +25,7 @@ export default Ember.Controller.extend(
 
     complete: false,
     accountChallenge: 0,
+    accountHoneypot: 0,
     formSubmitted: false,
     rejectedEmails: Ember.A([]),
     prefilledUsername: null,
@@ -198,28 +199,8 @@ export default Ember.Controller.extend(
           this._challengeExpiry = 30;
         }
 
-        const confirmation = document.getElementById(
-          "new-account-confirmation"
-        );
-        if (confirmation) {
-          confirmation.value = json.value;
-        }
-
-        // Chrome autocomplete is buggy per:
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=987293
-        // work around issue while leaving a semi useable honeypot for
-        // bots that are running full Chrome
-        if (confirmation && navigator.userAgent.indexOf("Chrome") > 0) {
-          const newConfirmation = document.createElement("input");
-
-          newConfirmation.type = "text";
-          newConfirmation.id = "new-account-confirmation";
-          newConfirmation.value = json.value;
-
-          confirmation.parentNode.replaceChild(newConfirmation, confirmation);
-        }
-
         this.setProperties({
+          accountHoneypot: json.value,
           accountChallenge: json.challenge
             .split("")
             .reverse()
@@ -237,9 +218,7 @@ export default Ember.Controller.extend(
         "accountChallenge"
       );
 
-      attrs["accountPasswordConfirm"] = document.getElementById(
+      attrs["accountPasswordConfirm"] = this.accountHoneypot;
-        "new-account-confirmation"
-      ).value;
 
       const userFields = this.userFields;
       const destinationUrl = this.get("authOptions.destination_url");

app/assets/javascripts/discourse/templates/modal/create-account.hbs

@@ -83,7 +83,7 @@
           <tr class="password-confirmation">
             <td><label for='new-account-password-confirmation'>{{i18n 'user.password_confirmation.title'}}</label></td>
             <td>
-              <input autocomplete="new-password" id="new-account-confirmation" type="password">
+              {{honeypot-input id="new-account-confirmation" autocomplete="new-password" value=accountHoneypot}}
               {{input value=accountChallenge id="new-account-challenge"}}
             </td>
           </tr>