case 4678 - passkey sign-in and management

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/views/adm-user.vue

@@ -824,6 +824,30 @@ export default {
         window.$gz.errorHandler.handleFormError(error, vm);
       }
     },
+    //case 4678: for a user who lost their passkeys
+    async removePasskeys() {
+      const vm = this;
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const res = await window.$gz.api.remove(
+          `auth/passkey/user/${vm.obj.id}`
+        );
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          window.$gz.eventBus.$emit(
+            "notify-success",
+            vm.$sock.t("PasskeyRemoveAll")
+          );
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
     async disableTfa() {
       const vm = this;
 
@@ -907,6 +931,9 @@ async function clickHandler(menuItem) {
       case "disable2fa":
         m.vm.disableTfa();
         break;
+      case "removepasskeys":
+        m.vm.removePasskeys();
+        break;
       case "WorkOrderItemScheduledUserList":
         m.vm.$router.push({
           name: "svc-workorder-item-scheduled-users",
@@ -1021,6 +1048,12 @@ function generateMenu(vm) {
         key: FORM_KEY + ":sendreset",
         vm: vm
       });
+      menuOptions.menuItems.push({
+        title: "PasskeyRemoveAll",
+        icon: "$sockiFingerprint",
+        key: FORM_KEY + ":removepasskeys",
+        vm: vm
+      });
       if (vm.obj.twoFactorEnabled) {
         menuOptions.menuItems.push({
           title: "AuthDisableTwoFactor",
@@ -1067,6 +1100,7 @@ async function initForm(vm) {
 //
 async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
+    "PasskeyRemoveAll",
     "Vendor",
     "User",
     "UserSettings",

src/views/home-security.vue

@@ -65,12 +65,59 @@
               </v-card>
             </v-col>
           </template>
+          <!-- case 4678: passkeys -->
+          <v-col cols="12">
+            <v-card data-cy="passkeys" class="mx-auto my-6" max-width="600">
+              <v-card-title>{{ $sock.t("Passkeys") }}</v-card-title>
+              <v-card-subtitle>{{ $sock.t("PasskeyIntro") }}</v-card-subtitle>
+              <v-card-text>
+                <div v-if="!passkeySupported" class="warning--text mb-4">
+                  {{ $sock.t("PasskeyNotSupported") }}
+                </div>
+                <v-simple-table v-if="passkeys.length > 0" dense>
+                  <tbody>
+                    <tr v-for="k in passkeys" :key="k.id">
+                      <td>{{ k.name }}</td>
+                      <td class="text-caption">
+                        {{ $sock.t("PasskeyCreated") }}: {{ date(k.created) }}
+                        <br />
+                        {{ $sock.t("PasskeyLastUsed") }}: {{ date(k.lastUsed) }}
+                      </td>
+                      <td>
+                        <v-btn
+                          icon
+                          :title="$sock.t('PasskeyRemove')"
+                          @click="removePasskey(k)"
+                        >
+                          <v-icon small>$sockiTrashAlt</v-icon>
+                        </v-btn>
+                      </td>
+                    </tr>
+                  </tbody>
+                </v-simple-table>
+                <div v-else class="mb-2">{{ $sock.t("PasskeyNone") }}</div>
+                <template v-if="passkeySupported">
+                  <v-text-field
+                    v-model="passkeyName"
+                    dense
+                    class="mt-6"
+                    :label="$sock.t('PasskeyName')"
+                    data-cy="passkeyName"
+                  ></v-text-field>
+                  <v-btn color="primary" @click="addPasskey()">{{
+                    $sock.t("PasskeyAdd")
+                  }}</v-btn>
+                </template>
+              </v-card-text>
+            </v-card>
+          </v-col>
         </v-row>
       </v-form>
     </v-col>
   </v-row>
 </template>
 <script>
+import passkey from "../api/passkey";
 const FORM_KEY = "security";
 
 export default {
@@ -83,6 +130,9 @@ export default {
       },
       pin: null,
       tfaEnabled: window.$gz.store.state.tfaEnabled,
+      passkeys: [],
+      passkeyName: null,
+      passkeySupported: passkey.supported(),
       formState: {
         ready: false,
         dirty: false,
@@ -116,6 +166,7 @@ export default {
         readOnly: false
       });
       window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getPasskeys();
       //fetch tfa secret and display here if tfa not enabled currently
       if (!this.tfaEnabled) {
         const res = await window.$gz.api.get("auth/totp");
@@ -135,6 +186,71 @@ export default {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
+    //case 4678
+    date(d) {
+      if (!d) {
+        return "-";
+      }
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        d,
+        window.$gz.locale.getResolvedTimeZoneName(),
+        window.$gz.locale.getResolvedLanguage(),
+        window.$gz.locale.getHour12()
+      );
+    },
+    async getPasskeys() {
+      const res = await window.$gz.api.get("auth/passkey");
+      if (!res.error) {
+        this.passkeys = res.data;
+      }
+    },
+    async addPasskey() {
+      const vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        let res = await window.$gz.api.post(
+          "auth/passkey/register-options",
+          {}
+        );
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        const answer = await passkey.create(res.data.options);
+        res = await window.$gz.api.post("auth/passkey/register", {
+          id: res.data.id,
+          name: vm.passkeyName,
+          response: answer
+        });
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        vm.passkeyName = null;
+        await vm.getPasskeys();
+      } catch (error) {
+        //the user closed the browser's passkey prompt
+        if (error.name == "NotAllowedError" || error.name == "AbortError") {
+          return;
+        }
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
+    async removePasskey(k) {
+      const vm = this;
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      const res = await window.$gz.api.remove(`auth/passkey/${k.id}`);
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+      } else {
+        await vm.getPasskeys();
+      }
+    },
     form() {
       return window.$gz.form;
     },
@@ -260,6 +376,15 @@ async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "AuthConnectAppTitle",
     "AuthConnectAppSubTitle",
+    "Passkeys",
+    "PasskeyIntro",
+    "PasskeyAdd",
+    "PasskeyName",
+    "PasskeyCreated",
+    "PasskeyLastUsed",
+    "PasskeyNone",
+    "PasskeyRemove",
+    "PasskeyNotSupported",
     "AuthConnectAppManualEntry",
     "AuthEnterPin",
     "AuthTwoFactor",

src/views/login.vue

@@ -126,6 +126,16 @@
                 >
                   <v-icon>$sockiSignIn</v-icon>
                 </v-btn>
+                <!-- case 4678: passkey sign-in, offered where the browser and page allow it -->
+                <v-btn
+                  v-if="passkeySupported"
+                  class="ml-4"
+                  aria-label="Passkey"
+                  data-cy="passkeybutton"
+                  @click="passkeyLogin()"
+                >
+                  <v-icon>$sockiFingerprint</v-icon>
+                </v-btn>
               </v-col>
             </v-row>
           </form>
@@ -183,6 +193,7 @@
 </template>
 <script>
 import { processLogin, processLogout } from "../api/authutil";
+import passkey from "../api/passkey";
 import sockeyeVersion from "../api/sockeye-version";
 export default {
   data() {
@@ -201,6 +212,7 @@ export default {
       tt: null,
       pinError: null,
       loggedInWithKnownPassword: false,
+      passkeySupported: passkey.supported(),
       hasSmallLogo: false,
       hasMediumLogo: false,
       hasLargeLogo: false,
@@ -380,6 +392,45 @@ export default {
       //move focus to password
       document.getElementsByName("password")[0].focus();
     },
+    //case 4678
+    async passkeyLogin() {
+      const vm = this;
+      vm.errorBadCreds = false;
+      vm.formState.errorBoxMessage = null;
+      try {
+        let res = await window.$gz.api.upsert(
+          "auth/passkey/login-options",
+          {},
+          true
+        );
+        if (res.error) {
+          throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        }
+        const answer = await passkey.get(res.data.options);
+        res = await window.$gz.api.upsert(
+          "auth/passkey/login",
+          { id: res.data.id, response: answer },
+          true
+        );
+        if (res.error) {
+          throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        }
+        await this.step2(res);
+      } catch (error) {
+        //the user closed the browser's passkey prompt
+        if (error.name == "NotAllowedError" || error.name == "AbortError") {
+          return;
+        }
+        if (
+          error.message &&
+          error.message.includes("ErrorUserNotAuthenticated")
+        ) {
+          vm.errorBadCreds = true;
+          return;
+        }
+        vm.formState.errorBoxMessage = error.message;
+      }
+    },
     async login() {
       const vm = this;