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">
-      <div class="input-group">
+      <label for="security-key-name">{{i18n
-        <label for="security-key-name">{{i18n
+          "user.second_factor.security_key.edit_description"
-            "user.second_factor.security_key.edit_description"
+        }}</label>
-          }}</label>
+      <Input
-        <Input
+        name="security-key-name"
-          name="security-key-name"
+        id="security-key-name"
-          maxlength={{this.maxSecondFactorNameLength}}
+        maxlength={{this.maxSecondFactorNameLength}}
-          @type="text"
+        @type="text"
-          @value={{@model.securityKey.name}}
+        @value={{@model.securityKey.name}}
-        />
+      />
-      </div>
+    </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(