Hash Generator — Directus Interface Extension

An interface for Directus that generates random hashes for string fields with configurable options (length, allowed characters, auto-generate on create, allow manual regeneration, etc.). Built with the Directus Extensions SDK and Vue 3.

Features

• Configurable length: Choose the number of characters.
• Character set toggles: Allow numbers, uppercase, and special characters.
• Auto-generate on create: Optionally set the value when a new item is created.
• Manual regenerate button: If enabled, users can regenerate the value via a button.
• Uniqueness-aware generation: If the field is marked unique in your schema, the component avoids duplicates among existing values in the collection.

---

Compatibility

• Directus host: ^10.10.0
• Node.js: >= 18.17 (Directus 10 requirement)

---

Installation

1) Build the extension

From the repository root:

npm ci
npm run build

The compiled output is emitted to dist/ and referenced by Directus.

2) Install into Directus

You have two options:

• Link (recommended for development)

  In this project:

  npm run link

  Follow the prompts to link to your local Directus project.

• Manual install (for deployment)

  Copy the built files into your Directus project under:

  • extensions/interfaces/hash-generator/
  • Ensure dist/index.js is present as defined in package.json.

Restart Directus after installing the extension.

---

Usage in Directus

1. In the Directus app, go to Settings → Data Model and open or create a collection.
2. Add a field of type string (Text) or open an existing string field.
3. Under Interface, select Hash Generator (icon: numbers).
4. Configure the interface options as needed:
   • length: Integer slider (0–30). Number of characters to generate.
   • set_on_create: Toggle. Auto-generate the value when creating a new item.
   • can_be_updated: Toggle. Show a button to regenerate the value manually.
   • allow_numbers: Toggle. Include digits 0-9.
   • allow_special_characters: Toggle. Include common special characters.
   • allow_uppercase: Toggle. Include uppercase A-Z.

Notes

• If your field is marked as Unique in the schema, the interface avoids generating a hash that already exists in the collection.
• When can_be_updated is disabled, no regenerate button is shown.

---

Local Development

Install dependencies

npm ci

Start development build (watch mode)

npm run dev

This watches source files and rebuilds the extension into dist/ on changes.

Type-check

npm run type-check

Build (production)

npm run build

Full extension build with type-check

npm run build:extension

Validate extension manifest

npm run validate

Unit tests

npm run test:unit

Tests run with Vitest and JSDOM.

---

Configuration Options (Reference)

Defined in src/index.ts and used by src/Interface.vue.

• length (integer, slider 0–30): Number of characters to generate.
• set_on_create (boolean): Generate a value automatically when creating a new item.
• can_be_updated (boolean): Allow manual re-generation via button.
• allow_numbers (boolean): Include digits 0–9.
• allow_special_characters (boolean): Include !@#$%^&*()-_=+[]{}|;:,.<>?/.
• allow_uppercase (boolean): Include uppercase A–Z.

The interface targets fields of type string and belongs to the standard group.

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository and create a feature branch.
2. Install dependencies with npm ci.
3. Develop with npm run dev and link to a local Directus instance using npm run link.
4. Add/Update tests and run npm run test:unit.
5. Type-check with npm run type-check.
6. Build with npm run build and ensure the extension works in Directus.
7. Open a Pull Request with a clear description of changes.

Commit and PR Guidelines

• Keep PRs focused and small when possible.
• Include screenshots or short clips for UI changes.
• Update documentation if behavior or options change.

---

Troubleshooting

• After installing or linking, restart your Directus server so it picks up the extension.
• Ensure your Node.js version meets the requirement (>= 18.17).
• If the interface does not appear, run npm run validate and check server logs.

---

License

Licensed under the GNU General Public License (GPL). See the LICENSE file for details.