Slug customisation (#755)

* Enhance Form Slug Handling and Validation Logic

- Updated `FormController.php` to conditionally set the form slug based on the `self_hosted` configuration, ensuring proper slug assignment during form creation and updates.
- Introduced `CustomSlugRule.php` to validate custom slugs, enforcing format and uniqueness constraints, and integrated this rule into `UserFormRequest.php`.
- Enhanced the `FormCustomSeo.vue` component to include a field for custom URL slugs, improving user experience by allowing users to define unique identifiers for their forms.
- Updated API routes to apply middleware for form updates, ensuring proper form resolution during requests.

These changes aim to improve the functionality and user experience related to form slug management and validation.

* Test case for Custom slug

* Update OpenCompleteForm and FormCustomSeo for Improved Functionality and Clarity

- Modified `OpenCompleteForm.vue` to ensure `submissionId` is correctly referenced as `submissionId.value`, enhancing data handling during form initialization.
- Updated `FormCustomSeo.vue` to rename "Custom URL Slug" to "Custom Form URL" for better clarity and user understanding, ensuring consistent terminology across the application.
- Enhanced `useFormInitialization.js` to include `submission_id` in the data passed to `form.resetAndFill`, improving the accuracy of form data handling.

These changes aim to improve the functionality and user experience of the form components by ensuring correct data references and clearer labeling.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenCompleteForm.vue

@@ -261,7 +261,7 @@ if (props.form) {
     darkMode: darkModeRef
   })
   formManager.initialize({
-    submissionId: submissionId,
+    submissionId: submissionId.value,
     urlParams: import.meta.client ? new URLSearchParams(window.location.search) : null,
   })
 }

client/components/open/forms/components/form-components/FormCustomSeo.vue

@@ -71,6 +71,22 @@
         label="Indexable by Google"
       />
     </div>
+
+    <div v-if="useFeatureFlag('self_hosted')" class="w-full border-t pt-4 mt-4">
+      <h4 class="font-semibold">
+        Custom Form URL
+      </h4>
+      <p class="text-gray-500 text-sm mb-4">
+        Create a custom URL for your form. This will be the unique identifier in your form's URL.
+      </p>
+      <text-input
+        :form="form"
+        name="slug"
+        class="mt-4 max-w-xs"
+        label="Custom Form URL"
+        help="Use only lowercase letters, numbers, and hyphens. Example: my-custom-form"
+      />
+    </div>
   </SettingsSection>
 </template>