@asgardeo/react 0.11.0 → 0.11.2

package/dist/cjs/index.js

@@ -1805,7 +1805,13 @@ var AsgardeoProvider = ({
         setBaseUrl(_baseUrl2);
       }
       if (config.platform === import_browser12.Platform.AsgardeoV2) {
-        setUser((0, import_browser12.extractUserClaimsFromIdToken)(decodedToken));
+        const claims = (0, import_browser12.extractUserClaimsFromIdToken)(decodedToken);
+        setUser(claims);
+        setUserProfile({
+          profile: claims,
+          flattenedProfile: claims,
+          schemas: []
+        });
       } else {
         try {
           const user2 = await asgardeo.getUser({ baseUrl: _baseUrl2 });
@@ -11969,6 +11975,31 @@ var useStyles23 = (theme, colorScheme) => {
       margin: 0;
       color: ${theme.vars.colors.text.primary};
     `;
+    const profileSummary = import_css50.css`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    `;
+    const sectionRow = import_css50.css`
+      display: flex;
+      align-items: center;
+      padding: calc(${theme.vars.spacing.unit} * 1) 0;
+    `;
+    const sectionLabel = import_css50.css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+      width: 160px;
+      flex-shrink: 0;
+    `;
+    const sectionValue = import_css50.css`
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.primary};
+    `;
     const infoContainer = import_css50.css`
       display: flex;
       flex-direction: column;
@@ -12040,6 +12071,7 @@ var useStyles23 = (theme, colorScheme) => {
       card,
       header,
       profileInfo,
+      profileSummary,
       name,
       infoContainer,
       info,
@@ -12054,7 +12086,10 @@ var useStyles23 = (theme, colorScheme) => {
       fieldActions,
       complexTextarea,
       objectKey,
-      objectValue
+      objectValue,
+      sectionRow,
+      sectionLabel,
+      sectionValue
     };
   }, [
     theme.vars.colors.background.surface,
@@ -12070,7 +12105,15 @@ var useStyles23 = (theme, colorScheme) => {
 var BaseUserProfile_styles_default = useStyles23;
 
 // src/utils/getDisplayName.ts
-var getDisplayName = (mergedMappings, user) => {
+var getDisplayName = (mergedMappings, user, displayAttributes) => {
+  if (displayAttributes && displayAttributes.length > 0) {
+    for (const attr of displayAttributes) {
+      const value = getMappedUserProfileValue_default(attr, mergedMappings, user);
+      if (value !== void 0 && value !== null && value !== "") {
+        return String(value);
+      }
+    }
+  }
   const firstName = getMappedUserProfileValue_default("firstName", mergedMappings, user);
   const lastName = getMappedUserProfileValue_default("lastName", mergedMappings, user);
   if (firstName && lastName) {
@@ -12120,7 +12163,8 @@ var BaseUserProfile = ({
   error = null,
   isLoading = false,
   showFields = [],
-  hideFields = []
+  hideFields = [],
+  displayNameAttributes = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const [editedUser, setEditedUser] = (0, import_react76.useState)(flattenedProfile || profile);
@@ -12243,7 +12287,7 @@ var BaseUserProfile = ({
     picture: ["profile", "profileUrl", "picture", "URL"],
     firstName: ["name.givenName", "given_name"],
     lastName: ["name.familyName", "family_name"],
-    email: ["emails"],
+    email: ["emails", "email"],
     username: ["userName", "username", "user_name"]
   };
   const mergedMappings = {
@@ -12451,21 +12495,42 @@ var BaseUserProfile = ({
   const excludedProps = avatarAttributes.map((attr) => mergedMappings[attr] || attr);
   const renderProfileWithoutSchemas = () => {
     if (!currentUser) return null;
+    const displayName = getDisplayName_default(mergedMappings, profile, displayNameAttributes);
     const profileEntries = Object.entries(currentUser).filter(([key, value]) => {
       if (!shouldShowField(key)) return false;
       return value !== void 0 && value !== "" && value !== null;
     }).sort(([a], [b]) => a.localeCompare(b));
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: styles.field, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
-    ] }, key)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: styles.profileSummary, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          Avatar,
+          {
+            imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
+            name: displayName,
+            size: 70,
+            alt: `${displayName}'s avatar`,
+            isLoading
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Typography_default, { variant: "h3", fontWeight: "medium", children: displayName }),
+        getMappedUserProfileValue_default("email", mergedMappings, currentUser) && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Typography_default, { variant: "body2", color: "textSecondary", children: getMappedUserProfileValue_default("email", mergedMappings, currentUser) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Divider_default, {}),
+      profileEntries.map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: styles.sectionRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: styles.sectionLabel, children: formatLabel(key) }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: styles.sectionValue, children: typeof value === "object" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ObjectDisplay, { data: value }) : String(value) })
+        ] }),
+        index < profileEntries.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Divider_default, {})
+      ] }, key))
+    ] });
   };
   const profileContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card_default, { className: containerClasses, children: [
     error && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Alert_default, { variant: "error", className: (0, import_css51.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("user-profile", "alert")), styles.alert), children: [
       /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Title, { children: t("errors.heading") || "Error" }),
       /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    schemas && schemas.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),