DEV: Add UI for passkeys (3/3)

app/assets/javascripts/discourse/app/components/dialog-messages/confirm-session.gjs

@@ -0,0 +1,85 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import UserLink from "discourse/components/user-link";
+import { ajax } from "discourse/lib/ajax";
+import I18n from "I18n";
+
+export default class ConfirmSession extends Component {
+  @service dialog;
+  @service currentUser;
+
+  @tracked errorMessage;
+
+  passwordLabel = I18n.t("user.password.title");
+  instructions = I18n.t("user.confirm_access.instructions");
+  loggedInAs = I18n.t("user.confirm_access.logged_in_as");
+  finePrint = I18n.t("user.confirm_access.fine_print");
+
+  @action
+  async submit() {
+    const result = await ajax("/u/confirm-session", {
+      type: "POST",
+      data: {
+        password: this.password,
+      },
+    });
+
+    if (result.success) {
+      this.errorMessage = null;
+      this.dialog.didConfirmWrapped();
+    } else {
+      this.errorMessage = I18n.t("user.confirm_access.incorrect_password");
+    }
+  }
+
+  <template>
+    {{#if this.errorMessage}}
+      <div class="alert alert-error">
+        {{this.errorMessage}}
+      </div>
+    {{/if}}
+
+    <div class="control-group confirm-session">
+      <div class="confirm-session__instructions">
+        {{this.instructions}}
+      </div>
+
+      <div class="confirm-session__instructions">
+        <span>{{this.loggedInAs}}</span>
+        <UserLink @user={{this.currentUser}}>
+          {{this.currentUser.username}}
+        </UserLink>
+      </div>
+
+      <form>
+        <label class="control-label">{{this.passwordLabel}}</label>
+        <div class="controls">
+          <div class="inline-form">
+            <Input
+              @value={{this.password}}
+              @type="password"
+              id="password"
+              class="input-large"
+              autofocus="autofocus"
+            />
+            <DButton
+              class="btn-primary"
+              @type="submit"
+              @action={{this.submit}}
+              @label="user.password.confirm"
+            />
+          </div>
+        </div>
+      </form>
+
+      <div class="confirm-session__fine-print">
+        {{this.finePrint}}
+      </div>
+
+    </div>
+  </template>
+}

app/assets/javascripts/discourse/app/components/login-buttons.hbs

@@ -15,4 +15,9 @@
     {{b.title}}
   </button>
 {{/each}}
+
+{{#if this.canUsePasskeys}}
+  <PasskeyLoginButton />
+{{/if}}
+
 <PluginOutlet @name="after-login-buttons" />

app/assets/javascripts/discourse/app/components/login-buttons.js

@@ -1,21 +1,35 @@
 import Component from "@ember/component";
+import { isWebauthnSupported } from "discourse/lib/webauthn";
 import { findAll } from "discourse/models/login-method";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
   elementId: "login-buttons",
   classNameBindings: ["hidden"],
 
-  @discourseComputed("buttons.length", "showLoginWithEmailLink")
-  hidden(buttonsCount, showLoginWithEmailLink) {
-    return buttonsCount === 0 && !showLoginWithEmailLink;
+  @discourseComputed(
+    "buttons.length",
+    "showLoginWithEmailLink",
+    "canUsePasskeys"
+  )
+  hidden(buttonsCount, showLoginWithEmailLink, canUsePasskeys) {
+    return buttonsCount === 0 && !showLoginWithEmailLink && !canUsePasskeys;
   },
 
   @discourseComputed
   buttons() {
     return findAll();
   },
 
+  @discourseComputed
+  canUsePasskeys() {
+    return (
+      this.siteSettings.enable_local_logins &&
+      this.siteSettings.experimental_passkeys &&
+      isWebauthnSupported()
+    );
+  },
+
   actions: {
     externalLogin(provider) {
       this.externalLogin(provider);

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

@@ -9,6 +9,7 @@ import { ajax } from "discourse/lib/ajax";
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import { areCookiesEnabled } from "discourse/lib/utilities";
 import { wavingHandURL } from "discourse/lib/waving-hand-url";
+import { isWebauthnSupported } from "discourse/lib/webauthn";
 import { findAll } from "discourse/models/login-method";
 import { SECOND_FACTOR_METHODS } from "discourse/models/user";
 import I18n from "I18n";
@@ -86,8 +87,16 @@ export default class Login extends Component {
     return classes.join(" ");
   }
 
+  get canUsePasskeys() {
+    return (
+      this.siteSettings.enable_local_logins &&
+      this.siteSettings.experimental_passkeys &&
+      isWebauthnSupported()
+    );
+  }
+
   get hasAtLeastOneLoginButton() {
-    return findAll().length > 0;
+    return findAll().length > 0 || this.canUsePasskeys;
   }
 
   get loginButtonLabel() {

app/assets/javascripts/discourse/app/components/passkey-login-button.gjs

@@ -0,0 +1,45 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import { getPasskeyCredential } from "discourse/lib/webauthn";
+
+export default class PasskeyLoginButton extends Component {
+  @service dialog;
+
+  @action
+  async passkeyLogin() {
+    try {
+      const response = await ajax("/session/passkey/challenge.json");
+
+      const publicKeyCredential = await getPasskeyCredential(
+        response.challenge,
+        (errorMessage) => this.dialog.alert(errorMessage)
+      );
+
+      const authResult = await ajax("/session/passkey/auth.json", {
+        type: "POST",
+        data: { publicKeyCredential },
+      });
+
+      if (authResult && !authResult.error) {
+        window.location.reload();
+      } else {
+        this.dialog.alert(authResult.error);
+      }
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  <template>
+    <DButton
+      @action={{this.passkeyLogin}}
+      @icon="user"
+      @label="login.passkey.name"
+      class="btn btn-social passkey-login-button"
+    />
+  </template>
+}

app/assets/javascripts/discourse/app/components/user-preferences/passkey-options-dropdown.js

@@ -0,0 +1,39 @@
+import { action, computed } from "@ember/object";
+import I18n from "I18n";
+import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+
+export default DropdownSelectBoxComponent.extend({
+  classNames: ["passkey-options-dropdown"],
+
+  selectKitOptions: {
+    icon: "wrench",
+    showFullTitle: false,
+  },
+
+  content: computed(function () {
+    return [
+      {
+        id: "edit",
+        icon: "pencil-alt",
+        name: I18n.t("user.second_factor.edit"),
+      },
+      {
+        id: "delete",
+        icon: "trash-alt",
+        name: I18n.t("user.second_factor.delete"),
+      },
+    ];
+  }),
+
+  @action
+  onChange(id) {
+    switch (id) {
+      case "edit":
+        this.renamePasskey();
+        break;
+      case "delete":
+        this.deletePasskey();
+        break;
+    }
+  },
+});

app/assets/javascripts/discourse/app/components/user-preferences/rename-passkey.gjs

@@ -0,0 +1,67 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import { ajax } from "discourse/lib/ajax";
+import { extractError } from "discourse/lib/ajax-error";
+import I18n from "I18n";
+
+export default class RenamePasskey extends Component {
+  @service router;
+  @service dialog;
+
+  @tracked passkeyName;
+  @tracked errorMessage;
+
+  instructions = I18n.t("user.passkeys.rename_passkey_instructions");
+
+  constructor() {
+    super(...arguments);
+    this.passkeyName = this.args.model.name;
+  }
+
+  @action
+  async saveRename() {
+    try {
+      await ajax(`/u/rename_passkey/${this.args.model.id}`, {
+        type: "PUT",
+        data: {
+          name: this.passkeyName,
+        },
+      });
+
+      this.errorMessage = null;
+      this.router.refresh();
+      this.dialog.didConfirmWrapped();
+    } catch (error) {
+      this.errorMessage = extractError(error);
+    }
+  }
+
+  <template>
+    {{#if this.errorMessage}}
+      <div class="alert alert-error">
+        {{this.errorMessage}}
+      </div>
+    {{/if}}
+
+    <div class="rename-passkey__form">
+      <div class="rename-passkey__message">
+        <p>{{this.instructions}}</p>
+      </div>
+      <form>
+        <div class="rename-passkey__form inline-form">
+          <Input @value={{this.passkeyName}} autofocus={{true}} @type="text" />
+          <DButton
+            class="btn-primary"
+            @type="submit"
+            @action={{this.saveRename}}
+            @label="user.passkeys.save"
+          />
+        </div>
+      </form>
+    </div>
+  </template>
+}