@contensu/directus-extension-masked-value-interface

A Directus interface for string / text fields that masks the stored value in the form — e.g. *****786 — while keeping the real value untouched in the database.

Install

Open Settings → Marketplace in Directus, search for @contensu/directus-extension-masked-value-interface, and press Install. Directus unpacks the extension and reloads on its own — no restart required.

If a self-hosted instance refuses the install, it is running the default MARKETPLACE_TRUST=sandbox; set MARKETPLACE_TRUST=all to allow it.

Then create or edit a field and pick Masked Value under Interface.

Behavior

• At rest the input shows the masked value.
• Focusing the input reveals the real value (editing a mask would corrupt the data), and blurring masks it again.
• The optional eye icon toggles a persistent reveal without focusing.
• Edits are only emitted while the real value is shown, so the mask can never be written back.

Options

| Option | Default | Description | | --- | --- | --- | | Visible Characters | 4 | How many characters stay readable | | Visible Position | end | end → *****786, start → 786***** | | Mask Character | * | First character is used | | Preserve Length | true | Off: fixed 5-character mask, hides the real length | | Allow Reveal Toggle | true | Show the eye icon | | Monospace Font | false | Render the value in a monospace font | | Placeholder | — | Translated string — literal text, or a $t: reference to a custom translation string, exactly like core's Input interface |

Notes

• This is presentation-level masking only — anyone with read permission on the field can still see the raw value via the API or a different interface. For real secrecy use Directus's hash special or field-level permissions.
• List views are unaffected; masking values in layouts would require a companion display extension.

Versions

Every dependency is pinned to an exact version — no ^ ranges. Two of them are load-bearing:

• vue must match the copy @directus/extensions-sdk resolves internally (3.5.24 for SDK 18.0.2). A caret lets a newer vue in alongside it, and vue-tsc then compares component types across the two instances and crashes mid-elaboration instead of reporting an error. pnpm why vue must say Found 1 version.
• typescript stays on 5.x — vue-tsc 3.x cannot drive TS 6 (internal tsc crash) or TS 7 (no ./lib/tsc export). The extension build itself uses esbuild and does not care; only pnpm typecheck does.

The directus:extension.host field is deliberately still a range: it declares which Directus versions this extension supports, not a dependency to install.

Development

A Docker Compose stack runs the extension inside a real Directus while you build it:

pnpm install
pnpm dev            # rebuilds dist/ on every save
docker compose up   # http://localhost:8055 — [email protected] / d1r3ctu5

dist/ and package.json are mounted into the container's extensions folder and EXTENSIONS_AUTO_RELOAD is on, so saving a file rebuilds the bundle and Directus reloads it — refresh the browser to see the change.

Then create a field using the Masked Value interface to try it out.

pnpm typecheck      # vue-tsc
pnpm validate       # directus-extension validate

CI & Releases

Every push runs typecheck, build, and extension validation via GitHub Actions. Releases are published to npm manually:

pnpm build
npm publish --access public

Contributing

Pull requests are welcome. Please open an issue first to discuss what you would like to change.

License

MIT © Contensu