@thunderid/react 1.12.0 → 1.14.0

package/dist/api/auth/executeEmbeddedSelfFlow.d.ts

@@ -0,0 +1,36 @@
+import { EmbeddedSelfFlowResponse, ExecuteEmbeddedSelfFlowConfig as BaseExecuteEmbeddedSelfFlowConfig } from '@thunderid/browser';
+/**
+ * Configuration for the executeEmbeddedSelfFlow request (React-specific)
+ */
+export interface ExecuteEmbeddedSelfFlowConfig extends Omit<BaseExecuteEmbeddedSelfFlowConfig, 'fetcher'> {
+    /**
+     * Optional custom fetcher function. If not provided, the ThunderID SPA client's httpClient is used,
+     * which attaches the signed-in user's access token.
+     */
+    fetcher?: (url: string, config: RequestInit) => Promise<Response>;
+    /**
+     * Optional instance ID for multi-instance support. Defaults to 0.
+     */
+    instanceId?: number;
+}
+/**
+ * Executes one step of a `SELF` flow for the signed-in user. Uses the ThunderID SPA
+ * client's httpClient by default, which attaches the access token the flow identifies the user by.
+ *
+ * @param config - Configuration object with URL, payload and optional request config.
+ * @returns A promise that resolves with the flow step.
+ * @example
+ * ```typescript
+ * const step = await executeEmbeddedSelfFlow({
+ *   baseUrl: "https://localhost:8090",
+ *   payload: {
+ *     flowType: EmbeddedFlowType.Self,
+ *     handle: "default-self-attribute-verification-flow",
+ *     inputs: {attribute: "email"},
+ *   },
+ * });
+ * ```
+ */
+declare const executeEmbeddedSelfFlow: ({ fetcher, instanceId, ...requestConfig }: ExecuteEmbeddedSelfFlowConfig) => Promise<EmbeddedSelfFlowResponse>;
+export default executeEmbeddedSelfFlow;
+//# sourceMappingURL=executeEmbeddedSelfFlow.d.ts.map

package/dist/api/auth/executeEmbeddedSelfFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"executeEmbeddedSelfFlow.d.ts","sourceRoot":"","sources":["../../../src/api/auth/executeEmbeddedSelfFlow.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,wBAAwB,EAGxB,6BAA6B,IAAI,iCAAiC,EACnE,MAAM,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CAAC,iCAAiC,EAAE,SAAS,CAAC;IACvG;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,uBAAuB,GAAU,2CAIpC,6BAA6B,KAAG,OAAO,CAAC,wBAAwB,CAI/D,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

package/dist/api/auth/executeEmbeddedSelfFlow.js

@@ -0,0 +1,30 @@
+import { createHttpClientFetcher, executeEmbeddedSelfFlow } from "@thunderid/browser";
+
+//#region src/api/auth/executeEmbeddedSelfFlow.ts
+/**
+* Executes one step of a `SELF` flow for the signed-in user. Uses the ThunderID SPA
+* client's httpClient by default, which attaches the access token the flow identifies the user by.
+*
+* @param config - Configuration object with URL, payload and optional request config.
+* @returns A promise that resolves with the flow step.
+* @example
+* ```typescript
+* const step = await executeEmbeddedSelfFlow({
+*   baseUrl: "https://localhost:8090",
+*   payload: {
+*     flowType: EmbeddedFlowType.Self,
+*     handle: "default-self-attribute-verification-flow",
+*     inputs: {attribute: "email"},
+*   },
+* });
+* ```
+*/
+const executeEmbeddedSelfFlow$1 = async ({ fetcher, instanceId = 0,...requestConfig }) => executeEmbeddedSelfFlow({
+	...requestConfig,
+	fetcher: fetcher ?? createHttpClientFetcher(instanceId)
+});
+var executeEmbeddedSelfFlow_default = executeEmbeddedSelfFlow$1;
+
+//#endregion
+export { executeEmbeddedSelfFlow_default as default };
+//# sourceMappingURL=executeEmbeddedSelfFlow.js.map

package/dist/api/auth/executeEmbeddedSelfFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"executeEmbeddedSelfFlow.js","names":["executeEmbeddedSelfFlow","baseExecuteEmbeddedSelfFlow"],"sources":["../../../src/api/auth/executeEmbeddedSelfFlow.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedSelfFlowResponse,\n  createHttpClientFetcher,\n  executeEmbeddedSelfFlow as baseExecuteEmbeddedSelfFlow,\n  ExecuteEmbeddedSelfFlowConfig as BaseExecuteEmbeddedSelfFlowConfig,\n} from '@thunderid/browser';\n\n/**\n * Configuration for the executeEmbeddedSelfFlow request (React-specific)\n */\nexport interface ExecuteEmbeddedSelfFlowConfig extends Omit<BaseExecuteEmbeddedSelfFlowConfig, 'fetcher'> {\n  /**\n   * Optional custom fetcher function. If not provided, the ThunderID SPA client's httpClient is used,\n   * which attaches the signed-in user's access token.\n   */\n  fetcher?: (url: string, config: RequestInit) => Promise<Response>;\n  /**\n   * Optional instance ID for multi-instance support. Defaults to 0.\n   */\n  instanceId?: number;\n}\n\n/**\n * Executes one step of a `SELF` flow for the signed-in user. Uses the ThunderID SPA\n * client's httpClient by default, which attaches the access token the flow identifies the user by.\n *\n * @param config - Configuration object with URL, payload and optional request config.\n * @returns A promise that resolves with the flow step.\n * @example\n * ```typescript\n * const step = await executeEmbeddedSelfFlow({\n *   baseUrl: \"https://localhost:8090\",\n *   payload: {\n *     flowType: EmbeddedFlowType.Self,\n *     handle: \"default-self-attribute-verification-flow\",\n *     inputs: {attribute: \"email\"},\n *   },\n * });\n * ```\n */\nconst executeEmbeddedSelfFlow = async ({\n  fetcher,\n  instanceId = 0,\n  ...requestConfig\n}: ExecuteEmbeddedSelfFlowConfig): Promise<EmbeddedSelfFlowResponse> =>\n  baseExecuteEmbeddedSelfFlow({\n    ...requestConfig,\n    fetcher: fetcher ?? createHttpClientFetcher(instanceId),\n  });\n\nexport default executeEmbeddedSelfFlow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,4BAA0B,OAAO,EACrC,SACA,aAAa,EACb,GAAG,oBAEHC,wBAA4B;CAC1B,GAAG;CACH,SAAS,WAAW,wBAAwB,WAAW;CACxD,CAAC;AAEJ,sCAAeD"}

package/dist/cjs/api/auth/executeEmbeddedSelfFlow.cjs

@@ -0,0 +1,32 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/api/auth/executeEmbeddedSelfFlow.ts
+/**
+* Executes one step of a `SELF` flow for the signed-in user. Uses the ThunderID SPA
+* client's httpClient by default, which attaches the access token the flow identifies the user by.
+*
+* @param config - Configuration object with URL, payload and optional request config.
+* @returns A promise that resolves with the flow step.
+* @example
+* ```typescript
+* const step = await executeEmbeddedSelfFlow({
+*   baseUrl: "https://localhost:8090",
+*   payload: {
+*     flowType: EmbeddedFlowType.Self,
+*     handle: "default-self-attribute-verification-flow",
+*     inputs: {attribute: "email"},
+*   },
+* });
+* ```
+*/
+const executeEmbeddedSelfFlow = async ({ fetcher, instanceId = 0,...requestConfig }) => (0, __thunderid_browser.executeEmbeddedSelfFlow)({
+	...requestConfig,
+	fetcher: fetcher ?? (0, __thunderid_browser.createHttpClientFetcher)(instanceId)
+});
+var executeEmbeddedSelfFlow_default = executeEmbeddedSelfFlow;
+
+//#endregion
+exports.default = executeEmbeddedSelfFlow_default;
+//# sourceMappingURL=executeEmbeddedSelfFlow.cjs.map

package/dist/cjs/api/auth/executeEmbeddedSelfFlow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"executeEmbeddedSelfFlow.cjs","names":[],"sources":["../../../../src/api/auth/executeEmbeddedSelfFlow.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedSelfFlowResponse,\n  createHttpClientFetcher,\n  executeEmbeddedSelfFlow as baseExecuteEmbeddedSelfFlow,\n  ExecuteEmbeddedSelfFlowConfig as BaseExecuteEmbeddedSelfFlowConfig,\n} from '@thunderid/browser';\n\n/**\n * Configuration for the executeEmbeddedSelfFlow request (React-specific)\n */\nexport interface ExecuteEmbeddedSelfFlowConfig extends Omit<BaseExecuteEmbeddedSelfFlowConfig, 'fetcher'> {\n  /**\n   * Optional custom fetcher function. If not provided, the ThunderID SPA client's httpClient is used,\n   * which attaches the signed-in user's access token.\n   */\n  fetcher?: (url: string, config: RequestInit) => Promise<Response>;\n  /**\n   * Optional instance ID for multi-instance support. Defaults to 0.\n   */\n  instanceId?: number;\n}\n\n/**\n * Executes one step of a `SELF` flow for the signed-in user. Uses the ThunderID SPA\n * client's httpClient by default, which attaches the access token the flow identifies the user by.\n *\n * @param config - Configuration object with URL, payload and optional request config.\n * @returns A promise that resolves with the flow step.\n * @example\n * ```typescript\n * const step = await executeEmbeddedSelfFlow({\n *   baseUrl: \"https://localhost:8090\",\n *   payload: {\n *     flowType: EmbeddedFlowType.Self,\n *     handle: \"default-self-attribute-verification-flow\",\n *     inputs: {attribute: \"email\"},\n *   },\n * });\n * ```\n */\nconst executeEmbeddedSelfFlow = async ({\n  fetcher,\n  instanceId = 0,\n  ...requestConfig\n}: ExecuteEmbeddedSelfFlowConfig): Promise<EmbeddedSelfFlowResponse> =>\n  baseExecuteEmbeddedSelfFlow({\n    ...requestConfig,\n    fetcher: fetcher ?? createHttpClientFetcher(instanceId),\n  });\n\nexport default executeEmbeddedSelfFlow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,0BAA0B,OAAO,EACrC,SACA,aAAa,EACb,GAAG,qEAEyB;CAC1B,GAAG;CACH,SAAS,4DAAmC,WAAW;CACxD,CAAC;AAEJ,sCAAe"}

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

@@ -5,6 +5,8 @@ const require_useTranslation = require('../../../hooks/useTranslation.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
 const require_Typography = require('../../primitives/Typography/Typography.cjs');
 const require_Card = require('../../primitives/Card/Card.cjs');
+const require_CircleAlert = require('../../primitives/Icons/CircleAlert.cjs');
+const require_CircleCheck = require('../../primitives/Icons/CircleCheck.cjs');
 const require_Alert = require('../../primitives/Alert/Alert.cjs');
 const require_TextField = require('../../primitives/TextField/TextField.cjs');
 const require_Checkbox = require('../../primitives/Checkbox/Checkbox.cjs');
@@ -46,7 +48,8 @@ const fieldsToSkip = [
 	"attributes",
 	"picture",
 	"isReadOnly",
-	"isReadonly"
+	"isReadonly",
+	__thunderid_browser.AttributeVerificationConstants.VERIFIED_ATTRIBUTES_KEY
 ];
 const readonlyFields = [
 	"attributes",
@@ -56,12 +59,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 && __thunderid_browser.AttributeVerificationConstants.VERIFIABLE_ATTRIBUTE_TYPES.includes(type.toLowerCase());
+const isVerifiedAfterSave = (type) => !!type && __thunderid_browser.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 } = require_useTheme.default();
 	const [editedUser, setEditedUser] = (0, react.useState)(flattenedProfile || profile);
 	const [editingFields, setEditingFields] = (0, react.useState)({});
 	const [fieldErrors, setFieldErrors] = (0, react.useState)({});
-	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [verifyingField, setVerifyingField] = (0, react.useState)(null);
+	const [verifiedNotice, setVerifiedNotice] = (0, react.useState)(null);
+	const [pendingVerification, setPendingVerification] = (0, react.useState)(null);
+	const [savingFields, setSavingFields] = (0, react.useState)({});
+	const { t, currentLanguage } = require_useTranslation.default(preferences?.i18n);
+	const reportedVerifiedAttributes = (0, react.useMemo)(() => (0, __thunderid_browser.getVerifiedAttributes)(profile ?? flattenedProfile), [profile, flattenedProfile]);
+	const supportsVerification = reportedVerifiedAttributes !== void 0;
+	const verifiedAttributes = (0, react.useMemo)(() => reportedVerifiedAttributes ?? {}, [reportedVerifiedAttributes]);
+	(0, react.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
+	]);
 	(0, react.useEffect)(() => {
 		const nextUser = flattenedProfile ?? profile;
 		if (!nextUser) return;
@@ -116,6 +151,7 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 	}, [t]);
 	const formatLabel = (0, react.useCallback)((key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "), []);
 	const styles = require_BaseUserProfile_styles.default(theme, colorScheme);
+	const verificationStyles = styles;
 	const ObjectDisplay = ({ data }) => {
 		if (!data || typeof data !== "object") return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -176,15 +212,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) && (0, __thunderid_browser.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 = (0, react.useCallback)((fieldName) => {
 		const currentUser$1 = flattenedProfile || profile;
@@ -363,53 +416,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__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("user-profile", "verification-status")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.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__ */ (0, react_jsx_runtime.jsx)(require_CircleCheck.default, {
+					width: 12,
+					height: 12,
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CircleAlert.default, {
+					width: 12,
+					height: 12,
+					"aria-hidden": "true"
+				}),
+				verification ? t("user.verification.status.verified") : t("user.verification.status.unverified"),
+				verifiedAtTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: verificationStyles["visuallyHidden"],
+					children: ` (${verifiedAtTitle})`
+				})
+			]
+		});
+	};
+	const renderVerificationPanel = (schema) => {
+		if (!renderVerification || !schema.name || verifyingField !== schema.name) return null;
+		const attributeDisplayName = schema.displayName ?? (0, __thunderid_browser.startCase)(schema.name);
+		const panel = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.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__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+			open: true,
+			onOpenChange: (isOpen) => {
+				if (!isOpen) setVerifyingField(null);
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Content, {
+				"aria-label": t("user.verification.heading", { attribute: attributeDisplayName }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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 && (0, __thunderid_browser.isVerifiableAttribute)(userSchema, schema.name) && typeof schema.value === "string";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: styles.field,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						color: "#d32f2f",
-						fontSize: "0.8rem",
-						marginTop: "4px",
-						fontWeight: 500
-					},
-					children: fieldErrors[schema.name]
-				})]
-			}), editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: styles.fieldActions,
-				children: [isFieldEditing && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
-					size: "small",
-					color: "primary",
-					variant: "solid",
-					onClick: () => handleFieldSave(schema),
-					children: "Save"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
-					size: "small",
-					color: "secondary",
-					variant: "solid",
-					onClick: () => handleFieldCancel(schema.name),
-					children: "Cancel"
-				})] }), !isFieldEditing && hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
-					size: "small",
-					color: "tertiary",
-					variant: "icon",
-					onClick: () => toggleFieldEdit(schema.name),
-					title: "Edit",
-					className: styles.editButton,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PencilIcon, {})
-				})]
-			})]
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								color: "#d32f2f",
+								fontSize: "0.8rem",
+								marginTop: "4px",
+								fontWeight: 500
+							},
+							children: fieldErrors[schema.name]
+						})
+					]
+				}),
+				canVerify && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: verificationStyles["fieldActions"],
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+						size: "small",
+						color: "primary",
+						variant: "outline",
+						onClick: () => {
+							setVerifiedNotice(null);
+							setVerifyingField(schema.name);
+						},
+						className: (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: styles.fieldActions,
+					children: [isFieldEditing && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+						size: "small",
+						color: "primary",
+						variant: "solid",
+						onClick: () => handleFieldSave(schema),
+						children: "Save"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+						size: "small",
+						color: "secondary",
+						variant: "solid",
+						onClick: () => handleFieldCancel(schema.name),
+						children: "Cancel"
+					})] }), !isFieldEditing && hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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__ */ (0, react_jsx_runtime.jsx)(PencilIcon, {})
+					})]
+				})
+			]
 		});
 	};
 	if (!profile && !flattenedProfile) return fallback;
@@ -448,6 +590,13 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 			};
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			verifiedNotice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: "success",
+				role: "status",
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("user-profile", "verification-notice")), verificationStyles["alert"]),
+				"data-testid": "thunderid-verification-notice",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: t("user.verification.success", { attribute: verifiedNotice }) })
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: styles.profileSummary,
 				children: [
@@ -471,9 +620,9 @@ const BaseUserProfile = ({ fallback = null, className = "", cardLayout = true, p
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, {}),
-			schemaItems.map((schemaWithValue) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			schemaItems.map((schemaWithValue) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: styles.info,
-				children: renderUserInfo(schemaWithValue)
+				children: [renderUserInfo(schemaWithValue), renderVerificationPanel(schemaWithValue)]
 			}, schemaWithValue.name))
 		] });
 	};