@asgardeo/react 0.10.0 → 0.11.1

package/dist/components/presentation/UserProfile/BaseUserProfile.d.ts

@@ -60,6 +60,7 @@ export interface BaseUserProfileProps {
     title?: string;
     error?: string | null;
     isLoading?: boolean;
+    displayNameAttributes?: string[];
 }
 declare const BaseUserProfile: FC<BaseUserProfileProps>;
 export default BaseUserProfile;

package/dist/components/presentation/UserProfile/BaseUserProfile.styles.d.ts

@@ -28,6 +28,7 @@ declare const useStyles: (theme: Theme, colorScheme: string) => {
     card: string;
     header: string;
     profileInfo: string;
+    profileSummary: string;
     name: string;
     infoContainer: string;
     info: string;
@@ -43,5 +44,8 @@ declare const useStyles: (theme: Theme, colorScheme: string) => {
     complexTextarea: string;
     objectKey: string;
     objectValue: string;
+    sectionRow: string;
+    sectionLabel: string;
+    sectionValue: string;
 };
 export default useStyles;

package/dist/index.js

@@ -1690,7 +1690,13 @@ var AsgardeoProvider = ({
         setBaseUrl(_baseUrl2);
       }
       if (config.platform === Platform2.AsgardeoV2) {
-        setUser(extractUserClaimsFromIdToken2(decodedToken));
+        const claims = extractUserClaimsFromIdToken2(decodedToken);
+        setUser(claims);
+        setUserProfile({
+          profile: claims,
+          flattenedProfile: claims,
+          schemas: []
+        });
       } else {
         try {
           const user2 = await asgardeo.getUser({ baseUrl: _baseUrl2 });
@@ -11916,6 +11922,31 @@ var useStyles23 = (theme, colorScheme) => {
       margin: 0;
       color: ${theme.vars.colors.text.primary};
     `;
+    const profileSummary = css23`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    `;
+    const sectionRow = css23`
+      display: flex;
+      align-items: center;
+      padding: calc(${theme.vars.spacing.unit} * 1) 0;
+    `;
+    const sectionLabel = css23`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+      width: 160px;
+      flex-shrink: 0;
+    `;
+    const sectionValue = css23`
+      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 = css23`
       display: flex;
       flex-direction: column;
@@ -11987,6 +12018,7 @@ var useStyles23 = (theme, colorScheme) => {
       card,
       header,
       profileInfo,
+      profileSummary,
       name,
       infoContainer,
       info,
@@ -12001,7 +12033,10 @@ var useStyles23 = (theme, colorScheme) => {
       fieldActions,
       complexTextarea,
       objectKey,
-      objectValue
+      objectValue,
+      sectionRow,
+      sectionLabel,
+      sectionValue
     };
   }, [
     theme.vars.colors.background.surface,
@@ -12017,7 +12052,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) {
@@ -12067,7 +12110,8 @@ var BaseUserProfile = ({
   error = null,
   isLoading = false,
   showFields = [],
-  hideFields = []
+  hideFields = [],
+  displayNameAttributes = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const [editedUser, setEditedUser] = useState22(flattenedProfile || profile);
@@ -12190,7 +12234,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 = {
@@ -12398,21 +12442,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__ */ jsx88(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs38("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx88("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ jsx88("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
-    ] }, key)) });
+    return /* @__PURE__ */ jsxs38(Fragment15, { children: [
+      /* @__PURE__ */ jsxs38("div", { className: styles.profileSummary, children: [
+        /* @__PURE__ */ jsx88(
+          Avatar,
+          {
+            imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
+            name: displayName,
+            size: 70,
+            alt: `${displayName}'s avatar`,
+            isLoading
+          }
+        ),
+        /* @__PURE__ */ jsx88(Typography_default, { variant: "h3", fontWeight: "medium", children: displayName }),
+        getMappedUserProfileValue_default("email", mergedMappings, currentUser) && /* @__PURE__ */ jsx88(Typography_default, { variant: "body2", color: "textSecondary", children: getMappedUserProfileValue_default("email", mergedMappings, currentUser) })
+      ] }),
+      /* @__PURE__ */ jsx88(Divider_default, {}),
+      profileEntries.map(([key, value], index) => /* @__PURE__ */ jsxs38("div", { children: [
+        /* @__PURE__ */ jsxs38("div", { className: styles.sectionRow, children: [
+          /* @__PURE__ */ jsx88("div", { className: styles.sectionLabel, children: formatLabel(key) }),
+          /* @__PURE__ */ jsx88("div", { className: styles.sectionValue, children: typeof value === "object" ? /* @__PURE__ */ jsx88(ObjectDisplay, { data: value }) : String(value) })
+        ] }),
+        index < profileEntries.length - 1 && /* @__PURE__ */ jsx88(Divider_default, {})
+      ] }, key))
+    ] });
   };
   const profileContent = /* @__PURE__ */ jsxs38(Card_default, { className: containerClasses, children: [
     error && /* @__PURE__ */ jsxs38(Alert_default, { variant: "error", className: cx28(withVendorCSSClassPrefix27(bem19("user-profile", "alert")), styles.alert), children: [
       /* @__PURE__ */ jsx88(Alert_default.Title, { children: t("errors.heading") || "Error" }),
       /* @__PURE__ */ jsx88(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ jsx88("div", { className: styles.header, children: /* @__PURE__ */ jsx88(
+    schemas && schemas.length > 0 && /* @__PURE__ */ jsx88("div", { className: styles.header, children: /* @__PURE__ */ jsx88(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),