Allow masking sensitive values for inputs

[jay-deshmukh]

• https://tyktech.atlassian.net/browse/TT-16362

Screen.Recording.2026-03-10.at.9.08.21.AM.mov

[netlify]

✅ Deploy Preview for nifty-johnson-6002dd ready!

Name	Link
🔨 Latest commit	b51819f
🔍 Latest deploy log	https://app.netlify.com/projects/nifty-johnson-6002dd/deploys/69afc390fcb58f00082dfedc
😎 Deploy Preview	https://deploy-preview-413--nifty-johnson-6002dd.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[probelabs]

This PR introduces new components to allow masking and revealing sensitive values in both read-only displays and form inputs, enhancing security and user experience.

Files Changed Analysis

The core of this PR is the addition of two new component sets:

• src/components/MaskSecret/: A new display-only component designed to show sensitive values like API tokens. It masks the value by default with '•' characters and provides an eye icon to toggle visibility. It includes its own CSS, tests, and documentation.
• src/form/components/MaskedInput/: A new wrapper component for Input2 that adds masking functionality for type="password" fields.
  • In its editable state, it adds a toggle button to switch the input type between password and text.
  • In its readOnly state, it utilizes the new MaskSecret component to display the value.
• src/form/formik/FormikMaskedInput/: A new wrapper to make the MaskedInput component compatible with Formik.
• src/index.js has been updated to export these new components.
• package.json and package-lock.json have been updated, bumping the version to 4.4.24.

Architecture & Impact Assessment

• What this PR accomplishes: It introduces a standardized and reusable way to handle sensitive data within the UI library. This provides a consistent user experience for viewing and entering passwords, API keys, and other secrets.

• Key technical changes introduced:

  • Two new stateful components, MaskSecret and MaskedInput, which use the useState hook to manage the visibility of the sensitive value.
  • The use of a wrapper pattern (MaskedInput) to extend the functionality of an existing component (Input2) without modifying its source code. This promotes composition over inheritance.

• Affected system components: This change is contained within the UI library. Downstream applications that consume this library can now adopt the MaskedInput and MaskSecret components to improve how they handle sensitive fields. Existing forms using <Input2 type="password"> are unaffected but can be updated to use MaskedInput.

Component Interaction Diagram

graph TD
    subgraph "App Usage"
        A["Form with Password Field"] --> B("MaskedInput Component")
    end

    subgraph "MaskedInput Logic"
        B --|type != 'password'|--> G["Renders Input2 as-is"]
        B --|type == 'password'|--> D{"readOnly?"}
        D --|No (Editable)|--> E["Renders Input2 with visibility toggle"]
        D --|Yes (ReadOnly)|--> F["Renders MaskSecret Component"]
    end

    subgraph "Core Library Components"
        E
        F
        G
    end

Loading

Scope Discovery & Context Expansion

The changes are confined to the tyk-ui library, providing new capabilities for consuming applications. The decision to create a MaskedInput wrapper instead of modifying Input2 directly suggests a deliberate architectural choice to avoid altering a potentially complex and widely-used base component, thereby reducing risk.

The inclusion of a FormikMaskedInput wrapper indicates that Formik is a standard part of the front-end stack for applications using this library. To fully integrate this feature, a follow-up effort would be to search consuming application codebases for instances of <Input2 type="password"> and refactor them to use the new, more feature-rich <MaskedInput> component.

Metadata

• Review Effort: 3 / 5
• Primary Label: feature

---

Powered by Visor from Probelabs

Last updated: 2026-03-10T07:13:08.904Z | Triggered by: pr_updated | Commit: b51819f

💡 TIP: You can chat with Visor using /visor ask <your question>

[probelabs]

Architecture Issues (1)

Severity	Location	Issue
🟡 Warning	src/form/components/MaskedInput/index.js:40-55	The component's `readOnly` mode for `type="password"` manually reconstructs the HTML structure and CSS classes (`tyk-form-group`, `tyk-form-control--readonly`, label styles) that are also managed by the `Input2` component. This duplicates presentation logic and creates a tight coupling to the internal implementation of `Input2`. 💡 Suggestion This implementation is fragile. If the form group structure or styling in `Input2` is ever updated, the changes would need to be manually duplicated here to avoid inconsistencies. A more robust approach would be to modify `Input2` to accept a custom component or render function for its read-only state. This would allow `MaskedInput` to provide the `<MaskSecret>` component to `Input2` without having to rebuild the surrounding form group structure, thus centralizing the form layout logic within `Input2`.

\n\n

Architecture Issues (1)

Severity	Location	Issue
🟡 Warning	src/form/components/MaskedInput/index.js:40-55	The component's `readOnly` mode for `type="password"` manually reconstructs the HTML structure and CSS classes (`tyk-form-group`, `tyk-form-control--readonly`, label styles) that are also managed by the `Input2` component. This duplicates presentation logic and creates a tight coupling to the internal implementation of `Input2`. 💡 Suggestion This implementation is fragile. If the form group structure or styling in `Input2` is ever updated, the changes would need to be manually duplicated here to avoid inconsistencies. A more robust approach would be to modify `Input2` to accept a custom component or render function for its read-only state. This would allow `MaskedInput` to provide the `<MaskSecret>` component to `Input2` without having to rebuild the surrounding form group structure, thus centralizing the form layout logic within `Input2`.

\n\n \n\n

---

Powered by Visor from Probelabs

Last updated: 2026-03-10T07:12:36.468Z | Triggered by: pr_updated | Commit: b51819f

💡 TIP: You can chat with Visor using /visor ask <your question>

[jay-deshmukh]

/visor ask the duplication is intended to keep both the components independent

[probelabs]

---

Powered by Visor from Probelabs

Last updated: 2026-03-10T03:46:44.428Z | Triggered by: jay-deshmukh | Commit: 9c8f9da

💡 TIP: You can chat with Visor using /visor ask <your question>

[github-actions]

🚨 Jira Linter Failed

Commit: b51819f
Failed at: 2026-03-10 07:09:35 UTC

The Jira linter failed to validate your PR. Please check the error details below:

🔍 Click to view error details

failed to validate branch and PR title rules: PR title must contain the Jira ticket ID 'TT-16362'

Next Steps

• Ensure your branch name contains a valid Jira ticket ID (e.g., ABC-123)
• Verify your PR title matches the branch's Jira ticket ID
• Check that the Jira ticket exists and is accessible

---

This comment will be automatically deleted once the linter passes.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
98.1% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud