feat: better vue-forms support for workflows

Author: jptissot

docs/en/reference/Scripting.md

@@ -17,6 +17,9 @@ The following methods are available in addition to the OrchardCore [scripting me
 | Function | Description 
 | -------- | ----------- |
 |`requestFormAsJsonObject(): JObject`| Returns a sanitized JObject representation of the `HttpContext.Request.Form` object. Sanitization is performed by Orchard's [sanitizer](https://docs.orchardcore.net/en/dev/docs/reference/core/Sanitizer/). |
+| `addError(name: String, errorMessage: String): void` | Adds an error to the input with the specified name. Use the `serverValidationMessage` name to add a global error message to your VueForm. |
+| `hasErrors(): Boolean` | Returns true if the error dictionary contains any errors. |
+| `validateReCaptcha(recaptchaResponse): Boolean` | Returns true if the recaptchaResponse is valid, false if invalid. |
 
 ### Contents
 
@@ -56,5 +59,4 @@ You can get the values stored in the LocalizedTextPart inside a script.
 
 | Function | Description 
 | -------- | ----------- |
-| `addError(name: String, errorMessage: String): void` | Adds an error to the input with the specified name. Use the `serverValidationMessage` name to add a global error message to your VueForm. |
 | `getFormContentItem(): ContentItem` | Only available in the VueForm server side scripts. Returns the current VueForm ContentItem instance. |

docs/en/reference/modules/VueForms.md

@@ -44,7 +44,7 @@ VeeValidate.setInteractionMode('passive');
 
 #### OnValidation script
 
-The OnValidation script is used to specify the server side valiadtion script. We are planning to implement components with integrated validation in the future.
+The OnValidation script is used to specify the server side validation script. We are planning to implement components with integrated validation in the future.
 This module adds some [scripting methods](../Scripting.md#vueforms-module-statcanorchardcorevueforms) to facilitate handling form data and errors. 
 
 Here is an example OnValidation script that validates that the name is required.
@@ -65,6 +65,7 @@ addError('serverValidationMessage', 'This is a validation message that is not ti
 addError('serverValidationMessage', 'You can add many, they will come as an array via the "form.serverValidationMessage" prop!'); 
 ```
 
+All errors are also available on the VueJS component options object's via the `form.responseData.errors` property
 
 #### OnSubmitted script
 
@@ -173,6 +174,7 @@ You can access these properties in your templates or in the component options ob
 | form.successMessage | The success message returned from the server as specified in the [VueForm](#vueform-part) |
 | form.submitValidationError | Set to true when a server validation error occus. |
 | form.serverValidationMessage | Array of errors set by the server with the `addError('serverValidationMessage', 'Message')` scripting method. |
+| form.responseData | The raw response data recieved from the server. Useful if you want to return additional data to the form via a workflow. |
 | form.submitError | Set to true when a server error, ajax error or unhandled error occurs. |
 | form.serverErrorMessage | An error message set with the ajax error status code and text. Only set when a server errors occur. |
 
@@ -187,12 +189,21 @@ Although this module does not require a workflow to handle the form submissions,
 
 Please see the [workflow](../Workflows.md#vueforms-statcanorchardcorevueforms) documentation.
 
+If you do use a workflow, you can use the `addError("name", "message");` script to add form errors. You can also use the `HttpRedirect` or `HttpResponse` workflow tasks to redirect or return a custom set of data to the client. All data returned by the HttpResponse task is available via the `form.responseData` object.
+
 ## Localization (`StatCan.OrchardCore.VueForms.Localized`)
 
 While you can use Orchard's [LocalizationPart](https://docs.orchardcore.net/en/dev/docs/reference/modules/ContentLocalization/#localizationpart) to localize your forms. We suggest you use the [LocalizedText](LocalizedText.md) feature to implement i18n in your forms. This part is what we weld to your VueForm content type when you enable this feature.
 
+The `[locale]` shortcode is also useful to use in your views to localize simple text fields.
+
 ## Examples
 
 The following example forms are provided with the VueForms module as recipes:
 
 - Contact Form
+- UserProfile Form
+
+### UserProfile Form
+
+This form allows you to edit a `UserProfile` Content Type with the `CustomUserSettings` stereotype. For this form to work, you must enable the `Users Change Email` feature along with allowing users to update their email in the settings.

src/Modules/StatCan.OrchardCore.Scripting/FormsGlobalMethodsProvider.cs

@@ -7,16 +7,35 @@
 using OrchardCore.Infrastructure.Html;
 using OrchardCore.Scripting;
 using OrchardCore.ReCaptcha.Services;
+using OrchardCore.DisplayManagement.ModelBinding;
 
 namespace StatCan.OrchardCore.Scripting
 {
     public class FormsGlobalMethodsProvider : IGlobalMethodProvider
     {
         private readonly GlobalMethod _formAsJsonObject;
         private readonly GlobalMethod _validateReCaptcha;
+        private readonly GlobalMethod _setModelError;
+        private readonly GlobalMethod _hasErrors;
 
         public FormsGlobalMethodsProvider()
         {
+             _setModelError = new GlobalMethod
+            {
+                Name = "addError",
+                Method = serviceProvider => (Action<string, string>)((name, text) => {
+                   var updateModelAccessor = serviceProvider.GetRequiredService<IUpdateModelAccessor>();
+                    updateModelAccessor.ModelUpdater.ModelState.AddModelError(name, text);
+                })
+            };
+            _hasErrors = new GlobalMethod
+            {
+                Name = "hasErrors",
+                Method = serviceProvider => (Func<bool>)(() => {
+                   var updateModelAccessor = serviceProvider.GetRequiredService<IUpdateModelAccessor>();
+                    return updateModelAccessor.ModelUpdater.ModelState.ErrorCount > 0;
+                })
+            };
             _formAsJsonObject = new GlobalMethod
             {
                 Name = "requestFormAsJsonObject",
@@ -51,7 +70,7 @@ public FormsGlobalMethodsProvider()
 
         public IEnumerable<GlobalMethod> GetMethods()
         {
-            return new[] { _formAsJsonObject, _validateReCaptcha };
+            return new[] { _formAsJsonObject, _validateReCaptcha, _setModelError, _hasErrors };
         }
     }
 }

src/Modules/StatCan.OrchardCore.VueForms/Assets/vue-forms.js

@@ -34,7 +34,8 @@ function initForm(app) {
     submitError: false,
     submitValidationErrors: false,
     serverValidationMessage: undefined,
-    serverErrorMessage: undefined
+    serverErrorMessage: undefined,
+    responseData: undefined
   }
 
   Vue.component(app.dataset.name, {
@@ -80,9 +81,11 @@ function initForm(app) {
               success: function (data) {
 
                 vm.form = {...defaultFormData};
+                vm.form.responseData = data;
                 // if there are validation errors on the form, display them.
                 if (data.validationError) {
-                  // special key for serverErrorMessages
+                  
+                  //legacy
                   if(data.errors['serverValidationMessage'] != null) {
                     vm.form.serverValidationMessage = data.errors['serverValidationMessage'];
                   }
@@ -97,15 +100,10 @@ function initForm(app) {
                   return;
                 }
 
-                //success, set the form success message 
-                if (data.success) {
-                  vm.form.submitSuccess = true;
-                  vm.form.successMessage = data.successMessage;
-                  return;
-                }
-                vm.form.submitError = true;
-                // something went wrong, dev issue
-                vm.form.serverErrorMessage = "Something wen't wrong. Please report this to your site administrators. Error code: `VueForms.AjaxHandler`";
+                vm.form.submitSuccess = true;
+                vm.form.successMessage = data.successMessage;
+                return;
+                
               },
               error: function (xhr, statusText) {
                 vm.form = {...defaultFormData};

src/Modules/StatCan.OrchardCore.VueForms/Controllers/VueFormController.cs

@@ -17,6 +17,8 @@
 using StatCan.OrchardCore.VueForms.Workflows;
 using StatCan.OrchardCore.Extensions;
 using StatCan.OrchardCore.VueForms.Scripting;
+using System.Linq;
+using OrchardCore.Workflows.Http;
 
 namespace StatCan.OrchardCore.VueForms.Controllers
 {
@@ -77,52 +79,73 @@ public async Task<IActionResult> Submit(string formId)
                 return NotFound();
             }
 
-            // form validation server side script
-            var errorsDictionary = new Dictionary<string, List<string>>();
-            var scriptingProvider = new VueFormMethodsProvider(form, errorsDictionary);
+            var scriptingProvider = new VueFormMethodsProvider(form);
 
             var script = form.As<VueFormScripts>();
             if (!string.IsNullOrEmpty(script?.OnValidation?.Text))
             {
                 _scriptingManager.EvaluateJs(script.OnValidation.Text, scriptingProvider);
             }
 
-            if (errorsDictionary.Count > 0)
+            if (ModelState.ErrorCount > 0)
             {
-                return Json(new { validationError = true, errors = errorsDictionary });
+                return Json(new { validationError = true, errors = GetErrorDictionary() });
             }
 
             if (!string.IsNullOrEmpty(script?.OnSubmitted?.Text))
             {
                 _scriptingManager.EvaluateJs(script.OnSubmitted.Text, scriptingProvider);
             }
 
-            if (errorsDictionary.Count > 0)
+            if (ModelState.ErrorCount > 0)
             {
-                return Json(new { validationError = true, errors = errorsDictionary });
+                return Json(new { validationError = true, errors = GetErrorDictionary() });
             }
 
             // _workflow manager is null if workflow feature is not enabled
             if (_workflowManager != null)
             {
-                //todo: make sure this does not create issues if the workflows has a blocking event
                 await _workflowManager.TriggerEventAsync(nameof(VueFormSubmittedEvent),
                     input: new { VueForm = form },
                     correlationId: form.ContentItemId
                 );
             }
 
-            // 302 are equivalent to 301 in this case. No permanent redirect
+            // workflow added errors, return them here
+            if (ModelState.ErrorCount > 0)
+            {
+                return Json(new { validationError = true, errors = GetErrorDictionary() });
+            }
+
+            // Handle the redirects with ajax requests.
+            // 302 are equivalent to 301 in this case. No permanent redirect.
+            // This can come from a scripting method or the HttpRedirect Workflow Task
             if(HttpContext.Response.StatusCode == 301 || HttpContext.Response.StatusCode == 302)
             {
                 var returnValue = new { redirect = WebUtility.UrlDecode(HttpContext.Response.Headers["Location"])};
                 HttpContext.Response.Clear();
                 return Json(returnValue);
             }
+
+            // This get's set by either the HttpRedirectTask or HttpResponseTask
+            if(HttpContext.Items[WorkflowHttpResult.Instance] != null)
+            {
+                // Let the HttpResponseTask control the response. This will fail on the client if it's anything other than json
+                return new EmptyResult();
+            }
             var formSuccessMessage = await _liquidTemplateManager.RenderAsync(formPart.SuccessMessage?.Text, _htmlEncoder);
             formSuccessMessage = await _shortcodeService.ProcessAsync(formSuccessMessage);
             // everything worked fine. send the success signal to the client
-            return Json(new { success = true, successMessage = formSuccessMessage });
+            return Json(new { successMessage = formSuccessMessage });
+        }
+        private Dictionary<string, string[]> GetErrorDictionary()
+        {
+           return ModelState
+                .Where(x => x.Value.Errors.Count > 0)
+                .ToDictionary(
+                    kvp => kvp.Key,
+                    kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).ToArray()
+                );
         }
     }
 }

src/Modules/StatCan.OrchardCore.VueForms/Scripting/VueFormMethodsProvider.cs

@@ -1,7 +1,10 @@
 using System;
 using System.Collections.Generic;
 using AngleSharp.Common;
+using Microsoft.AspNetCore.Mvc.ModelBinding;
+using Microsoft.Extensions.DependencyInjection;
 using OrchardCore.ContentManagement;
+using OrchardCore.DisplayManagement.ModelBinding;
 using OrchardCore.Scripting;
 
 namespace StatCan.OrchardCore.VueForms.Scripting
@@ -11,36 +14,11 @@ namespace StatCan.OrchardCore.VueForms.Scripting
     /// </summary>
     public class VueFormMethodsProvider : IGlobalMethodProvider
     {
-        private readonly GlobalMethod _setModelError;
-        private readonly GlobalMethod _hasErrors;
+
         private readonly GlobalMethod _getFormContentItem;
 
-        public VueFormMethodsProvider(ContentItem form, IDictionary<string, List<string>> errors)
+        public VueFormMethodsProvider(ContentItem form)
         {
-            _setModelError = new GlobalMethod
-            {
-                Name = "addError",
-                Method = serviceProvider =>
-                    (Action<string, string>)((name, text) =>
-                        {
-                            var errorKey = errors.GetOrDefault(name, new List<string>());
-                            errorKey.Add(text);
-                            if (errors.ContainsKey(name))
-                            {
-                                errors[name] = errorKey;
-                            }
-                            else
-                            {
-                                errors.Add(name, errorKey);
-                            }
-                        }
-                    )
-            };
-            _hasErrors = new GlobalMethod
-            {
-                Name = "hasErrors",
-                Method = serviceProvider => (Func<bool>)(() => errors.Count > 0)
-            };
             _getFormContentItem = new GlobalMethod
             {
                 Name = "getFormContentItem",
@@ -50,7 +28,7 @@ public VueFormMethodsProvider(ContentItem form, IDictionary<string, List<string>
 
         public IEnumerable<GlobalMethod> GetMethods()
         {
-            return new[] { _setModelError, _getFormContentItem, _hasErrors };
+            return new[] { _getFormContentItem };
         }
     }
 }

src/Modules/StatCan.OrchardCore.VueForms/Workflows/VueFormSubmittedEvent.cs

@@ -69,15 +69,8 @@ public override ActivityExecutionResult Resume(WorkflowExecutionContext workflow
         private IContent GetForm(WorkflowExecutionContext workflowContext)
         {
            // get the form from the workflow Input or Properties
-            var content = workflowContext.Input.GetValue<IContent>(InputKey)
+            return workflowContext.Input.GetValue<IContent>(InputKey)
                 ?? workflowContext.Properties.GetValue<IContent>(InputKey);
-
-            if (content != null)
-            {
-                return content;
-            }
-
-            return null;
         }
     }
 }