feature: Validate signup form

strifel · Jul 8, 2024 · 363b064 · 363b064
1 parent fab880c
commit 363b064
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 23 deletions.
diff --git a/Components/Pages/GroupAdd.razor b/Components/Pages/GroupAdd.razor
@@ -13,7 +13,7 @@
 
 @if (!Saved)
 {
-    <EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="group-create-form">
+    <EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="group-add-form">
         <AntiforgeryToken/>
         <div class="form-group">
             <label>

diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor
@@ -1,7 +1,13 @@
 @page "/"
+@implements IDisposable
+
 @using System.Security.Cryptography
+@using System.Text.RegularExpressions
 @using GroupOrder.Data
 @using Microsoft.EntityFrameworkCore
+@using Group = GroupOrder.Data.Group
+
+@rendermode InteractiveServer
 
 @inject IDbContextFactory<GroupContext> DbFactory
 @inject NavigationManager NavigationManager
@@ -10,29 +16,26 @@
 <PageTitle>Mampf.Link</PageTitle>
 
 <main class="form-signin w-100 m-auto">
-    <form method="post" @onsubmit="Submit" @formname="group-create-form">
+    <EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="group-create-form">
+        <AntiforgeryToken/>
         <h1 class="h3 mb-3 fw-normal">Welcome to mampf.link</h1>
         <p>Create a new Group here or use an link to join an existing one.</p><br/><br/>
-        <AntiforgeryToken/>
         <div class="form-floating">
-            <InputText 
-                id="group_name" 
-                placeholder=" " 
-                class="form-control" 
-                required 
+            <InputText
+                id="group_name"
+                placeholder=" "
+                class="form-control"
                 @bind-Value="Model!.GroupName"
-                style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;"
-            />
-            <label for="group_name">Group-Name</label>
+                style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;"/>
+            <label for="group_name">Group-Name:</label>
         </div>
         <div class="form-floating">
-            <InputTextArea 
-                placeholder=" " 
-                id="group_description" 
-                class="form-control" 
+            <InputTextArea
+                placeholder=" "
+                id="group_description"
+                class="form-control"
                 @bind-Value="Model!.Description"
-                style="min-height: 150px; border-radius: 0"
-            />
+                style="min-height: 150px; border-radius: 0"/>
             <label for="group_description">Description (optional):</label>
         </div>
         <div class="form-floating">
@@ -41,19 +44,30 @@
                 id="paypal_username"
                 class="form-control"
                 @bind-Value="Model!.PaypalUsername"
-                style="border-top-left-radius: 0;border-top-right-radius: 0;"
-            />
+                style="border-top-left-radius: 0;border-top-right-radius: 0;"/>
             <label for="paypal_username">Your Paypal Username (optional):</label>
         </div><br/>
+        <div>
+            <ValidationMessage For="() => Model!"/>
+        </div>
         <button class="btn btn-primary" type="submit">Create Group</button>
         <p class="mt-5 mb-3 text-body-secondary"><a href="https://github.com/strifel/mampf.link">Code on Github</a></p>
-    </form>
+    </EditForm>
 </main>
 
 @code {
     [SupplyParameterFromForm] public Group? Model { get; set; }
-
-    protected override void OnInitialized() => Model ??= new();
+    private ValidationMessageStore? messageStore;
+
+    private EditContext? editContext;
+
+    protected override void OnInitialized()
+    {
+        Model ??= new();
+        editContext = new(Model);
+        editContext.OnValidationRequested += HandleValidationRequested;
+        messageStore = new(editContext);
+    }
 
     private void Submit()
     {
@@ -65,5 +79,34 @@
 
         NavigationManager.NavigateTo($"/group/{Model!.GroupSlug}?admin={Model!.AdminCode}");
     }
+
+    private void HandleValidationRequested(object? sender,
+        ValidationRequestedEventArgs args)
+    {
+        messageStore?.Clear();
+
+        if (Model!.GroupName == null || Model!.GroupName!.Length == 0 || Model!.GroupName!.Length > 100)
+        {
+            messageStore?.Add(() => Model!, "You must enter a Name between 1 and 100 chars.");
+        }
+
+        if (Model!.GroupName != null && Model!.Description!.Length > 500)
+        {
+            messageStore?.Add(() => Model!, "Description should be maximum 500 characters");
+        }
+
+        if (Model!.PaypalUsername != null && (Model!.PaypalUsername!.Length > 20 || !new Regex("^[a-zA-Z0-9]+$").IsMatch(Model!.PaypalUsername!)))
+        {
+            messageStore?.Add(() => Model!, "Please enter a valid paypal username");
+        }
+    }
+
+    public void Dispose()
+    {
+        if (editContext is not null)
+        {
+            editContext.OnValidationRequested -= HandleValidationRequested;
+        }
+    }
 
 }
diff --git a/Data/Group.cs b/Data/Group.cs
@@ -23,7 +23,7 @@ public class Group
     [StringLength(500, ErrorMessage = "Description cannot exceed 500 characters.")]
     public string? Description { get; set; }
 
-    [StringLength(30, ErrorMessage = "PaypalUsername cannot exceed 15 characters."), RegularExpression("[a-z0-9-]+", ErrorMessage = "Paypal Username may only contain a-z and numbers.")]
+    [StringLength(30, ErrorMessage = "PaypalUsername cannot exceed 30 characters."), RegularExpression("[a-z0-9-]+", ErrorMessage = "Paypal Username may only contain a-z and numbers.")]
     public string? PaypalUsername { get; set; }
 
     public ICollection<Order> Orders { get; } = new List<Order>();