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();
+  });
+});

spec/system/user_page/user_preferences_security_spec.rb

@@ -15,7 +15,7 @@ describe "User preferences for Security", type: :system do
     DiscourseWebauthn.stubs(:origin).returns(current_host + ":" + Capybara.server_port.to_s)
   end
 
-  describe "Security keys" do
+  shared_examples "security keys" do
     it "adds a 2FA security key and logs in with it" do
       options = ::Selenium::WebDriver::VirtualAuthenticatorOptions.new
       authenticator = page.driver.browser.add_virtual_authenticator(options)
@@ -48,7 +48,7 @@ describe "User preferences for Security", type: :system do
     end
   end
 
-  describe "Passkeys" do
+  shared_examples "passkeys" do
     before { SiteSetting.experimental_passkeys = true }
 
     it "adds a passkey and logs in with it" do
@@ -88,8 +88,9 @@ describe "User preferences for Security", type: :system do
       user_menu.sign_out
 
       # login with the key we just created
+      # this triggers the conditional UI for passkeys
+      # which uses the virtual authenticator
       find(".d-header .login-button").click
-      find(".passkey-login-button").click
 
       expect(page).to have_css(".header-dropdown-toggle.current-user")
 
@@ -97,4 +98,14 @@ describe "User preferences for Security", type: :system do
       authenticator.remove!
     end
   end
+
+  context "when desktop" do
+    include_examples "security keys"
+    include_examples "passkeys"
+  end
+
+  context "when mobile", mobile: true do
+    include_examples "security keys"
+    include_examples "passkeys"
+  end
 end