@thunderid/react 1.13.0 → 1.14.0

package/dist/cjs/index.cjs

@@ -103,6 +103,9 @@ const require_User$1 = require('./components/account/User/User.cjs');
 const require_MultiInput = require('./components/primitives/MultiInput/MultiInput.cjs');
 const require_BaseUserProfile = require('./components/account/UserProfile/BaseUserProfile.cjs');
 const require_updateMeProfile = require('./api/account/updateMeProfile.cjs');
+const require_BaseVerifyAttribute = require('./components/account/VerifyAttribute/BaseVerifyAttribute.cjs');
+const require_executeEmbeddedSelfFlow = require('./api/auth/executeEmbeddedSelfFlow.cjs');
+const require_VerifyAttribute = require('./components/account/VerifyAttribute/VerifyAttribute.cjs');
 const require_UserProfile = require('./components/account/UserProfile/UserProfile.cjs');
 const require_DataTable = require('./components/primitives/DataTable/DataTable.cjs');
 const require_BaseUserList = require('./components/admin/UserList/BaseUserList.cjs');
@@ -241,6 +244,12 @@ Object.defineProperty(exports, 'ApplicationQueryKeys', {
     return __thunderid_browser.ApplicationQueryKeys;
   }
 });
+Object.defineProperty(exports, 'AttributeVerificationConstants', {
+  enumerable: true,
+  get: function () {
+    return __thunderid_browser.AttributeVerificationConstants;
+  }
+});
 exports.Attribution = require_Attribution.default;
 exports.AuthFlowSelect = require_AuthFlowSelect.default;
 exports.BaseAcceptInvite = require_BaseAcceptInvite.default;
@@ -277,6 +286,7 @@ exports.BaseUserList = require_BaseUserList.default;
 exports.BaseUserProfile = require_BaseUserProfile.default;
 exports.BaseUserSelect = require_BaseUserSelect.default;
 exports.BaseUserTypeSelect = require_BaseUserTypeSelect.default;
+exports.BaseVerifyAttribute = require_BaseVerifyAttribute.default;
 exports.BuildingAlt = require_BuildingAlt.default;
 exports.Button = require_Button.default;
 exports.CONSENT_DETAIL_DISPLAY_LIMITS = require_getConsentDetailLayout.CONSENT_DETAIL_DISPLAY_LIMITS;
@@ -348,6 +358,12 @@ Object.defineProperty(exports, 'EmbeddedRecoveryFlowType', {
     return __thunderid_browser.EmbeddedRecoveryFlowType;
   }
 });
+Object.defineProperty(exports, 'EmbeddedSelfFlowStatus', {
+  enumerable: true,
+  get: function () {
+    return __thunderid_browser.EmbeddedSelfFlowStatus;
+  }
+});
 Object.defineProperty(exports, 'EmbeddedSignInFlowStatus', {
   enumerable: true,
   get: function () {
@@ -469,6 +485,7 @@ Object.defineProperty(exports, 'UserSelectConstants', {
   }
 });
 exports.UserTypeSelect = require_UserTypeSelect.default;
+exports.VerifyAttribute = require_VerifyAttribute.default;
 Object.defineProperty(exports, 'addGroupMembers', {
   enumerable: true,
   get: function () {
@@ -824,6 +841,7 @@ Object.defineProperty(exports, 'executeAdministrationFlow', {
     return __thunderid_browser.executeAdministrationFlow;
   }
 });
+exports.executeEmbeddedSelfFlow = require_executeEmbeddedSelfFlow.default;
 Object.defineProperty(exports, 'exportConfiguration', {
   enumerable: true,
   get: function () {
@@ -1352,6 +1370,12 @@ Object.defineProperty(exports, 'getVariables', {
     return __thunderid_browser.getVariables;
   }
 });
+Object.defineProperty(exports, 'getVerifiedAttributes', {
+  enumerable: true,
+  get: function () {
+    return __thunderid_browser.getVerifiedAttributes;
+  }
+});
 Object.defineProperty(exports, 'hasPermission', {
   enumerable: true,
   get: function () {
@@ -1385,6 +1409,12 @@ Object.defineProperty(exports, 'isEmojiUri', {
     return __thunderid_browser.isEmojiUri;
   }
 });
+Object.defineProperty(exports, 'isVerifiableAttribute', {
+  enumerable: true,
+  get: function () {
+    return __thunderid_browser.isVerifiableAttribute;
+  }
+});
 Object.defineProperty(exports, 'navigate', {
   enumerable: true,
   get: function () {

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

@@ -1,5 +1,5 @@
 import { User, Preferences, AttributeSchema } from '@thunderid/browser';
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
 export interface BaseUserProfileProps {
     attributeMapping?: {
         [key: string]: string | string[] | undefined;
@@ -28,10 +28,36 @@ export interface BaseUserProfileProps {
      */
     preferences?: Preferences;
     profile?: User;
+    /**
+     * Renders the verification panel for an attribute. When omitted, or when the profile is not
+     * editable, verification statuses are shown without a Verify action.
+     */
+    renderVerification?: (props: BaseUserProfileVerificationRenderProps) => ReactNode;
     showFields?: string[];
     title?: string;
     userSchema?: Record<string, AttributeSchema> | null;
 }
+/**
+ * Props passed to `renderVerification`.
+ */
+export interface BaseUserProfileVerificationRenderProps {
+    /**
+     * Name of the attribute to verify.
+     */
+    attribute: string;
+    /**
+     * Label of the attribute.
+     */
+    attributeDisplayName: string;
+    /**
+     * Closes the panel.
+     */
+    onCancel: () => void;
+    /**
+     * Closes the panel and confirms the recorded verification.
+     */
+    onComplete: () => void;
+}
 declare const BaseUserProfile: FC<BaseUserProfileProps>;
 export default BaseUserProfile;
 //# sourceMappingURL=BaseUserProfile.d.ts.map

package/dist/components/account/UserProfile/BaseUserProfile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,EAAiC,WAAW,EAAa,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAChH,OAAO,EAAC,EAAE,EAAE,YAAY,EAAmC,MAAM,OAAO,CAAC;AAyCzE,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,CAAC,EAAE;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;QAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACrD;AA+BD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAopB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,IAAI,EAGJ,WAAW,EAEX,eAAe,EAKhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AA0C7F,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,CAAC,EAAE;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;QAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,sCAAsC,KAAK,SAAS,CAAC;IAClF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,sCAAsC;IACrD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAsCD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAo3B7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/account/UserProfile/BaseUserProfile.js

@@ -4,6 +4,8 @@ import useTranslation_default from "../../../hooks/useTranslation.js";
 import Button_default from "../../primitives/Button/Button.js";
 import Typography_default from "../../primitives/Typography/Typography.js";
 import Card_default from "../../primitives/Card/Card.js";
+import CircleAlert_default from "../../primitives/Icons/CircleAlert.js";
+import CircleCheck_default from "../../primitives/Icons/CircleCheck.js";
 import Alert_default from "../../primitives/Alert/Alert.js";
 import TextField_default from "../../primitives/TextField/TextField.js";
 import Checkbox_default from "../../primitives/Checkbox/Checkbox.js";
@@ -15,8 +17,8 @@ import getDisplayName_default from "../../../utils/getDisplayName.js";
 import { Avatar } from "../../primitives/Avatar/Avatar.js";
 import Dialog_default from "../../primitives/Dialog/Dialog.js";
 import MultiInput_default from "../../primitives/MultiInput/MultiInput.js";
-import { bem, startCase, withVendorCSSClassPrefix } from "@thunderid/browser";
-import { useCallback, useEffect, useState } from "react";
+import { AttributeVerificationConstants, bem, getVerifiedAttributes, isVerifiableAttribute, startCase, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/account/UserProfile/BaseUserProfile.tsx
@@ -42,7 +44,8 @@ const fieldsToSkip = [
 	"attributes",
 	"picture",
 	"isReadOnly",
-	"isReadonly"
+	"isReadonly",
+	AttributeVerificationConstants.VERIFIED_ATTRIBUTES_KEY
 ];
 const readonlyFields = [
 	"attributes",
@@ -52,12 +55,44 @@ const readonlyFields = [
 	"username",
 	"sub"
 ];
-const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, profile, flattenedProfile, userSchema, mode = "inline", title, attributeMapping = {}, editable = true, onOpenChange, onUpdate, open = false, error = null, isLoading = false, preferences, showFields = [], hideFields = [], displayNameAttributes = [] }) => {
+const isStatusType = (type) => !!type && AttributeVerificationConstants.VERIFIABLE_ATTRIBUTE_TYPES.includes(type.toLowerCase());
+const isVerifiedAfterSave = (type) => !!type && AttributeVerificationConstants.VERIFY_AFTER_SAVE_ATTRIBUTE_TYPES.includes(type.toLowerCase());
+const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, profile, flattenedProfile, userSchema, mode = "inline", title, attributeMapping = {}, editable = true, onOpenChange, onUpdate, open = false, error = null, isLoading = false, preferences, showFields = [], hideFields = [], displayNameAttributes = [], renderVerification = void 0 }) => {
 	const { theme, colorScheme } = useTheme_default();
 	const [editedUser, setEditedUser] = useState(flattenedProfile || profile);
 	const [editingFields, setEditingFields] = useState({});
 	const [fieldErrors, setFieldErrors] = useState({});
-	const { t } = useTranslation_default(preferences?.i18n);
+	const [verifyingField, setVerifyingField] = useState(null);
+	const [verifiedNotice, setVerifiedNotice] = useState(null);
+	const [pendingVerification, setPendingVerification] = useState(null);
+	const [savingFields, setSavingFields] = useState({});
+	const { t, currentLanguage } = useTranslation_default(preferences?.i18n);
+	const reportedVerifiedAttributes = useMemo(() => getVerifiedAttributes(profile ?? flattenedProfile), [profile, flattenedProfile]);
+	const supportsVerification = reportedVerifiedAttributes !== void 0;
+	const verifiedAttributes = useMemo(() => reportedVerifiedAttributes ?? {}, [reportedVerifiedAttributes]);
+	useEffect(() => {
+		if (!pendingVerification) return;
+		if (error) {
+			setPendingVerification(null);
+			return;
+		}
+		const { name, previousValue } = pendingVerification;
+		const storedUser = flattenedProfile ?? profile;
+		const storedValue = (storedUser?.["attributes"])?.[name] ?? storedUser?.[name];
+		if (storedValue === previousValue) return;
+		if (supportsVerification && typeof storedValue === "string" && storedValue.trim() !== "" && !verifiedAttributes[name]) {
+			setVerifiedNotice(null);
+			setVerifyingField(name);
+		}
+		setPendingVerification(null);
+	}, [
+		pendingVerification,
+		flattenedProfile,
+		profile,
+		error,
+		verifiedAttributes,
+		supportsVerification
+	]);
 	useEffect(() => {
 		const nextUser = flattenedProfile ?? profile;
 		if (!nextUser) return;
@@ -112,6 +147,7 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 	}, [t]);
 	const formatLabel = useCallback((key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "), []);
 	const styles = BaseUserProfile_styles_default(theme, colorScheme);
+	const verificationStyles = styles;
 	const ObjectDisplay = ({ data }) => {
 		if (!data || typeof data !== "object") return null;
 		return /* @__PURE__ */ jsx("table", {
@@ -172,15 +208,32 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 		});
 		let payload = {};
 		set(payload, fieldName, fieldValue);
-		onUpdate(payload);
+		setSavingFields((prev) => ({
+			...prev,
+			[fieldName]: true
+		}));
+		Promise.resolve(onUpdate(payload)).catch(() => setPendingVerification(null)).finally(() => setSavingFields((prev) => {
+			const next = { ...prev };
+			delete next[fieldName];
+			return next;
+		}));
 		toggleFieldEdit(fieldName);
+		const savedUser = flattenedProfile ?? profile;
+		const storedValue = (savedUser?.["attributes"])?.[fieldName] ?? savedUser?.[fieldName];
+		if (renderVerification && isVerifiedAfterSave(schema.type) && isVerifiableAttribute(userSchema, fieldName) && typeof fieldValue === "string" && fieldValue.trim() !== "" && fieldValue !== storedValue) setPendingVerification({
+			name: fieldName,
+			previousValue: storedValue
+		});
+		else setPendingVerification(null);
 	}, [
 		editedUser,
 		flattenedProfile,
 		profile,
 		onUpdate,
 		toggleFieldEdit,
-		t
+		t,
+		renderVerification,
+		userSchema
 	]);
 	const handleFieldCancel = useCallback((fieldName) => {
 		const currentUser$1 = flattenedProfile || profile;
@@ -359,53 +412,142 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 			}) : displayValue
 		})] });
 	};
+	const renderVerificationStatus = (schema) => {
+		const verification = verifiedAttributes[schema.name];
+		let verifiedAtTitle;
+		if (verification?.verifiedAt) {
+			const verifiedAt = new Date(verification.verifiedAt);
+			verifiedAtTitle = t("user.verification.status.verified_at", { date: Number.isNaN(verifiedAt.getTime()) ? verification.verifiedAt : verifiedAt.toLocaleString(currentLanguage) });
+		}
+		return /* @__PURE__ */ jsxs("span", {
+			className: cx(withVendorCSSClassPrefix(bem("user-profile", "verification-status")), withVendorCSSClassPrefix(bem("user-profile", "verification-status", verification ? "verified" : "unverified")), verificationStyles["verificationStatus"], verification ? verificationStyles["verified"] : verificationStyles["unverified"]),
+			title: verifiedAtTitle,
+			"data-testid": `thunderid-verification-status-${schema.name}`,
+			children: [
+				verification ? /* @__PURE__ */ jsx(CircleCheck_default, {
+					width: 12,
+					height: 12,
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(CircleAlert_default, {
+					width: 12,
+					height: 12,
+					"aria-hidden": "true"
+				}),
+				verification ? t("user.verification.status.verified") : t("user.verification.status.unverified"),
+				verifiedAtTitle && /* @__PURE__ */ jsx("span", {
+					className: verificationStyles["visuallyHidden"],
+					children: ` (${verifiedAtTitle})`
+				})
+			]
+		});
+	};
+	const renderVerificationPanel = (schema) => {
+		if (!renderVerification || !schema.name || verifyingField !== schema.name) return null;
+		const attributeDisplayName = schema.displayName ?? startCase(schema.name);
+		const panel = /* @__PURE__ */ jsx("div", {
+			className: cx(withVendorCSSClassPrefix(bem("user-profile", "verification")), verificationStyles["verification"], mode === "popup" ? verificationStyles["verificationInline"] : ""),
+			children: renderVerification({
+				attribute: schema.name,
+				attributeDisplayName,
+				onCancel: () => setVerifyingField(null),
+				onComplete: () => {
+					setVerifyingField(null);
+					setVerifiedNotice(attributeDisplayName);
+				}
+			})
+		});
+		if (mode === "popup") return panel;
+		return /* @__PURE__ */ jsx(Dialog_default, {
+			open: true,
+			onOpenChange: (isOpen) => {
+				if (!isOpen) setVerifyingField(null);
+			},
+			children: /* @__PURE__ */ jsx(Dialog_default.Content, {
+				"aria-label": t("user.verification.heading", { attribute: attributeDisplayName }),
+				children: /* @__PURE__ */ jsx("div", {
+					className: verificationStyles["verificationDialog"],
+					children: panel
+				})
+			})
+		});
+	};
 	const renderUserInfo = (schema) => {
 		if (!schema?.name) return null;
 		const hasValue = schema.value !== void 0 && schema.value !== "" && schema.value !== null;
 		const isFieldEditing = editingFields[schema.name];
 		const isReadonlyField = readonlyFields.includes(schema.name);
 		if (!(hasValue || isFieldEditing || editable && schema.mutability === "READ_WRITE")) return null;
+		const storedUser = flattenedProfile ?? profile;
+		const storedValue = (storedUser?.["attributes"])?.[schema.name] ?? storedUser?.[schema.name];
+		const showsVerificationStatus = supportsVerification && !!hasValue && !isFieldEditing && !savingFields[schema.name] && schema.value === storedValue && isStatusType(schema.type);
+		const canVerify = editable && !!renderVerification && showsVerificationStatus && !verifiedAttributes[schema.name] && verifyingField !== schema.name && isVerifiableAttribute(userSchema, schema.name) && typeof schema.value === "string";
 		return /* @__PURE__ */ jsxs("div", {
 			className: styles.field,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: styles.fieldInner,
-				children: [renderSchemaField(schema, isFieldEditing, (value) => {
-					const tempEditedUser = { ...editedUser };
-					tempEditedUser[schema.name] = value;
-					setEditedUser(tempEditedUser);
-				}, () => toggleFieldEdit(schema.name)), fieldErrors[schema.name] && /* @__PURE__ */ jsx("div", {
-					style: {
-						color: "#d32f2f",
-						fontSize: "0.8rem",
-						marginTop: "4px",
-						fontWeight: 500
-					},
-					children: fieldErrors[schema.name]
-				})]
-			}), editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs("div", {
-				className: styles.fieldActions,
-				children: [isFieldEditing && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button_default, {
-					size: "small",
-					color: "primary",
-					variant: "solid",
-					onClick: () => handleFieldSave(schema),
-					children: "Save"
-				}), /* @__PURE__ */ jsx(Button_default, {
-					size: "small",
-					color: "secondary",
-					variant: "solid",
-					onClick: () => handleFieldCancel(schema.name),
-					children: "Cancel"
-				})] }), !isFieldEditing && hasValue && /* @__PURE__ */ jsx(Button_default, {
-					size: "small",
-					color: "tertiary",
-					variant: "icon",
-					onClick: () => toggleFieldEdit(schema.name),
-					title: "Edit",
-					className: styles.editButton,
-					children: /* @__PURE__ */ jsx(PencilIcon, {})
-				})]
-			})]
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: styles.fieldInner,
+					children: [
+						renderSchemaField(schema, isFieldEditing, (value) => {
+							const tempEditedUser = { ...editedUser };
+							tempEditedUser[schema.name] = value;
+							setEditedUser(tempEditedUser);
+						}, () => toggleFieldEdit(schema.name)),
+						showsVerificationStatus && renderVerificationStatus(schema),
+						fieldErrors[schema.name] && /* @__PURE__ */ jsx("div", {
+							style: {
+								color: "#d32f2f",
+								fontSize: "0.8rem",
+								marginTop: "4px",
+								fontWeight: 500
+							},
+							children: fieldErrors[schema.name]
+						})
+					]
+				}),
+				canVerify && /* @__PURE__ */ jsx("div", {
+					className: verificationStyles["fieldActions"],
+					children: /* @__PURE__ */ jsx(Button_default, {
+						size: "small",
+						color: "primary",
+						variant: "outline",
+						onClick: () => {
+							setVerifiedNotice(null);
+							setVerifyingField(schema.name);
+						},
+						className: withVendorCSSClassPrefix(bem("user-profile", "verify-button")),
+						"data-testid": `thunderid-verify-${schema.name}`,
+						children: t("user.verification.buttons.verify.text")
+					})
+				}),
+				editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs("div", {
+					className: styles.fieldActions,
+					children: [isFieldEditing && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button_default, {
+						size: "small",
+						color: "primary",
+						variant: "solid",
+						onClick: () => handleFieldSave(schema),
+						children: "Save"
+					}), /* @__PURE__ */ jsx(Button_default, {
+						size: "small",
+						color: "secondary",
+						variant: "solid",
+						onClick: () => handleFieldCancel(schema.name),
+						children: "Cancel"
+					})] }), !isFieldEditing && hasValue && /* @__PURE__ */ jsx(Button_default, {
+						size: "small",
+						color: "tertiary",
+						variant: "icon",
+						onClick: () => {
+							if (verifyingField === schema.name) setVerifyingField(null);
+							setVerifiedNotice(null);
+							toggleFieldEdit(schema.name);
+						},
+						title: "Edit",
+						className: styles.editButton,
+						children: /* @__PURE__ */ jsx(PencilIcon, {})
+					})]
+				})
+			]
 		});
 	};
 	if (!profile && !flattenedProfile) return fallback;
@@ -444,6 +586,13 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 			};
 		});
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			verifiedNotice && /* @__PURE__ */ jsx(Alert_default, {
+				variant: "success",
+				role: "status",
+				className: cx(withVendorCSSClassPrefix(bem("user-profile", "verification-notice")), verificationStyles["alert"]),
+				"data-testid": "thunderid-verification-notice",
+				children: /* @__PURE__ */ jsx(Alert_default.Description, { children: t("user.verification.success", { attribute: verifiedNotice }) })
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: styles.profileSummary,
 				children: [
@@ -467,9 +616,9 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 				]
 			}),
 			/* @__PURE__ */ jsx(Divider_default, {}),
-			schemaItems.map((schemaWithValue) => /* @__PURE__ */ jsx("div", {
+			schemaItems.map((schemaWithValue) => /* @__PURE__ */ jsxs("div", {
 				className: styles.info,
-				children: renderUserInfo(schemaWithValue)
+				children: [renderUserInfo(schemaWithValue), renderVerificationPanel(schemaWithValue)]
 			}, schemaWithValue.name))
 		] });
 	};