UX: Fix mobile passkeys login button (#24124)

This regressed in b6dc929. A test to ensure this doesn't regress has
been added as well.

This PR also fixes a flakey system spec. The conditional UI gets
triggered automatically, so the system spec shouldn't explicitly call
`find(".passkey-login-button").click`, because sometimes it isn't
present and that causes a test failure.

app/assets/javascripts/discourse/app/components/modal/login.hbs

@@ -15,7 +15,10 @@
         @createAccount={{this.createAccount}}
       />
       {{#if this.showLoginButtons}}
-        <LoginButtons @externalLogin={{this.externalLogin}} />
+        <LoginButtons
+          @externalLogin={{this.externalLogin}}
+          @passkeyLogin={{this.passkeyLogin}}
+        />
       {{/if}}
     {{/if}}
 

app/assets/javascripts/discourse/tests/acceptance/modal/login/login-test.js

@@ -1,5 +1,6 @@
 import { click, fillIn, tab, visit } from "@ember/test-helpers";
 import { test } from "qunit";
+import sinon from "sinon";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "discourse-i18n";
 
@@ -82,3 +83,37 @@ acceptance("Modal - Login - With Passkeys disabled", function (needs) {
     assert.dom("#login-account-name").hasAttribute("autocomplete", "username");
   });
 });
+
+acceptance("Modal - Login - Passkeys on mobile", function (needs) {
+  needs.mobileView();
+  needs.settings({
+    experimental_passkeys: true,
+  });
+
+  needs.pretender((server, helper) => {
+    server.get(`/session/passkey/challenge.json`, () =>
+      helper.response({
+        challenge: "some-challenge",
+      })
+    );
+  });
+
+  test("Includes passkeys button and conditional UI", async function (assert) {
+    await visit("/");
+    await click("header .login-button");
+
+    sinon.stub(navigator.credentials, "get").callsFake(function () {
+      return Promise.reject(new Error("credentials.get got called"));
+    });
+
+    assert
+      .dom("#login-account-name")
+      .hasAttribute("autocomplete", "username webauthn");
+
+    await click(".passkey-login-button");
+
+    // clicking the button triggers credentials.get
+    // but we can't really test that in frontend so an error is returned
+    assert.dom(".dialog-body").exists();
+  });
+});