diff --git a/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx b/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx index 8002017109..bb3f1a976f 100644 --- a/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx +++ b/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx @@ -3,6 +3,10 @@ import jss from "jss"; import preset from "jss-preset-default"; import { intl } from "../../global/global"; import { ErrorStyles } from "../../global/mixins"; +import { + sensitiveMaskAttrs, + shouldMaskSensitiveField, +} from "../../utils/posthogMasking"; import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState"; export interface InputFieldViewProps { @@ -40,6 +44,9 @@ const styleString = sheet.toString(); export function InputFieldView(props: InputFieldViewProps) { const { states, content } = props; const validationErrors = states?.registrationFormState?.validationErrors; + const shouldMask = + content.fieldType === "tel" || shouldMaskSensitiveField(content.fieldName); + const maskAttrs = sensitiveMaskAttrs(shouldMask); return (
@@ -52,6 +59,7 @@ export function InputFieldView(props: InputFieldViewProps) { name={`/${content.fieldName}`} type={content.fieldType} label={content.fieldLabel} + {...maskAttrs} {...(!content.fieldOptional ? { required: true } : [])} disabled={ states.registrationFormState?.loading || diff --git a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx index 1426f18a1b..5b364727a3 100644 --- a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx +++ b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx @@ -1,6 +1,7 @@ import { h } from "@stencil/core"; import { ErrorStyles } from "../../global/mixins"; import { createStyleSheet } from "../../styling/JSS"; +import { sensitiveMaskAttrs } from "../../utils/posthogMasking"; import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState"; export interface NameFieldsViewProps { @@ -67,6 +68,7 @@ const styleString = sheet.toString(); export function NameFieldsView(props: NameFieldsViewProps) { const { states } = props; const validationErrors = states?.registrationFormState?.validationErrors; + const maskAttrs = sensitiveMaskAttrs(true); return (