Add Input Mask Validation and Support in Form Requests and Components

[chiragchhatrala]

• Introduced a new InputMaskRule for validating input masks in form requests, enhancing data integrity for text fields.
• Updated AnswerFormRequest and UserFormRequest to include input mask validation rules, allowing for flexible input formats.
• Enhanced TextInput component to support input masks, improving user experience with formatted input fields.
• Added useInputMask composable for managing input mask logic, ensuring consistent behavior across components.
• Updated FieldOptions to allow configuration of input masks for text fields, providing users with more customization options.

These changes aim to improve form handling and user input validation, ensuring that data adheres to specified formats while enhancing the overall user experience in form interactions.

Summary by CodeRabbit

• New Features

  • Added support for input masks on text fields, allowing users to enter data in specific formats (e.g., phone numbers, custom patterns).
  • Introduced a new masked input component for improved data entry and validation.
  • Added an input mask pattern editor in the form field options, including help and validation for mask syntax.
  • Implemented reactive input masking utilities for dynamic formatting and validation in forms.

• Bug Fixes

  • Input mask validation now ensures user input matches the specified pattern, preventing invalid entries.

• Tests

  • Added comprehensive tests to ensure input mask validation works correctly for various patterns.

[coderabbitai[bot]]

Walkthrough

This update introduces input mask support for text fields across both backend and frontend. It adds a custom input mask validation rule, updates form requests to handle and validate input masks, implements a composable for mask logic, and integrates a new masked input component into the form system with UI support for specifying and previewing input masks.

Changes

Files/Paths	Change Summary
api/app/Rules/InputMaskRule.php api/tests/Unit/Rules/InputMaskRuleTest.php	Added custom InputMaskRule validation class and comprehensive unit tests for input mask patterns.
api/app/Http/Requests/AnswerFormRequest.php api/app/Http/Requests/UserFormRequest.php	Integrated input mask validation into form request rules for text fields and validated the input_mask attribute in form definitions.
client/composables/useInputMask.js	Introduced a Vue composable for parsing, formatting, and validating input values against mask patterns.
client/components/forms/heavy/MaskInput.vue	Added a new masked input Vue component supporting dynamic mask formatting, validation, and integration with forms.
client/components/open/forms/OpenFormField.vue	Updated to render MaskInput for text fields with an input mask, passing the mask pattern as a prop.
client/components/open/forms/fields/components/FieldOptions.vue	Added UI for specifying input mask patterns in field options, including validation, help tooltip, and Crisp helpdesk integration.
client/composables/components/useComponentRegistry.js	Registered the new MaskInput component in the form components registry for dynamic usage.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant FormUI
    participant MaskInput
    participant useInputMask
    participant Backend

    User->>FormUI: Opens form with text field (with input_mask)
    FormUI->>MaskInput: Renders with mask prop
    MaskInput->>useInputMask: Parses mask, formats input
    User->>MaskInput: Types input
    MaskInput->>useInputMask: Formats and validates input
    MaskInput->>FormUI: Emits masked/unmasked value
    FormUI->>Backend: Submits value
    Backend->>InputMaskRule: Validates value against mask
    InputMaskRule-->>Backend: Pass/Fail
    Backend-->>FormUI: Returns validation result
    FormUI-->>User: Displays success or error

Suggested reviewers

• JhumanJ

Poem

In fields where forms and inputs grow,
A rabbit hops with masks in tow.
From nine to star and letter a,
Your data’s shaped the proper way.
With MaskInput new and rules so neat,
Validation’s now a bunny treat!
🐰✨

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f18b914ce67723e625b5052854b9b7cbcaef4c9f and 516ca53f95786a403f0934ab583348717c087bc2.

📒 Files selected for processing (1)

• client/components/open/forms/fields/components/FieldOptions.vue (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• client/components/open/forms/fields/components/FieldOptions.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Build the Nuxt app

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[chiragchhatrala]

Great but some improvements:

• In the field options:

1. only allow the letters a and number 9
2. let's add support for https://primevue.org/inputmask/#slotchar
3. let's create a basic help page and add link to it
4. let's refactor in a popover for cleaner options and better explain (let's wait for the migration to nuxt ui 3 and tailwind 4 beforehands)

• For textInput: i think we did too many changes which are making the component too complicated. Let's instead revert our changes there, and create a dedicated MaskInput. For the user it's still a text input option but for the code it'll be cleaner.

Also in terms of feature let's improve:

• show with underscore remaing characters to help the user fill the form
• Whenever a character is wrong and not allowed, we should just prevent it, not clear the whole input like it's currently done - not usable this way

All Done ✔️