DEV: Add UI for passkeys (3/3) (#23853)

Adds UI elements for registering a passkey and logging in with it. The feature is still in an early stage, interested parties that want to try it can use the `experimental_passkeys` site setting (via Rails console). 

See PR for more details. 
---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

spec/system/user_page/user_preferences_security_spec.rb

@@ -10,16 +10,15 @@ describe "User preferences for Security", type: :system do
   before do
     user.activate
     sign_in(user)
+
+    # system specs run on their own host + port
+    DiscourseWebauthn.stubs(:origin).returns(current_host + ":" + Capybara.server_port.to_s)
   end
 
   describe "Security keys" do
-    it "adds a 2F security key and logs in with it" do
-      # system specs run on their own host + port
-      DiscourseWebauthn.stubs(:origin).returns(current_host + ":" + Capybara.server_port.to_s)
-
-      # simulate browser credential authorization
+    it "adds a 2FA security key and logs in with it" do
       options = ::Selenium::WebDriver::VirtualAuthenticatorOptions.new
-      page.driver.browser.add_virtual_authenticator(options)
+      authenticator = page.driver.browser.add_virtual_authenticator(options)
 
       user_preferences_security_page.visit(user)
       user_preferences_security_page.visit_second_factor(password)
@@ -43,6 +42,59 @@ describe "User preferences for Security", type: :system do
       find("#security-key .btn-primary").click
 
       expect(page).to have_css(".header-dropdown-toggle.current-user")
+
+      # clear authenticator (otherwise it will interfere with other tests)
+      authenticator.remove!
+    end
+  end
+
+  describe "Passkeys" do
+    before { SiteSetting.experimental_passkeys = true }
+
+    it "adds a passkey and logs in with it" do
+      options =
+        ::Selenium::WebDriver::VirtualAuthenticatorOptions.new(
+          user_verification: true,
+          user_verified: true,
+          resident_key: true,
+        )
+      authenticator = page.driver.browser.add_virtual_authenticator(options)
+
+      user_preferences_security_page.visit(user)
+
+      find(".pref-passkeys__add .btn").click
+      expect(user_preferences_security_page).to have_css("input#password")
+
+      find(".dialog-body input#password").fill_in(with: password)
+      find(".confirm-session .btn-primary").click
+
+      expect(user_preferences_security_page).to have_css(".rename-passkey__form")
+
+      find(".dialog-close").click
+
+      expect(user_preferences_security_page).to have_css(".pref-passkeys__rows .row")
+
+      select_kit = PageObjects::Components::SelectKit.new(".passkey-options-dropdown")
+      select_kit.expand
+      select_kit.select_row_by_name("Delete")
+
+      # confirm deletion screen shown without requiring session confirmation
+      # since this was already done when adding the passkey
+      expect(user_preferences_security_page).to have_css(".dialog-footer .btn-danger")
+
+      # close the dialog (don't delete the key, we need it to login in the next step)
+      find(".dialog-close").click
+
+      user_menu.sign_out
+
+      # login with the key we just created
+      find(".d-header .login-button").click
+      find(".passkey-login-button").click
+
+      expect(page).to have_css(".header-dropdown-toggle.current-user")
+
+      # clear authenticator (otherwise it will interfere with other tests)
+      authenticator.remove!
     end
   end
 end