Merge pull request #17455 from abpframework/issue-17321

CMS Kit: Add reCaptcha to comment edit section if it's enabled
abpframework · Aug 24, 2023 · e388905 · e388905
2 parents faf255b + a84e80c
commit e388905
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 22 deletions.
diff --git a/...olo.CmsKit.Public.Application.Contracts/Volo/CmsKit/Public/Comments/UpdateCommentInput.cs b/...olo.CmsKit.Public.Application.Contracts/Volo/CmsKit/Public/Comments/UpdateCommentInput.cs
@@ -15,4 +15,8 @@ public class UpdateCommentInput : ExtensibleObject, IHasConcurrencyStamp
     public string Text { get; set; }
 
     public string ConcurrencyStamp { get; set; }
+
+    public Guid? CaptchaToken { get; set; }
+
+    public int CaptchaAnswer { get; set; }
 }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicCommentsController.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicCommentsController.cs
@@ -1,7 +1,9 @@
-using System.Threading.Tasks;
+using System;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
+using Volo.Abp;
 using Volo.Abp.AspNetCore.Mvc;
 using Volo.Abp.ObjectMapping;
 using Volo.CmsKit.Comments;
@@ -12,7 +14,7 @@
 namespace Volo.CmsKit.Public.Web.Controllers;
 
 //[Route("cms-kit/public-comments")]
-public class CmsKitPublicCommentsController : AbpController
+public class CmsKitPublicCommentsController : CmsKitPublicControllerBase
 {
     public ICommentPublicAppService CommentPublicAppService { get; }
     protected CmsKitCommentOptions CmsKitCommentOptions { get; }
@@ -31,12 +33,35 @@ public CmsKitPublicCommentsController(
     [HttpPost]
     public virtual async Task ValidateAsync([FromBody] CreateCommentWithParametersInput input)
     {
-        if (CmsKitCommentOptions.IsRecaptchaEnabled && input.CaptchaToken.HasValue)
+        if (CmsKitCommentOptions.IsRecaptchaEnabled)
         {
+            CheckCaptchaTokenNullity(input.CaptchaToken);
+
             SimpleMathsCaptchaGenerator.Validate(input.CaptchaToken.Value, input.CaptchaAnswer);
         }
 
         var dto = ObjectMapper.Map<CreateCommentWithParametersInput, CreateCommentInput> (input);
         await CommentPublicAppService.CreateAsync(input.EntityType, input.EntityId, dto);
     }
+
+    [HttpPost]
+    public virtual async Task UpdateAsync(Guid id, [FromBody] UpdateCommentInput input)
+    {
+        if (CmsKitCommentOptions.IsRecaptchaEnabled)
+        {
+            CheckCaptchaTokenNullity(input.CaptchaToken);
+
+            SimpleMathsCaptchaGenerator.Validate(input.CaptchaToken.Value, input.CaptchaAnswer);
+        }
+
+        await CommentPublicAppService.UpdateAsync(id, input);
+    }
+
+    private void CheckCaptchaTokenNullity(Guid? captchaToken)
+    {
+        if (!captchaToken.HasValue)
+        {
+            throw new UserFriendlyException(L["CaptchaCodeMissingMessage"]);
+        }
+    }
 }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicControllerBase.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicControllerBase.cs
@@ -0,0 +1,12 @@
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.CmsKit.Localization;
+
+namespace Volo.CmsKit.Public.Web.Controllers;
+
+public abstract class CmsKitPublicControllerBase : AbpController
+{
+	public CmsKitPublicControllerBase()
+	{
+		LocalizationResource = typeof(CmsKitResource);
+	}
+}
diff --git a/...s/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicGlobalResourcesController.cs b/...s/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicGlobalResourcesController.cs
@@ -11,7 +11,7 @@
 namespace Volo.CmsKit.Public.Web.Controllers;
 
 [Route("cms-kit/global-resources")]
-public class CmsKitPublicGlobalResourcesController: AbpController
+public class CmsKitPublicGlobalResourcesController : CmsKitPublicControllerBase
 {
     private readonly IGlobalResourcePublicAppService _globalResourcePublicAppService;
     private readonly IDistributedCache<GlobalResourceDto> _resourceCache;

diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicWidgetsController.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Controllers/CmsKitPublicWidgetsController.cs
@@ -7,7 +7,7 @@
 
 namespace Volo.CmsKit.Public.Web.Controllers;
 
-public class CmsKitPublicWidgetsController : AbpController
+public class CmsKitPublicWidgetsController : CmsKitPublicControllerBase
 {
     public Task<IActionResult> ReactionSelection(string entityType, string entityId)
     {

diff --git a/...lo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/CommentingViewComponent.cs b/...lo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/CommentingViewComponent.cs
@@ -80,20 +80,25 @@ public virtual async Task<IViewComponentResult> InvokeAsync(
 
         if (CmsKitCommentOptions.IsRecaptchaEnabled)
         {
-            CaptchaOutput = SimpleMathsCaptchaGenerator.Generate(new CaptchaOptions(
-                    number1MinValue: 1,
-                    number1MaxValue: 10,
-                    number2MinValue: 5,
-                    number2MaxValue: 15)
-                );
+            CaptchaOutput = GetCaptcha();
 
             viewModel.CaptchaImageBase64 = GetCaptchaImageBase64(CaptchaOutput.ImageBytes);
         }
         this.Input = viewModel;
         return View("~/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml", this);
     }
 
-    private string GetCaptchaImageBase64(byte[] bytes)
+    public CaptchaOutput GetCaptcha()
+    {
+        return SimpleMathsCaptchaGenerator.Generate(new CaptchaOptions(
+                number1MinValue: 1,
+                number1MaxValue: 10,
+                number2MinValue: 5,
+                number2MaxValue: 15)
+            );
+    }
+
+    public string GetCaptchaImageBase64(byte[] bytes)
     {
         return $"data:image/jpg;base64,{Convert.ToBase64String(bytes)}";
     }

diff --git a/...s-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml b/...s-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
@@ -39,7 +39,7 @@
                     </div>
                 </div>
                 <div class="mt-0">
-                    <small class="text-muted float-start float-end">@L["MarkdownSupported"]</small>
+                    <small class="text-muted float-end">@L["MarkdownSupported"]</small>
                 </div>
 
                 @if (CmsKitCommentOptions.Value.IsRecaptchaEnabled)
@@ -127,15 +127,32 @@
                             <input name="commentConcurrencyStamp" value="@concurrencyStamp" type="hidden" />
                         </div>
                     </div>
+                    <div class="mt-0">
+                        <small class="text-muted float-end" >@L["MarkdownSupported"]</small>
+                    </div>
+
+                    @if (CmsKitCommentOptions.Value.IsRecaptchaEnabled)
+                    {
+                        var output = Model.GetCaptcha();
+                        <div class="volo-captcha">
+                            <label class="form-label" for="[email protected]">@L["CaptchaCode"]</label>
+                            <div class="d-flex">
+                                <div class="bd-highlight">
+                                    <img src="@Model.GetCaptchaImageBase64(output.ImageBytes)"/>
+                                </div>
+                                <div class="flex-grow-1 bd-highlight">
+                                    <abp-input id="[email protected]" type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off"/>
+                                </div>
+                                <abp-input asp-for="@Model.CaptchaId" value="@output.Id"/>
+                            </div>
+                        </div>
+                    }
                     <div class="col-auto">
                         <div class="text-end">
                             <abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button>
                             <abp-button type="button" button-type="Light" size="Block_Small" class="comment-edit-cancel-button" data-id="@id.ToString()"><i class="fa fa-times me-1"></i>  @L["Cancel"] </abp-button>
                         </div>
                     </div>
-                    <div class="mt-0">
-                        <small class="text-muted float-start" >@L["MarkdownSupported"]</small>
-                    </div>
                 </div>
             </form>
         </div>

diff --git a/...s/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.js b/...s/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.js
@@ -111,14 +111,23 @@
                 $form.submit(function (e) {
                     e.preventDefault();
                     let formAsObject = $form.serializeFormToObject();
-                    volo.cmsKit.public.comments.commentPublic.update(
-                        formAsObject.id,
-                        {
+                    $.ajax({
+                        type: 'POST',
+                        url: '/CmsKitPublicComments/Update/' + formAsObject.id,
+                        contentType: 'application/json; charset=utf-8',
+                        dataType: 'json',
+                        data: JSON.stringify({
                             text: formAsObject.commentText,
-                            concurrencyStamp: formAsObject.commentConcurrencyStamp
+                            concurrencyStamp: formAsObject.commentConcurrencyStamp,
+                            captchaToken: formAsObject.captchaId,
+                            captchaAnswer: formAsObject.input?.captcha
+                        }),
+                        success: function () {
+                            widgetManager.refresh($widget);
+                        },
+                        error: function (data) {
+                            abp.message.error(data.responseJSON.error.message);
                         }
-                    ).then(function () {
-                        widgetManager.refresh($widget);
                     });
                 });
             });