@strands.gg/accui 1.2.0 → 1.2.1

package/dist/strands-auth-ui.es.js

@@ -9198,6 +9198,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { getSupportEmail, config: strandsConfig, getUrl } = useStrandsConfig(props.config);
     const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth();
+    const { mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = ref(null);
     const fetchingProfile = ref(false);
     const currentUser = computed(() => {
@@ -9275,6 +9276,54 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       const years = Math.floor(diffDays / 365);
       return years === 1 ? "1 year ago" : `${years} years ago`;
     });
+    const deviceTypeCounts = computed(() => {
+      const devices = activeMfaDevices.value || [];
+      const counts = {
+        totp: 0,
+        email: 0,
+        hardware: 0,
+        passkey: 0
+      };
+      devices.forEach((device) => {
+        if (device.device_type in counts) {
+          counts[device.device_type]++;
+        }
+      });
+      return counts;
+    });
+    const mfaDeviceChips = computed(() => {
+      const chips = [];
+      const counts = deviceTypeCounts.value;
+      if (counts.totp > 0) {
+        chips.push({
+          type: "totp",
+          count: counts.totp,
+          label: counts.totp === 1 ? "Auth app" : "Auth apps",
+          icon: Smartphone,
+          color: "bg-blue-50 text-blue-700 border-blue-200"
+        });
+      }
+      if (counts.email > 0) {
+        chips.push({
+          type: "email",
+          count: counts.email,
+          label: "Email",
+          icon: Mail,
+          color: "bg-green-50 text-green-700 border-green-200"
+        });
+      }
+      if (counts.hardware > 0 || counts.passkey > 0) {
+        const totalHardware = counts.hardware + counts.passkey;
+        chips.push({
+          type: "hardware",
+          count: totalHardware,
+          label: totalHardware === 1 ? "Key" : "Keys",
+          icon: KeyRound,
+          color: "bg-purple-50 text-purple-700 border-purple-200"
+        });
+      }
+      return chips;
+    });
     const getInitials2 = (firstName, lastName) => {
       if (!firstName && !lastName) return "U";
       return `${firstName?.[0] || ""}${lastName?.[0] || ""}`.toUpperCase();
@@ -9284,6 +9333,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       fetchingProfile.value = true;
       try {
         await fetchProfile();
+        if (isAuthenticated.value) {
+          await fetchMfaDevices();
+        }
       } catch (err) {
         const errorMsg = err instanceof Error ? err.message : "Failed to load profile";
         errorMessage.value = errorMsg;
@@ -9498,6 +9550,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const handleMfaUpdated = async () => {
       try {
         await fetchProfile();
+        await fetchMfaDevices();
         successMessage.value = "MFA settings updated successfully";
         emit("mfa-toggle", currentUser.value?.mfaEnabled || false);
       } catch (err) {
@@ -9535,7 +9588,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         signingOut.value = false;
       }
     };
-    const __returned__ = { props, emit, getSupportEmail, strandsConfig, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, successMessage, errorMessage, activeSessions, fileInputRef, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerFileUpload, handleFileSelect, uploadAvatar, handleMfaUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
+    const __returned__ = { props, emit, getSupportEmail, strandsConfig, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, successMessage, errorMessage, activeSessions, fileInputRef, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, deviceTypeCounts, mfaDeviceChips, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerFileUpload, handleFileSelect, uploadAvatar, handleMfaUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
       return StrandsUiButton;
     }, get StrandsUiInput() {
       return StrandsUiInput;
@@ -9588,31 +9641,37 @@ const _hoisted_21 = {
   class: "space-y-3 overflow-hidden"
 };
 const _hoisted_22 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_23 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_24 = { class: "text-sm text-gray-600" };
-const _hoisted_25 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_26 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_27 = { class: "text-sm text-gray-600" };
-const _hoisted_28 = {
+const _hoisted_23 = { class: "flex items-start justify-between gap-4" };
+const _hoisted_24 = { class: "flex-1" };
+const _hoisted_25 = { class: "text-sm text-gray-600 mt-1" };
+const _hoisted_26 = {
+  key: 0,
+  class: "flex flex-wrap gap-2 mt-3"
+};
+const _hoisted_27 = { class: "ml-1" };
+const _hoisted_28 = { class: "p-4 bg-gray-50 rounded-xl" };
+const _hoisted_29 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_30 = { class: "text-sm text-gray-600" };
+const _hoisted_31 = {
   key: 0,
   class: "flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200 animate-slide-up"
 };
-const _hoisted_29 = {
+const _hoisted_32 = {
   key: 0,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_30 = { class: "alert-success" };
-const _hoisted_31 = { class: "flex items-start gap-3" };
-const _hoisted_32 = { class: "font-medium" };
-const _hoisted_33 = {
+const _hoisted_33 = { class: "alert-success" };
+const _hoisted_34 = { class: "flex items-start gap-3" };
+const _hoisted_35 = { class: "font-medium" };
+const _hoisted_36 = {
   key: 1,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_34 = { class: "alert-error" };
-const _hoisted_35 = { class: "flex items-start gap-3" };
-const _hoisted_36 = { class: "font-medium" };
-const _hoisted_37 = { key: 0 };
-const _hoisted_38 = { class: "text-gray-400 text-sm" };
+const _hoisted_37 = { class: "alert-error" };
+const _hoisted_38 = { class: "flex items-start gap-3" };
+const _hoisted_39 = { class: "font-medium" };
+const _hoisted_40 = { key: 0 };
+const _hoisted_41 = { class: "text-gray-400 text-sm" };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$5, [
     createElementVNode("div", _hoisted_2$4, [
@@ -9909,7 +9968,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               createCommentVNode(" Two-Factor Authentication "),
               createElementVNode("div", _hoisted_22, [
                 createElementVNode("div", _hoisted_23, [
-                  createElementVNode("div", null, [
+                  createElementVNode("div", _hoisted_24, [
                     _cache[17] || (_cache[17] = createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
@@ -9919,16 +9978,60 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_24,
+                      _hoisted_25,
                       toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
-                    )
+                    ),
+                    createCommentVNode(" Device Type Chips "),
+                    $setup.mfaDeviceChips.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList($setup.mfaDeviceChips, (chip) => {
+                          return openBlock(), createElementBlock(
+                            "div",
+                            {
+                              key: chip.type,
+                              class: normalizeClass([
+                                "inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium border transition-colors",
+                                chip.color
+                              ])
+                            },
+                            [
+                              (openBlock(), createBlock(resolveDynamicComponent(chip.icon), {
+                                size: 12,
+                                class: "mr-1.5"
+                              })),
+                              createElementVNode(
+                                "span",
+                                null,
+                                toDisplayString(chip.count),
+                                1
+                                /* TEXT */
+                              ),
+                              createElementVNode(
+                                "span",
+                                _hoisted_27,
+                                toDisplayString(chip.label),
+                                1
+                                /* TEXT */
+                              )
+                            ],
+                            2
+                            /* CLASS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ])) : createCommentVNode("v-if", true)
                   ]),
                   createVNode($setup["StrandsUiButton"], {
                     variant: $setup.currentUser?.mfaEnabled ? "secondary" : "primary",
                     size: "sm",
-                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true)
+                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true),
+                    class: "flex-shrink-0"
                   }, {
                     default: withCtx(() => [
                       createTextVNode(
@@ -9943,8 +10046,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               createCommentVNode(" Active Sessions "),
-              createElementVNode("div", _hoisted_25, [
-                createElementVNode("div", _hoisted_26, [
+              createElementVNode("div", _hoisted_28, [
+                createElementVNode("div", _hoisted_29, [
                   createElementVNode("div", null, [
                     _cache[18] || (_cache[18] = createElementVNode(
                       "h4",
@@ -9955,7 +10058,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_27,
+                      _hoisted_30,
                       toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -9982,7 +10085,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (openBlock(), createElementBlock("div", _hoisted_28, [
+          $setup.hasChanges ? (openBlock(), createElementBlock("div", _hoisted_31, [
             createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -10020,9 +10123,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (openBlock(), createElementBlock("div", _hoisted_29, [
-        createElementVNode("div", _hoisted_30, [
-          createElementVNode("div", _hoisted_31, [
+      $setup.successMessage ? (openBlock(), createElementBlock("div", _hoisted_32, [
+        createElementVNode("div", _hoisted_33, [
+          createElementVNode("div", _hoisted_34, [
             _cache[22] || (_cache[22] = createElementVNode(
               "svg",
               {
@@ -10042,7 +10145,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             createElementVNode(
               "p",
-              _hoisted_32,
+              _hoisted_35,
               toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -10050,9 +10153,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : createCommentVNode("v-if", true),
-      $setup.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_33, [
-        createElementVNode("div", _hoisted_34, [
-          createElementVNode("div", _hoisted_35, [
+      $setup.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_36, [
+        createElementVNode("div", _hoisted_37, [
+          createElementVNode("div", _hoisted_38, [
             _cache[23] || (_cache[23] = createElementVNode(
               "svg",
               {
@@ -10072,7 +10175,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             createElementVNode(
               "p",
-              _hoisted_36,
+              _hoisted_39,
               toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -10103,8 +10206,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             /* STABLE */
           }, 8, ["disabled"]),
           createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_37, [
-            createElementVNode("p", _hoisted_38, [
+          $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_40, [
+            createElementVNode("p", _hoisted_41, [
               _cache[25] || (_cache[25] = createTextVNode(
                 " Need help? ",
                 -1