* Add LogicConfirmationModal Component and Integrate Logic Validation
- Introduced LogicConfirmationModal component to display validation errors related to form logic.
- Integrated logic validation and cleaning functionalities into FormEditor, prompting users when invalid logic is detected.
- Added useLogicValidation and useLogicCleaner composables for error checking and logic correction.
- Removed deprecated validatePropertiesLogic function to streamline logic handling.
These changes enhance user experience by providing clear feedback on form logic issues and ensuring that invalid logic is addressed before form submission.
* Refactor Logic Handling in Form Components
- Updated LogicConfirmationModal to improve user feedback by changing the title and icon colors, enhancing clarity on incomplete form logic.
- Replaced useLogicValidation and useLogicCleaner with a new useFormLogic composable in FormEditor for streamlined logic validation and cleaning processes.
- Removed deprecated useLogicCleaner and useLogicValidation files to simplify the codebase and improve maintainability.
These changes enhance the user experience by providing clearer messages regarding form logic issues and ensuring that invalid logic is effectively managed before form submission.
---------
Co-authored-by: JhumanJ <julien@nahum.net>
* oAuth for Stripe
* Stripe Payment Frontend - WIP
* Payment block backend validation and new package for stripe
* change stripe scopes
* update PaymentBlockConfigurationRule
* Set loader on provider modal
* stripe oauth
* PaymentFieldOptions as seprate component
* validate Stripe account
* Payment intent
* Stripe Payment as composable
* confirmCardPayment working
* Set payment errors on form.errors
* Validate card other fields
* Store payment id to database and on submission add link for view payment on stripe
* FormPaymentController no need auth middleware
* paymentinput error display on field
* Make payment block as input
change 'nf-payment' to 'payment'
* Refactor payment processing and error handling
* Multi lang & direction support on payment
* reset card on change direction or local
* use connected account for loadstripe
* validate OAuthProvider before delete it
* payment improvements
* display payment by stripe
* use stripe_currencies.json
* Form Payment testcase
* Enhance form auto-save behavior for payment forms
* Restrict payment block in self-hosted environments
* validate form before process payment
* Refactor Nuxt Configuration for Improved Development Server Settings
- Removed the existing Vite server configuration for hot module replacement (HMR) as it was no longer necessary.
- Introduced a new `devServer` configuration to specify the host and port for the development server, allowing for more flexible environment setup based on environment variables.
These changes aim to streamline the development process by enhancing server configuration and ensuring better adaptability to different environments.
* Enhance Payment Handling and User Experience in Forms
- Refactored `FormPaymentController` to improve handling of Stripe account retrieval, including better error messages for both editor preview and public forms.
- Updated `OAuthProviderController` to utilize caching for OAuth connection context, enhancing performance and user experience during account connections.
- Improved `PaymentInput.client.vue` to display a loading state and a preview message for users, guiding them to save the form for payment activation.
- Modified various components to standardize payment-related messages and improve localization support across multiple languages.
- Removed the deprecated `connections.vue` page to streamline the codebase.
These changes aim to enhance the overall user experience when handling payments and improve the maintainability of the payment-related components.
* Refactor Payment Handling and Enhance User Experience in Forms
- Updated `FormPaymentController` to utilize a new method for checking if the Stripe provider belongs to any workspace user, improving security and error logging.
- Modified `OAuthProviderController` to streamline the OAuth provider creation process by directly using the service object.
- Enhanced `Workspace` model with a new method to verify provider ownership, improving code clarity and maintainability.
- Improved `PaymentInput.client.vue` to handle loading states and error messages more effectively, enhancing user feedback during payment processing.
- Refactored `useFormInput.js` to include an `isAdminPreview` prop for better context handling in form components.
These changes aim to improve the overall user experience when handling payments and enhance the maintainability of the payment-related components.
* Enhance Payment Validation and User Experience in Forms
- Updated `UserFormRequest` to improve workspace handling during form submissions, allowing for better context in validation rules.
- Modified `PaymentBlockConfigurationRule` to include workspace validation, ensuring that payment providers are associated with the correct workspace, enhancing security and error logging.
- Improved `PaymentInput.client.vue` to dynamically determine the success state of payment processing, providing clearer user feedback.
- Updated various localization files to include a payment disclaimer, ensuring users are informed about credit card charges during payment processing.
These changes aim to enhance the overall user experience when handling payments and improve the maintainability of payment-related components.
* Enhance Payment Features and User Experience in Forms
- Added checks in `FormPaymentController` to disable payment features for self-hosted instances, improving clarity for users regarding feature availability.
- Updated `PaymentBlockConfigurationRule` to change the minimum amount validation from 0.5 to 1, ensuring stricter payment requirements.
- Enhanced `PaymentInput.client.vue` with dark mode support for various UI elements, improving accessibility and user experience in different themes.
- Modified `useFormInput.js` to include an `isDark` prop, allowing for better theme handling in form components.
- Updated error messages in `useStripeElements.js` to include periods for consistency and improved user feedback.
These changes aim to enhance the overall user experience when handling payments and improve the maintainability of payment-related components.
* Enhance Payment Input Component with Focus Handling and Theme Support
- Updated `PaymentInput.client.vue` to include focus and blur event handlers, improving user interaction by visually indicating when the card input is focused.
- Enhanced theme support by adding new properties in `form-themes.js` for `PaymentInput`, allowing for better styling and transitions based on focus state.
- Introduced a new `isCardFocused` reactive reference to manage the focus state of the card input, enhancing the overall user experience.
These changes aim to improve the usability and visual feedback of the payment input component, aligning with recent enhancements to user experience in payment forms.
* Refactor Payment Handling and Improve Code Consistency
- Updated various files to enhance code consistency by adding spaces in arrow function definitions, improving readability and adhering to coding standards.
- Modified `PaymentBlockConfigurationRule.php`, `FormPaymentController.php`, and `Workspace.php` to ensure uniformity in the use of arrow functions.
- Enhanced `PaymentInput.client.vue` and other components by improving the formatting of template elements for better visual structure.
- Updated `useStripeElements.js` to streamline state management and improve clarity in the handling of Stripe elements.
These changes aim to improve code maintainability and readability across the payment handling components, ensuring a more consistent coding style throughout the codebase.
* Enhance Form Model and Logging Configuration
- Added a new 'auto_save' boolean property to the Form model, allowing for automatic saving of form data.
- Updated the logging configuration to include a 'combined' channel that stacks multiple log channels, improving logging flexibility and error tracking.
- Modified the FormFactory to set a default value for 'auto_save' to false, ensuring consistent behavior across form instances.
- Improved error message structure in FormPaymentTest to provide clearer feedback when a payment block is missing.
These changes aim to enhance the functionality of forms and improve logging capabilities, contributing to better maintainability and user experience.
* Update api/config/logging.php
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* Refactor Payment Error Handling and Localization Updates
- Updated `FormPaymentTest.php` to improve code consistency by adding spaces in arrow function definitions, enhancing readability.
- Modified `useStripeElements.js` to replace hardcoded error messages with localized strings, improving user experience and maintainability.
- Enhanced various localization files (e.g., `en.json`, `fr.json`, `de.json`, etc.) to include new error messages related to payment processing, ensuring users receive clear and consistent feedback across different languages.
These changes aim to enhance the clarity of error handling in payment processes and improve the overall user experience through better localization support.
* Enhance AddFormBlock and FieldOptions with Authentication Checks
- Added an icon to indicate authentication requirements for blocks in `AddFormBlock.vue`, improving user awareness of access restrictions.
- Implemented alert notifications using `useAlert()` for unauthorized block additions and input cloning, enhancing user feedback.
- Updated `FieldOptions.vue` to conditionally render payment field options, ensuring relevant options are displayed based on the field type.
- Modified `blocks_types.json` to include an `auth_required` property for specific block types, facilitating authentication checks.
These changes aim to improve user experience by providing clear indications of authentication requirements and enhancing form functionality.
* Enhance Authentication Checks in AddFormBlock Component
- Updated `AddFormBlock.vue` to conditionally render authentication-required icons based on user authentication status, improving user awareness of access restrictions.
- Implemented additional authentication checks in the `addBlock` and `handleInputClone` functions, utilizing `useAlert()` for notifying users when login is required to add blocks or clone inputs.
- Introduced a computed property to manage the authenticated state, streamlining the authentication logic within the component.
These changes aim to enhance user experience by providing clear indications of authentication requirements and improving the functionality of the form component.
* Enhance PaymentInput Component with Disabled State Support
- Updated `PaymentInput.client.vue` to include a `disabled` prop for the card holder name and email inputs, improving form accessibility and user experience by preventing interaction when necessary.
- Modified the card options to respect the `disabled` state, ensuring consistent behavior across the payment input fields.
These changes aim to enhance the usability of the payment input component by providing better control over user interactions.
* Add Payment Condition Logic and Update Filters
- Introduced a new payment condition in `FormLogicConditionChecker.php` to handle 'paid' and 'not_paid' states, enhancing form logic capabilities.
- Added corresponding payment comparators in `open_filters.json` for both API and client, ensuring consistent validation and expected types for payment conditions.
- Updated the JavaScript logic in `FormLogicConditionChecker.js` to include the new payment condition checks, improving the overall functionality of form conditions.
These changes aim to enhance the form logic related to payment states, providing better validation and user experience in payment-related forms.
* Refactor Authentication Checks in AddFormBlock and Working Form Store
- Removed redundant authentication checks from `AddFormBlock.vue` for adding blocks and cloning inputs, streamlining the logic.
- Centralized authentication validation in `working_form.js` to ensure consistent user feedback when authentication is required for specific block types.
- Enhanced user experience by utilizing `useAlert()` for notifying users about login requirements, improving clarity and interaction.
These changes aim to simplify the authentication logic and improve user notifications regarding access restrictions in form components.
* Refactor Feature Flags and Update Payment Input Logic
- Updated `FeatureFlagsController.php` to utilize the `Cache` facade directly, improving code clarity and consistency.
- Modified `PaymentInput.client.vue` to enhance the display logic for payment previews, ensuring a better user experience by conditionally showing messages based on the state of the Stripe account.
- Removed the `STRIPE_PUBLISHABLE_KEY` from `runtimeConfig.js` to streamline the configuration and replaced it with a computed property that retrieves the key from feature flags, improving maintainability.
- Adjusted the `.env.example` file to maintain consistency in environment variable definitions.
These changes aim to enhance the clarity of feature flag management and improve the user experience in payment interactions by refining the logic and configuration handling.
* Update Stripe Configuration in Services
- Modified the `services.php` configuration file to enhance the Stripe integration by providing default values for `client_secret` and `redirect` URI. This change ensures that the application can fallback to a predefined secret and a specific callback URL, improving the robustness of the payment service setup.
These changes aim to streamline the configuration process for Stripe, ensuring that necessary values are always available for the application to function correctly.
---------
Co-authored-by: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
- Introduce conditional rendering for help text in CheckboxInput.vue and ToggleSwitchInput.vue, allowing help text to be displayed either above or below the input based on the helpPosition prop.
- Update the structure of the help slot to improve flexibility and user experience.
These changes enhance the usability of the form components by providing clearer guidance to users.
* Add regex matching filters to open_filters.json
- Introduce new regex-based filters: matches_regex and does_not_match_regex
- Add support for string-based regex matching in both API and client filter configurations
- Update filter schemas to include new regex filter options with expected string type
* Add barcode comparators and regex filters to open_filters.json and validatePropertiesLogic.js
- Introduce new barcode comparators: equals, does_not_equal, contains, does_not_contain, starts_with, ends_with, is_empty, is_not_empty, matches_regex, does_not_match_regex, content_length_equals, content_length_does_not_equal, content_length_greater_than, content_length_greater_than_or_equal_to, content_length_less_than, content_length_less_than_or_equal_to.
- Add regex matching filters: matches_regex and does_not_match_regex to open_filters.json.
- Remove console log statements from validatePropertiesLogic.js and FormPropertyLogicRule.js for cleaner code.
This update enhances the filtering capabilities and improves the validation logic by removing unnecessary debug outputs.
* Refactor Vue Components for Improved Readability and Consistency
- Update CameraUpload.vue to enhance formatting and maintain consistent indentation for better readability.
- Modify OpenFormField.vue to improve tooltip component formatting, ensuring consistent styling across the application.
- Refactor FormSecurityAccess.vue to enhance the layout of the conditional rendering for captcha providers.
- Adjust RegisterForm.vue to improve the formatting of the terms and conditions section, ensuring consistent indentation and readability.
These changes aim to enhance code maintainability and visual consistency across the components, contributing to a cleaner codebase.
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
- Replace SVG icon in BarcodeInput with a new Icon component for improved visual consistency.
- Update CameraUpload component to enhance styling and functionality, including:
- Add a barcode scanning overlay for better user experience during scanning.
- Refactor video and canvas elements to improve layout and responsiveness.
- Adjust button sizes and styles for better accessibility and usability.
- Implement more robust camera handling logic, including improved facing mode management and error handling for mobile devices.
These changes aim to enhance the user interface and overall functionality of the barcode scanning feature, ensuring a smoother experience for users.
- Update FileInput component dark mode text color
- Modify OpenForm dragging state background for dark mode
- Refactor OpenFormField admin preview actions with tooltips and improved styling
- Add z-index and styling improvements for form field action buttons
- Add conditional rendering for captcha based on site key availability
- Dynamically generate captcha options based on configured providers
- Prevent displaying captcha input when no providers are configured
- Add runtime config checks for captcha site keys
- Refactor field options to use default values from blocks_types.json
- Add default values for various form input types in blocks_types.json
- Improve default field initialization logic in FieldOptions and working_form store
- Add camera switching functionality for mobile devices in CameraUpload component
* Clean up empty HTML and help text in form inputs
* Update api/app/Http/Requests/UserFormRequest.php
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Enhance CI/CD pipeline by introducing a new job to run ESLint on the client application. This ensures code quality and consistency for the frontend codebase.
* Add Barcode Input Component and Integrate Quagga for Scanning
- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.
These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.
* Update Barcode scanner UI
* Barcode decoder as user selection
* improve barcode
* Refactor form components and update Tailwind configuration
- Removed unused box shadow styles from tailwind.config.js.
- Enhanced DateInput, FileInput, MatrixInput, RichTextAreaInput, and VSelect components with improved styling and error handling.
- Updated theme settings in form-themes.js to include new styles for MatrixInput and other form elements.
- Adjusted labels in FieldOptions.vue for clarity.
- Improved overall UI consistency and responsiveness across form components.
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Add Barcode Input Component and Integrate Quagga for Scanning
- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.
These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.
* Update Barcode scanner UI
* Barcode decoder as user selection
* improve barcode
* Add reCAPTCHA support and update captcha provider handling
- Introduced reCAPTCHA as an additional captcha provider alongside hCaptcha.
- Updated form request validation to handle different captcha providers based on user selection.
- Added a new validation rule for reCAPTCHA.
- Modified the forms model to include a 'captcha_provider' field.
- Created a migration to add the 'captcha_provider' column to the forms table.
- Updated frontend components to support dynamic rendering of captcha based on the selected provider.
- Enhanced tests to cover scenarios for both hCaptcha and reCAPTCHA.
These changes improve the flexibility of captcha options available to users, enhancing form security and user experience.
* fix pint
* change comment text
* Refactor captcha implementation and integrate new captcha components
- Removed the old RecaptchaV2 component and replaced it with a new implementation that supports both reCAPTCHA and hCaptcha through a unified CaptchaInput component.
- Updated the OpenForm component to utilize the new CaptchaInput for dynamic captcha rendering based on user-selected provider.
- Cleaned up the package.json by removing the deprecated @hcaptcha/vue3-hcaptcha dependency.
- Enhanced form initialization to set a default captcha provider.
- Improved error handling and cleanup for both reCAPTCHA and hCaptcha scripts.
These changes streamline captcha integration, improve maintainability, and enhance user experience by providing a more flexible captcha solution.
* Refactor captcha error messages and localization support
* Refactor registration process to integrate reCAPTCHA
- Replaced hCaptcha implementation with reCAPTCHA in RegisterController and related test cases.
- Updated validation rules to utilize g-recaptcha-response instead of h-captcha-response.
- Modified RegisterForm component to support reCAPTCHA, including changes to the form data structure and component references.
- Enhanced test cases to reflect the new reCAPTCHA integration, ensuring proper validation and response handling.
These changes improve security and user experience during the registration process by adopting a more widely used captcha solution.
* Fix reCAPTCHA configuration and update RegisterForm styling
- Corrected the configuration key for reCAPTCHA in RegisterController from 'services.recaptcha.secret_key' to 'services.re_captcha.secret_key'.
- Updated the styling of the Captcha input section in RegisterForm.vue to improve layout consistency.
These changes ensure proper reCAPTCHA functionality and enhance the user interface during the registration process.
* Fix reCAPTCHA configuration in RegisterTest to use the correct key format
- Updated the configuration key for reCAPTCHA in RegisterTest from 'services.recaptcha.secret_key' to 'services.re_captcha.secret_key' to ensure proper functionality during tests.
This change aligns the test setup with the recent updates in the reCAPTCHA integration, improving the accuracy of the registration process tests.
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Form Translation
* Support for other languages
* Support locale for datepicker
* Apply translation on select input
* Apply translation on select input
* Improve translation
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Support disable on matrix
* fix checkbox and radio icon
* Use Nuxt UI toggle
* Can set max_char_limit null
* fix action icon design
* Support for URL prefill for Matrix
* Apply theme color on toggle
* Set --form-color as style variable and use it
* Set default value for form-color
* fix formatting
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Form editor v2
* fix template test
* setFormDefaults when save
* fix form cleaning dark mode
* improvements on open sidebar
* UI polish
* Fix change type button
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Dynamic OauthDriver scope
* support migration for mysql
* Refactor default scopes for integrations
* Small UI changes
* fix flet select tooltip
* fix linter
* Fix google token size in DB
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Re-organize a bit controllers
* Added the featureflagcontroller
* Implement feature flags in the front-end
* Clean env files
* Clean console.log messages
* Fix feature flag test
* fix password reset bug
* feat: time format in dat input
* fix lint issues
* fix time prefill, time format backend
* fix time format in OpenDate
---------
Co-authored-by: Julien Nahum <julien@nahum.net>
* Working on custom radius + input size
* Fix date input clear vertical align
* Moslty finished implementing small size
* Polishing larger theme
* Finish large theme
* Added size/radius options in form editor
* Darken help text, improve switch input help location
* Slight form editor improvement
* Fix styling
* Polish of the form editor
Chirag Chhatrala
Julien Nahum
Favour Olayinka
Boris Lepikhin