login form validation

Oqtane.Client/Modules/Admin/Login/Index.razor

@@ -11,14 +11,15 @@
 }
 <AuthorizeView>
     <NotAuthorized>
+        <form @ref="login" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
             <div class="container Oqtane-Modules-Admin-Login" @onkeypress="@(e => KeyPressed(e))">
                 <div class="form-group">
                     <label for="Username" class="control-label">@Localizer["Username:"] </label>
-                <input type="text" @ref="username" name="Username" class="form-control username" placeholder="Username" @bind="@_username" id="Username" />
+                    <input type="text" @ref="username" name="Username" class="form-control username" placeholder="Username" @bind="@_username" id="Username" required />
                 </div>
                 <div class="form-group">
                     <label for="Password" class="control-label">@Localizer["Password:"] </label>
-                <input type="password" name="Password" class="form-control password" placeholder="Password" @bind="@_password" id="Password" />
+                    <input type="password" name="Password" class="form-control password" placeholder="Password" @bind="@_password" id="Password" required />
                 </div>
                 <div class="form-group">
                     <div class="form-check form-check-inline">
@@ -31,6 +32,7 @@
                 <br /><br />
                 <button type="button" class="btn btn-secondary" @onclick="Forgot">@Localizer["Forgot Password"]</button>
             </div>
+        </form>
     </NotAuthorized>
 </AuthorizeView>
 
@@ -41,6 +43,9 @@
     private string _username = string.Empty;
     private string _password = string.Empty;
     private bool _remember = false;
+    private bool validated = false;
+
+    private ElementReference login;
     private ElementReference username;
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Anonymous;
@@ -90,6 +95,10 @@
     }
 
     private async Task Login()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(login))
         {
             if (PageState.Runtime == Oqtane.Shared.Runtime.Server)
             {
@@ -104,7 +113,6 @@
                 {
                     await logger.LogInformation("Login Successful For Username {Username}", _username);
                     // complete the login on the server so that the cookies are set correctly on SignalR
-                var interop = new Interop(JSRuntime);
                     string antiforgerytoken = await interop.GetElementByName("__RequestVerificationToken");
                     var fields = new { __RequestVerificationToken = antiforgerytoken, username = _username, password = _password, remember = _remember, returnurl = _returnUrl };
                     await interop.SubmitForm($"/{PageState.Alias.AliasId}/pages/login/", fields);
@@ -112,7 +120,7 @@
                 else
                 {
                     await logger.LogInformation("Login Failed For Username {Username}", _username);
-                AddModuleMessage(Localizer["Login Failed. Please Remember That Passwords Are Case Sensitive And User Accounts Require Email Verification When They Initially Created."], MessageType.Error);
+                    AddModuleMessage(Localizer["Login Failed. Please Remember That Passwords Are Case Sensitive And User Accounts Require Verification When They Are Initially Created So You May Wish To Check Your Email."], MessageType.Error);
                 }
             }
             else
@@ -137,6 +145,11 @@
                 }
             }
         }
+        else
+        {
+            AddModuleMessage(Localizer["Please Provide Your Username And Password"], MessageType.Warning);
+        }
+    }
 
     private void Cancel()
     {

Oqtane.Client/UI/Interop.cs

@@ -1,3 +1,4 @@
+using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System.Threading.Tasks;
 
@@ -232,5 +233,19 @@ namespace Oqtane.UI
                 return Task.CompletedTask;
             }
         }
+
+        public ValueTask<bool> FormValid(ElementReference form)
+        {
+            try
+            {
+                return _jsRuntime.InvokeAsync<bool>(
+                    "Oqtane.Interop.formValid",
+                    form);
+            }
+            catch
+            {
+                return new ValueTask<bool>(Task.FromResult(false));
+            }
+        }
     }
 }

Oqtane.Server/wwwroot/Modules/Templates/External/Client/Modules/[Owner].[Module]/Edit.razor

@@ -73,6 +73,8 @@
     private async Task Save()
     {
         try
+        {
+            if (string.IsNullOrEmpty(_name))
             {
                 if (PageState.Action == "Add")
                 {
@@ -91,6 +93,11 @@
                 }
                 NavigationManager.NavigateTo(NavigateUrl());
             }
+            else
+            {
+                AddModuleMessage("The Name Is Required", MessageType.Warning);
+            }
+        }
         catch (Exception ex)
         {
             await logger.LogError(ex, "Error Saving [Module] {Error}", ex.Message);

Oqtane.Server/wwwroot/js/interop.js

@@ -362,5 +362,8 @@ Oqtane.Interop = {
         setInterval(function () {
             window.location.href = url;
         }, wait * 1000);
+    },
+    formValid: function (formRef) {
+        return formRef.checkValidity();
     }
 };