UX: Submit security key edit form on Enter (#24532)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.hbs

@@ -1,27 +1,28 @@
 <DModal
   @title={{i18n "user.second_factor.security_key.edit"}}
   @closeModal={{@closeModal}}
+  @tagName="form"
 >
   <:body>
-    <form class="form-horizontal">
     <div class="input-group">
       <label for="security-key-name">{{i18n
           "user.second_factor.security_key.edit_description"
         }}</label>
       <Input
         name="security-key-name"
+        id="security-key-name"
         maxlength={{this.maxSecondFactorNameLength}}
         @type="text"
         @value={{@model.securityKey.name}}
       />
     </div>
-    </form>
   </:body>
   <:footer>
     <DButton
       @action={{this.editSecurityKey}}
       class="btn-primary"
       @label="user.second_factor.security_key.save"
+      @type="submit"
     />
   </:footer>
 </DModal>

app/assets/javascripts/discourse/tests/acceptance/user-preferences-second-factor-test.js

@@ -1,4 +1,10 @@
-import { click, currentRouteName, fillIn, visit } from "@ember/test-helpers";
+import {
+  click,
+  currentRouteName,
+  fillIn,
+  triggerKeyEvent,
+  visit,
+} from "@ember/test-helpers";
 import { test } from "qunit";
 import {
   acceptance,
@@ -133,6 +139,25 @@ acceptance("User Preferences - Second Factor", function (needs) {
       "Are you sure you want to disable two-factor authentication?"
     );
   });
+
+  test("rename second factor security method", async function (assert) {
+    updateCurrentUser({ moderator: false, admin: false, trust_level: 1 });
+    await visit("/u/eviltrout/preferences/second-factor");
+
+    assert
+      .dom(".security-key .second-factor-item")
+      .exists("User has a physical security key");
+
+    await click(".security-key-dropdown .select-kit-header");
+    await click(".security-key-dropdown li[data-name='Edit']");
+
+    await fillIn("input[name='security-key-name']", "keyname changed");
+    await triggerKeyEvent(".d-modal .btn-primary", "keydown", "Enter");
+
+    assert
+      .dom(".d-modal__container")
+      .doesNotExist("modal is closed when form is submitted via keyboard");
+  });
 });
 
 acceptance(