@strands.gg/accui 1.2.0 → 1.2.1

package/dist/accui.css

@@ -48,6 +48,8 @@
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -410,6 +412,9 @@
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -440,6 +445,9 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -770,6 +778,9 @@
   .border-neutral-200 {
     border-color: var(--color-neutral-200);
   }
+  .border-purple-200 {
+    border-color: var(--color-purple-200);
+  }
   .border-red-200 {
     border-color: var(--color-red-200);
   }
@@ -1135,6 +1146,9 @@
   .text-neutral-900 {
     color: var(--color-neutral-900);
   }
+  .text-purple-700 {
+    color: var(--color-purple-700);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }

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

@@ -9199,6 +9199,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const { getSupportEmail, config: strandsConfig, getUrl } = useStrandsConfig.useStrandsConfig(props.config);
     const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth.useStrandsAuth();
+    const { mfaDevices: mfaDevices2, mfaEnabled: mfaEnabled2, activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = vue.ref(null);
     const fetchingProfile = vue.ref(false);
     const currentUser = vue.computed(() => {
@@ -9276,6 +9277,54 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       const years = Math.floor(diffDays / 365);
       return years === 1 ? "1 year ago" : `${years} years ago`;
     });
+    const deviceTypeCounts = vue.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 = vue.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();
@@ -9285,6 +9334,9 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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;
@@ -9499,6 +9551,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const handleMfaUpdated = async () => {
       try {
         await fetchProfile();
+        await fetchMfaDevices();
         successMessage.value = "MFA settings updated successfully";
         emit("mfa-toggle", currentUser.value?.mfaEnabled || false);
       } catch (err) {
@@ -9536,7 +9589,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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;
@@ -9589,31 +9642,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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
     vue.createElementVNode("div", _hoisted_2$4, [
@@ -9910,7 +9969,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               vue.createCommentVNode(" Two-Factor Authentication "),
               vue.createElementVNode("div", _hoisted_22, [
                 vue.createElementVNode("div", _hoisted_23, [
-                  vue.createElementVNode("div", null, [
+                  vue.createElementVNode("div", _hoisted_24, [
                     _cache[17] || (_cache[17] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
@@ -9920,16 +9979,60 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_24,
+                      _hoisted_25,
                       vue.toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
-                    )
+                    ),
+                    vue.createCommentVNode(" Device Type Chips "),
+                    $setup.mfaDeviceChips.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList($setup.mfaDeviceChips, (chip) => {
+                          return vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: chip.type,
+                              class: vue.normalizeClass([
+                                "inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium border transition-colors",
+                                chip.color
+                              ])
+                            },
+                            [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(chip.icon), {
+                                size: 12,
+                                class: "mr-1.5"
+                              })),
+                              vue.createElementVNode(
+                                "span",
+                                null,
+                                vue.toDisplayString(chip.count),
+                                1
+                                /* TEXT */
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                _hoisted_27,
+                                vue.toDisplayString(chip.label),
+                                1
+                                /* TEXT */
+                              )
+                            ],
+                            2
+                            /* CLASS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ])) : vue.createCommentVNode("v-if", true)
                   ]),
                   vue.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: vue.withCtx(() => [
                       vue.createTextVNode(
@@ -9944,8 +10047,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               vue.createCommentVNode(" Active Sessions "),
-              vue.createElementVNode("div", _hoisted_25, [
-                vue.createElementVNode("div", _hoisted_26, [
+              vue.createElementVNode("div", _hoisted_28, [
+                vue.createElementVNode("div", _hoisted_29, [
                   vue.createElementVNode("div", null, [
                     _cache[18] || (_cache[18] = vue.createElementVNode(
                       "h4",
@@ -9956,7 +10059,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_27,
+                      _hoisted_30,
                       vue.toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -9983,7 +10086,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           vue.createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
             vue.createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -10021,9 +10124,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       vue.createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_29, [
-        vue.createElementVNode("div", _hoisted_30, [
-          vue.createElementVNode("div", _hoisted_31, [
+      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
+        vue.createElementVNode("div", _hoisted_33, [
+          vue.createElementVNode("div", _hoisted_34, [
             _cache[22] || (_cache[22] = vue.createElementVNode(
               "svg",
               {
@@ -10043,7 +10146,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_32,
+              _hoisted_35,
               vue.toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -10051,9 +10154,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : vue.createCommentVNode("v-if", true),
-      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, [
-        vue.createElementVNode("div", _hoisted_34, [
-          vue.createElementVNode("div", _hoisted_35, [
+      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
+        vue.createElementVNode("div", _hoisted_37, [
+          vue.createElementVNode("div", _hoisted_38, [
             _cache[23] || (_cache[23] = vue.createElementVNode(
               "svg",
               {
@@ -10073,7 +10176,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_36,
+              _hoisted_39,
               vue.toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -10104,8 +10207,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             /* STABLE */
           }, 8, ["disabled"]),
           vue.createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
-            vue.createElementVNode("p", _hoisted_38, [
+          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_40, [
+            vue.createElementVNode("p", _hoisted_41, [
               _cache[25] || (_cache[25] = vue.createTextVNode(
                 " Need help? ",
                 -1