Move message to property and check for previewimage != fallback (Closes #161)

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor

@@ -1,4 +1,5 @@
 @using LinkDotNet.Blog.Domain
+@using Microsoft.EntityFrameworkCore.Metadata.Internal
 @inject IJSRuntime JSRuntime
 
 <h3>@Title</h3>
@@ -7,37 +8,41 @@
     <div class="new-content">
         <EditForm Model="@model" OnValidSubmit="OnValidBlogPostCreatedAsync">
             <DataAnnotationsValidator />
-            <ValidationSummary />
             <div class="mb-3">
                 <label for="title">Title</label>
-                <input class="form-control" id="title"
-                           @oninput="args => model.Title = args.Value.ToString()" value="@model.Title"/>
+	            <input class="form-control" id="title"
+	                   @oninput="args => model.Title = args.Value.ToString()" value="@model.Title"/>
+	            <ValidationMessage For="() => model.Title"></ValidationMessage>
             </div>
             <div class="mb-3">
                 <label for="short">Short Description</label>
                 <TextAreaWithShortcuts Id="short" Class="form-control" Rows="4"
                                        @bind-Value="@model.ShortDescription"></TextAreaWithShortcuts>
-                <small for="short" class="form-text text-muted">You can use markdown to style your component</small>
+	            <small for="short" class="form-text text-muted">You can use markdown to style your component</small>
+	             <ValidationMessage For="() => model.ShortDescription"></ValidationMessage>
             </div>
             <div class="mb-3">
                 <label for="content">Content</label>
                 <TextAreaWithShortcuts Id="content" Class="form-control" Rows="10"
                                        @bind-Value="@model.Content"></TextAreaWithShortcuts>
                 <small for="content" class="form-text text-muted">You can use markdown to style your component. Additional features and keyboard shortcuts are listed <a @onclick="@(() => FeatureDialog.Open())">here</a></small>
                 <UploadFile OnFileUploaded="SetContentFromFile" id="content-upload"></UploadFile>
-                <small for="content-upload" class="form-text text-muted">Drag and drop markdown files to upload and
-                insert them</small>
+	            <small for="content-upload" class="form-text text-muted">Drag and drop markdown files to upload and
+		            insert them</small>
+	            <ValidationMessage For="() => model.Content"></ValidationMessage>
             </div>
             <div class="mb-3">
                 <label for="preview">Preview-Url</label>
                 <InputText class="form-control" id="preview" @bind-Value="model.PreviewImageUrl"/>
                 <small for="preview" class="form-text text-muted">The primary image which will be used.</small>
+                 <ValidationMessage For="() => model.PreviewImageUrl"></ValidationMessage>
             </div>
             <div class="mb-3">
                 <label for="preview">Fallback Preview-Url</label>
                 <InputText class="form-control" id="fallback-preview" @bind-Value="model.PreviewImageUrlFallback"/>
                 <small for="fallback-preview" class="form-text text-muted">Optional: Used as a fallback if the preview image can't be used by the browser.
-                    <br>For example using a jpg or png as fallback for avif which is not supported in Safari or Edge.</small>
+	                <br>For example using a jpg or png as fallback for avif which is not supported in Safari or Edge.</small>
+                 <ValidationMessage For="() => model.PreviewImageUrlFallback"></ValidationMessage>
             </div>
             <div class="form-check">
                 <InputCheckbox class="form-check-input" id="published" @bind-Value="model.IsPublished" />
@@ -141,4 +146,4 @@
             context.PreventNavigation();
         }
     }
-}
+}

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewModel.cs

@@ -97,6 +97,7 @@ public string Tags
     }
 
     [MaxLength(256)]
+    [FallbackUrlValidation]
     public string PreviewImageUrlFallback
     {
         get => previewImageUrlFallback;
@@ -137,4 +138,4 @@ public BlogPost ToBlogPost()
         blogPost.Id = id;
         return blogPost;
     }
-}
+}

src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/FallbackUrlValidationAttribute.cs

@@ -0,0 +1,17 @@
+using System;
+using System.ComponentModel.DataAnnotations;
+
+namespace LinkDotNet.Blog.Web.Features.Admin.BlogPostEditor.Components;
+
+[AttributeUsage(AttributeTargets.Property)]
+public class FallbackUrlValidationAttribute : ValidationAttribute
+{
+    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
+    {
+        var model = validationContext.ObjectInstance as CreateNewModel;
+
+        return model.PreviewImageUrl == model.PreviewImageUrlFallback
+            ? new ValidationResult("Preview image url and the fallback preview image url should not be the same.")
+            : ValidationResult.Success;
+    }
+}

tests/LinkDotNet.Blog.UnitTests/Web/Features/Admin/BlogPostEditor/Components/FallbackUrlValidationAttributeTests.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using LinkDotNet.Blog.Web.Features.Admin.BlogPostEditor.Components;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Features.Admin.BlogPostEditor.Components;
+
+public class FallbackUrlValidationAttributeTests
+{
+    [Fact]
+    public void GivenPreviewImageUrlIsSameAsFallback_WhenValidating_ThenError()
+    {
+        const string url = "https://steven-giesel.com";
+        var model = new CreateNewModel
+        {
+            Title = "Title",
+            ShortDescription = "Desc",
+            Content = "Content",
+            PreviewImageUrl = url,
+            PreviewImageUrlFallback = url,
+        };
+        var validationContext = new ValidationContext(model);
+        var results = new List<ValidationResult>();
+
+        var result = Validator.TryValidateObject(model, validationContext, results, true);
+
+        result.Should().BeFalse();
+        results.Count.Should().Be(1);
+    }
+
+    [Fact]
+    public void GivenPreviewImageUrlIsNotSameAsFallback_WhenValidating_ThenSuccess()
+    {
+        var model = new CreateNewModel
+        {
+            Title = "Title",
+            ShortDescription = "Desc",
+            Content = "Content",
+            PreviewImageUrl = "https://steven-giesel.com",
+            PreviewImageUrlFallback = "https://different.url",
+        };
+        var validationContext = new ValidationContext(model);
+        var results = new List<ValidationResult>();
+
+        var result = Validator.TryValidateObject(model, validationContext, results, true);
+
+        result.Should().BeTrue();
+    }
+}