[PLA-1825] add form validation notification error

[zlayine]

PR Type

enhancement, bug fix

---

Description

• Added @invalid-submit event to multiple Form components across various Vue.js files.
• Implemented invalidSubmit method to show error notification when form validation fails.
• Enhanced user feedback by providing error messages for invalid form submissions.

---

Changes walkthrough 📝

Relevant files

Enhancement

40 files BatchMint.vue Add form invalid submit handling and error notification.  resources/js/components/batch/BatchMint.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    BatchSetAttribute.vue Add form invalid submit handling and error notification.  resources/js/components/batch/BatchSetAttribute.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    BatchTransfer.vue Add form invalid submit handling and error notification.  resources/js/components/batch/BatchTransfer.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    SettingsChangeEmail.vue Add form invalid submit handling and error notification.  resources/js/components/pages/SettingsChangeEmail.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    SettingsResetPassword.vue Add form invalid submit handling and error notification.  resources/js/components/pages/SettingsResetPassword.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    Setup.vue Add form invalid submit handling and error notification.  resources/js/components/pages/Setup.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    Login.vue Add form invalid submit handling and error notification.  resources/js/components/pages/auth/Login.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +14/-1    Register.vue Add form invalid submit handling and error notification.  resources/js/components/pages/auth/Register.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    RequestResetPassword.vue Add form invalid submit handling and error notification.  resources/js/components/pages/auth/RequestResetPassword.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    ResetPassword.vue Add form invalid submit handling and error notification.  resources/js/components/pages/auth/ResetPassword.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    CreateBeam.vue Add form invalid submit handling and error notification.  resources/js/components/pages/create/CreateBeam.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +18/-3    CreateCollection.vue Add form invalid submit handling and error notification.  resources/js/components/pages/create/CreateCollection.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    CreateFuelTank.vue Add form invalid submit handling and error notification.  resources/js/components/pages/create/CreateFuelTank.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    CreateListing.vue Add form invalid submit handling and error notification.  resources/js/components/pages/create/CreateListing.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    CreateToken.vue Add form invalid submit handling and error notification.  resources/js/components/pages/create/CreateToken.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +17/-2    DeleteBeamSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/beam/DeleteBeamSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    UpdateBeamSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/beam/UpdateBeamSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    ApproveCollectionSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/collection/ApproveCollectionSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    DestroyCollectionSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/collection/DestroyCollectionSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    MutateCollectionSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/collection/MutateCollectionSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    UnapproveCollectionSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/collection/UnapproveCollectionSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    FreezeSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/common/FreezeSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    ThawSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/common/ThawSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    TransferBalanceSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/common/TransferBalanceSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    AccountsFuelTankSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +18/-2    ConsumptionFuelTankSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    DestroyFuelTankSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    DispatchFuelTankSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    FreezeFuelTankSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    MutateFuelTankSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    CancelListingSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/marketplace/CancelListingSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    FillListingSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/marketplace/FillListingSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    FinalizeAuctionSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/marketplace/FinalizeAuctionSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    PlaceBidSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/marketplace/PlaceBidSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    ApproveTokenSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/token/ApproveTokenSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    BurnTokenSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/token/BurnTokenSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    MintTokenSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/token/MintTokenSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    MutateTokenSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/token/MutateTokenSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    TransferTokenSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/token/TransferTokenSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1    UnapproveTokenSlideover.vue Add form invalid submit handling and error notification.  resources/js/components/slideovers/token/UnapproveTokenSlideover.vue Added @invalid-submit event to Form component. Implemented invalidSubmit method to show error notification. +11/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	4
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: The invalidSubmit method is repeated across multiple components. Consider refactoring this into a shared utility or service to avoid code duplication and improve maintainability.
	Code Consistency: The error handling for form validation is not consistent. In some places, the form validation check (formRef.value?.getMeta().valid) is used, while in others, a separate validation method like isValid() is used. It's recommended to standardize the approach to improve code readability and reliability.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Add null check before calling validate on formRef Consider handling the case where formRef.value might be null before calling validate() in the createBatch method to prevent potential runtime errors. resources/js/components/batch/BatchMint.vue [183] -await formRef.value.validate(); +if (formRef.value) { + await formRef.value.validate(); +} Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential runtime error by adding a null check before calling validate() on formRef. This is a crucial improvement for preventing crashes if formRef is null.	9
	Add error handling to the form validation process Add error handling for the validate method in the unapproveToken function to catch and display any exceptions that might occur during form validation. resources/js/components/slideovers/token/UnapproveTokenSlideover.vue [129] -await formRef.value?.validate(); +try { + await formRef.value?.validate(); +} catch (error) { + snackbar.error({ + title: 'Validation Error', + text: `An error occurred during form validation: ${error.message}`, + }); + return; +} Suggestion importance[1-10]: 9 Why: Adding error handling for the validate method is important to catch and display any exceptions that might occur during form validation. This improves the robustness and user feedback of the application.	9
	Add a null check for formRef to prevent runtime errors Consider adding a check for the existence of formRef before attempting to submit the form to prevent potential runtime errors if formRef is undefined. resources/js/components/pages/create/CreateListing.vue [264-265] -if (!(await isValid())) { +if (!formRef || !(await isValid())) { return; } Suggestion importance[1-10]: 8 Why: Adding a null check for formRef is important to prevent potential runtime errors, enhancing the robustness of the code.	8
	Enhance validation checks to include null safety for formRef Implement a more comprehensive validation check that includes both the validation status and the existence of formRef to ensure the form can be safely accessed and is valid before proceeding with the delete operation. resources/js/components/slideovers/beam/DeleteBeamSlideover.vue [80-81] -if (!formRef.value?.getMeta().valid) { +if (!formRef.value || !formRef.value.getMeta().valid) { return; } Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential bug by ensuring formRef is not null before accessing its properties, improving the code's safety and reliability.	8
Maintainability	Refactor the invalidSubmit method to a shared utility to reduce code duplication Refactor the repeated invalidSubmit method across multiple components to a shared utility file to avoid code duplication and improve maintainability. resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue [80-84] -const invalidSubmit = () => { - snackbar.error({ - title: 'Form validation', - text: 'Please verify that all the fields are valid', - }); -}; +// Assume import { invalidSubmit } from 'path/to/utilities'; +// No need to redefine it here, just use the imported function Suggestion importance[1-10]: 9 Why: Refactoring to a shared utility reduces code duplication and improves maintainability across multiple components. This is a significant improvement for long-term code maintenance.	9
	Refactor to improve code modularity and readability Refactor the unapproveToken function to separate concerns by moving the validation logic to a separate function and calling it within unapproveToken. resources/js/components/slideovers/token/UnapproveTokenSlideover.vue [128-132] +const validateForm = async () => { + await formRef.value?.validate(); + return formRef.value?.getMeta().valid; +}; + const unapproveToken = async () => { - await formRef.value?.validate(); - if (!formRef.value?.getMeta().valid) { - return; - } + const isValid = await validateForm(); + if (!isValid) return; Suggestion importance[1-10]: 8 Why: Refactoring the validation logic into a separate function enhances code modularity and readability, making the code easier to maintain and understand. This is a good practice for long-term code health.	8
	Refactor repeated snackbar error logic into a method Extract the repeated error handling logic into a separate method to improve code reusability and maintainability. resources/js/components/pages/SettingsChangeEmail.vue [74-77] -snackbar.error({ - title: 'Form validation', - text: 'Please verify that all the fields are valid', -}); +showErrorSnackbar(); Suggestion importance[1-10]: 7 Why: Extracting repeated error handling logic into a separate method improves code maintainability and reusability. This is a good practice, although it is not critical for functionality.	7
	Replace direct snackbar calls with a generic error handling function Replace the direct use of snackbar.error with a more generic error handling function that can be customized or replaced easily without modifying each usage directly. This will improve maintainability and allow for easier changes to error handling logic in the future. resources/js/components/pages/create/CreateListing.vue [257-260] -snackbar.error({ - title: 'Form validation', - text: 'Please verify that all the fields are valid', -}); +showError('Form validation', 'Please verify that all the fields are valid'); Suggestion importance[1-10]: 7 Why: This suggestion improves maintainability by centralizing error handling logic, making future changes easier. However, it is not crucial for functionality.	7
	Refactor repeated error handling into a shared utility function Refactor the repeated invalidSubmit function into a shared module or a mixin to avoid code duplication across different components, enhancing code reuse and reducing the potential for inconsistencies. resources/js/components/pages/create/CreateToken.vue [417-421] -const invalidSubmit = () => { - snackbar.error({ - title: 'Form validation', - text: 'Please verify that all the fields are valid', - }); -}; +import { invalidSubmit } from '@/utils/formHelpers'; Suggestion importance[1-10]: 6 Why: Refactoring the repeated invalidSubmit function into a shared module improves code reuse and maintainability, but it is a minor enhancement.	6
Enhancement	Improve error handling in the validation check Replace the direct return in the createBeam method with a more descriptive error handling or logging to aid in debugging and user feedback. resources/js/components/pages/create/CreateBeam.vue [236-237] if (!isAllValid.value) { + console.error('Validation failed: Not all fields are valid.'); return; } Suggestion importance[1-10]: 8 Why: Replacing the direct return with a more descriptive error handling or logging aids in debugging and provides better user feedback. This enhances the code's robustness and user experience.	8
	Enhance form validation handling in the destroyFuelTank method for specific error types Implement a more comprehensive validation in the destroyFuelTank method to handle different types of validation errors specifically, rather than a generic check. resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue [89-90] -if (!formRef.value?.getMeta().valid || !tankId.value) { +if (!formRef.value?.getMeta().valid) { + snackbar.error({ + title: 'Validation Error', + text: 'Please check the form fields.', + }); + return; +} +if (!tankId.value) { + snackbar.error({ + title: 'Missing Information', + text: 'Tank ID is required.', + }); return; } Suggestion importance[1-10]: 8 Why: Handling different types of validation errors specifically provides clearer feedback to the user, improving the user experience. This is a valuable enhancement but not critical.	8
	Add a validation check for tank ID in the invalidSubmit method Consider adding a check for tankId.value in the invalidSubmit method to ensure that the tank ID is valid before displaying the error message. This will prevent the error message from being shown when the tank ID is missing, which could be misleading to the user. resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue [80-84] const invalidSubmit = () => { + if (!tankId.value) return; // Ensure tank ID is present snackbar.error({ title: 'Form validation', text: 'Please verify that all the fields are valid', }); }; Suggestion importance[1-10]: 7 Why: This suggestion improves user experience by preventing misleading error messages when the tank ID is missing. However, it is a minor enhancement and not crucial to the functionality.	7
	Improve the error message for better user guidance Consider adding a more specific error message in the invalidSubmit function. This can help users understand exactly what went wrong with their form submission. resources/js/components/slideovers/token/UnapproveTokenSlideover.vue [123-125] snackbar.error({ - title: 'Form validation', - text: 'Please verify that all the fields are valid', + title: 'Form validation error', + text: 'One or more fields have an invalid format or missing required information. Please check your entries and try again.', }); Suggestion importance[1-10]: 7 Why: The suggestion improves user experience by providing a more detailed error message, which can help users understand what went wrong. However, it is not crucial for the functionality of the code.	7
Best practice	Standardize form validation handling across components Ensure consistency in handling form validation across different components by using the same validation logic or refactoring into shared utilities. resources/js/components/pages/auth/Login.vue [158] -if (!(await isValid())) return; +if (!(await isValid())) { + snackbar.error({ + title: 'Login Failed', + text: 'Please check your inputs and try again.' + }); + return; +} Suggestion importance[1-10]: 8 Why: Ensuring consistency in form validation handling across different components by using the same validation logic or refactoring into shared utilities is a best practice. It improves maintainability and user experience.	8
User experience	Improve error handling in the destroyFuelTank method to provide user feedback Replace the direct return statement in the destroyFuelTank method with an error handling mechanism that provides feedback to the user when the form is invalid or the tank ID is missing. resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue [89-90] if (!formRef.value?.getMeta().valid || !tankId.value) { + snackbar.error({ + title: 'Error', + text: 'Form is invalid or tank ID is missing.', + }); return; } Suggestion importance[1-10]: 8 Why: Providing user feedback when the form is invalid or the tank ID is missing enhances the user experience significantly. This is a valuable improvement but not critical.	8
Possible issue	Ensure error handling is triggered only for actual form validation failures Ensure that the invalidSubmit function is only triggered when the form is actually invalid by adding a condition to check the form's validity before calling snackbar.error. resources/js/components/slideovers/token/UnapproveTokenSlideover.vue [121-125] const invalidSubmit = () => { - snackbar.error({ - title: 'Form validation', - text: 'Please verify that all the fields are valid', - }); + if (!formRef.value?.getMeta().valid) { + snackbar.error({ + title: 'Form validation', + text: 'Please verify that all the fields are valid', + }); + } }; Suggestion importance[1-10]: 6 Why: Adding a condition to check the form's validity before calling snackbar.error ensures that the error message is only shown when necessary. This is a minor improvement but enhances the accuracy of error handling.	6