Update README.md

use PageState.Uri rather than creating a new Uri object

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2020 .NET Foundation
+Copyright (c) 2018-2022 .NET Foundation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Oqtane.Client/App.razor

@@ -12,11 +12,13 @@
     {
         @if (string.IsNullOrEmpty(_installation.Message))
         {
+            <div style="@_display">
                 <CascadingAuthenticationState>
                     <CascadingValue Value="@PageState">
-                    <SiteRouter OnStateChange="@ChangeState" />
+                        <SiteRouter Runtime="@Runtime" RenderMode="@RenderMode" VisitorId="@VisitorId" OnStateChange="@ChangeState" />
                     </CascadingValue>
                 </CascadingAuthenticationState>
+            </div>
         }
         else
         {
@@ -28,17 +30,33 @@
 }
 
 @code {
+	[Parameter]
+	public string AntiForgeryToken { get; set; }
+
+	[Parameter]
+	public string Runtime { get; set; }
+
+	[Parameter]
+	public string RenderMode { get; set; }
+
+	[Parameter]
+	public int VisitorId { get; set; }
+
+	[Parameter]
+	public string RemoteIPAddress { get; set; }
+
 	private bool _initialized = false;
+	private string _display = "display: none;";
 	private Installation _installation = new Installation { Success = false, Message = "" };
 
 	private PageState PageState { get; set; }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+	protected override async Task OnParametersSetAsync()
 	{
-        if (firstRender && !_initialized)
-        {
-            var interop = new Interop(JSRuntime);
-            SiteState.AntiForgeryToken = await interop.GetElementByName(Constants.RequestVerificationToken);
+		SiteState.RemoteIPAddress = RemoteIPAddress;
+		SiteState.AntiForgeryToken = AntiForgeryToken;
+		InstallationService.SetAntiForgeryTokenHeader(AntiForgeryToken);
+
         _installation = await InstallationService.IsInstalled();
         if (_installation.Alias != null)
         {
@@ -49,6 +67,13 @@
             _installation.Message = "Site Not Configured Correctly - No Matching Alias Exists For Host Name";
         }
         _initialized = true;
+    }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _display = "";
             StateHasChanged();
         }
     }

Oqtane.Client/Extensions/OqtaneServiceCollectionExtensions.cs

@@ -46,6 +46,8 @@ namespace Microsoft.Extensions.DependencyInjection
             services.AddScoped<ILocalizationService, LocalizationService>();
             services.AddScoped<ILanguageService, LanguageService>();
             services.AddScoped<IDatabaseService, DatabaseService>();
+            services.AddScoped<IUrlMappingService, UrlMappingService>();
+            services.AddScoped<IVisitorService, VisitorService>();
             services.AddScoped<ISyncService, SyncService>();
 
             return services;

Oqtane.Client/Installer/Controls/LocalDBConfig.razor

@@ -1,41 +1,30 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
-@inject IStringLocalizer<Installer> Localizer
 
-@{
-    foreach (var field in _connectionStringFields)
-    {
-        var fieldId = field.Name.ToLowerInvariant();
-        field.Value = field.Value.Replace("{{Date}}", DateTime.UtcNow.ToString("yyyyMMddHHmm"));
-
-        <tr>
-            <td>
-                <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-            </td>
-            <td>
-                <input id="@fieldId" type="text" class="form-control" @bind="@field.Value" />
-            </td>
-        </tr>
-    }
-}
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="server" HelpText="Enter the database server" ResourceKey="Server">Server:</Label>
+    <div class="col-sm-9">
+        <input id="server" type="text" class="form-control" @bind="@_server" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="database" HelpText="Enter the name of the database" ResourceKey="Database">Database:</Label>
+    <div class="col-sm-9">
+        <input id="database" type="text" class="form-control" @bind="@_database" />
+    </div>
+</div>
 
 @code {
-    private readonly List<ConnectionStringField> _connectionStringFields = new()
-    {
-        new() {Name = "Server", FriendlyName = "Server", Value = "(LocalDb)\\MSSQLLocalDB", HelpText="Enter the database server"},
-        new() {Name = "Database", FriendlyName = "Database", Value = "Oqtane-{{Date}}", HelpText="Enter the name of the database"}
-    };
+    private string _server = "(LocalDb)\\MSSQLLocalDB";
+    private string _database = "Oqtane-" + DateTime.UtcNow.ToString("yyyyMMddHHmm");
 
     public string GetConnectionString()
     {
         var connectionString = String.Empty;
 
-        var server = _connectionStringFields[0].Value;
-        var database = _connectionStringFields[1].Value;
-
-        if (!String.IsNullOrEmpty(server)  && !String.IsNullOrEmpty(database))
+        if (!String.IsNullOrEmpty(_server) && !String.IsNullOrEmpty(_database))
         {
-            connectionString = $"Data Source={server};AttachDbFilename=|DataDirectory|\\{database}.mdf;Initial Catalog={database};Integrated Security=SSPI;";
+            connectionString = $"Data Source={_server};AttachDbFilename=|DataDirectory|\\{_database}.mdf;Initial Catalog={_database};Integrated Security=SSPI;Encrypt=false;";
         }
 
         return connectionString;

Oqtane.Client/Installer/Controls/MySQLConfig.razor

@@ -1,54 +1,58 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
-@inject IStringLocalizer<Installer> Localizer
 
-@{
-    foreach (var field in _connectionStringFields)
-    {
-        var fieldId = field.Name.ToLowerInvariant();
-        var fieldType = (field.Name == "Pwd") ? "password" : "text";
-        field.Value = field.Value.Replace("{{Date}}", DateTime.UtcNow.ToString("yyyyMMddHHmm"));
-            
-        <tr>
-            <td>
-                <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-            </td>
-            <td>
-                <input id="@fieldId" type="@fieldType" class="form-control" @bind="@field.Value" />
-            </td>
-        </tr>
-    }
-}
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="server" HelpText="Enter the database server" ResourceKey="Server">Server:</Label>
+    <div class="col-sm-9">
+        <input id="server" type="text" class="form-control" @bind="@_server" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="port" HelpText="Enter the port used to connect to the server" ResourceKey="Port">Port:</Label>
+    <div class="col-sm-9">
+        <input id="port" type="text" class="form-control" @bind="@_port" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="database" HelpText="Enter the name of the database" ResourceKey="Database">Database:</Label>
+    <div class="col-sm-9">
+        <input id="database" type="text" class="form-control" @bind="@_database" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="uid" HelpText="Enter the username to use for the database" ResourceKey="Uid">User Id:</Label>
+    <div class="col-sm-9">
+        <input id="uid" type="text" class="form-control" @bind="@_uid" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="pwd" HelpText="Enter the password to use for the database" ResourceKey="Pwd">Password:</Label>
+    <div class="col-sm-9">
+        <input id="pwd" type="password" class="form-control" @bind="@_pwd" />
+    </div>
+</div>
 
 @code {
-    private readonly List<ConnectionStringField> _connectionStringFields = new()
-    {
-        new() {Name = "Server", FriendlyName = "Server", Value = "127.0.0.1", HelpText="Enter the database server"},
-        new() {Name = "Port", FriendlyName = "Port", Value = "3306", HelpText="Enter the port used to connect to the server"},
-        new() {Name = "Database", FriendlyName = "Database", Value = "Oqtane-{{Date}}", HelpText="Enter the name of the database"},
-        new() {Name = "Uid", FriendlyName = "User Id", Value = "", HelpText="Enter the username to use for the database"},
-        new() {Name = "Pwd", FriendlyName = "Password", Value = "", HelpText="Enter the password to use for the database"}
-    };
+    private string _server = "127.0.0.1";
+    private string _port = "3306";
+    private string _database = "Oqtane-" + DateTime.UtcNow.ToString("yyyyMMddHHmm");
+    private string _uid = String.Empty;
+    private string _pwd = String.Empty;
 
     public string GetConnectionString()
     {
         var connectionString = String.Empty;
 
-        var server = _connectionStringFields[0].Value;
-        var port = _connectionStringFields[1].Value;
-        var database = _connectionStringFields[2].Value;
-        var userId = _connectionStringFields[3].Value;
-        var password = _connectionStringFields[4].Value;
-
-        if (!String.IsNullOrEmpty(server) && !String.IsNullOrEmpty(database) && !String.IsNullOrEmpty(userId) && !String.IsNullOrEmpty(password))
+        if (!String.IsNullOrEmpty(_server) && !String.IsNullOrEmpty(_database) && !String.IsNullOrEmpty(_uid) && !String.IsNullOrEmpty(_pwd))
         {
-            connectionString = $"Server={server};Database={database};Uid={userId};Pwd={password};";
+            connectionString = $"Server={_server};Database={_database};Uid={_uid};Pwd={_pwd};";
         }
 
-        if (!String.IsNullOrEmpty(port))
+        if (!String.IsNullOrEmpty(_port))
         {
-            connectionString += $"Port={port};";
+            connectionString += $"Port={_port};";
         }
+
         return connectionString;
     }
 }

Oqtane.Client/Installer/Controls/PostgreSQLConfig.razor

@@ -1,89 +1,76 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
-@inject IStringLocalizer<Installer> Localizer
-@inject IStringLocalizer<SharedResources> SharedLocalizer
+@inject IStringLocalizer<PostgreSQLConfig> Localizer
 
-@{
-    foreach (var field in _connectionStringFields)
-    {
-        var fieldId = field.Name.ToLowerInvariant();
-        if (field.Name != "IntegratedSecurity")
-        {
-            var isVisible = "";
-            var fieldType = (field.Name == "Pwd") ? "password" : "text";
-            if ((field.Name == "Uid" || field.Name == "Pwd"))
-            {
-                var intSecurityField = _connectionStringFields.Single(f => f.Name == "IntegratedSecurity");
-                if (intSecurityField != null)
-                {
-                    isVisible = (Convert.ToBoolean(intSecurityField.Value)) ? "display: none;" : "";
-                }
-            }
-
-            field.Value = field.Value.Replace("{{Date}}", DateTime.UtcNow.ToString("yyyyMMddHHmm"));
-
-            <tr style="@isVisible">
-                <td>
-                    <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-                </td>
-                <td>
-                    <input id="@fieldId" type="@fieldType" class="form-control" @bind="@field.Value" />
-                </td>
-            </tr>
-        }
-        else
-        {
-            <tr>
-                <td>
-                    <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-                </td>
-                <td>
-                    <select id="@fieldId" class="custom-select" @bind="@field.Value">
-                        <option value="true" selected>@SharedLocalizer["True"]</option>
-                        <option value="false">@SharedLocalizer["False"]</option>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="server" HelpText="Enter the database server" ResourceKey="Server">Server:</Label>
+    <div class="col-sm-9">
+        <input id="server" type="text" class="form-control" @bind="@_server" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="port" HelpText="Enter the port used to connect to the server" ResourceKey="Port">Port:</Label>
+    <div class="col-sm-9">
+        <input id="port" type="text" class="form-control" @bind="@_port" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="database" HelpText="Enter the name of the database" ResourceKey="Database">Database:</Label>
+    <div class="col-sm-9">
+        <input id="database" type="text" class="form-control" @bind="@_database" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="security" HelpText="Select your security method" ResourceKey="Security">Security:</Label>
+    <div class="col-sm-9">
+        <select id="security" class="form-select custom-select" @bind="@_security">
+            <option value="integrated" selected>@Localizer["Integrated"]</option>
+            <option value="custom">@Localizer["Custom"]</option>
         </select>
-                </td>
-            </tr>
-        }
-    }
+    </div>
+</div>
+@if (_security == "custom")
+{
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="uid" HelpText="Enter the username to use for the database" ResourceKey="Uid">User Id:</Label>
+        <div class="col-sm-9">
+            <input id="uid" type="text" class="form-control" @bind="@_uid" />
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="pwd" HelpText="Enter the password to use for the database" ResourceKey="Pwd">Password:</Label>
+        <div class="col-sm-9">
+            <input id="pwd" type="password" class="form-control" @bind="@_pwd" />
+        </div>
+    </div>
 }
 
 @code {
-    private readonly List<ConnectionStringField> _connectionStringFields = new()
-    {
-            new() { Name = "Server", FriendlyName = "Server", Value = "127.0.0.1", HelpText = "Enter the database server" },
-            new() { Name = "Port", FriendlyName = "Port", Value = "5432", HelpText = "Enter the port used to connect to the server" },
-            new() { Name = "Database", FriendlyName = "Database", Value = "Oqtane-{{Date}}", HelpText = "Enter the name of the database" },
-            new() { Name = "IntegratedSecurity", FriendlyName = "Integrated Security", Value = "true", HelpText = "Select if you want integrated security or not" },
-            new() { Name = "Uid", FriendlyName = "User Id", Value = "", HelpText = "Enter the username to use for the database" },
-            new() { Name = "Pwd", FriendlyName = "Password", Value = "", HelpText = "Enter the password to use for the database" }
-        };
+    private string _server = "127.0.0.1";
+    private string _port = "5432";
+    private string _database = "Oqtane-" + DateTime.UtcNow.ToString("yyyyMMddHHmm");
+    private string _security = "integrated";
+    private string _uid = String.Empty;
+    private string _pwd = String.Empty;
 
     public string GetConnectionString()
     {
         var connectionString = String.Empty;
 
-        var server = _connectionStringFields[0].Value;
-        var port = _connectionStringFields[1].Value;
-        var database = _connectionStringFields[2].Value;
-        var integratedSecurity = Boolean.Parse(_connectionStringFields[3].Value);
-        var userId = _connectionStringFields[4].Value;
-        var password = _connectionStringFields[5].Value;
-
-        if (!String.IsNullOrEmpty(server) && !String.IsNullOrEmpty(database) && !String.IsNullOrEmpty(port))
+        if (!String.IsNullOrEmpty(_server) && !String.IsNullOrEmpty(_database) && !String.IsNullOrEmpty(_port))
         {
-            connectionString = $"Server={server};Port={port};Database={database};";
+            connectionString = $"Server={_server};Port={_port};Database={_database};";
         }
 
-        if (integratedSecurity)
+        if (_security == "integrated")
         {
             connectionString += "Integrated Security=true;";
         }
         else
         {
-            if (!String.IsNullOrEmpty(userId) && !String.IsNullOrEmpty(password))
+            if (!String.IsNullOrEmpty(_uid) && !String.IsNullOrEmpty(_pwd))
             {
-                connectionString += $"User ID={userId};Password={password};";
+                connectionString += $"User ID={_uid};Password={_pwd};";
             }
             else
             {

Oqtane.Client/Installer/Controls/SqlServerConfig.razor

@@ -1,95 +1,95 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
-@inject IStringLocalizer<Installer> Localizer
+@inject IStringLocalizer<SqlServerConfig> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-@{
-    foreach (var field in _connectionStringFields)
-    {
-        var fieldId = field.Name.ToLowerInvariant();
-        if (field.Name != "IntegratedSecurity")
-        {
-            var isVisible = "";
-            var fieldType = (field.Name == "Pwd") ? "password" : "text";
-            if ((field.Name == "Uid" || field.Name == "Pwd"))
-            {
-                var intSecurityField = _connectionStringFields.Single(f => f.Name == "IntegratedSecurity");
-                if (intSecurityField != null)
-                {
-                    isVisible = (Convert.ToBoolean(intSecurityField.Value)) ? "display: none;" : "";
-                }
-            }
-
-            field.Value = field.Value.Replace("{{Date}}", DateTime.UtcNow.ToString("yyyyMMddHHmm"));
-
-            <tr style="@isVisible">
-                <td>
-                    <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-                </td>
-                <td>
-                    <input id="@fieldId" type="@fieldType" class="form-control" @bind="@field.Value" />
-                </td>
-            </tr>
-        }
-        else
-        {
-            <tr>
-                <td>
-                    <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-                </td>
-                <td>
-                    <select id="@fieldId" class="custom-select" @bind="@field.Value">
-                        <option value="true" selected>@SharedLocalizer["True"]</option>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="server" HelpText="Enter the database server" ResourceKey="Server">Server:</Label>
+    <div class="col-sm-9">
+        <input id="server" type="text" class="form-control" @bind="@_server" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="database" HelpText="Enter the name of the database" ResourceKey="Database">Database:</Label>
+    <div class="col-sm-9">
+        <input id="database" type="text" class="form-control" @bind="@_database" />
+    </div>
+</div>
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="security" HelpText="Select your security method" ResourceKey="Security">Security:</Label>
+    <div class="col-sm-9">
+        <select id="security" class="form-select custom-select" @bind="@_security">
+            <option value="integrated" selected>@Localizer["Integrated"]</option>
+            <option value="custom">@Localizer["Custom"]</option>
+        </select>
+    </div>
+</div>
+@if (_security == "custom")
+{
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="uid" HelpText="Enter the username to use for the database" ResourceKey="Uid">User Id:</Label>
+        <div class="col-sm-9">
+            <input id="uid" type="text" class="form-control" @bind="@_uid" />
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="pwd" HelpText="Enter the password to use for the database" ResourceKey="Pwd">Password:</Label>
+        <div class="col-sm-9">
+            <input id="pwd" type="password" class="form-control" @bind="@_pwd" />
+        </div>
+    </div>
+}
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="encryption" HelpText="Specify if you are using an encrypted database connection. It is highly recommended to use encryption in a production environment." ResourceKey="Encryption">Encryption:</Label>
+    <div class="col-sm-9">
+        <select id="encryption" class="form-select custom-select" @bind="@_encryption">
+            <option value="true">@SharedLocalizer["True"]</option>
             <option value="false">@SharedLocalizer["False"]</option>
         </select>
-                </td>
-            </tr>
-        }
-    }
+    </div>
+</div>
+@if (_encryption == "true")
+{
+	<div class="row mb-1 align-items-center">
+		<Label Class="col-sm-3" For="trustservercertificate" HelpText="Specify the type of certificate you are using for encryption" ResourceKey="TrustServerCertificate">Certificate:</Label>
+		<div class="col-sm-9">
+			<select id="encryption" class="form-select custom-select" @bind="@_trustservercertificate">
+				<option value="true">@Localizer["Self Signed"]</option>
+				<option value="false">@Localizer["Verifiable"]</option>
+			</select>
+		</div>
+	</div>
 }
 
 @code {
-    private readonly List<ConnectionStringField> _connectionStringFields = new()
-    {
-            new() { Name = "Server", FriendlyName = "Server", Value = ".", HelpText = "Enter the database server" },
-            new() { Name = "Database", FriendlyName = "Database", Value = "Oqtane-{{Date}}", HelpText = "Enter the name of the database" },
-            new() { Name = "IntegratedSecurity", FriendlyName = "Integrated Security", Value = "true", HelpText = "Select if you want integrated security or not" },
-            new() { Name = "Uid", FriendlyName = "User Id", Value = "", HelpText = "Enter the username to use for the database" },
-            new() { Name = "Pwd", FriendlyName = "Password", Value = "", HelpText = "Enter the password to use for the database" }
-        };
+    private string _server = String.Empty;
+    private string _database = "Oqtane-" + DateTime.UtcNow.ToString("yyyyMMddHHmm");
+    private string _security = "integrated";
+    private string _uid = String.Empty;
+    private string _pwd = String.Empty;
+    private string _encryption = "false";
+    private string _trustservercertificate = "false";
 
     public string GetConnectionString()
     {
         var connectionString = String.Empty;
 
-        var server = _connectionStringFields[0].Value;
-        var database = _connectionStringFields[1].Value;
-        var integratedSecurity = Boolean.Parse(_connectionStringFields[2].Value);
-        var userId = _connectionStringFields[3].Value;
-        var password = _connectionStringFields[4].Value;
-
-        if (!String.IsNullOrEmpty(server) && !String.IsNullOrEmpty(database))
+        if (!String.IsNullOrEmpty(_server) && !String.IsNullOrEmpty(_database))
         {
-            connectionString = $"Data Source={server};Initial Catalog={database};";
+            connectionString = $"Data Source={_server};Initial Catalog={_database};";
         }
 
-        if (integratedSecurity)
+        if (_security == "integrated")
         {
             connectionString += "Integrated Security=SSPI;";
         }
         else
         {
-            if (!String.IsNullOrEmpty(userId) && !String.IsNullOrEmpty(password))
-            {
-                connectionString += $"User ID={userId};Password={password};";
-            }
-            else
-            {
-                connectionString = String.Empty;
-            }
+            connectionString += $"User ID={_uid};Password={_pwd};";
         }
+		connectionString += $"Encrypt={_encryption};";
+		connectionString += $"TrustServerCertificate={_trustservercertificate};";
 
         return connectionString;
     }
-
 }

Oqtane.Client/Installer/Controls/SqliteConfig.razor

@@ -1,39 +1,23 @@
 @namespace Oqtane.Installer.Controls
 @implements Oqtane.Interfaces.IDatabaseConfigControl
-@inject IStringLocalizer<Installer> Localizer
 
-@{
-    foreach (var field in _connectionStringFields)
-    {        
-        var fieldId = field.Name.ToLowerInvariant();
-        field.Value = field.Value.Replace("{{Date}}", DateTime.UtcNow.ToString("yyyyMMddHHmm"));
-        
-        <tr>
-            <td>
-                <Label For="@fieldId" HelpText="@field.HelpText" ResourceKey="@field.Name">@Localizer[$"{field.FriendlyName}:"]</Label>
-            </td>
-            <td>
-                <input id="@fieldId" type="text" class="form-control" @bind="@field.Value" />
-            </td>
-        </tr>
-    }
-}
+<div class="row mb-1 align-items-center">
+    <Label Class="col-sm-3" For="server" HelpText="Enter the file name to use for the database" ResourceKey="Server">File Name:</Label>
+    <div class="col-sm-9">
+        <input id="server" type="text" class="form-control" @bind="@_server" />
+    </div>
+</div>
 
 @code {
-    private readonly List<ConnectionStringField> _connectionStringFields = new()
-    {
-        new() {Name = "Server", FriendlyName = "File Name", Value = "Oqtane-{{Date}}.db", HelpText="Enter the file name to use for the database"}
-    };
+    private string _server = "Oqtane-" + DateTime.UtcNow.ToString("yyyyMMddHHmm") + ".db";
 
     public string GetConnectionString()
     {
         var connectionstring = String.Empty;
 
-        var server = _connectionStringFields[0].Value;
-
-        if (!String.IsNullOrEmpty(server))
+        if (!String.IsNullOrEmpty(_server))
         {
-            connectionstring = $"Data Source={server};";
+            connectionstring = $"Data Source={_server};";
         }
 
         return connectionstring;

Oqtane.Client/Installer/Installer.razor

@@ -20,17 +20,14 @@
     <div class="row justify-content-center">
         <div class="col text-center">
             <h2>@Localizer["DatabaseConfig"]</h2><br />
-            <table class="form-group" cellpadding="4" cellspacing="4" style="margin: auto;">
-                <tbody>
-                    <tr>
-                        <td>
-                            <Label For="databasetype" HelpText="Select the type of database you wish to create" ResourceKey="DatabaseType">Database Type:</Label>
-                        </td>
-                        <td>
-                            <select id="databasetype" class="custom-select" value="@_databaseName" @onchange="(e => DatabaseChanged(e))">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="databasetype" HelpText="Select the type of database you wish to use" ResourceKey="DatabaseType">Database:</Label>
+                    <div class="col-sm-9">
                         @if (_databases != null)
                         {
-                                    foreach (var database in _databases)
+							<select id="databasetype" class="form-select custom-select" value="@_databaseName" @onchange="(e => DatabaseChanged(e))">
+                                @foreach (var database in _databases)
                                 {
                                     if (database.IsDefault)
                                     {
@@ -41,57 +38,46 @@
                                         <option value="@database.Name">@Localizer[@database.Name]</option>
                                     }
                                 }
-                                }
 							</select>
-                        </td>
-                    </tr>
+                        }
+                    </div>
+                </div>
                 @{
                     if (_databaseConfigType != null)
                     {
                         @DatabaseConfigComponent;
                     }
                 }
-                </tbody>
-            </table>
+            </div>
         </div>
         <div class="col text-center">
             <h2>@Localizer["ApplicationAdmin"]</h2><br />
-            <table class="form-group" cellpadding="4" cellspacing="4" style="margin: auto;">
-                <tbody>
-                    <tr>
-                        <td>
-                            <Label For="username" HelpText="The username of the host user account ( this is not customizable )" ResourceKey="Username">Username:</Label>
-                        </td>
-                        <td>
-                            <input id="username" type="text" class="form-control" @bind="@_hostUsername" readonly />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="password" HelpText="Provide the password for the host user account" ResourceKey="Password">Password:</Label>
-                        </td>
-                        <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="Provide a username for the primary user accountt" ResourceKey="Username">Username:</Label>
+                    <div class="col-sm-9">
+                        <input id="username" type="text" class="form-control" @bind="@_hostUsername" />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="Provide a password for the primary user account" ResourceKey="Password">Password:</Label>
+                    <div class="col-sm-9">
                         <input id="password" type="password" class="form-control" @bind="@_hostPassword" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="confirm" HelpText="Please confirm the password entered above by entering it again" ResourceKey="Confirm">Confirm:</Label>
-                        </td>
-                        <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="Please confirm the password entered above by entering it again" ResourceKey="Confirm">Confirm:</Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@_confirmPassword" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="email" HelpText="Provide the email address for the host user account" ResourceKey="Email">Email:</Label>
-                        </td>
-                        <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="Provide the email address for the host user account" ResourceKey="Email">Email:</Label>
+                    <div class="col-sm-9">
                         <input type="text" class="form-control" @bind="@_hostEmail" />
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <hr class="app-rule" />
@@ -111,12 +97,12 @@
 
 @code {
 	private List<Database> _databases;
-    private string _databaseName = "LocalDB";
+	private string _databaseName;
 	private Type _databaseConfigType;
 	private object _databaseConfig;
 	private RenderFragment DatabaseConfigComponent { get; set; }
 
-    private string _hostUsername = UserNames.Host;
+	private string _hostUsername = string.Empty;
 	private string _hostPassword = string.Empty;
 	private string _confirmPassword = string.Empty;
 	private string _hostEmail = string.Empty;
@@ -127,6 +113,14 @@
 	protected override async Task OnInitializedAsync()
 	{
 		_databases = await DatabaseService.GetDatabasesAsync();
+		if (_databases.Exists(item => item.IsDefault))
+		{
+			_databaseName = _databases.Find(item => item.IsDefault).Name;
+		}
+		else
+		{
+			_databaseName = "LocalDB";
+		}
         LoadDatabaseConfigComponent();
     }
 
@@ -164,7 +158,8 @@
         if (firstRender)
         {
             var interop = new Interop(JSRuntime);
-            await interop.IncludeLink("app-stylesheet", "stylesheet", "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", "text/css", "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", "anonymous", "");
+            await interop.IncludeLink("", "stylesheet", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css", "text/css", "sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==", "anonymous", "");
+            await interop.IncludeScript("", "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js", "sha512-pax4MlgXjHEPfCwcJLQhigY7+N8rt6bVvWLFyUMuxShv170X53TRzGPmPkZmGBhk+jikR8WBM4yl7A9WMHHqvg==", "anonymous", "", "head", "");
         }
     }
 
@@ -176,7 +171,7 @@
             connectionString = databaseConfigControl.GetConnectionString();
         }
 
-        if (connectionString != "" && _hostUsername != "" && _hostPassword.Length >= 6 && _hostPassword == _confirmPassword && _hostEmail != "" && _hostEmail.Contains("@"))
+        if (connectionString != "" && !string.IsNullOrEmpty(_hostUsername) && _hostPassword.Length >= 6 && _hostPassword == _confirmPassword && !string.IsNullOrEmpty(_hostEmail) && _hostEmail.Contains("@"))
         {
             _loadingDisplay = "";
             StateHasChanged();
@@ -190,9 +185,10 @@
                 DatabaseType = database.DBType,
                 ConnectionString = connectionString,
                 Aliases = uri.Authority,
-                HostEmail = _hostEmail,
+                HostUsername = _hostUsername,
                 HostPassword = _hostPassword,
-                HostName = UserNames.Host,
+                HostEmail = _hostEmail,
+                HostName = _hostUsername,
                 TenantName = TenantNames.Master,
                 IsNewTenant = true,
                 SiteName = Constants.DefaultSite,
@@ -215,5 +211,4 @@
             _message = Localizer["Message.Require.DbInfo"];
         }
     }
-
 }

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

@@ -27,6 +27,6 @@
     protected override void OnInitialized()
     {
         var admin = PageState.Pages.FirstOrDefault(item => item.Path == "admin");
-        _pages = PageState.Pages.Where(item => item.ParentId == admin?.PageId).ToList();
+        _pages = PageState.Pages.Where(item => item.ParentId == admin?.PageId && !item.IsDeleted).ToList();
     }
 }

Oqtane.Client/Modules/Admin/Files/Add.razor

@@ -9,55 +9,60 @@
 
 <TabStrip>
     <TabPanel Name="Upload" Heading="Upload Files" ResourceKey="UploadFiles">
-        <table class="table table-borderless">
-            <tr>
-                <td>
-                    <Label For="upload" HelpText="Upload the file you want" ResourceKey="Upload">Upload: </Label>
-                </td>
-                <td>
-                    <FileManager UploadMultiple="true" ShowFiles="false" FolderId="@_folderId" />
-                </td>
-            </tr>
-        </table>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="upload" HelpText="Upload the file you want" ResourceKey="Upload">Upload: </Label>
+                <div class="col-sm-9">
+                    <FileManager UploadMultiple="true" ShowFiles="false" FolderId="@_folderId" ShowSuccess="true" />
+                </div>
+            </div>
+        </div>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
     </TabPanel>
     <TabPanel Name="Download" Heading="Download Files" ResourceKey="DownloadFiles">
         @if (_folders != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td>
-                        <Label For="url" HelpText="Enter the url of the file you wish to download" ResourceKey="Url">Url: </Label>
-                    </td>
-                    <td>
-                        <input id="url" class="form-control" @bind="@url" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="folder" HelpText="Select the folder to save the file in" ResourceKey="Folder">Folder: </Label>
-                    </td>
-                    <td>
-                        <select id="folder" class="form-select" @bind="@_folderId">
+            <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="url" HelpText="Enter the url of the file you wish to download" ResourceKey="Url">Url: </Label>
+                        <div class="col-sm-9">
+                            <input id="url" class="form-control" @bind="@_url" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="folder" HelpText="Select the folder to save the file in" ResourceKey="Folder">Folder: </Label>
+                        <div class="col-sm-9">
+                            <select id="folder" class="form-select" @bind="@_folderId" required>
                                 <option value="-1">&lt;@Localizer["Folder.Select"]&gt;</option>
                                 @foreach (Folder folder in _folders)
                                 {
                                     <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                                 }
                             </select>
-                    </td>
-                </tr>
-            </table>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="name" HelpText="Enter the name of the file being downloaded" ResourceKey="Name">Name: </Label>
+                        <div class="col-sm-9">
+                            <input id="name" class="form-control" @bind="@_name" />
+                        </div>
+                    </div>
+                </div>
                 <button type="button" class="btn btn-success" @onclick="Download">@SharedLocalizer["Download"]</button>
                 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+            </form>
         }
     </TabPanel>
 </TabStrip>
 
 @code {
-    private string url = string.Empty;
+    private ElementReference form;
+    private bool validated = false;
+    private string _url = string.Empty;
     private List<Folder> _folders;
     private int _folderId = -1;
+    private string _name = "";
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
 
@@ -73,22 +78,28 @@
 
     private async Task Download()
     {
-        if (url == string.Empty || _folderId == -1)
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
+        {
+            if (_url == string.Empty || _folderId == -1)
             {
                 AddModuleMessage(Localizer["Message.Required.UrlFolder"], MessageType.Warning);
                 return;
             }
 
-        var filename = url.Substring(url.LastIndexOf("/", StringComparison.Ordinal) + 1);
+            if (string.IsNullOrEmpty(_name))
+            {
+                _name = _url.Substring(_url.LastIndexOf("/", StringComparison.Ordinal) + 1);
+            }
 
-        if (!Constants.UploadableFiles.Split(',')
-                .Contains(Path.GetExtension(filename).ToLower().Replace(".", "")))
+            if (!Constants.UploadableFiles.Split(',').Contains(Path.GetExtension(_name).ToLower().Replace(".", "")))
             {
                 AddModuleMessage(Localizer["Message.Download.InvalidExtension"], MessageType.Warning);
                 return;
             }
 
-        if (!filename.IsPathOrFileValid())
+            if (!_name.IsPathOrFileValid())
             {
                 AddModuleMessage(Localizer["Message.Required.UrlName"], MessageType.Warning);
                 return;
@@ -96,14 +107,19 @@
 
             try
             {
-            await FileService.UploadFileAsync(url, _folderId);
-            await logger.LogInformation("File Downloaded Successfully From Url {Url}", url);
+                await FileService.UploadFileAsync(_url, _folderId, _name);
+                await logger.LogInformation("File Downloaded Successfully From Url {Url}", _url);
                 AddModuleMessage(Localizer["Success.Download.File"], MessageType.Success);
             }
             catch (Exception ex)
             {
-            await logger.LogError(ex, "Error Downloading File From Url {Url} {Error}", url, ex.Message);
+                await logger.LogError(ex, "Error Downloading File From Url {Url} {Error}", _url, ex.Message);
                 AddModuleMessage(Localizer["Error.Download.InvalidUrl"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

Oqtane.Client/Modules/Admin/Files/Details.razor

@@ -8,49 +8,54 @@
 
 @if (_folders != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label for="name" HelpText="The name of the file" ResourceKey="Name">Name: </Label>
-            </td>
-            <td>
-                <input id="name" class="form-control" @bind="@_name" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="parent" HelpText="The folder where the file is located" ResourceKey="Folder">Folder: </Label>
-            </td>
-            <td>
-                <select id="parent" class="form-select" @bind="@_folderId">
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="name" HelpText="The name of the file" ResourceKey="Name">Name: </Label>
+                <div class="col-sm-9">
+                    <input id="name" class="form-control" @bind="@_name" maxlength="50" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="parent" HelpText="The folder where the file is located" ResourceKey="Folder">Folder: </Label>
+                <div class="col-sm-9">
+                    <select id="parent" class="form-select" @bind="@_folderId" required>
                         @foreach (Folder folder in _folders)
                         {
                             <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label for="size" HelpText="The size of the file (in bytes)" ResourceKey="Size">Size: </Label>
-            </td>
-            <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="description" HelpText="A description of the file. This can be used as a caption for image files." ResourceKey="Description">Description: </Label>
+                <div class="col-sm-9">
+                    <input id="description" class="form-control" @bind="@_description" />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="size" HelpText="The size of the file (in bytes)" ResourceKey="Size">Size: </Label>
+                <div class="col-sm-9">
                     <input id="size" class="form-control" @bind="@_size" readonly />
-            </td>
-        </tr>
-    </table>
+                </div>
+            </div>
+        </div>
         <button type="button" class="btn btn-success" @onclick="SaveFile">@SharedLocalizer["Save"]</button>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
         <br />
         <br />
         <AuditInfo CreatedBy="@_createdBy" CreatedOn="@_createdOn" ModifiedBy="@_modifiedBy" ModifiedOn="@_modifiedOn"></AuditInfo>
+    </form>
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private int _fileId = -1;
     private string _name;
     private List<Folder> _folders;
     private int _folderId = -1;
+    private string _description = string.Empty;
     private int _size;
     private string _createdBy;
     private DateTime _createdOn;
@@ -72,6 +77,7 @@
             {
                 _name = file.Name;
                 _folderId = file.FolderId;
+                _description = file.Description;
                 _size = file.Size;
                 _createdBy = file.CreatedBy;
                 _createdOn = file.CreatedOn;
@@ -87,6 +93,10 @@
     }
 
     private async Task SaveFile()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -95,6 +105,7 @@
                     File file = await FileService.GetFileAsync(_fileId);
                     file.Name = _name;
                     file.FolderId = _folderId;
+                    file.Description = _description;
                     file = await FileService.UpdateFileAsync(file);
                     await logger.LogInformation("File Saved {File}", file);
                     NavigationManager.NavigateTo(NavigateUrl());
@@ -110,4 +121,9 @@
                 AddModuleMessage(Localizer["Error.File.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

Oqtane.Client/Modules/Admin/Files/Edit.razor

@@ -8,13 +8,12 @@
 
 @if (_folders != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="parent" HelpText="Select the parent folder" ResourceKey="Parent">Parent: </Label>
-            </td>
-            <td>
-                <select id="parent" class="form-select" @bind="@_parentId">
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="parent" HelpText="Select the parent folder" ResourceKey="Parent">Parent: </Label>
+                <div class="col-sm-9">
+                    <select id="parent" class="form-select" @bind="@_parentId" required>
                         @if (PageState.QueryString.ContainsKey("id"))
                         {
                             <option value="-1">&lt;@Localizer["NoParent"]&gt;</option>
@@ -24,41 +23,52 @@
                             <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label for="name" HelpText="Enter the folder name" ResourceKey="Name">Name: </Label>
-            </td>
-            <td>
-                <input id="name" class="form-control" @bind="@_name" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label for="type" HelpText="Select the folder type. Private folders are only accessible by authorized users. Public folders can be accessed by all users" ResourceKey="Name">Type: </Label>
-            </td>
-            <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="name" HelpText="Enter the folder name" ResourceKey="Name">Name: </Label>
+                <div class="col-sm-9">
+                    <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="type" HelpText="Select the folder type. Private folders are only accessible by authorized users. Public folders can be accessed by all users" ResourceKey="Type">Type: </Label>
+                <div class="col-sm-9">
                     @if (PageState.QueryString.ContainsKey("id"))
                     {
                         <input id="type" class="form-control" readonly @bind="@_type" />
                     }
                     else
                     {
-                    <select id="type" class="form-select" @bind="@_type">
+                        <select id="type" class="form-select" @bind="@_type" required>
                             <option value="@FolderTypes.Private">@Localizer[FolderTypes.Private]</option>
                             <option value="@FolderTypes.Public">@Localizer[FolderTypes.Public]</option>
                         </select>
                     }
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2" align="center">
-                <Label For="permissions" HelpText="Select the permissions you want for the folder" ResourceKey="Permissions">Permissions: </Label>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="imagesizes" HelpText="Enter a list of image sizes which can be generated dynamically from uploaded images (ie. 200x200,x200,200x)" ResourceKey="ImageSizes">Image Sizes: </Label>
+                <div class="col-sm-9">
+                    <input id="imagesizes" class="form-control" @bind="@_imagesizes" maxlength="512" />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="capacity" HelpText="Enter the maximum folder capacity (in megabytes). Specify zero if the capacity is unlimited." ResourceKey="Capacity">Capacity: </Label>
+                <div class="col-sm-9">
+                    <input id="capacity" class="form-control" @bind="@_capacity" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <div class="col-sm-12">
+                    <Label Class="col-sm-3" For="permissions" HelpText="Select the permissions you want for the folder" ResourceKey="Permissions">Permissions: </Label>
                     <PermissionGrid EntityName="@EntityNames.Folder" PermissionNames="@(PermissionNames.Browse + "," + PermissionNames.View + "," + PermissionNames.Edit)" Permissions="@_permissions" @ref="_permissionGrid" />
-            </td>
-        </tr>
-    </table>
+
+                </div>
+            </div>
+        </div>
+    </form>
+
     @if (!_isSystem)
     {
         <button type="button" class="btn btn-success" @onclick="SaveFolder">@SharedLocalizer["Save"]</button>
@@ -79,11 +89,15 @@
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private List<Folder> _folders;
     private int _folderId = -1;
     private int _parentId = -1;
     private string _name;
     private string _type = FolderTypes.Private;
+    private string _imagesizes = string.Empty;
+    private string _capacity = "0";
     private bool _isSystem;
     private string _permissions = string.Empty;
     private string _createdBy;
@@ -114,6 +128,8 @@
                     _parentId = folder.ParentId ?? -1;
                     _name = folder.Name;
                     _type = folder.Type;
+                    _imagesizes = folder.ImageSizes;
+                    _capacity = folder.Capacity.ToString();
                     _isSystem = folder.IsSystem;
                     _permissions = folder.Permissions;
                     _createdBy = folder.CreatedBy;
@@ -125,7 +141,6 @@
             else
             {
                 _parentId = _folders[0].FolderId;
-                _permissions = string.Empty;
             }
         }
         catch (Exception ex)
@@ -136,6 +151,10 @@
     }
 
     private async Task SaveFolder()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             if (_name == string.Empty || _parentId == -1)
             {
@@ -174,6 +193,8 @@
 
                 folder.Name = _name;
                 folder.Type = _type;
+                folder.ImageSizes = _imagesizes;
+                folder.Capacity = int.Parse(_capacity);
                 folder.IsSystem = _isSystem;
                 folder.Permissions = _permissionGrid.GetPermissions();
 
@@ -203,6 +224,11 @@
                 AddModuleMessage(Localizer["Error.Folder.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private async Task DeleteFolder()
     {

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

@@ -8,26 +8,26 @@
 
 @if (_files != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <div class="col-sm-2">
                 <label class="control-label">@Localizer["Folder"] </label>
-            </td>
-            <td>
+            </div>            
+            <div class="col-sm-6">
                 <select class="form-select" @onchange="(e => FolderChanged(e))">
                     @foreach (Folder folder in _folders)
                     {
                         <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                     }
                 </select>
-            </td>
-            <td>
+            </div>            
+            <div class="col-sm-4">
                 <ActionLink Action="Edit" Text="Edit Folder" Class="btn btn-secondary" Parameters="@($"id=" + _folderId.ToString())" ResourceKey="EditFolder" />&nbsp;
                 <ActionLink Action="Edit" Text="Add Folder" Class="btn btn-secondary" ResourceKey="AddFolder" />&nbsp;
                 <ActionLink Action="Add" Text="Upload Files" Parameters="@($"id=" + _folderId.ToString())" ResourceKey="UploadFiles" />
-            </td>
-        </tr>
-    </table>
+            </div>
+        </div>
+    </div>
     <Pager Items="@_files">
         <Header>
         <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Jobs/Edit.razor

@@ -5,98 +5,113 @@
 @inject IStringLocalizer<Edit> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="name" HelpText="Enter the job name" ResourceKey="Name">Name: </Label>
-        </td>
-        <td>
-            <input id="name" class="form-control" @bind="@_name" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="type" HelpText="The fully qualified job type name" ResourceKey="Type">Type: </Label>
-        </td>
-        <td>
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="name" HelpText="Enter the job name" ResourceKey="Name">Name: </Label>
+            <div class="col-sm-9">
+                <input id="name" class="form-control" @bind="@_name" maxlength="200" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="type" HelpText="The fully qualified job type name" ResourceKey="Type">Type: </Label>
+            <div class="col-sm-9">
                 <input id="type" class="form-control" @bind="@_jobType" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="enabled" HelpText="Select whether you want the job enabled or not" ResourceKey="Enabled">Enabled? </Label>
-        </td>
-        <td>
-            <select id="enabled" class="form-select" @bind="@_isEnabled">
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="enabled" HelpText="Select whether you want the job enabled or not" ResourceKey="Enabled">Enabled? </Label>
+            <div class="col-sm-9">
+                <select id="enabled" class="form-select" @bind="@_isEnabled" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="runs-every" HelpText="Select how often you want the job to run" ResourceKey="RunsEvery">Runs Every: </Label>
-        </td>
-        <td>
-            <input id="runs-every" class="form-control" @bind="@_interval" />
-            <select id="runs-every" class="form-select" @bind="@_frequency">
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="runs-every" HelpText="Select how often you want the job to run" ResourceKey="RunsEvery">Runs Every: </Label>
+            <div class="col-sm-9">
+                <input id="runs-every" class="form-control" @bind="@_interval" maxlength="4" required />
+                <select id="runs-every" class="form-select" @bind="@_frequency" required>
                     <option value="m">@Localizer["Minute(s)"]</option>
                     <option value="H">@Localizer["Hour(s)"]</option>
                     <option value="d">@Localizer["Day(s)"]</option>
+                    <option value="w">@Localizer["Week(s)"]</option>
                     <option value="M">@Localizer["Month(s)"]</option>
+                    <option value="O">@Localizer["Once"]</option>
                 </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="starting" HelpText="What time do you want the job to start" ResourceKey="Starting">Starting: </Label>
-        </td>
-        <td>
-            <input id="starting" class="form-control" @bind="@_startDate" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="ending" HelpText="When do you want the job to end" ResourceKey="Ending">Ending: </Label>
-        </td>
-        <td>
-            <input id="ending" class="form-control" @bind="@_endDate" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="retention" HelpText="Number of log entries to retain for this job" ResourceKey="RetentionLog">Retention Log (Items): </Label>
-        </td>
-        <td>
-            <input id="retention" class="form-control" @bind="@_retentionHistory" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="next" HelpText="Next execution for this job." ResourceKey="NextExecution">Next Execution: </Label>
-        </td>
-        <td>
-            <input id="next" class="form-control" @bind="@_nextExecution" />
-        </td>
-    </tr>
-</table>
-<button type="button" class="btn btn-success" @onclick="SaveJob">@SharedLocalizer["Save"]</button>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-<br />
-<br />
-<AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="retention" HelpText="Number of log entries to retain for this job" ResourceKey="RetentionLog">Retention Log (Items): </Label>
+            <div class="col-sm-9">
+                <input id="retention" class="form-control" @bind="@_retentionHistory" maxlength="4" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="starting" HelpText="Optionally enter the date and time when this job should start executing" ResourceKey="Starting">Starting: </Label>
+            <div class="col-sm-9">
+                <div class="row">
+                    <div class="col">
+                        <input id="starting" type="date" class="form-control" @bind="@_startDate" />
+                    </div>
+                    <div class="col">
+                        <input id="starting" type="text" class="form-control" placeholder="hh:mm" @bind="@_startTime" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="ending" HelpText="Optionally enter the date and time when this job should stop executing" ResourceKey="Ending">Ending: </Label>
+            <div class="col-sm-9">
+                <div class="row">
+                    <div class="col">
+                        <input id="ending" type="date" class="form-control" @bind="@_endDate" />
+                    </div>
+                    <div class="col">
+                        <input id="ending" type="text" class="form-control" placeholder="hh:mm" @bind="@_endTime" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="next" HelpText="Optionally modify the date and time when this job should execute next" ResourceKey="NextExecution">Next Execution: </Label>
+            <div class="col-sm-9">
+                <div class="row">
+                    <div class="col">
+                        <input id="next" type="date" class="form-control" @bind="@_nextDate" />
+                    </div>
+                    <div class="col">
+                        <input id="next" type="text" class="form-control" placeholder="hh:mm" @bind="@_nextTime" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <br />
+    <button type="button" class="btn btn-success" @onclick="SaveJob">@SharedLocalizer["Save"]</button>
+    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    <br />
+    <br />
+    <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+</form>
 
 @code {
+	private ElementReference form;
+	private bool validated = false;
 	private int _jobId;
 	private string _name = string.Empty;
 	private string _jobType = string.Empty;
 	private string _isEnabled = "True";
 	private string _interval = string.Empty;
 	private string _frequency = string.Empty;
-    private string _startDate = string.Empty;
-    private string _endDate = string.Empty;
+	private DateTime? _startDate = null;
+	private string _startTime = string.Empty;
+	private DateTime? _endDate = null;
+	private string _endTime = string.Empty;
 	private string _retentionHistory = string.Empty;
-    private string _nextExecution = string.Empty;
+	private DateTime? _nextDate = null;
+	private string _nextTime = string.Empty;
 	private string createdby;
 	private DateTime createdon;
 	private string modifiedby;
@@ -117,10 +132,22 @@
 				_isEnabled = job.IsEnabled.ToString();
 				_interval = job.Interval.ToString();
 				_frequency = job.Frequency;
-                _startDate = (job.StartDate != null) ? job.StartDate.ToString() : string.Empty;
-                _endDate = (job.EndDate != null) ? job.EndDate.ToString() : string.Empty;
+				_startDate = job.StartDate;
+				if (job.StartDate != null && job.StartDate.Value.TimeOfDay.TotalSeconds != 0)
+				{
+					_startTime = job.StartDate.Value.ToString("HH:mm");
+				}
+				_endDate = job.EndDate;
+				if (job.EndDate != null && job.EndDate.Value.TimeOfDay.TotalSeconds != 0)
+				{
+					_endTime = job.EndDate.Value.ToString("HH:mm");
+				}
 				_retentionHistory = job.RetentionHistory.ToString();
-                _nextExecution = job.NextExecution.ToString();
+				_nextDate = job.NextExecution;
+				if (job.NextExecution != null && job.NextExecution.Value.TimeOfDay.TotalSeconds != 0)
+				{
+					_nextTime = job.NextExecution.Value.ToString("HH:mm");
+				}
 				createdby = job.CreatedBy;
 				createdon = job.CreatedOn;
 				modifiedby = job.ModifiedBy;
@@ -136,43 +163,51 @@
 
 	private async Task SaveJob()
 	{
-        if (_name != string.Empty && !string.IsNullOrEmpty(_jobType) && _frequency != string.Empty && _interval != string.Empty && _retentionHistory != string.Empty)
+		validated = true;
+		var interop = new Interop(JSRuntime);
+		if (await interop.FormValid(form))
 		{
 			var job = await JobService.GetJobAsync(_jobId);
 			job.Name = _name;
 			job.JobType = _jobType;
 			job.IsEnabled = Boolean.Parse(_isEnabled);
 			job.Frequency = _frequency;
+			if (job.Frequency == "O") // once
+			{
+				job.Interval = 1;
+			}
+			else
+			{
 				job.Interval = int.Parse(_interval);
-
-            if (_startDate == string.Empty)
-            {
-                job.StartDate = null;
 			}
-            else
+            job.StartDate = _startDate;
+            if (job.StartDate != null)
             {
-                job.StartDate = DateTime.Parse(_startDate);
-            }
-
-            if (_endDate == string.Empty)
+                job.StartDate = job.StartDate.Value.Date;
+                if (!string.IsNullOrEmpty(_startTime))
                 {
-                job.EndDate = null;
+                    job.StartDate = DateTime.Parse(job.StartDate.Value.ToShortDateString() + " " + _startTime);
                 }
-            else
+            }
+            job.EndDate = _endDate;
+            if (job.EndDate != null)
             {
-                job.EndDate = DateTime.Parse(_endDate);
-            }
-
-            if (_nextExecution == string.Empty)
+                job.EndDate = job.EndDate.Value.Date;
+                if (!string.IsNullOrEmpty(_endTime))
                 {
-                job.NextExecution = null;
+                    job.EndDate = DateTime.Parse(job.EndDate.Value.ToShortDateString() + " " + _endTime);
                 }
-            else
-            {
-                job.NextExecution = DateTime.Parse(_nextExecution);
             }
-
             job.RetentionHistory = int.Parse(_retentionHistory);
+            job.NextExecution = _nextDate;
+            if (job.NextExecution != null)
+            {
+                job.NextExecution = job.NextExecution.Value.Date;
+                if (!string.IsNullOrEmpty(_nextTime))
+                {
+                    job.NextExecution = DateTime.Parse(job.NextExecution.Value.ToShortDateString() + " " + _nextTime);
+                }
+            }
 
             try
             {
@@ -191,5 +226,4 @@
             AddModuleMessage(Localizer["Message.Required.JobInfo"], MessageType.Warning);
         }
     }
-
 }

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

@@ -83,28 +83,28 @@ else
 
 	private string DisplayFrequency(int interval, string frequency)
 	{
-        var result = $"{Localizer["Every"]} {interval.ToString()} ";
+		var result = "";
 		switch (frequency)
 		{
 			case "m":
-                result += Localizer["Minute"];
+				result = $"{Localizer["Every"]} {interval.ToString()} " + Localizer["Minute"];
 				break;
 			case "H":
-                result += Localizer["Hour"];
+				result = $"{Localizer["Every"]} {interval.ToString()} " + Localizer["Hour"];
 				break;
 			case "d":
-                result += Localizer["Day"];
+				result = $"{Localizer["Every"]} {interval.ToString()} " + Localizer["Day"];
+				break;
+			case "w":
+				result = $"{Localizer["Every"]} {interval.ToString()} " + Localizer["Week"];
 				break;
 			case "M":
-                result += Localizer["Month"];
+				result = $"{Localizer["Every"]} {interval.ToString()} " + Localizer["Month"];
+				break;
+			case "O":
+				result = Localizer["Once"];
 				break;
 		}
-
-        if (interval > 1)
-        {
-            result += Localizer["s"];
-        }
-
         return result;
     }
 
@@ -114,6 +114,7 @@ else
         {
             await JobService.DeleteJobAsync(job.JobId);
             await logger.LogInformation("Job Deleted {Job}", job);
+			_jobs = await JobService.GetJobsAsync();
             StateHasChanged();
         }
         catch (Exception ex)
@@ -124,13 +125,37 @@ else
     }
 
     private async Task StartJob(int jobId)
+    {
+        try
         {
 			await JobService.StartJobAsync(jobId);
+            await logger.LogInformation("Job Started {JobId}", jobId);
+            AddModuleMessage(Localizer["Message.Job.Start"], MessageType.Success);
+			_jobs = await JobService.GetJobsAsync();
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Starting Job {JobId} {Error}", jobId, ex.Message);
+            AddModuleMessage(Localizer["Error.Job.Start"], MessageType.Error);
+        }
     }
 
     private async Task StopJob(int jobId)
+    {
+        try
         {
 			await JobService.StopJobAsync(jobId);
+            await logger.LogInformation("Job Stopped {JobId}", jobId);
+            AddModuleMessage(Localizer["Message.Job.Stop"], MessageType.Success);
+			_jobs = await JobService.GetJobsAsync();
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Stopping Job {JobId} {Error}", jobId, ex.Message);
+            AddModuleMessage(Localizer["Error.Job.Stop"], MessageType.Error);
+        }
     }
 
     private async Task Refresh()

Oqtane.Client/Modules/Admin/Languages/Add.razor

@@ -23,50 +23,48 @@ else
             }
             else
             {
-                <table class="table table-borderless">
-                    <tr>
-                        <td width="30%">
-                            <Label For="name" HelpText="Name Of The Language" ResourceKey="Name">Name:</Label>
-                        </td>
-                        <td>
-                            <select id="_code" class="form-select" @bind="@_code">
+                <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+                    <div class="container">
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="name" HelpText="Name Of The Language" ResourceKey="Name">Name:</Label>
+                            <div class="col-sm-9">
+                                <select id="_code" class="form-select" @bind="@_code" required>
                                     @foreach (var culture in _availableCultures)
                                     {
                                         <option value="@culture.Name">@culture.DisplayName</option>
                                     }
                                 </select>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="default" HelpText="Indicates Whether Or Not This Language Is The Default For The Site" ResourceKey="IsDefault">Default?</Label>
-                        </td>
-                        <td>
-                            <select id="default" class="form-select" @bind="@_isDefault">
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="default" HelpText="Indicates Whether Or Not This Language Is The Default For The Site" ResourceKey="IsDefault">Default?</Label>
+                            <div class="col-sm-9">
+                                <select id="default" class="form-select" @bind="@_isDefault" required>
                                     <option value="True">@SharedLocalizer["Yes"]</option>
                                     <option value="False">@SharedLocalizer["No"]</option>
                                 </select>
-                        </td>
-                    </tr>
-                </table>
+                            </div>
+                        </div>
+                    </div>
                     <button type="button" class="btn btn-success" @onclick="SaveLanguage">@SharedLocalizer["Save"]</button>
+                </form>
             }
             <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
         </TabPanel>
         <TabPanel Name="Download" ResourceKey="Download" Security="SecurityAccessLevel.Host">
-            <ModuleMessage Type="MessageType.Info" Message="Download one or more translations from the list below. Once you are ready click Install to complete the installation."></ModuleMessage>
-
-            <table class="table table-borderless" style=" margin: auto; width: 50% !important;">
-                <tr>
-                    <td>
+            <div class="row justify-content-center mb-3">
+                <div class="col-sm-6">
+                    <div class="input-group">
+                        <select id="price" class="form-select custom-select" @onchange="(e => PriceChanged(e))">
+                            <option value="free">@SharedLocalizer["Free"]</option>
+                            <option value="paid">@SharedLocalizer["Paid"]</option>
+                        </select>
                         <input id="search" class="form-control" placeholder="@SharedLocalizer["Search.Hint"]" @bind="@_search" />
-                    </td>
-                    <td>
-                        <button type="button" class="btn btn-primary" @onclick="Search">@SharedLocalizer["Search"]</button>&nbsp;
+                        <button type="button" class="btn btn-primary" @onclick="Search">@SharedLocalizer["Search"]</button>
                         <button type="button" class="btn btn-secondary" @onclick="Reset">@SharedLocalizer["Reset"]</button>
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
 
             @if (_packages != null)
             {
@@ -77,10 +75,26 @@ else
                             <td>
                                 <h3 style="display: inline;"><a href="@context.ProductUrl" target="_new">@context.Name</a></h3>&nbsp;&nbsp;by:&nbsp;&nbsp;<strong><a href="@context.OwnerUrl" target="new">@context.Owner</a></strong><br />
                                 @(context.Description.Length > 400 ? (context.Description.Substring(0, 400) + "...") : context.Description)<br />
-                                <strong>@(String.Format("{0:n0}", context.Downloads))</strong> @SharedLocalizer["Search.Downloads"]&nbsp;&nbsp;|&nbsp;&nbsp; @SharedLocalizer["Search.Released"]: <strong>@context.ReleaseDate.ToString("MMM dd, yyyy")</strong>&nbsp;&nbsp;|&nbsp;&nbsp;@SharedLocalizer["Search.Version"]: <strong>@context.Version</strong>&nbsp;&nbsp;|&nbsp;&nbsp;@SharedLocalizer["Search.Source"]: <strong>@context.PackageUrl</strong>
+                                <strong>@(String.Format("{0:n0}", context.Downloads))</strong> @SharedLocalizer["Search.Downloads"]&nbsp;&nbsp;|&nbsp;&nbsp;
+                                @SharedLocalizer["Search.Released"]: <strong>@context.ReleaseDate.ToString("MMM dd, yyyy")</strong>&nbsp;&nbsp;|&nbsp;&nbsp;
+                                @SharedLocalizer["Search.Version"]: <strong>@context.Version</strong>
+                                @((MarkupString)(context.TrialPeriod > 0 ? "&nbsp;&nbsp;|&nbsp;&nbsp;<strong>" + context.TrialPeriod + " " + @SharedLocalizer["Trial"] + "</strong>" : ""))
                             </td>
-                            <td style="vertical-align: middle;">
-                                <button type="button" class="btn btn-primary" @onclick=@(async () => await DownloadLanguage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                            <td style="width: 1px; vertical-align: middle;">
+                                @if (context.Price != null && !string.IsNullOrEmpty(context.PackageUrl))
+                                {
+                                    <button type="button" class="btn btn-primary" @onclick=@(async () => await GetPackage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                                }
+                            </td>
+                            <td style="width: 1px; vertical-align: middle;">
+                                @if (context.Price != null && !string.IsNullOrEmpty(context.PaymentUrl))
+                                {
+                                    <a class="btn btn-primary" style="text-decoration: none !important" href="@context.PaymentUrl" target="_new">@context.Price.Value.ToString("$#,##0.00")</a>
+                                }
+                                else
+                                {
+                                    <button type="button" class="btn btn-primary" @onclick=@(async () => await GetPackage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                                }
                             </td>
                         </Row>
                     </Pager>
@@ -97,30 +111,69 @@ else
             }
         </TabPanel>
         <TabPanel Name="Upload" ResourceKey="Upload" Security="SecurityAccessLevel.Host">
-            <table class="table table-borderless">
-                <tr>
-                    <td>
-                        <Label HelpText="Upload one or more translations. Once they are uploaded click Install to complete the installation." ResourceKey="Module">Language: </Label>
-                    </td>
-                    <td>
-                        <FileManager Filter="nupkg" ShowFiles="false" Folder="Packages" UploadMultiple="true" />
-                    </td>
-                </tr>
-            </table>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" HelpText="Upload one or more translations. Once they are uploaded click Install to complete the installation." ResourceKey="LanguageUpload">Language: </Label>
+                    <div class="col-sm-9">
+                        <FileManager Folder="@Constants.PackagesFolder" UploadMultiple="true" />
+                    </div>
+                </div>
+            </div>
             <button type="button" class="btn btn-success" @onclick="InstallLanguages">@SharedLocalizer["Install"]</button>
             <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
         </TabPanel>
     </TabStrip>
 }
 
+@if (_productname != "")
+{
+    <div class="app-actiondialog">
+        <div class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">@SharedLocalizer["Review License Terms"]</h5>
+                        <button type="button" class="btn-close" aria-label="Close" @onclick="HideModal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p style="height: 200px; overflow-y: scroll;">
+                            <h3>@_productname</h3>
+                            @if (!string.IsNullOrEmpty(_license))
+                            {
+                                @((MarkupString)_license)
+                            }
+                            else
+                            {
+                                @SharedLocalizer["License Not Specified"]
+                            }
+                        </p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-success" @onclick="DownloadPackage">@SharedLocalizer["Accept"]</button>
+                        <button type="button" class="btn btn-secondary" @onclick="HideModal">@SharedLocalizer["Cancel"]</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
 @code {
+    private ElementReference form;
+    private bool validated = false;
+
     private string _code = string.Empty;
     private string _isDefault = "False";
     private string _message;
     private IEnumerable<Culture> _supportedCultures;
     private IEnumerable<Culture> _availableCultures;
     private List<Package> _packages;
+    private string _price = "free";
     private string _search = "";
+    private string _productname = "";
+    private string _license = "";
+    private string _packageid = "";
+    private string _version = "";
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
 
@@ -146,7 +199,22 @@ else
 
     private async Task LoadTranslations()
     {
-        _packages = await PackageService.GetPackagesAsync("translation", _search);
+        _packages = await PackageService.GetPackagesAsync("translation", _search, _price, "");
+    }
+
+    private async void PriceChanged(ChangeEventArgs e)
+    {
+        try
+        {
+            _price = (string)e.Value;
+            _search = "";
+            await LoadTranslations();
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error On PriceChanged");
+        }
     }
 
     private async Task Search()
@@ -175,6 +243,10 @@ else
     }
 
     private async Task SaveLanguage()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             var language = new Language
             {
@@ -203,6 +275,59 @@ else
                 AddModuleMessage(Localizer["Error.Language.Add"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
+
+
+    private void HideModal()
+    {
+        _productname = "";
+        _license = "";
+        StateHasChanged();
+    }
+
+    private async Task GetPackage(string packageid, string version)
+    {
+        try
+        {
+            var package = await PackageService.GetPackageAsync(packageid, version);
+            if (package != null)
+            {
+                _productname = package.Name;
+                if (!string.IsNullOrEmpty(package.License))
+                {
+                    _license = package.License.Replace("\n", "<br />");
+                }
+                _packageid = package.PackageId;
+                _version = package.Version;
+            }
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Getting Package {PackageId} {Version}", packageid, version);
+            AddModuleMessage(Localizer["Error.Module.Download"], MessageType.Error);
+        }
+    }
+
+    private async Task DownloadPackage()
+    {
+        try
+        {
+            await PackageService.DownloadPackageAsync(_packageid, _version, Constants.PackagesFolder);
+            await logger.LogInformation("Language Package {Name} {Version} Downloaded Successfully", _packageid, _version);
+            AddModuleMessage(Localizer["Success.Language.Download"], MessageType.Success);
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Downloading Translation {Name} {Version}", _packageid, _version);
+            AddModuleMessage(Localizer["Error.Language.Download"], MessageType.Error);
+        }
+    }
 
     private async Task InstallLanguages()
     {
@@ -217,22 +342,6 @@ else
         }
     }
 
-    private async Task DownloadLanguage(string packageid, string version)
-    {
-        try
-        {
-            await PackageService.DownloadPackageAsync(packageid, version, "Packages");
-            await logger.LogInformation("Language Paclage {Name} {Version} Downloaded Successfully", packageid, version);
-            AddModuleMessage(Localizer["Success.Language.Download"], MessageType.Success);
-            StateHasChanged();
-        }
-        catch (Exception ex)
-        {
-            await logger.LogError(ex, "Error Downloading Translation {Name} {Version}", packageid, version);
-            AddModuleMessage(Localizer["Error.Language.Download"], MessageType.Error);
-        }
-    }
-
     private async Task SetCultureAsync(string culture)
     {
         if (culture != CultureInfo.CurrentUICulture.Name)
@@ -241,7 +350,7 @@ else
             var localizationCookieValue = CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture));
             await interop.SetCookie(CookieRequestCultureProvider.DefaultCookieName, localizationCookieValue, 360);
 
-            NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
+            NavigationManager.NavigateTo(NavigationManager.Uri, true);
         }
     }
 }

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

@@ -97,7 +97,7 @@ else
         {
             if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
             {
-                await PackageService.DownloadPackageAsync(Constants.PackageId + ".Client." + code, Constants.Version, "Packages");
+                await PackageService.DownloadPackageAsync(Constants.PackageId + ".Client." + code, Constants.Version, Constants.PackagesFolder);
                 await logger.LogInformation("Translation Downloaded {Code} {Version}", code, Constants.Version);
                 await PackageService.InstallPackagesAsync();
                 AddModuleMessage(string.Format(Localizer["Success.Language.Install"], NavigateUrl("admin/system")), MessageType.Success);

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

@@ -16,7 +16,7 @@
         <text>...</text>
     </Authorizing>
     <Authorized>
-        <ModuleMessage Message="@Localizer["Info.SignedIn"]" Type="MessageType.Info" />
+		<div>@Localizer["Info.SignedIn"]</div>
     </Authorized>
     <NotAuthorized>
         <form @ref="login" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
@@ -59,7 +59,7 @@
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Anonymous;
 
     public override List<Resource> Resources => new List<Resource>()
-{
+    {
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" }
     };
 
@@ -84,10 +84,12 @@
 
             if (user != null)
             {
+                await logger.LogInformation(LogFunction.Security, "Email Verified For For Username {Username}", _username);
                 _message = Localizer["Success.Account.Verified"];
             }
             else
             {
+                await logger.LogError(LogFunction.Security, "Email Verification Failed For Username {Username}", _username);
                 _message = Localizer["Message.Account.NotVerfied"];
                 _type = MessageType.Warning;
             }
@@ -97,10 +99,13 @@
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
+        {
+            if(PageState.User == null)
             {
                 await username.FocusAsync();
             }
         }
+    }
 
     private async Task Login()
     {
@@ -118,7 +123,7 @@
 
                 if (user.IsAuthenticated)
                 {
-                    await logger.LogInformation("Login Successful For Username {Username}", _username);
+                    await logger.LogInformation(LogFunction.Security, "Login Successful For Username {Username}", _username);
                     // server-side Blazor needs to post to the Login page so that the cookies are set correctly
                     var fields = new { __RequestVerificationToken = SiteState.AntiForgeryToken, username = _username, password = _password, remember = _remember, returnurl = _returnUrl };
                     string url = Utilities.TenantUrl(PageState.Alias, "/pages/login/");
@@ -126,7 +131,7 @@
                 }
                 else
                 {
-                    await logger.LogInformation("Login Failed For Username {Username}", _username);
+                    await logger.LogError(LogFunction.Security, "Login Failed For Username {Username}", _username);
                     AddModuleMessage(Localizer["Error.Login.Fail"], MessageType.Error);
                 }
             }
@@ -140,14 +145,14 @@
                 user = await UserService.LoginUserAsync(user, true, _remember);
                 if (user.IsAuthenticated)
                 {
-                    await logger.LogInformation("Login Successful For Username {Username}", _username);
+                    await logger.LogInformation(LogFunction.Security, "Login Successful For Username {Username}", _username);
                     var authstateprovider = (IdentityAuthenticationStateProvider)ServiceProvider.GetService(typeof(IdentityAuthenticationStateProvider));
                     authstateprovider.NotifyAuthenticationChanged();
                     NavigationManager.NavigateTo(NavigateUrl(_returnUrl, true));
                 }
                 else
                 {
-                    await logger.LogInformation("Login Failed For Username {Username}", _username);
+                    await logger.LogError(LogFunction.Security, "Login Failed For Username {Username}", _username);
                     AddModuleMessage(Localizer["Error.Login.Fail"], MessageType.Error);
                 }
             }
@@ -171,17 +176,18 @@
             if (user != null)
             {
                 await UserService.ForgotPasswordAsync(user);
-                _message = "Please Check The Email Address Associated To Your User Account For A Password Reset Notification";
+                await logger.LogInformation(LogFunction.Security, "Password Reset Notification Sent For Username {Username}", _username);
+                _message = Localizer["Message.ForgotUser"];
             }
             else
             {
-                _message = "User Does Not Exist";
+                _message = Localizer["Message.UserDoesNotExist"];
                 _type = MessageType.Warning;
             }
         }
         else
         {
-            _message = "Please Enter The Username Related To Your Account And Then Select The Forgot Password Option Again";
+            _message = Localizer["Message.ForgotPassword"];
         }
 
         StateHasChanged();

Oqtane.Client/Modules/Admin/Logs/Detail.razor

@@ -9,135 +9,108 @@
 @inject IStringLocalizer<Detail> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="dateTime" HelpText="The date and time of this log" ResourceKey="DateTime">Date/Time: </Label>
-        </td>
-        <td>
+    <div class="container">
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="dateTime" HelpText="The date and time of this log" ResourceKey="DateTime">Date/Time: </Label>
+            <div class="col-sm-9">
                 <input id="dateTime" class="form-control" @bind="@_logDate" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="level" HelpText="The level of this log" ResourceKey="Level">Level: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="level" HelpText="The level of this log" ResourceKey="Level">Level: </Label>
+            <div class="col-sm-9">
                 <input id="level" class="form-control" @bind="@_level" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="feature" HelpText="The feature that was affected" ResourceKey="Feature">Feature: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="feature" HelpText="The feature that was affected" ResourceKey="Feature">Feature: </Label>
+            <div class="col-sm-9">
                 <input id="feature" class="form-control" @bind="@_feature" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="function" HelpText="The function that was performed" ResourceKey="Function">Function: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="function" HelpText="The function that was performed" ResourceKey="Function">Function: </Label>
+            <div class="col-sm-9">
                 <input id="function" class="form-control" @bind="@_function" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="category" HelpText="The categories that were affected" ResourceKey="Category">Category: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="category" HelpText="The categories that were affected" ResourceKey="Category">Category: </Label>
+            <div class="col-sm-9">
                 <input id="category" class="form-control" @bind="@_category" readonly />
-        </td>
-    </tr>
+            </div>
+       </div>
         @if (_pageName != string.Empty)
         {
-        <tr>
-            <td>
-                <Label For="page" HelpText="The page that was affected" ResourceKey="Page">Page: </Label>
-            </td>
-            <td>
+           <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="page" HelpText="The page that was affected" ResourceKey="Page">Page: </Label>
+                <div class="col-sm-9">
                     <input id="page" class="form-control" @bind="@_pageName" readonly />
-            </td>
-        </tr>
+                </div>
+           </div>
         }
         @if (_moduleTitle != string.Empty)
         {
-        <tr>
-            <td>
-                <Label For="module" HelpText="The module that was affected" ResourceKey="Module">Module: </Label>
-            </td>
-            <td>
+           <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="module" HelpText="The module that was affected" ResourceKey="Module">Module: </Label>
+                <div class="col-sm-9">
                     <input id="module" class="form-control" @bind="@_moduleTitle" readonly />
-            </td>
-        </tr>
+                </div>
+           </div>
         }
         @if (_username != string.Empty)
         {
-        <tr>
-            <td>
-                <Label For="user" HelpText="The user that caused this log" ResourceKey="User">User: </Label>
-            </td>
-            <td>
+           <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="user" HelpText="The user that caused this log" ResourceKey="User">User: </Label>
+                 <div class="col-sm-9">
                     <input id="user" class="form-control" @bind="@_username" readonly />
-            </td>
-        </tr>
+                </div>
+           </div>
         }
-    <tr>
-        <td>
-            <Label For="url" HelpText="The url the log comes from" ResourceKey="Url">Url: </Label>
-        </td>
-        <td>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="url" HelpText="The url the log comes from" ResourceKey="Url">Url: </Label>
+            <div class="col-sm-9">
                 <input id="url" class="form-control" @bind="@_url" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="template" HelpText="What the log is about" ResourceKey="Template">Template: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="template" HelpText="What the log is about" ResourceKey="Template">Template: </Label>
+            <div class="col-sm-9">
                 <input id="template" class="form-control" @bind="@_template" readonly />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="message" HelpText="The message that the system generated" class="control-label" ResourceKey="Message">Message: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="message" HelpText="The message that the system generated" ResourceKey="Message">Message: </Label>
+            <div class="col-sm-9">
                 <textarea id="message" class="form-control" @bind="@_message" rows="5" readonly></textarea>
-        </td>
-    </tr>
+            </div>
+       </div>
         @if (!string.IsNullOrEmpty(_exception))
         {
-        <tr>
-            <td>
-                <Label For="exception" HelpText="The exceptions generated by the system" ResourceKey="Exception">Exception: </Label>
-            </td>
-            <td>
+           <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="exception" HelpText="The exceptions generated by the system" ResourceKey="Exception">Exception: </Label>
+				<div class="col-sm-9">
                     <textarea id="exception" class="form-control" @bind="@_exception" rows="5" readonly></textarea>
-            </td>
-        </tr>
+                </div>
+           </div>
         }
-    <tr>
-        <td>
-            <Label For="properties" HelpText="The properties that were affected" ResourceKey="Properties">Properties: </Label>
-        </td>
-        <td>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="properties" HelpText="The properties that were affected" ResourceKey="Properties">Properties: </Label>
+            <div class="col-sm-9">
                 <textarea id="properties" class="form-control" @bind="@_properties" rows="5" readonly></textarea>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="server" HelpText="The server that was affected" ResourceKey="Server">Server: </Label>
-        </td>
-        <td>
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="server" HelpText="The server that was affected" ResourceKey="Server">Server: </Label>
+			<div class="col-sm-9">
                 <input id="server" class="form-control" @bind="@_server" readonly />
-        </td>
-    </tr>
-</table>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+            </div>
+        </div>
+    </div>
 
-@code {
+    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+
+    @code {
         private int _logId;
         private string _logDate = string.Empty;
         private string _level = string.Empty;
@@ -211,4 +184,4 @@
                 AddModuleMessage(Localizer["Error.Log.Load"], MessageType.Error);
             }
         }
-}
+    }

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

@@ -1,6 +1,7 @@
 @namespace Oqtane.Modules.Admin.Logs
 @inherits ModuleBase
 @inject ILogService LogService
+@inject ISettingService SettingService
 @inject IStringLocalizer<Index> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
@@ -10,9 +11,11 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td>
+    <TabStrip>
+        <TabPanel Name="Events" Heading="Events" ResourceKey="Events">
+			<div class="container g-0">
+				<div class="row mb-1 align-items-center">
+					<div class="col-sm-4">
 						<Label For="level" HelpText="Select the log level for event log items" ResourceKey="Level">Level: </Label><br /><br />
 						<select id="level" class="form-select" @onchange="(e => LevelChanged(e))">
 							<option value="-">&lt;@Localizer["AllLevels"]&gt;</option>
@@ -23,8 +26,8 @@ else
 							<option value="Error">@Localizer["Error"]</option>
 							<option value="Critical">@Localizer["Critical"]</option>
 						</select>
-            </td>
-            <td>
+					</div>            
+					<div class="col-sm-4">
 						<Label For="function" HelpText="Select the function for event log items" ResourceKey="Function">Function: </Label><br /><br />
 						<select id="function" class="form-select" @onchange="(e => FunctionChanged(e))">
 							<option value="-">&lt;@Localizer["AllFunctions"]&gt;</option>
@@ -35,17 +38,18 @@ else
 							<option value="Security">@Localizer["Security"]</option>
 							<option value="Other">@Localizer["Other"]</option>
 						</select>
-            </td>
-            <td>
+					</div>            
+					<div class="col-sm-4">
 						<Label For="rows" HelpText="Select the maximum number of event log items to review. Please note that if you choose more than 10 items the information will be split into pages." ResourceKey="Rows">Maximum Items: </Label><br /><br />
 						<select id="rows" class="form-select" @onchange="(e => RowsChanged(e))">
 							<option value="10">10</option>
 							<option value="50">50</option>
 							<option value="100">100</option>
 						</select>
-            </td>
-        </tr>
-    </table>
+					</div>
+				</div>
+			</div>
+			<br />
 
 			@if (_logs.Any())
 			{
@@ -70,6 +74,20 @@ else
 			{
 				<p><em>@Localizer["NoLogs"]</em></p>
 			}
+		</TabPanel>
+        <TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="retention" HelpText="Number of days of events to retain" ResourceKey="Retention">Retention (Days): </Label>
+					<div class="col-sm-9">
+						<input id="retention" class="form-control" @bind="@_retention" />
+					</div>
+				</div>
+			</div>
+			<br />
+			<button type="button" class="btn btn-success" @onclick="SaveSiteSettings">@SharedLocalizer["Save"]</button>
+		</TabPanel>
+	</TabStrip>
 }
 
 @code {
@@ -77,6 +95,7 @@ else
     private string _function = "-";
     private string _rows = "10";
     private List<Log> _logs;
+    private string _retention = "";
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
@@ -85,6 +104,7 @@ else
         try
         {
             await GetLogs();
+			_retention = SettingService.GetSetting(PageState.Site.Settings, "LogRetention", "30");
         }
         catch (Exception ex)
         {
@@ -170,4 +190,22 @@ else
         }
         return classname;
     }
+
+	private async Task SaveSiteSettings()
+	{
+		try
+		{
+			var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
+			settings = SettingService.SetSetting(settings, "LogRetention", _retention, true);
+            await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
+
+			AddModuleMessage(Localizer["Success.SaveSiteSettings"], MessageType.Success);
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Saving Site Settings {Error}", ex.Message);
+			AddModuleMessage(Localizer["Error.SaveSiteSettings"], MessageType.Error);
+		}
+	}
+
 }

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

@@ -10,51 +10,42 @@
 
 @if (string.IsNullOrEmpty(_moduledefinitionname) && _templates != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="owner" HelpText="Enter the name of the organization who is developing this module. It should not contain spaces or punctuation." ResourceKey="OwnerName">Owner Name: </Label>
-            </td>
-            <td>
-                <input id="owner" class="form-control" @bind="@_owner" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="module" HelpText="Enter a name for this module. It should not contain spaces or punctuation." ResourceKey="ModuleName">Module Name: </Label>
-            </td>
-            <td>
-                <input id="module" class="form-control" @bind="@_module" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="description" HelpText="Enter a short description for the module" ResourceKey="Description">Description: </Label>
-            </td>
-            <td>
-                <textarea id="description" class="form-control" @bind="@_description" rows="3"></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="template" HelpText="Select a module template. Templates are located in the wwwroot/Modules/Templates folder on the server." ResourceKey="Template">Template: </Label>
-            </td>
-            <td>
-                <select id="template" class="form-select" @onchange="(e => TemplateChanged(e))">
+	<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+		<div class="container">
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="owner" HelpText="Enter the name of the organization who is developing this module. It should not contain spaces or punctuation." ResourceKey="OwnerName">Owner Name: </Label>
+				<div class="col-sm-9">
+					<input id="owner" class="form-control" @bind="@_owner" required />
+				</div>
+			</div>
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="module" HelpText="Enter a name for this module. It should not contain spaces or punctuation." ResourceKey="ModuleName">Module Name: </Label>
+				<div class="col-sm-9">
+					<input id="module" class="form-control" @bind="@_module" required />
+				</div>
+			</div>
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="description" HelpText="Enter a short description for the module" ResourceKey="Description">Description: </Label>
+				<div class="col-sm-9">
+					<textarea id="description" class="form-control" @bind="@_description" rows="3" ></textarea>
+				</div>
+			</div>
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="template" HelpText="Select a module template. Templates are located in the wwwroot/Modules/Templates folder on the server." ResourceKey="Template">Template: </Label>
+				<div class="col-sm-9">
+					<select id="template" class="form-select" @onchange="(e => TemplateChanged(e))" required>
 						<option value="-">&lt;@Localizer["Template.Select"]&gt;</option>
 						@foreach (Template template in _templates)
 						{
 							<option value="@template.Name">@template.Title</option>
 						}
 					</select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="reference" HelpText="Select a framework reference version" ResourceKey="FrameworkReference">Framework Reference: </Label>
-            </td>
-            <td>
-                <select id="reference" class="form-select" @bind="@_reference">
+				</div>
+			</div>
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="reference" HelpText="Select a framework reference version" ResourceKey="FrameworkReference">Framework Reference: </Label>
+				<div class="col-sm-9">
+					<select id="reference" class="form-select" @bind="@_reference" required>
 						@foreach (string version in _versions)
 						{
 							if (Version.Parse(version).CompareTo(Version.Parse(_minversion)) >= 0)
@@ -64,20 +55,19 @@
 						}
 						<option value="local">@SharedLocalizer["LocalVersion"]</option>
 					</select>
-            </td>
-        </tr>
+				</div>
+			</div>
 			@if (!string.IsNullOrEmpty(_location))
 			{
-            <tr>
-                <td>
-                    <Label For="location" HelpText="Location where the module will be created" ResourceKey="Location">Location: </Label>
-                </td>
-                <td>
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="location" HelpText="Location where the module will be created" ResourceKey="Location">Location: </Label>
+					<div class="col-sm-9">
 						<input id="module" class="form-control" @bind="@_location" readonly />
-                </td>
-            </tr>
+					</div>
+				</div>
 			}
-    </table>
+		</div>
+	</form>
 	<button type="button" class="btn btn-success" @onclick="CreateModule">@Localizer["Module.Create"]</button>
 }
 else
@@ -86,6 +76,8 @@ else
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private string _moduledefinitionname = string.Empty;
     private string _owner = string.Empty;
     private string _module = string.Empty;
@@ -99,14 +91,9 @@ else
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
-    protected override async Task OnParametersSetAsync()
-    {
-        try
+    protected override void OnInitialized()
     {
         _moduledefinitionname = SettingService.GetSetting(ModuleState.Settings, "ModuleDefinitionName", "");
-            _templates = await ModuleDefinitionService.GetModuleDefinitionTemplatesAsync();
-            _versions = Constants.ReleaseVersions.Split(',').Where(item => Version.Parse(item).CompareTo(Version.Parse("2.0.0")) >= 0).ToArray();
-
         if (string.IsNullOrEmpty(_moduledefinitionname))
         {
             AddModuleMessage(Localizer["Info.Module.Creator"], MessageType.Info);
@@ -116,6 +103,14 @@ else
             AddModuleMessage(Localizer["Info.Module.Activate"], MessageType.Info);
         }
     }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        try
+        {
+            _templates = await ModuleDefinitionService.GetModuleDefinitionTemplatesAsync();
+            _versions = Constants.ReleaseVersions.Split(',').Where(item => Version.Parse(item).CompareTo(Version.Parse("2.0.0")) >= 0).ToArray();
+        }
         catch (Exception ex)
         {
             await logger.LogError(ex, "Error Loading Module Creator");
@@ -124,31 +119,32 @@ else
 
     private async Task CreateModule()
     {
-        try
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
-            if (IsValid(_owner) && IsValid(_module) && _owner != _module && _template != "-")
+            try
             {
                 var moduleDefinition = new ModuleDefinition { Owner = _owner, Name = _module, Description = _description, Template = _template, Version = _reference };
                 moduleDefinition = await ModuleDefinitionService.CreateModuleDefinitionAsync(moduleDefinition);
 
-                var settings = ModuleState.Settings;
+				var settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
                 SettingService.SetSetting(settings, "ModuleDefinitionName", moduleDefinition.ModuleDefinitionName);
                 await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
 
                 GetLocation();
-
                 AddModuleMessage(string.Format(Localizer["Success.Module.Create"], NavigateUrl("admin/system")), MessageType.Success);
             }
-            else
-            {
-                AddModuleMessage(Localizer["Message.Require.ValidName"], MessageType.Warning);
-            }
-        }
             catch (Exception ex)
             {
                 await logger.LogError(ex, "Error Creating Module");
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private async Task ActivateModule()
     {

Oqtane.Client/Modules/Admin/ModuleCreator/ModuleInfo.cs

@@ -1,7 +1,9 @@
-using Oqtane.Models;
+using Oqtane.Documentation;
+using Oqtane.Models;
 
 namespace Oqtane.Modules.Admin.ModuleCreator
 {
+    [PrivateApi("Mark this as private, since it's not very useful in the public docs")]
     public class ModuleInfo : IModule
     {
         public ModuleDefinition ModuleDefinition => new ModuleDefinition

Oqtane.Client/Modules/Admin/ModuleDefinitions/Add.razor

@@ -9,19 +9,19 @@
 
 <TabStrip>
     <TabPanel Name="Download" ResourceKey="Download">
-        <ModuleMessage Type="MessageType.Info" Message="Download one or more modules from the list below. Once you are ready click Install to complete the installation."></ModuleMessage>
-
-        <table class="table table-borderless" style="margin: auto; width: 50% !important;">
-            <tr>
-                <td>
+        <div class="row justify-content-center mb-3">
+            <div class="col-sm-6">
+                <div class="input-group">
+                    <select id="price" class="form-select custom-select" @onchange="(e => PriceChanged(e))">
+                        <option value="free">@SharedLocalizer["Free"]</option>
+                        <option value="paid">@SharedLocalizer["Paid"]</option>
+                    </select>
                     <input id="search" class="form-control" placeholder="@SharedLocalizer["Search.Hint"]" @bind="@_search" />
-                </td>
-                <td>
-                    <button type="button" class="btn btn-primary" @onclick="Search">@SharedLocalizer["Search"]</button>&nbsp;
+                    <button type="button" class="btn btn-primary" @onclick="Search">@SharedLocalizer["Search"]</button>
                     <button type="button" class="btn btn-secondary" @onclick="Reset">@SharedLocalizer["Reset"]</button>
-                </td>
-            </tr>
-        </table>
+                </div>
+            </div>
+        </div>
 
         @if (_packages != null)
         {
@@ -32,10 +32,26 @@
                         <td>
                             <h3 style="display: inline;"><a href="@context.ProductUrl" target="_new">@context.Name</a></h3>&nbsp;&nbsp;by:&nbsp;&nbsp;<strong><a href="@context.OwnerUrl" target="new">@context.Owner</a></strong><br />
                             @(context.Description.Length > 400 ? (context.Description.Substring(0, 400) + "...") : context.Description)<br />
-                            <strong>@(String.Format("{0:n0}", context.Downloads))</strong> @SharedLocalizer["Search.Downloads"]&nbsp;&nbsp;|&nbsp;&nbsp; @SharedLocalizer["Search.Released"]: <strong>@context.ReleaseDate.ToString("MMM dd, yyyy")</strong>&nbsp;&nbsp;|&nbsp;&nbsp;@SharedLocalizer["Search.Version"]: <strong>@context.Version</strong>&nbsp;&nbsp;|&nbsp;&nbsp;@SharedLocalizer["Search.Source"]: <strong>@context.PackageUrl</strong>
+                            <strong>@(String.Format("{0:n0}", context.Downloads))</strong> @SharedLocalizer["Search.Downloads"]&nbsp;&nbsp;|&nbsp;&nbsp;
+                            @SharedLocalizer["Search.Released"]: <strong>@context.ReleaseDate.ToString("MMM dd, yyyy")</strong>&nbsp;&nbsp;|&nbsp;&nbsp;
+                            @SharedLocalizer["Search.Version"]: <strong>@context.Version</strong>
+                            @((MarkupString)(context.TrialPeriod > 0 ? "&nbsp;&nbsp;|&nbsp;&nbsp;<strong>" + context.TrialPeriod + " " + @SharedLocalizer["Trial"] + "</strong>" : ""))
                         </td>
-                        <td style="vertical-align: middle;">
-                            <button type="button" class="btn btn-primary" @onclick=@(async () => await DownloadModule(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                        <td style="width: 1px; vertical-align: middle;">
+                            @if (context.Price != null && !string.IsNullOrEmpty(context.PackageUrl))
+                            {
+                                <button type="button" class="btn btn-primary" @onclick=@(async () => await GetPackage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                            }
+                        </td>
+                        <td style="width: 1px; vertical-align: middle;">
+                            @if (context.Price != null && !string.IsNullOrEmpty(context.PaymentUrl))
+                            {
+                                <a class="btn btn-primary" style="text-decoration: none !important" href="@context.PaymentUrl" target="_new">@context.Price.Value.ToString("$#,##0.00")</a>
+                            }
+                            else
+                            {
+                                <button type="button" class="btn btn-primary" @onclick=@(async () => await GetPackage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                            }
                         </td>
                     </Row>
                 </Pager>
@@ -50,25 +66,61 @@
         }
     </TabPanel>
     <TabPanel Name="Upload" ResourceKey="Upload">
-        <table class="table table-borderless">
-            <tr>
-                <td>
-                    <Label HelpText="Upload one or more module packages. Once they are uploaded click Install to complete the installation." ResourceKey="Module">Module: </Label>
-                </td>
-                <td>
-                    <FileManager Filter="nupkg" ShowFiles="false" Folder="Packages" UploadMultiple="true" />
-                </td>
-            </tr>
-        </table>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" HelpText="Upload one or more module packages. Once they are uploaded click Install to complete the installation." ResourceKey="Module">Module: </Label>
+                <div class="col-sm-9">
+                    <FileManager Folder="@Constants.PackagesFolder" UploadMultiple="true" />
+                </div>
+            </div>
+        </div>
     </TabPanel>
 </TabStrip>
 
+@if (_productname != "")
+{
+    <div class="app-actiondialog">
+        <div class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">@SharedLocalizer["Review License Terms"]</h5>
+                        <button type="button" class="btn-close" aria-label="Close" @onclick="HideModal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p style="height: 200px; overflow-y: scroll;">
+                            <h3>@_productname</h3>
+                            @if (!string.IsNullOrEmpty(_license))
+                            {
+                                @((MarkupString)_license)
+                            }
+                            else
+                            {
+                                @SharedLocalizer["License Not Specified"]
+                            }
+                        </p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-success" @onclick="DownloadPackage">@SharedLocalizer["Accept"]</button>
+                        <button type="button" class="btn btn-secondary" @onclick="HideModal">@SharedLocalizer["Cancel"]</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
 <button type="button" class="btn btn-success" @onclick="InstallModules">@SharedLocalizer["Install"]</button>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 
 @code {
     private List<Package> _packages;
+    private string _price = "free";
     private string _search = "";
+    private string _productname = "";
+    private string _license = "";
+    private string _packageid = "";
+    private string _version = "";
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
@@ -88,7 +140,7 @@
     private async Task LoadModuleDefinitions()
     {
         var moduledefinitions = await ModuleDefinitionService.GetModuleDefinitionsAsync(PageState.Site.SiteId);
-        _packages = await PackageService.GetPackagesAsync("module", _search);
+        _packages = await PackageService.GetPackagesAsync("module", _search, _price, "");
 
         if (_packages != null)
         {
@@ -102,6 +154,21 @@
         }
     }
 
+    private async void PriceChanged(ChangeEventArgs e)
+    {
+        try
+        {
+            _price = (string)e.Value;
+            _search = "";
+            await LoadModuleDefinitions();
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error On PriceChanged");
+        }
+    }
+
     private async Task Search()
     {
         try
@@ -127,6 +194,55 @@
         }
     }
 
+    private void HideModal()
+    {
+        _productname = "";
+        _license = "";
+        StateHasChanged();
+    }
+
+    private async Task GetPackage(string packageid, string version)
+    {
+        try
+        {
+            var package = await PackageService.GetPackageAsync(packageid, version);
+            if (package != null)
+            {
+                _productname = package.Name;
+                if (!string.IsNullOrEmpty(package.License))
+                {
+                    _license = package.License.Replace("\n", "<br />");
+                }
+                _packageid = package.PackageId;
+                _version = package.Version;
+            }
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Getting Package {PackageId} {Version}", packageid, version);
+            AddModuleMessage(Localizer["Error.Module.Download"], MessageType.Error);
+        }
+    }
+
+    private async Task DownloadPackage()
+    {
+        try
+        {
+            await PackageService.DownloadPackageAsync(_packageid, _version, Constants.PackagesFolder);
+            await logger.LogInformation("Package {PackageId} {Version} Downloaded Successfully", _packageid, _version);
+            AddModuleMessage(Localizer["Success.Module.Download"], MessageType.Success);
+            _productname = "";
+            _license = "";
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Downloading Package {PackageId} {Version}", _packageid, _version);
+            AddModuleMessage(Localizer["Error.Module.Download"], MessageType.Error);
+        }
+    }
+
     private async Task InstallModules()
     {
         try
@@ -139,20 +255,4 @@
             await logger.LogError(ex, "Error Installing Module");
         }
     }
-
-    private async Task DownloadModule(string packageid, string version)
-    {
-        try
-        {
-            await PackageService.DownloadPackageAsync(packageid, version, "Packages");
-            await logger.LogInformation("Module {ModuleDefinitionName} {Version} Downloaded Successfully", packageid, version);
-            AddModuleMessage(Localizer["Success.Module.Download"], MessageType.Success);
-            StateHasChanged();
-        }
-        catch (Exception ex)
-        {
-            await logger.LogError(ex, "Error Downloading Module {ModuleDefinitionName} {Version}", packageid, version);
-            AddModuleMessage(Localizer["Error.Module.Download"], MessageType.Error);
-        }
-    }
 }

Oqtane.Client/Modules/Admin/ModuleDefinitions/Create.razor

@@ -10,51 +10,42 @@
 
 @if (_templates != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="owner" HelpText="Enter the name of the organization who is developing this module. It should not contain spaces or punctuation." ResourceKey="OwnerName">Owner Name: </Label>
-            </td>
-            <td>
-                <input id="owner" class="form-control" @bind="@_owner" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="module" HelpText="Enter a name for this module. It should not contain spaces or punctuation." ResourceKey="ModuleName">Module Name: </Label>
-            </td>
-            <td>
-                <input id="module" class="form-control" @bind="@_module" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="description" HelpText="Enter a short description for the module" ResourceKey="Description">Description: </Label>
-            </td>
-            <td>
-                <textarea id="description" class="form-control" @bind="@_description" rows="3"></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="template" HelpText="Select a module template. Templates are located in the wwwroot/Modules/Templates folder on the server." ResourceKey="Template">Template: </Label>
-            </td>
-            <td>
-                <select id="template" class="form-select" @onchange="(e => TemplateChanged(e))">
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="owner" HelpText="Enter the name of the organization who is developing this module. It should not contain spaces or punctuation." ResourceKey="OwnerName">Owner Name: </Label>
+                <div class="col-sm-9">
+                    <input id="owner" class="form-control" @bind="@_owner" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="module" HelpText="Enter a name for this module. It should not contain spaces or punctuation." ResourceKey="ModuleName">Module Name: </Label>
+                <div class="col-sm-9">
+                    <input id="module" class="form-control" @bind="@_module" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="description" HelpText="Enter a short description for the module" ResourceKey="Description">Description: </Label>
+                <div class="col-sm-9">
+                    <textarea id="description" class="form-control" @bind="@_description" rows="3" maxlength="2000" required></textarea>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="template" HelpText="Select a module template. Templates are located in the wwwroot/Modules/Templates folder on the server." ResourceKey="Template">Template: </Label>
+                <div class="col-sm-9">
+                    <select id="template" class="form-select" @onchange="(e => TemplateChanged(e))" required>
                         <option value="-">&lt;@Localizer["Template.Select"]&gt;</option>
                         @foreach (Template template in _templates)
                         {
                             <option value="@template.Name">@template.Title</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="reference" HelpText="Select a framework reference version" ResourceKey="FrameworkReference">Framework Reference: </Label>
-            </td>
-            <td>
-                <select id="reference" class="form-select" @bind="@_reference">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="reference" HelpText="Select a framework reference version" ResourceKey="FrameworkReference">Framework Reference: </Label>
+                <div class="col-sm-9">
+                    <select id="reference" class="form-select" @bind="@_reference" required>
                         @foreach (string version in _versions)
                         {
                             if (Version.Parse(version).CompareTo(Version.Parse(_minversion)) >= 0)
@@ -64,25 +55,26 @@
                         }
                         <option value="local">@SharedLocalizer["LocalVersion"]</option>
                     </select>
-            </td>
-        </tr>
+                </div>
+            </div>
             @if (!string.IsNullOrEmpty(_location))
             {
-            <tr>
-                <td>
-                    <Label For="location" HelpText="Location where the module will be created" ResourceKey="Location">Location: </Label>
-                </td>
-                <td>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="location" HelpText="Location where the module will be created" ResourceKey="Location">Location: </Label>
+                    <div class="col-sm-9">
                         <input id="module" class="form-control" @bind="@_location" readonly />
-                </td>
-            </tr>
+                    </div>
+                </div>
             }
-    </table>
+        </div>
         <button type="button" class="btn btn-success" @onclick="CreateModule">@Localizer["CreateModule"]</button>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    </form>
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private string _owner = string.Empty;
     private string _module = string.Empty;
     private string _description = string.Empty;
@@ -95,13 +87,17 @@
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
+    protected override void OnInitialized()
+    {
+        AddModuleMessage(Localizer["Info.Module.Development"], MessageType.Info);
+    }
+
     protected override async Task OnParametersSetAsync()
     {
         try
         {
             _templates = await ModuleDefinitionService.GetModuleDefinitionTemplatesAsync();
             _versions = Constants.ReleaseVersions.Split(',').Where(item => Version.Parse(item).CompareTo(Version.Parse("2.0.0")) >= 0).ToArray();
-            AddModuleMessage(Localizer["Info.Module.Development"], MessageType.Info);
         }
         catch (Exception ex)
         {
@@ -110,6 +106,10 @@
     }
 
     private async Task CreateModule()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -130,6 +130,11 @@
                 await logger.LogError(ex, "Error Creating Module");
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private bool IsValid(string name)
     {

Oqtane.Client/Modules/Admin/ModuleDefinitions/Edit.razor

@@ -7,101 +7,81 @@
 
 <TabStrip>
     <TabPanel Name="Definition" ResourceKey="Definition">
-        <table class="table table-borderless">
-            <tr>
-                <td width="30%">
-                    <Label For="name" HelpText="The name of the module" ResourceKey="Name">Name: </Label>
-                </td>
-                <td>
-                    <input id="name" class="form-control" @bind="@_name" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="description" HelpText="The description of the module" ResourceKey="Description">Description: </Label>
-                </td>
-                <td>
-                    <textarea id="description" class="form-control" @bind="@_description" rows="2"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="categories" HelpText="Comma delimited list of module categories" ResourceKey="Categories">Categories: </Label>
-                </td>
-                <td>
-                    <input id="categories" class="form-control" @bind="@_categories" />
-                </td>
-            </tr>
-        </table>
+        <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="name" HelpText="The name of the module" ResourceKey="Name">Name: </Label>
+                    <div class="col-sm-9">
+                        <input id="name" class="form-control" @bind="@_name" maxlength="200" required />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="description" HelpText="The description of the module" ResourceKey="Description">Description: </Label>
+                    <div class="col-sm-9">
+                        <textarea id="description" class="form-control" @bind="@_description" rows="2" maxlength="2000" required></textarea>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="categories" HelpText="Comma delimited list of module categories" ResourceKey="Categories">Categories: </Label>
+                    <div class="col-sm-9">
+                        <input id="categories" class="form-control" @bind="@_categories" maxlength="200" required />
+                    </div>
+                </div>
+            </div>
+        </form>
         <Section Name="Information" ResourceKey="Information">
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="moduledefinitionname" HelpText="The internal name of the module" ResourceKey="InternalName">Internal Name: </Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="moduledefinitionname" HelpText="The internal name of the module" ResourceKey="InternalName">Internal Name: </Label>
+                    <div class="col-sm-9">
                         <input id="moduledefinitionname" class="form-control" @bind="@_moduledefinitionname" disabled />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="version" HelpText="The version of the module" ResourceKey="Version">Version: </Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="version" HelpText="The version of the module" ResourceKey="Version">Version: </Label>
+                    <div class="col-sm-9">
                         <input id="version" class="form-control" @bind="@_version" disabled />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="owner" HelpText="The owner or creator of the module" ResourceKey="Owner">Owner: </Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="owner" HelpText="The owner or creator of the module" ResourceKey="Owner">Owner: </Label>
+                    <div class="col-sm-9">
                         <input id="owner" class="form-control" @bind="@_owner" disabled />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="url" HelpText="The reference url of the module" ResourceKey="ReferenceUrl">Reference Url: </Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="url" HelpText="The reference url of the module" ResourceKey="ReferenceUrl">Reference Url: </Label>
+                    <div class="col-sm-9">
                         <input id="url" class="form-control" @bind="@_url" disabled />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="contact" HelpText="The contact for the module" ResourceKey="Contact">Contact: </Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="contact" HelpText="The contact for the module" ResourceKey="Contact">Contact: </Label>
+                    <div class="col-sm-9">
                         <input id="contact" class="form-control" @bind="@_contact" disabled />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="license" HelpText="The module license terms" ResourceKey="License">License: </Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="license" HelpText="The module license terms" ResourceKey="License">License: </Label>
+                    <div class="col-sm-9">
                         <textarea id="license" class="form-control" @bind="@_license" rows="5" disabled></textarea>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="runtimes" HelpText="The Blazor runtimes which this module supports" ResourceKey="Runtimes">Runtimes: </Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="runtimes" HelpText="The Blazor runtimes which this module supports" ResourceKey="Runtimes">Runtimes: </Label>
+                    <div class="col-sm-9">
                         <input id="runtimes" class="form-control" @bind="@_runtimes" disabled />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
         </Section>
     </TabPanel>
     <TabPanel Name="Permissions" ResourceKey="Permissions">
-        <table class="table table-borderless">
-            <tr>
-                <td>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
                 <PermissionGrid EntityName="@EntityNames.ModuleDefinition" PermissionNames="@PermissionNames.Utilize" Permissions="@_permissions" @ref="_permissionGrid" />
-                </td>
-            </tr>
-        </table>
+            </div>
+        </div>
     </TabPanel>
 </TabStrip>
 <button type="button" class="btn btn-success" @onclick="SaveModuleDefinition">@SharedLocalizer["Save"]</button>
@@ -111,6 +91,8 @@
 <AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon"></AuditInfo>
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private int _moduleDefinitionId;
     private string _name;
     private string _version;
@@ -167,6 +149,10 @@
     }
 
     private async Task SaveModuleDefinition()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -194,4 +180,9 @@
                 AddModuleMessage(Localizer["Error.Module.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

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

@@ -22,6 +22,8 @@ else
             <th style="width: 1px;">&nbsp;</th>
             <th>@SharedLocalizer["Name"]</th>
             <th>@SharedLocalizer["Version"]</th>
+            <th>@Localizer["InUse"]</th>
+            <th>@SharedLocalizer["Expires"]</th>
             <th style="width: 1px;">&nbsp;</th>
         </Header>
         <Row>
@@ -34,6 +36,19 @@ else
             </td>
             <td>@context.Name</td>
             <td>@context.Version</td>
+            <td>
+                @if(context.AssemblyName == "Oqtane.Client" || PageState.Modules.Where(m => m.ModuleDefinition.ModuleDefinitionId == context.ModuleDefinitionId).Count() > 0)
+                {
+                    <span>@SharedLocalizer["Yes"]</span>
+                }
+                else
+                {
+                    <span>@SharedLocalizer["No"]</span>
+                }
+            </td>
+            <td>
+                @((MarkupString)PurchaseLink(context.PackageName))
+            </td>
             <td>
                 @if (UpgradeAvailable(context.PackageName, context.Version))
                 {
@@ -67,10 +82,31 @@ else
         }
     }
 
+    private string PurchaseLink(string packagename)
+    {
+        string link = "";
+        if (!string.IsNullOrEmpty(packagename) && _packages != null)
+        {
+            var package = _packages.Where(item => item.PackageId == packagename).FirstOrDefault();
+            if (package != null)
+            {
+                if (package.ExpiryDate != null && package.ExpiryDate.Value.Date != DateTime.MaxValue.Date)
+                {
+                    link += "<span>" + package.ExpiryDate.Value.Date.ToString("MMM dd, yyyy") + "</span>";
+                    if (!string.IsNullOrEmpty(package.PaymentUrl))
+                    {
+                        link += "&nbsp;&nbsp;<a class=\"btn btn-primary\" style=\"text-decoration: none !important\" href=\"" + package.PaymentUrl + "\" target=\"_new\">" + SharedLocalizer["Extend"] + "</a>";
+                    }
+                }
+            }
+        }
+        return link;
+    }
+
     private bool UpgradeAvailable(string packagename, string version)
     {
         var upgradeavailable = false;
-        if (_packages != null)
+        if (!string.IsNullOrEmpty(packagename) && _packages != null)
         {
             var package = _packages.Where(item => item.PackageId == packagename).FirstOrDefault();
             if (package != null)
@@ -86,7 +122,7 @@ else
     {
         try
         {
-            await PackageService.DownloadPackageAsync(packagename, version, "Packages");
+            await PackageService.DownloadPackageAsync(packagename, version, Constants.PackagesFolder);
             await logger.LogInformation("Module Downloaded {ModuleDefinitionName} {Version}", packagename, version);
             await ModuleDefinitionService.InstallModuleDefinitionsAsync();
             AddModuleMessage(string.Format(Localizer["Success.Module.Install"], NavigateUrl("admin/system")), MessageType.Success);

Oqtane.Client/Modules/Admin/Modules/Export.razor

@@ -5,31 +5,35 @@
 @inject IStringLocalizer<Export> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tbody>
-        <tr>
-            <td width="30%">
-                <Label For="content" HelpText="Enter the module content" ResourceKey="Content">Content: </Label>
-            </td>
-            <td>
-                <textarea id="content" class="form-control" @bind="@_content" rows="5"></textarea>
-            </td>
-        </tr>
-    </tbody>
-</table>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="content" HelpText="The Exported Module Content" ResourceKey="Content">Content: </Label>
+        <div class="col-sm-9">
+            <textarea id="content" class="form-control" @bind="@_content" rows="5" readonly></textarea>
+        </div>
+    </div>
+</div>
+
 <button type="button" class="btn btn-success" @onclick="ExportModule">@Localizer["Export"]</button>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 
-
 @code {
     private string _content = string.Empty;
-
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
     public override string Title => "Export Content";
 
 
     private async Task ExportModule()
+    {
+        try
         {
             _content = await ModuleService.ExportModuleAsync(ModuleState.ModuleId);
+            AddModuleMessage(Localizer["Success.Content.Export"], MessageType.Success);
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Exporting Module {ModuleId} {Error}", ModuleState.ModuleId, ex.Message);
+            AddModuleMessage(Localizer["Error.Module.Export"], MessageType.Error);
+        }
     }
 }

Oqtane.Client/Modules/Admin/Modules/Import.razor

@@ -5,29 +5,34 @@
 @inject IStringLocalizer<Import> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tbody>
-        <tr>
-            <td width="30%">
-                <Label For="content" HelpText="Enter the module content" ResourceKey="Content">Content: </Label>
-            </td>
-            <td>
-                <textarea id="content" class="form-control" @bind="@_content" rows="5"></textarea>
-            </td>
-        </tr>
-    </tbody>
-</table>
-<button type="button" class="btn btn-success" @onclick="ImportModule">@Localizer["Import"]</button>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="content" HelpText="Enter The Module Content To Import" ResourceKey="Content">Content: </Label>
+            <div class="col-sm-9">
+                <textarea id="content" class="form-control" @bind="@_content" rows="5" required></textarea>
 
+            </div>
+        </div>
+    </div>
+
+    <button type="button" class="btn btn-success" @onclick="ImportModule">@Localizer["Import"]</button>
+    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+</form>
 
 @code {
     private string _content = string.Empty;
+    private ElementReference form;
+    private bool validated = false;
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
     public override string Title => "Import Content";
 
     private async Task ImportModule()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             if (_content != string.Empty)
             {
@@ -54,4 +59,9 @@
                 AddModuleMessage(Localizer["Message.Required.ImportContent"], MessageType.Warning);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

Oqtane.Client/Modules/Admin/Modules/Settings.razor

@@ -8,49 +8,42 @@
 @inject IStringLocalizer<Settings> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<TabStrip>
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <TabStrip>
         <TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
             @if (_containers != null)
             {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="title" HelpText="Enter the title of the module" ResourceKey="Title">Title: </Label>
-                    </td>
-                    <td>
-                        <input id="title" type="text" name="Title" class="form-control" @bind="@_title" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="container" HelpText="Select the module's container" ResourceKey="Container">Container: </Label>
-                    </td>
-                    <td>
-                        <select id="container" class="form-select" @bind="@_containerType">
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="title" HelpText="Enter the title of the module" ResourceKey="Title">Title: </Label>
+                        <div class="col-sm-9">
+                            <input id="title" type="text" name="Title" class="form-control" @bind="@_title" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="container" HelpText="Select the module's container" ResourceKey="Container">Container: </Label>
+                        <div class="col-sm-9">
+                            <select id="container" class="form-select" @bind="@_containerType" required>
                                 @foreach (var container in _containers)
                                 {
                                     <option value="@container.TypeName">@container.Name</option>
                                 }
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="allpages" HelpText="Indicate if this module should be displayed on all pages" ResourceKey="DisplayOnAllPages">Display On All Pages? </Label>
-                    </td>
-                    <td>
-                        <select id="allpages" class="form-select" @bind="@_allPages">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="allpages" HelpText="Indicate if this module should be displayed on all pages" ResourceKey="DisplayOnAllPages">Display On All Pages? </Label>
+                        <div class="col-sm-9">
+                            <select id="allpages" class="form-select" @bind="@_allPages" required>
                                 <option value="True">@SharedLocalizer["Yes"]</option>
                                 <option value="False">@SharedLocalizer["No"]</option>
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="page" HelpText="The page that the module is located on" ResourceKey="Page">Page: </Label>
-                    </td>
-                    <td>
-                        <select id="page" class="form-select" @bind="@_pageId">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="page" HelpText="The page that the module is located on" ResourceKey="Page">Page: </Label>
+                        <div class="col-sm-9">
+                            <select id="page" class="form-select" @bind="@_pageId" required>
                                 @foreach (Page p in PageState.Pages)
                                 {
                                     if (UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, p.Permissions))
@@ -59,21 +52,20 @@
                                     }
                                 }
                             </select>
-                    </td>
-                </tr>
-            </table>
+                        </div>
+                    </div>
+                </div>
             }
         </TabPanel>
         <TabPanel Name="Permissions" ResourceKey="Permissions">
             @if (_permissions != null)
             {
-            <table class="table table-borderless">
-                <tr>
-                    <td>
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
                         <PermissionGrid EntityName="@EntityNames.Module" PermissionNames="@_permissionNames" Permissions="@_permissions" @ref="_permissionGrid" />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+
             }
         </TabPanel>
         @if (_moduleSettingsType != null)
@@ -88,17 +80,21 @@
                 @ContainerSettingsComponent
             </TabPanel>
         }
-</TabStrip>
-<button type="button" class="btn btn-success" @onclick="SaveModule">@SharedLocalizer["Save"]</button>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-<br />
-<br />
-<AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+    </TabStrip>
+    <br />
+    <button type="button" class="btn btn-success" @onclick="SaveModule">@SharedLocalizer["Save"]</button>
+    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    <br />
+    <br />
+    <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
+</form>
 
 @code {
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Edit;
     public override string Title => "Module Settings";
 
+    private ElementReference form;
+    private bool validated = false;
     private List<Theme> _themes;
     private List<ThemeControl> _containers = new List<ThemeControl>();
     private string _title;
@@ -178,6 +174,10 @@
     }
 
     private async Task SaveModule()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             if (!string.IsNullOrEmpty(_title))
             {
@@ -227,5 +227,10 @@
                 AddModuleMessage(Localizer["Message.Required.Title"], MessageType.Warning);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
 }

Oqtane.Client/Modules/Admin/Pages/Add.razor

@@ -6,39 +6,35 @@
 @inject IStringLocalizer<Add> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<TabStrip Refresh="@_refresh">
+
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <TabStrip Refresh="@_refresh">
         <TabPanel Name="Settings" ResourceKey="Settings">
             @if (_themeList != null)
             {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="Name" HelpText="Enter the page name" ResourceKey="Name">Name: </Label>
-                    </td>
-                    <td>
-                        <input id="Name" class="form-control" @bind="@_name" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
-                    </td>
-                    <td>
-                        <select id="Parent" class="form-select" @onchange="(e => ParentChanged(e))">
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="name" HelpText="Enter the page name" ResourceKey="Name">Name: </Label>
+                        <div class="col-sm-9">
+                            <input id="name" class="form-control" @bind="@_name" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
+                        <div class="col-sm-9">
+                            <select id="parent" class="form-select" @onchange="(e => ParentChanged(e))" required>
                                 <option value="-1">&lt;@Localizer["SiteRoot"]&gt;</option>
                                 @foreach (Page page in _pageList)
                                 {
                                     <option value="@(page.PageId)">@(new string('-', page.Level * 2))@(page.Name)</option>
                                 }
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Insert" HelpText="Select the location where you would like the page to be inserted in relation to other pages" ResourceKey="Insert">Insert: </Label>
-                    </td>
-                    <td>
-                        <select id="Insert" class="form-select" @bind="@_insert">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="insert" HelpText="Select the location where you would like the page to be inserted in relation to other pages" ResourceKey="Insert">Insert: </Label>
+                        <div class="col-sm-9">
+                            <select id="insert" class="form-select" @bind="@_insert" required>
                                 <option value="<<">@Localizer["AtBeginning"]</option>
                                 @if (_children != null && _children.Count > 0)
                                 {
@@ -57,115 +53,96 @@
                                     }
                                 </select>
                             }
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="navigation" HelpText="Select whether the page is part of the site navigation or hidden" ResourceKey="Navigation">Navigation? </Label>
-                    </td>
-                    <td>
-                        <select id="navigation" class="form-select" @bind="@_isnavigation">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="navigation" HelpText="Select whether the page is part of the site navigation or hidden" ResourceKey="Navigation">Navigation? </Label>
+                        <div class="col-sm-9">
+                            <select id="navigation" class="form-select" @bind="@_isnavigation" required>
                                 <option value="True">@SharedLocalizer["Yes"]</option>
                                 <option value="False">@SharedLocalizer["No"]</option>
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="clickable" HelpText="Select whether the link in the site navigation is enabled or disabled" ResourceKey="Clickable">Clickable? </Label>
-                    </td>
-                    <td>
-                        <select id="clickable" class="form-select" @bind="@_isclickable">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="clickable" HelpText="Select whether the link in the site navigation is enabled or disabled" ResourceKey="Clickable">Clickable? </Label>
+                        <div class="col-sm-9">
+                            <select id="clickable" class="form-select" @bind="@_isclickable" required>
                                 <option value="True">@SharedLocalizer["Yes"]</option>
                                 <option value="False">@SharedLocalizer["No"]</option>
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Path" HelpText="Optionally enter a url path for this page (ie. home ). If you do not provide a url path, the page name will be used." ResourceKey="UrlPath">Url Path: </Label>
-                    </td>
-                    <td>
-                        <input id="Path" class="form-control" @bind="@_path" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Url" HelpText="Optionally enter a url which this page should redirect to when a user navigates to it" ResourceKey="Redirect">Redirect: </Label>
-                    </td>
-                    <td>
-                        <input id="Url" class="form-control" @bind="@_url" />
-                    </td>
-                </tr>
-            </table>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="path" HelpText="Optionally enter a url path for this page (ie. home ). If you do not provide a url path, the page name will be used. If the page is intended to be the root path specify '/'." ResourceKey="UrlPath">Url Path: </Label>
+                        <div class="col-sm-9">
+                            <input id="path" class="form-control" @bind="@_path" />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="url" HelpText="Optionally enter a url which this page should redirect to when a user navigates to it" ResourceKey="Redirect">Redirect: </Label>
+                        <div class="col-sm-9">
+                            <input id="url" class="form-control" @bind="@_url" />
+                        </div>
+                    </div>
+                </div>
+
                 <Section Name="Appearance" ResourceKey="Appearance">
-                <table class="table table-borderless">
-                    <tr>
-                        <td width="30%">
-                            <Label For="Title" HelpText="Optionally enter the page title. If you do not provide a page title, the page name will be used." ResourceKey="Title">Title: </Label>
-                        </td>
-                        <td>
-                            <input id="Title" class="form-control" @bind="@_title" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="Theme" HelpText="Select the theme for this page" ResourceKey="Theme">Theme: </Label>
-                        </td>
-                        <td>
-                            <select id="Theme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))">
+                    <div class="container">
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="title" HelpText="Optionally enter the page title. If you do not provide a page title, the page name will be used." ResourceKey="Title">Title: </Label>
+                            <div class="col-sm-9">
+                                <input id="title" class="form-control" @bind="@_title" />
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="theme" HelpText="Select the theme for this page" ResourceKey="Theme">Theme: </Label>
+                            <div class="col-sm-9">
+                                <select id="theme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))" required>
                                     @foreach (var theme in _themes)
                                     {
                                         <option value="@theme.TypeName">@theme.Name</option>
                                     }
                                 </select>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="defaultContainer" HelpText="Select the default container for the page" ResourceKey="DefaultContainer">Default Container: </Label>
-                        </td>
-                        <td>
-                            <select id="defaultContainer" class="form-select" @bind="@_containertype">
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="container" HelpText="Select the default container for the page" ResourceKey="DefaultContainer">Default Container: </Label>
+                            <div class="col-sm-9">
+                                <select id="container" class="form-select" @bind="@_containertype" required>
                                     <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
                                     @foreach (var container in _containers)
                                     {
                                         <option value="@container.TypeName">@container.Name</option>
                                     }
                                 </select>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="Icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
-                        </td>
-                        <td>
-                            <input id="Icon" class="form-control" @bind="@_icon" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="Personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
-                        </td>
-                        <td>
-                            <select id="Personalizable" class="form-select" @bind="@_ispersonalizable">
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
+                            <div class="col-sm-9">
+                                <input id="icon" class="form-control" @bind="@_icon" />
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
+                            <div class="col-sm-9">
+                                <select id="personalizable" class="form-select" @bind="@_ispersonalizable" required>
                                     <option value="True">@SharedLocalizer["Yes"]</option>
                                     <option value="False">@SharedLocalizer["No"]</option>
                                 </select>
-                        </td>
-                    </tr>
-                </table>
+                            </div>
+                        </div>
+                    </div>
                 </Section>
             }
         </TabPanel>
         <TabPanel Name="Permissions" ResourceKey="Permissions">
-        <table class="table table-borderless">
-            <tr>
-                <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
                     <PermissionGrid EntityName="@EntityNames.Page" Permissions="@_permissions" @ref="_permissionGrid" />
-                </td>
-            </tr>
-        </table>
+                </div>
+            </div>
         </TabPanel>
         @if (_themeSettingsType != null)
         {
@@ -173,9 +150,10 @@
                 @ThemeSettingsComponent
             </TabPanel>
         }
-</TabStrip>
-<button type="button" class="btn btn-success" @onclick="SavePage">@SharedLocalizer["Save"]</button>
-<button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
+    </TabStrip>
+    <button type="button" class="btn btn-success" @onclick="SavePage">@SharedLocalizer["Save"]</button>
+    <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
+</form>
 
 @code {
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
@@ -187,7 +165,7 @@
     private string _name;
     private string _title;
     private string _path = string.Empty;
-    private string _parentid;
+    private string _parentid = "-1";
     private string _insert = ">>";
     private List<Page> _children;
     private int _childid = -1;
@@ -204,6 +182,8 @@
     private object _themeSettings;
     private RenderFragment ThemeSettingsComponent { get; set; }
     private bool _refresh = false;
+    private ElementReference form;
+    private bool validated = false;
 
     protected override async Task OnInitializedAsync()
     {
@@ -299,27 +279,31 @@
     }
 
     private async Task SavePage()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             Page page = null;
             try
             {
-            if (!string.IsNullOrEmpty(_name) && !string.IsNullOrEmpty(_themetype) && _containertype != "-")
+                if (!string.IsNullOrEmpty(_themetype) && _containertype != "-")
                 {
                     page = new Page();
                     page.SiteId = PageState.Page.SiteId;
                     page.Name = _name;
                     page.Title = _title;
-                if (_path == "")
+
+                    if (string.IsNullOrEmpty(_path))
                     {
                         _path = _name;
                     }
-
                     if (_path.Contains("/"))
                     {
                         _path = _path.Substring(_path.LastIndexOf("/") + 1);
                     }
 
-                if (string.IsNullOrEmpty(_parentid))
+                    if (_parentid == "-1")
                     {
                         page.ParentId = null;
                         page.Path = Utilities.GetFriendlyUrl(_path);
@@ -338,6 +322,12 @@
                         }
                     }
 
+                    if(PagePathIsDeleted(page.Path, page.SiteId, _pageList))
+                    {
+                        AddModuleMessage(string.Format(Localizer["Message.Page.Deleted"], _path), MessageType.Warning);
+                        return;
+                    }
+
                     if (!PagePathIsUnique(page.Path, page.SiteId, _pageList))
                     {
                         AddModuleMessage(string.Format(Localizer["Message.Page.Exists"], _path), MessageType.Warning);
@@ -406,6 +396,11 @@
                 AddModuleMessage(Localizer["Error.Page.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private void Cancel()
     {
@@ -423,4 +418,9 @@
     {
         return !existingPages.Any(page => page.SiteId == siteId && page.Path == pagePath);
     }
+
+    private static bool PagePathIsDeleted(string pagePath, int siteId, List<Page> existingPages)
+    {
+        return existingPages.Any(page => page.SiteId == siteId && page.Path == pagePath && page.IsDeleted == true);
+    }
 }

Oqtane.Client/Modules/Admin/Pages/Edit.razor

@@ -3,29 +3,27 @@
 @inherits ModuleBase
 @inject NavigationManager NavigationManager
 @inject IPageService PageService
+@inject IPageModuleService PageModuleService
 @inject IThemeService  ThemeService
 @inject IStringLocalizer<Edit> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<TabStrip Refresh="@_refresh">
-    <TabPanel Name="Settings" ResourceKey="Settings">
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <TabStrip Refresh="@_refresh">
+        <TabPanel Name="Settings" ResourceKey="Settings" Heading=@Localizer["Settings.Heading"]>
             @if (_themeList != null)
             {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="Name" HelpText="Enter the page name" ResourceKey="Name">Name: </Label>
-                    </td>
-                    <td>
-                        <input id="Name" class="form-control" @bind="@_name" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
-                    </td>
-                    <td>
-                        <select id="Parent" class="form-select" value="@_parentid" @onchange="(e => ParentChanged(e))">
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="name" HelpText="Enter the page name" ResourceKey="Name">Name: </Label>
+                        <div class="col-sm-9">
+                            <input id="name" class="form-control" @bind="@_name" maxlength="50" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="parent" HelpText="Select the parent for the page in the site hierarchy" ResourceKey="Parent">Parent: </Label>
+                        <div class="col-sm-9">
+                            <select id="parent" class="form-select" value="@_parentid" @onchange="(e => ParentChanged(e))" required>
                                 <option value="-1">&lt;@Localizer["SiteRoot"]&gt;</option>
                                 @foreach (Page page in _pageList)
                                 {
@@ -35,14 +33,12 @@
                                     }
                                 }
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Move" HelpText="Select the location where you would like the page to be moved in relation to other pages" ResourceKey="Move">Move: </Label>
-                    </td>
-                    <td>
-                        <select id="Move" class="form-select" @bind="@_insert">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="move" HelpText="Select the location where you would like the page to be moved in relation to other pages" ResourceKey="Move">Move: </Label>
+                        <div class="col-sm-9">
+                            <select id="move" class="form-select" @bind="@_insert" required>
                                 @if (_parentid == _currentparentid)
                                 {
                                     <option value="=">&lt;@Localizer["ThisLocation.Keep"]&gt;</option>
@@ -65,104 +61,86 @@
                                     }
                                 </select>
                             }
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Navigation" HelpText="Select whether the page is part of the site navigation or hidden" ResourceKey="Navigation">Navigation? </Label>
-                    </td>
-                    <td>
-                        <select id="Navigation" class="form-select" @bind="@_isnavigation">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="navigation" HelpText="Select whether the page is part of the site navigation or hidden" ResourceKey="Navigation">Navigation? </Label>
+                        <div class="col-sm-9">
+                            <select id="navigation" class="form-select" @bind="@_isnavigation" required>
                                 <option value="True">@SharedLocalizer["Yes"]</option>
                                 <option value="False">@SharedLocalizer["No"]</option>
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Clickablen" HelpText="Select whether the link in the site navigation is enabled or disabled" ResourceKey="Clickable">Clickable? </Label>
-                    </td>
-                    <td>
-                        <select id="Navigation" class="form-select" @bind="@_isclickable">
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="clickable" HelpText="Select whether the link in the site navigation is enabled or disabled" ResourceKey="Clickable">Clickable? </Label>
+                        <div class="col-sm-9">
+                            <select id="clickable" class="form-select" @bind="@_isclickable" required>
                                 <option value="True">@SharedLocalizer["Yes"]</option>
                                 <option value="False">@SharedLocalizer["No"]</option>
                             </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Path" HelpText="Optionally enter a url path for this page (ie. home ). If you do not provide a url path, the page name will be used." ResourceKey="UrlPath">Url Path: </Label>
-                    </td>
-                    <td>
-                        <input id="Path" class="form-control" @bind="@_path" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="Url" HelpText="Optionally enter a url which this page should redirect to when a user navigates to it" ResourceKey="Redirect">Redirect: </Label>
-                    </td>
-                    <td>
-                        <input id="Url" class="form-control" @bind="@_url" />
-                    </td>
-                </tr>
-            </table>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="path" HelpText="Optionally enter a url path for this page (ie. home ). If you do not provide a url path, the page name will be used. If the page is intended to be the root path specify '/'." ResourceKey="UrlPath">Url Path: </Label>
+                        <div class="col-sm-9">
+                            <input id="path" class="form-control" @bind="@_path" maxlength="256"/>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="url" HelpText="Optionally enter a url which this page should redirect to when a user navigates to it" ResourceKey="Redirect">Redirect: </Label>
+                        <div class="col-sm-9">
+                            <input id="url" class="form-control" @bind="@_url" maxlength="500"/>
+                        </div>
+                    </div>
+                </div>
                 <Section Name="Appearance" ResourceKey="Appearance">
-                <table class="table table-borderless">
-                    <tr>
-                        <td width="30%">
-                            <Label For="Title" HelpText="Optionally enter the page title. If you do not provide a page title, the page name will be used." ResourceKey="Title">Title: </Label>
-                        </td>
-                        <td>
-                            <input id="Title" class="form-control" @bind="@_title" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="Theme" HelpText="Select the theme for this page" ResourceKey="Theme">Theme: </Label>
-                        </td>
-                        <td>
-                            <select id="Theme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))">
+                    <div class="container">
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="title" HelpText="Optionally enter the page title. If you do not provide a page title, the page name will be used." ResourceKey="Title">Title: </Label>
+                            <div class="col-sm-9">
+                                <input id="title" class="form-control" @bind="@_title" maxlength="200"/>
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="theme" HelpText="Select the theme for this page" ResourceKey="Theme">Theme: </Label>
+                            <div class="col-sm-9">
+                                <select id="theme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))" required>
                                     @foreach (var theme in _themes)
                                     {
                                         <option value="@theme.TypeName">@theme.Name</option>
                                     }
                                 </select>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="defaultContainer" HelpText="Select the default container for the page" ResourceKey="DefaultContainer">Default Container: </Label>
-                        </td>
-                        <td>
-                            <select id="defaultContainer" class="form-select" @bind="@_containertype">
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="container" HelpText="Select the default container for the page" ResourceKey="DefaultContainer">Default Container: </Label>
+                            <div class="col-sm-9">
+                                <select id="container" class="form-select" @bind="@_containertype" required>
                                     <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
                                     @foreach (var container in _containers)
                                     {
                                         <option value="@container.TypeName">@container.Name</option>
                                     }
                                 </select>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="Icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
-                        </td>
-                        <td>
-                            <input id="Icon" class="form-control" @bind="@_icon" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <Label For="Personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
-                        </td>
-                        <td>
-                            <select id="Personalizable" class="form-select" @bind="@_ispersonalizable">
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
+                            <div class="col-sm-9">
+                                <input id="icon" class="form-control" @bind="@_icon" maxlength="50"/>
+                            </div>
+                        </div>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="personalizable" HelpText="Select whether you would like users to be able to personalize this page with their own content" ResourceKey="Personalizable">Personalizable? </Label>
+                            <div class="col-sm-9">
+                                <select id="personalizable" class="form-select" @bind="@_ispersonalizable" required>
                                     <option value="True">@SharedLocalizer["Yes"]</option>
                                     <option value="False">@SharedLocalizer["No"]</option>
                                 </select>
-                        </td>
-                    </tr>
-                </table>
+                            </div>
+                        </div>
+                    </div>
                 </Section>
                 <br /><br />
                 <AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon" DeletedBy="@_deletedby" DeletedOn="@_deletedon"></AuditInfo>
@@ -171,13 +149,30 @@
         <TabPanel Name="Permissions" ResourceKey="Permissions">
             @if (_permissions != null)
             {
-            <table class="table table-borderless">
-                <tr>
-                    <td>
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
                         <PermissionGrid EntityName="@EntityNames.Page" Permissions="@_permissions" @ref="_permissionGrid" />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            }
+        </TabPanel>
+        <TabPanel Name="PageModules" Heading="Modules" ResourceKey="PageModules">
+            @if(_pageModules != null)
+            {
+                <Pager Items="_pageModules">
+                    <Header>
+                        <th style="width: 1px;">&nbsp;</th>
+                        <th style="width: 1px;">&nbsp;</th>
+                        <th>@Localizer["ModuleTitle"]</th>
+                        <th>@Localizer["ModuleDefinition"]</th>
+                    </Header>
+                    <Row>
+                        <td><ActionLink Action="Settings" Text="Edit" ModuleId="@context.ModuleId" Security="SecurityAccessLevel.Edit" Permissions="@context.Permissions" ResourceKey="ModuleSettings" /></td>
+                        <td><ActionDialog Header="Delete Module" Message="Are You Sure You Wish To Delete This Module?" Action="Delete" Security="SecurityAccessLevel.Edit" Permissions="@context.Permissions" Class="btn btn-danger" OnClick="@(async () => await DeleteModule(context))" ResourceKey="DeleteModule" /></td>
+                        <td>@context.Title</td>
+                        <td>@context.ModuleDefinition?.Name</td>
+                    </Row>
+                </Pager>
             }
         </TabPanel>
         @if (_themeSettingsType != null)
@@ -185,24 +180,29 @@
             <TabPanel Name="ThemeSettings" Heading="Theme Settings" ResourceKey="ThemeSettings">
                 @ThemeSettingsComponent
             </TabPanel>
+            <br />
         }
-</TabStrip>
-<button type="button" class="btn btn-success" @onclick="SavePage">@SharedLocalizer["Save"]</button>
-<button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
+    </TabStrip>
+    <button type="button" class="btn btn-success" @onclick="SavePage">@SharedLocalizer["Save"]</button>
+    <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
+</form>
 
 @code {
 	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
 
+	private ElementReference form;
+	private bool validated = false;
 	private List<Theme> _themeList;
 	private List<ThemeControl> _themes = new List<ThemeControl>();
 	private List<ThemeControl> _containers = new List<ThemeControl>();
 	private List<Page> _pageList;
+	private List<Module> _pageModules;
 	private int _pageId;
 	private string _name;
 	private string _title;
 	private string _path;
 	private string _currentparentid;
-    private string _parentid;
+	private string _parentid = "-1";
 	private string _insert = "=";
 	private List<Page> _children;
 	private int _childid = -1;
@@ -225,6 +225,7 @@
 	private object _themeSettings;
 	private RenderFragment ThemeSettingsComponent { get; set; }
 	private bool _refresh = false;
+	protected Page page;
 
 	protected override async Task OnInitializedAsync()
 	{
@@ -232,26 +233,34 @@
 		{
 			_pageList = PageState.Pages;
 			_children = PageState.Pages.Where(item => item.ParentId == null).ToList();
-
 			_themeList = await ThemeService.GetThemesAsync();
 			_themes = ThemeService.GetThemeControls(_themeList);
 
 			_pageId = Int32.Parse(PageState.QueryString["id"]);
-            var page = PageState.Pages.FirstOrDefault(item => item.PageId == _pageId);
+			page = PageState.Pages.FirstOrDefault(item => item.PageId == _pageId);
+
 			if (page != null)
 			{
 				_name = page.Name;
 				_title = page.Title;
 				_path = page.Path;
+				_pageModules = PageState.Modules.Where(m => m.PageId == page.PageId && m.IsDeleted == false).ToList();
 
+				if (string.IsNullOrEmpty(_path))
+				{
+					_path = "/";
+				}
+				else
+				{
 					if (_path.Contains("/"))
 					{
 						_path = _path.Substring(_path.LastIndexOf("/") + 1);
 					}
+				}
 
 				if (page.ParentId == null)
 				{
-                    _parentid = string.Empty;
+					_parentid = "-1";
 				}
 				else
 				{
@@ -293,6 +302,25 @@
 		}
 	}
 
+	private async Task DeleteModule(Module module)
+	{
+		try
+		{
+			PageModule pagemodule = await PageModuleService.GetPageModuleAsync(page.PageId, module.ModuleId);
+			pagemodule.IsDeleted = true;
+			await PageModuleService.UpdatePageModuleAsync(pagemodule);
+			await logger.LogInformation(LogFunction.Update,"Module Deleted {Title}", module.Title);
+			_pageModules.RemoveAll(item => item.PageModuleId == pagemodule.PageModuleId);
+			StateHasChanged();
+			NavigationManager.NavigateTo(NavigationManager.Uri + "&tab=PageModules");
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Deleting Module {Title} {Error}", module.Title, ex.Message);
+            AddModuleMessage(Localizer["Error.Module.Delete"], MessageType.Error);
+        }
+    }
+
     private async void ParentChanged(ChangeEventArgs e)
     {
         try
@@ -374,19 +402,23 @@
     }
 
     private async Task SavePage()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             Page page = null;
             try
             {
-            if (_name != string.Empty && !string.IsNullOrEmpty(_themetype) && _containertype != "-")
+                if (!string.IsNullOrEmpty(_themetype) && _containertype != "-")
                 {
                     page = PageState.Pages.FirstOrDefault(item => item.PageId == _pageId);
                     string currentPath = page.Path;
 
                     page.Name = _name;
                     page.Title = _title;
-                if (_path == "" && _name.ToLower() != "home")
-                    if (_path == string.Empty && _name.ToLower() != "home")
+
+                    if (string.IsNullOrEmpty(_path))
                     {
                         _path = _name;
                     }
@@ -394,7 +426,8 @@
                     {
                         _path = _path.Substring(_path.LastIndexOf("/") + 1);
                     }
-                if (string.IsNullOrEmpty(_parentid) || _parentid == "-1")
+
+                    if (_parentid == "-1")
                     {
                         page.ParentId = null;
                         page.Path = Utilities.GetFriendlyUrl(_path);
@@ -505,6 +538,11 @@
                 AddModuleMessage(Localizer["Error.Page.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private void Cancel()
     {

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

@@ -18,6 +18,7 @@
         <Row>
             <td><ActionLink Action="Edit" Parameters="@($"id=" + context.PageId.ToString())" ResourceKey="EditPage" /></td>
             <td><ActionDialog Header="Delete Page" Message="@string.Format(Localizer["Confirm.Page.Delete"], context.Name)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeletePage(context))" ResourceKey="DeletePage" /></td>
+            <td><button type="button" class="btn btn-secondary" @onclick="@(async () => NavigationManager.NavigateTo(Browse(context)))">@Localizer["Browse"]</button></td>
             <td>@(new string('-', context.Level * 2))@(context.Name)</td>
         </Row>
     </Pager>
@@ -42,4 +43,8 @@
             AddModuleMessage(Localizer["Error.Page.Delete"], MessageType.Error);
         }
     }
+    protected string Browse(Page page)
+    {
+        return string.IsNullOrEmpty(page.Url) ? NavigateUrl(page.Path) : page.Url;
+    }
 }

Oqtane.Client/Modules/Admin/Profiles/Edit.razor

@@ -5,105 +5,90 @@
 @inject IStringLocalizer<Edit> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="name" HelpText="The name of this profile item" ResourceKey="Name">Name: </Label>
-        </td>
-        <td>
-            <input id="name" class="form-control" @bind="@_name" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="title" HelpText="The title of the profile item to display to the user" ResourceKey="Title">Title: </Label>
-        </td>
-        <td>
-            <input id="title" class="form-control" @bind="@_title" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="description" HelpText="The help text displayed to the user for this profile item" ResourceKey="Description">Description: </Label>
-        </td>
-        <td>
-            <textarea id="description" class="form-control" @bind="@_description" rows="5"></textarea>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="category" HelpText="The category of this profile item (for grouping)" ResourceKey="Category">Category: </Label>
-        </td>
-        <td>
-            <input id="category" class="form-control" @bind="@_category" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="order" HelpText="The index order of where this profile item should be displayed" ResourceKey="Order">Order: </Label>
-        </td>
-        <td>
-            <input id="order" class="form-control" @bind="@_vieworder" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="length" HelpText="The max number of characters this profile item should accept (enter zero for unlimited)" ResourceKey="Length">Length: </Label>
-        </td>
-        <td>
-            <input id="length" class="form-control" @bind="@_maxlength" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="defaultVal" HelpText="The default value for this profile item" ResourceKey="DefaultValue">Default Value: </Label>
-        </td>
-        <td>
-            <input id="defaultVal" class="form-control" @bind="@_defaultvalue" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="options" HelpText="A comma delimited list of options the user can select from" ResourceKey="Options">Options: </Label>
-        </td>
-        <td>
-            <input id="options" class="form-control" @bind="@_options" />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="required" HelpText="Should a user be required to provide a value for this profile item?" ResourceKey="Required">Required? </Label>
-        </td>
-        <td>
-            <select id="required" class="form-select" @bind="@_isrequired">
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="name" HelpText="The name of this profile item" ResourceKey="Name">Name: </Label>
+            <div class="col-sm-9">
+                <input id="name" class="form-control" @bind="@_name" maxlength="50" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="title" HelpText="The title of the profile item to display to the user" ResourceKey="Title">Title: </Label>
+            <div class="col-sm-9">
+                <input id="title" class="form-control" @bind="@_title" maxlength="50" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="description" HelpText="The help text displayed to the user for this profile item" ResourceKey="Description">Description: </Label>
+            <div class="col-sm-9">
+                <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required ></textarea>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="category" HelpText="The category of this profile item (for grouping)" ResourceKey="Category">Category: </Label>
+            <div class="col-sm-9">
+                <input id="category" class="form-control" @bind="@_category" maxlength="50" />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="order" HelpText="The index order of where this profile item should be displayed" ResourceKey="Order">Order: </Label>
+            <div class="col-sm-9">
+                <input id="order" class="form-control" @bind="@_vieworder" maxlength="4" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="length" HelpText="The max number of characters this profile item should accept (enter zero for unlimited)" ResourceKey="Length">Length: </Label>
+            <div class="col-sm-9">
+                <input id="length" class="form-control" @bind="@_maxlength" maxlength="4" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="defaultVal" HelpText="The default value for this profile item" ResourceKey="DefaultValue">Default Value: </Label>
+            <div class="col-sm-9">
+                <input id="defaultVal" class="form-control" @bind="@_defaultvalue" maxlength="2000"/>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="options" HelpText="A comma delimited list of options the user can select from" ResourceKey="Options">Options: </Label>
+            <div class="col-sm-9">
+                <input id="options" class="form-control" @bind="@_options" maxlength="2000" />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="required" HelpText="Should a user be required to provide a value for this profile item?" ResourceKey="Required">Required? </Label>
+            <div class="col-sm-9">
+                <select id="required" class="form-select" @bind="@_isrequired" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="private" HelpText="Should this profile item be visible to all users?" ResourceKey="Private">Private? </Label>
-        </td>
-        <td>
-            <select id="private" class="form-select" @bind="@_isprivate">
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="private" HelpText="Should this profile item be visible to all users?" ResourceKey="Private">Private? </Label>
+            <div class="col-sm-9">
+                <select id="private" class="form-select" @bind="@_isprivate" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
-        </td>
-    </tr>
-</table>
-<button type="button" class="btn btn-success" @onclick="SaveProfile">@SharedLocalizer["Save"]</button>
-<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-@if (PageState.QueryString.ContainsKey("id"))
-{
+            </div>
+        </div>
+    </div>
+    <br />
+    <button type="button" class="btn btn-success" @onclick="SaveProfile">@SharedLocalizer["Save"]</button>
+    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    @if (PageState.QueryString.ContainsKey("id"))
+    {
         <br />
         <br />
         <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
-}
+    }
+</form>
 
 @code {
     private int _profileid = -1;
+    private ElementReference form;
+    private bool validated = false;
     private string _name = string.Empty;
     private string _title = string.Empty;
     private string _description = string.Empty;
@@ -158,6 +143,10 @@
     }
 
     private async Task SaveProfile()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -200,4 +189,9 @@
                 AddModuleMessage(Localizer["Error.Profile.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

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

@@ -25,7 +25,7 @@
                     <th>@Localizer["DeletedOn"]</th>
                 </Header>
                 <Row>
-                    <td><button @onclick="@(() => RestorePage(context))" class="btn btn-info" title="Restore">Restore</button></td>
+                    <td><button type="button" @onclick="@(() => RestorePage(context))" class="btn btn-info" title="Restore">Restore</button></td>
                     <td><ActionDialog Header="Delete Page" Message="@string.Format(Localizer["Confirm.Page.Delete"], context.Name)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeletePage(context))" ResourceKey="DeletePage" /></td>
                     <td>@context.Name</td>
                     <td>@context.DeletedBy</td>
@@ -34,9 +34,7 @@
             </Pager>
             @if (_pages.Any())
             {
-                <div style="text-align:right;">
-                    <ActionDialog Header="Delete All Pages" Message="Are You Sure You Wish To Permanently Delete All Pages?" Action="Delete All Pages" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteAllPages())" ResourceKey="DeleteAllPages" />
-                </div>
+                <br /><ActionDialog Header="Delete All Pages" Message="Are You Sure You Wish To Permanently Delete All Pages?" Action="Delete All Pages" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteAllPages())" ResourceKey="DeleteAllPages" />
             }
         }
     </TabPanel>
@@ -58,7 +56,7 @@
                     <th>@Localizer["DeletedOn"]</th>
                 </Header>
                 <Row>
-                    <td><button @onclick="@(() => RestoreModule(context))" class="btn btn-info" title="Restore">@Localizer["Restore"]</button></td>
+                    <td><button type="button" @onclick="@(() => RestoreModule(context))" class="btn btn-info" title="Restore">@Localizer["Restore"]</button></td>
                     <td><ActionDialog Header="Delete Module" Message="@string.Format(Localizer["Confirm.Module.Delete"], context.Title)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteModule(context))" ResourceKey="DeleteModule" /></td>
                     <td>@PageState.Pages.Find(item => item.PageId == context.PageId).Name</td>
                     <td>@context.Title</td>
@@ -68,9 +66,7 @@
             </Pager>
             @if (_modules.Any())
             {
-                <div style="text-align:right;">
-                    <ActionDialog Header="Delete All Modules" Message="Are You Sure You Wish To Permanently Delete All Modules?" Action="Delete All Modules" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteAllModules())" ResourceKey="DeleteAllModules" />
-                </div>
+                <br /><ActionDialog Header="Delete All Modules" Message="Are You Sure You Wish To Permanently Delete All Modules?" Action="Delete All Modules" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteAllModules())" ResourceKey="DeleteAllModules" />
             }
 
         }

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

@@ -16,52 +16,43 @@
         </Authorized>
         <NotAuthorized>
             <ModuleMessage Message="@Localizer["Info.Registration.InvalidEmail"]" Type="MessageType.Info" />
-
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="Your username. Note that this field can not be modified once it is saved." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
-                        <input id="username" class="form-control" @bind="@_username" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
-                        <input id="password" type="password" class="form-control" @bind="@_password" autocomplete="new-password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
-                        <input id="confirm" type="password" class="form-control" @bind="@_confirm" autocomplete="new-password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
-                        <input id="email" class="form-control" @bind="@_email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="Your full name" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
-                        <input id="displayname" class="form-control" @bind="@_displayname" />
-                    </td>
-                </tr>
-            </table>
-
+            <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="username" HelpText="Your username. Note that this field can not be modified once it is saved." ResourceKey="Username"></Label>
+                        <div class="col-sm-9">
+                            <input id="username" class="form-control" @bind="@_username" maxlength="256" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="password" HelpText="Please choose a sufficiently secure password and enter it here" ResourceKey="Password"></Label>
+                        <div class="col-sm-9">
+                            <input id="password" type="password" class="form-control" @bind="@_password" autocomplete="new-password" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="confirm" HelpText="Enter your password again to confirm it matches the value entered above" ResourceKey="Confirm"></Label>
+                        <div class="col-sm-9">
+                            <input id="confirm" type="password" class="form-control" @bind="@_confirm" autocomplete="new-password" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
+                        <div class="col-sm-9">
+                            <input id="email" class="form-control" @bind="@_email" maxlength="256" required />
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="displayname" HelpText="Your full name" ResourceKey="DisplayName"></Label>
+                        <div class="col-sm-9">
+                            <input id="displayname" class="form-control" @bind="@_displayname" maxlength="50" />
+                        </div>
+                    </div>
+                </div>
+                <br />
                 <button type="button" class="btn btn-primary" @onclick="Register">@Localizer["Register"]</button>
                 <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
+            </form>
         </NotAuthorized>
     </AuthorizeView>
 }
@@ -72,6 +63,8 @@ else
 
 @code {
     private string _username = string.Empty;
+    private ElementReference form;
+    private bool validated = false;
     private string _password = string.Empty;
     private string _confirm = string.Empty;
     private string _email = string.Empty;
@@ -80,12 +73,16 @@ else
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Anonymous;
 
     private async Task Register()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
                 bool _isEmailValid = Utilities.IsValidEmail(_email);
 
-            if (_username != "" && _password != "" && _confirm != "" && _isEmailValid)
+                if (_isEmailValid)
                 {
                     if (_password == _confirm)
                     {
@@ -126,6 +123,11 @@ else
                 AddModuleMessage(Localizer["Error.User.Add"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private void Cancel()
     {

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

@@ -5,31 +5,42 @@
 @inject IStringLocalizer<Index> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<div class="container">
-    <div class="form-group">
-        <label for="Username" class="control-label">@SharedLocalizer["Username"] </label>
-        <input type="text" class="form-control" placeholder="Username" @bind="@_username" readonly id="Username" />
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="username" HelpText="Your username will be populated from the link you received in the password reset notification" ResourceKey="Username">Username: </Label>
+            <div class="col-sm-9">
+                <input id="username" type="text" class="form-control" @bind="@_username" readonly />
             </div>
-    <div class="form-group">
-        <label for="Password" class="control-label">@SharedLocalizer["Password"] </label>
-        <input type="password" class="form-control" placeholder="Password" @bind="@_password" id="Password" />
         </div>
-    <div class="form-group">
-        <label for="Confirm" class="control-label">@Localizer["Password.Confirm"] </label>
-        <input type="password" class="form-control" placeholder="Password" @bind="@_confirm" id="Confirm" />
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="password" HelpText="The new password. It must satisfy complexity rules for the site." ResourceKey="Password">Password: </Label>
+            <div class="col-sm-9">
+                <input id="password" type="password" class="form-control" @bind="@_password" required />
             </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="confirm" HelpText="Enter the password again. It must exactly match the password entered above." ResourceKey="Confirm">Confirm: </Label>
+            <div class="col-sm-9">
+                <input id="confirm" type="password" class="form-control" @bind="@_confirm" required />
+            </div>
+        </div>
+    </div>
+    <br />
     <button type="button" class="btn btn-primary" @onclick="Reset">@Localizer["Password.Reset"]</button>
     <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
-</div>
+</form>
 
 @code {
+	private ElementReference form;
+	private bool validated = false;
 	private string _username = string.Empty;
 	private string _password = string.Empty;
 	private string _confirm = string.Empty;
 
 	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Anonymous;
 
-    protected override void OnInitialized()
+	protected override async Task OnInitializedAsync()
 	{
 		if (PageState.QueryString.ContainsKey("name") && PageState.QueryString.ContainsKey("token"))
         {
@@ -37,11 +48,16 @@
         }
         else
         {
-            NavigationManager.NavigateTo(NavigateUrl(string.Empty));
+            await logger.LogError(LogFunction.Security, "Invalid Attempt To Access User Password Reset");
+            NavigationManager.NavigateTo(NavigateUrl("")); // home page
         }
     }
 
     private async Task Reset()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -84,6 +100,11 @@
                 AddModuleMessage(Localizer["Error.Password.Reset"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private void Cancel()
     {

Oqtane.Client/Modules/Admin/Roles/Add.razor

@@ -6,37 +6,32 @@
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
-            </td>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
+            <div class="col-sm-9">
                 <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
+            <div class="col-sm-9">
                 <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
-            </td>
-            <td>
-                <select id="isautoassigned" class="form-select" @bind="@_isautoassigned">
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
+            <div class="col-sm-9">
+                <select id="isautoassigned" class="form-select" @bind="@_isautoassigned" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
-            </td>
-        </tr>
-    </table>
+            </div>
+        </div>
+        <br /><br />
         <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    </div>
 </form>
 
 @code {
@@ -77,7 +72,7 @@
         }
         else
         {
-            AddModuleMessage(Localizer["Message.InfoRequired"], MessageType.Warning);
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
         }
     }
 

Oqtane.Client/Modules/Admin/Roles/Edit.razor

@@ -6,39 +6,34 @@
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
-            </td>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
+            <div class="col-sm-9">
                 <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
+            <div class="col-sm-9">
                 <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
-            </td>
-            <td>
-                <select id="isautoassigned" class="form-select" @bind="@_isautoassigned">
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
+            <div class="col-sm-9">
+                <select id="isautoassigned" class="form-select" @bind="@_isautoassigned" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
-            </td>
-        </tr>
-    </table>
+            </div>
+        </div>
+        <br /><br />
         <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
         <br /><br />
         <AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon"></AuditInfo>
+    </div>
 </form>
 
 @code {
@@ -106,7 +101,7 @@
         }
         else
         {
-            AddModuleMessage(Localizer["Message.InfoRequired"], MessageType.Warning);
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
         }
     }
 }

Oqtane.Client/Modules/Admin/Roles/Users.razor

@@ -11,50 +11,44 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="role" HelpText="The role you are assigning users to" ResourceKey="Role">Role: </Label>
-            </td>
-            <td>
+
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="role" HelpText="The role you are assigning users to" ResourceKey="Role">Role: </Label>
+                <div class="col-sm-9">
                     <input id="role" class="form-control" @bind="@name" disabled />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="user" HelpText="Select a user" ResourceKey="User">User: </Label>
-            </td>
-            <td>
-                <select id="user" class="form-select" @bind="@userid">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="user" HelpText="Select a user" ResourceKey="User">User: </Label>
+                <div class="col-sm-9">
+                    <select id="user" class="form-select" @bind="@userid" required>
                         <option value="-1">&lt;@Localizer["User.Select"]&gt;</option>
                         @foreach (UserRole userrole in users)
                         {
                             <option value="@(userrole.UserId)">@userrole.User.DisplayName</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
-            </td>
-            <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
+                <div class="col-sm-9">
                     <input type="date" id="effectiveDate" class="form-control" @bind="@effectivedate" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
-            </td>
-            <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
+                <div class="col-sm-9">
                     <input type="date" id="expiryDate" class="form-control" @bind="@expirydate" />
-            </td>
-        </tr>
-    </table>
+                </div>
+            </div>
+            <br /><br />
             <button type="button" class="btn btn-success" @onclick="SaveUserRole">@SharedLocalizer["Save"]</button>
             <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-
             <hr class="app-rule" />
+            <div class="row mb-1 align-items-center">
                 <p align="center">
                     <Pager Items="@userroles">
                         <Header>
@@ -73,9 +67,15 @@ else
                         </Row>
                     </Pager>
                 </p>
+            </div>
+        </div>
+    </form>
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
+
     private int roleid;
     private string name = string.Empty;
     private List<UserRole> users;
@@ -122,6 +122,10 @@ else
     }
 
     private async Task SaveUserRole()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -162,7 +166,17 @@ else
             }
         }
 
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
+
     private async Task DeleteUserRole(int UserRoleId)
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -178,4 +192,9 @@ else
                 AddModuleMessage(Localizer["Error.User.RemoveRole"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

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

@@ -1,5 +1,6 @@
 @namespace Oqtane.Modules.Admin.Site
 @inherits ModuleBase
+@using System.Text.RegularExpressions
 @inject NavigationManager NavigationManager
 @inject ISiteService SiteService
 @inject ITenantService TenantService
@@ -13,106 +14,54 @@
 
 @if (_initialized)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="name" HelpText="Enter the site name" ResourceKey="Name">Name: </Label>
-            </td>
-            <td>
-                <input id="name" class="form-control" @bind="@_name" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="alias" HelpText="The aliases for the site. An alias can be a domain name (www.site.com) or a virtual folder (ie. www.site.com/folder). If a site has multiple aliases they should be separated by commas." ResourceKey="Aliases">Aliases: </Label>
-            </td>
-            <td>
-                @if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
-                {
-                    <textarea id="alias" class="form-control" @bind="@_urls" rows="3"></textarea>
-                }
-                else
-                {
-                    <textarea id="alias" class="form-control" @bind="@_urls" rows="3" readonly></textarea>
-                }
-            </td>
-        </tr>
-
-        <tr>
-            <td>
-                <Label For="allowRegister" HelpText="Do you want the users to be able to register for an account on the site" ResourceKey="AllowRegistration">Allow User Registration? </Label>
-            </td>
-            <td>
-                <select id="allowRegister" class="form-select" @bind="@_allowregistration">
-                    <option value="True">@SharedLocalizer["Yes"]</option>
-                    <option value="False">@SharedLocalizer["No"]</option>
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="isDeleted" HelpText="Is this site deleted?" ResourceKey="IsDeleted">Is Deleted? </Label>
-            </td>
-            <td>
-                <select id="isDeleted" class="form-select" @bind="@_isdeleted">
-                    <option value="True">@SharedLocalizer["Yes"]</option>
-                    <option value="False">@SharedLocalizer["No"]</option>
-                </select>
-            </td>
-        </tr>
-    </table>
-    <Section Name="Appearance" Heading="Appearance" ResourceKey="Appearance">
-        <table class="table table-borderless">
-            <tr>
-                <td width="30%">
-                    <Label For="logo" HelpText="Specify a logo for the site" ResourceKey="Logo">Logo: </Label>
-                </td>
-                <td>
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="name" HelpText="Enter the site name" ResourceKey="Name">Name: </Label>
+                <div class="col-sm-9">
+                    <input id="name" class="form-control" @bind="@_name" maxlength="200" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="logo" HelpText="Specify a logo for the site" ResourceKey="Logo">Logo: </Label>
+                <div class="col-sm-9">
                     <FileManager FileId="@_logofileid" Filter="@Constants.ImageFiles" @ref="_logofilemanager" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="favicon" HelpText="Specify a Favicon" ResourceKey="FavoriteIcon">Favicon: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="favicon" HelpText="Specify a Favicon" ResourceKey="FavoriteIcon">Favicon: </Label>
+                <div class="col-sm-9">
                     <FileManager FileId="@_faviconfileid" Filter="ico" @ref="_faviconfilemanager" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="defaultTheme" HelpText="Select the sites default theme" ResourceKey="DefaultTheme">Default Theme: </Label>
-                </td>
-                <td>
-                    <select id="defaultTheme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="defaultTheme" HelpText="Select the sites default theme" ResourceKey="DefaultTheme">Default Theme: </Label>
+                <div class="col-sm-9">
+                    <select id="defaultTheme" class="form-select" value="@_themetype" @onchange="(e => ThemeChanged(e))" required>
                         <option value="-">&lt;@Localizer["Theme.Select"]&gt;</option>
                         @foreach (var theme in _themes)
                         {
                             <option value="@theme.TypeName">@theme.Name</option>
                         }
                     </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="defaultContainer" HelpText="Select the default container for the site" ResourceKey="DefaultContainer">Default Container: </Label>
-                </td>
-                <td>
-                    <select id="defaultContainer" class="form-select" @bind="@_containertype">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="defaultContainer" HelpText="Select the default container for the site" ResourceKey="DefaultContainer">Default Container: </Label>
+                <div class="col-sm-9">
+                    <select id="defaultContainer" class="form-select" @bind="@_containertype" required>
                         <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
                         @foreach (var container in _containers)
                         {
                             <option value="@container.TypeName">@container.Name</option>
                         }
                     </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="defaultAdminContainer" HelpText="Select the default admin container for the site" ResourceKey="DefaultAdminContainer">Default Admin Container: </Label>
-                </td>
-                <td>
-                    <select id="defaultAdminContainer" class="form-select" @bind="@_admincontainertype">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="defaultAdminContainer" HelpText="Select the default admin container for the site" ResourceKey="DefaultAdminContainer">Default Admin Container: </Label>
+                <div class="col-sm-9">
+                    <select id="defaultAdminContainer" class="form-select" @bind="@_admincontainertype" required>
                         <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
                         <option value="@Constants.DefaultAdminContainer">&lt;@Localizer["DefaultAdminContainer"]&gt;</option>
                         @foreach (var container in _containers)
@@ -120,133 +69,161 @@
                             <option value="@container.TypeName">@container.Name</option>
                         }
                     </select>
-                </td>
-            </tr>
-        </table>
-    </Section>
-    <Section Name="SMTP" Heading="SMTP Settings" ResourceKey="SMTPSettings">
-        <table class="table table-borderless">
-            <tr>
-                <td width="30%">&nbsp;</td>
-                <td>
-                    <strong>@Localizer["Smtp.Required.EnableNotificationJob"]</strong><br />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="host" HelpText="Enter the host name of the SMTP server" ResourceKey="Host">Host: </Label>
-                </td>
-                <td>
-                    <input id="host" class="form-control" @bind="@_smtphost" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="port" HelpText="Enter the port number for the SMTP server. Please note this field is required if you provide a host name." ResourceKey="Port">Port: </Label>
-                </td>
-                <td>
-                    <input id="port" class="form-control" @bind="@_smtpport" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="enabledSSl" HelpText="Specify if SSL is required for your SMTP server" ResourceKey="UseSsl">SSL Enabled: </Label>
-                </td>
-                <td>
-                    <select id="enabledSSl" class="form-select" @bind="@_smtpssl">
+                </div>
+            </div>
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="isDeleted" HelpText="Is this site deleted?" ResourceKey="IsDeleted">Deleted? </Label>
+				<div class="col-sm-9">
+					<select id="isDeleted" class="form-select" @bind="@_isdeleted" required>
 						<option value="True">@SharedLocalizer["Yes"]</option>
 						<option value="False">@SharedLocalizer["No"]</option>
 					</select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="username" HelpText="Enter the username for your SMTP account" ResourceKey="SmptUsername">Username: </Label>
-                </td>
-                <td>
+				</div>
+			</div>
+		</div>
+        <Section Name="SMTP" Heading="SMTP Settings" ResourceKey="SMTPSettings">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <div class="col-sm-3">
+                    </div>
+                    <div class="col-sm-9">
+                        <strong>@Localizer["Smtp.Required.EnableNotificationJob"]</strong><br />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="host" HelpText="Enter the host name of the SMTP server" ResourceKey="Host">Host: </Label>
+                    <div class="col-sm-9">
+                        <input id="host" class="form-control" @bind="@_smtphost" />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="port" HelpText="Enter the port number for the SMTP server. Please note this field is required if you provide a host name." ResourceKey="Port">Port: </Label>
+                    <div class="col-sm-9">
+                        <input id="port" class="form-control" @bind="@_smtpport" />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="enabledSSl" HelpText="Specify if SSL is required for your SMTP server" ResourceKey="UseSsl">SSL Enabled: </Label>
+                    <div class="col-sm-9">
+                        <select id="enabledSSl" class="form-select" @bind="@_smtpssl" >
+                            <option value="True">@SharedLocalizer["Yes"]</option>
+                            <option value="False">@SharedLocalizer["No"]</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="Enter the username for your SMTP account" ResourceKey="SmptUsername">Username: </Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@_smtpusername" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="password" HelpText="Enter the password for your SMTP account" ResourceKey="SmtpPassword">Password: </Label>
-                </td>
-                <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="Enter the password for your SMTP account" ResourceKey="SmtpPassword">Password: </Label>
+                    <div class="col-sm-9">
                         <input id="password" type="password" class="form-control" @bind="@_smtppassword" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="sender" HelpText="Enter the email which emails will be sent from. Please note that this email address may need to be authorized with the SMTP server." ResourceKey="SmptSender">Email Sender: </Label>
-                </td>
-                <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="sender" HelpText="Enter the email which emails will be sent from. Please note that this email address may need to be authorized with the SMTP server." ResourceKey="SmptSender">Email Sender: </Label>
+                    <div class="col-sm-9">
                         <input id="sender" class="form-control" @bind="@_smtpsender" />
-                </td>
-            </tr>
-        </table>
+                    </div>
+                </div>
                 <button type="button" class="btn btn-secondary" @onclick="SendEmail">@Localizer["Smtp.TestConfig"]</button>
                 <br /><br />
+            </div>
         </Section>
         <Section Name="PWA" Heading="Progressive Web Application Settings" ResourceKey="PWASettings">
-        <table class="table table-borderless">
-            <tr>
-                <td width="30%">
-                    <Label For="isEnabled" HelpText="Select whether you would like this site to be available as a Progressive Web Application (PWA)" ResourceKey="EnablePWA">Is Enabled? </Label>
-                </td>
-                <td>
-                    <select id="isEnabled" class="form-select" @bind="@_pwaisenabled">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="isEnabled" HelpText="Select whether you would like this site to be available as a Progressive Web Application (PWA)" ResourceKey="EnablePWA">Is Enabled? </Label>
+                    <div class="col-sm-9">
+                        <select id="isEnabled" class="form-select" @bind="@_pwaisenabled" required>
                             <option value="True">@SharedLocalizer["Yes"]</option>
                             <option value="False">@SharedLocalizer["No"]</option>
                         </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="appIcon" HelpText="Include an application icon for your PWA. It should be a PNG which is 192 X 192 pixels in dimension." ResourceKey="PwaApplicationIcon">App Icon: </Label>
-                </td>
-                <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="appIcon" HelpText="Include an application icon for your PWA. It should be a PNG which is 192 X 192 pixels in dimension." ResourceKey="PwaApplicationIcon">App Icon: </Label>
+                    <div class="col-sm-9">
                         <FileManager FileId="@_pwaappiconfileid" Filter="png" @ref="_pwaappiconfilemanager" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="splashIcon" HelpText="Include a splash icon for your PWA. It should be a PNG which is 512 X 512 pixels in dimension." ResourceKey="PwaSplashIcon">Splash Icon: </Label>
-                </td>
-                <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="splashIcon" HelpText="Include a splash icon for your PWA. It should be a PNG which is 512 X 512 pixels in dimension." ResourceKey="PwaSplashIcon">Splash Icon: </Label>
+                    <div class="col-sm-9">
                         <FileManager FileId="@_pwasplashiconfileid" Filter="png" @ref="_pwasplashiconfilemanager" />
-                </td>
-            </tr>
-        </table>
+                    </div>
+                </div>
+            </div>
         </Section>
-    @if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
+        @if (_aliases != null && UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
         {
+			<Section Name="Aliases" Heading="Aliases" ResourceKey="Aliases">
+                <div class="container">
+					<div class="row mb-1 align-items-center">
+						<Label Class="col-sm-3" For="alias" HelpText="The aliases for the site. An alias can be a domain name (www.site.com) or a virtual folder (ie. www.site.com/folder). If a site has multiple aliases they should be separated by commas." ResourceKey="Aliases">Aliases: </Label>
+						<div class="col-sm-9">
+							<textarea id="alias" class="form-control" @bind="@_urls" rows="3" required></textarea>
+						</div>
+					</div>
+					<div class="row mb-1 align-items-center">
+						<Label Class="col-sm-3" For="defaultalias" HelpText="The default alias for the site. Requests for non-default aliases will be redirected to the default alias." ResourceKey="DefaultAlias">Default Alias: </Label>
+						<div class="col-sm-9">
+                            <select id="defaultalias" class="form-select" @bind="@_defaultalias" required>
+								@foreach (string name in _urls.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries).Select(sValue => sValue.Trim()).ToArray())
+								{
+									<option value="@name">@name</option>
+								}
+                            </select>
+						</div>
+					</div>
+				</div>
+			</Section>
+            <Section Name="Hosting" Heading="Hosting Model" ResourceKey="Hosting">
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="runtime" HelpText="The Blazor runtime hosting model" ResourceKey="Runtime">Runtime: </Label>
+                        <div class="col-sm-9">
+                            <select id="runtime" class="form-select" @bind="@_runtime" required>
+                                <option value="Server">@SharedLocalizer["BlazorServer"]</option>
+                                <option value="WebAssembly">@SharedLocalizer["BlazorWebAssembly"]</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="prerender" HelpText="Specifies if the site should be prerendered (for search crawlers, etc...)" ResourceKey="Prerender">Prerender? </Label>
+                        <div class="col-sm-9">
+                            <select id="prerender" class="form-select" @bind="@_prerender" required>
+                                <option value="Prerendered">@SharedLocalizer["Yes"]</option>
+                                <option value="">@SharedLocalizer["No"]</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </Section>
             <Section Name="TenantInformation" Heading="Tenant Information" ResourceKey="TenantInformation">
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="tenant" HelpText="The tenant for the site" ResourceKey="Tenant">Tenant: </Label>
-                    </td>
-                    <td>
+                <div class="container">
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="tenant" HelpText="The tenant for the site" ResourceKey="Tenant">Tenant: </Label>
+                        <div class="col-sm-9">
                             <input id="tenant" class="form-control" @bind="@_tenant" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="database" HelpText="The database for the tenant" ResourceKey="Database">Database: </Label>
-                    </td>
-                    <td>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="database" HelpText="The database for the tenant" ResourceKey="Database">Database: </Label>
+                        <div class="col-sm-9">
                             <input id="database" class="form-control" @bind="@_database" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="connectionstring" HelpText="The connection information for the database" ResourceKey="ConnectionString">Connection: </Label>
-                    </td>
-                    <td>
+                        </div>
+                    </div>
+                    <div class="row mb-1 align-items-center">
+                        <Label Class="col-sm-3" For="connectionstring" HelpText="The connection information for the database" ResourceKey="ConnectionString">Connection: </Label>
+                        <div class="col-sm-9">
                             <textarea id="connectionstring" class="form-control" @bind="@_connectionstring" rows="2" readonly></textarea>
-                    </td>
-                </tr>
-            </table>
+                        </div>
+                    </div>
+                </div>
             </Section>
         }
         <br />
@@ -255,16 +232,22 @@
         <br />
         <br />
         <AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon" DeletedBy="@_deletedby" DeletedOn="@_deletedon"></AuditInfo>
+    </form>
 }
 
 @code {
+	private ElementReference form;
+	private bool validated = false;
 	private bool _initialized = false;
 	private List<Theme> _themeList;
 	private List<ThemeControl> _themes = new List<ThemeControl>();
 	private List<ThemeControl> _containers = new List<ThemeControl>();
 	private string _name = string.Empty;
-    private List<Alias> _aliasList;
+	private List<Alias> _aliases;
+	private string _defaultalias = string.Empty;
 	private string _urls = string.Empty;
+	private string _runtime = "";
+	private string _prerender = "";
 	private int _logofileid = -1;
 	private FileManager _logofilemanager;
 	private int _faviconfileid = -1;
@@ -272,7 +255,6 @@
 	private string _themetype = "-";
 	private string _containertype = "-";
 	private string _admincontainertype = "-";
-    private string _allowregistration;
 	private string _smtphost = string.Empty;
 	private string _smtpport = string.Empty;
 	private string _smtpssl = "False";
@@ -306,18 +288,13 @@
 			if (site != null)
 			{
 				_name = site.Name;
-                _allowregistration = site.AllowRegistration.ToString();
+				_runtime = site.Runtime;
+				_prerender = site.RenderMode.Replace(_runtime, "");
 				_isdeleted = site.IsDeleted.ToString();
 
 				if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
 				{
-                    _aliasList = await AliasService.GetAliasesAsync();
-                    foreach (Alias alias in _aliasList.Where(item => item.SiteId == site.SiteId && item.TenantId == site.TenantId).ToList())
-                    {
-                        _urls += alias.Name + ",";
-                    }
-                    _urls = _urls.Substring(0, _urls.Length - 1);
-
+					await GetAliases();
 				}
 
 				if (site.LogoFileId != null)
@@ -336,6 +313,16 @@
 				_containertype = (!string.IsNullOrEmpty(site.DefaultContainerType)) ? site.DefaultContainerType : Constants.DefaultContainer;
 				_admincontainertype = (!string.IsNullOrEmpty(site.AdminContainerType)) ? site.AdminContainerType : Constants.DefaultAdminContainer;
 
+				_pwaisenabled = site.PwaIsEnabled.ToString();
+				if (site.PwaAppIconFileId != null)
+				{
+					_pwaappiconfileid = site.PwaAppIconFileId.Value;
+				}
+				if (site.PwaSplashIconFileId != null)
+				{
+					_pwasplashiconfileid = site.PwaSplashIconFileId.Value;
+				}
+
 				var settings = await SettingService.GetSiteSettingsAsync(site.SiteId);
 				_smtphost = SettingService.GetSetting(settings, "SMTPHost", string.Empty);
 				_smtpport = SettingService.GetSetting(settings, "SMTPPort", string.Empty);
@@ -344,28 +331,6 @@
 				_smtppassword = SettingService.GetSetting(settings, "SMTPPassword", string.Empty);
 				_smtpsender = SettingService.GetSetting(settings, "SMTPSender", string.Empty);
 
-                _pwaisenabled = site.PwaIsEnabled.ToString();
-
-                if (site.PwaAppIconFileId != null)
-                {
-                    _pwaappiconfileid = site.PwaAppIconFileId.Value;
-                }
-
-                if (site.PwaSplashIconFileId != null)
-                {
-                    _pwasplashiconfileid = site.PwaSplashIconFileId.Value;
-                }
-
-                _pwaisenabled = site.PwaIsEnabled.ToString();
-                if (site.PwaAppIconFileId != null)
-                {
-                    _pwaappiconfileid = site.PwaAppIconFileId.Value;
-                }
-                if (site.PwaSplashIconFileId != null)
-                {
-                    _pwasplashiconfileid = site.PwaSplashIconFileId.Value;
-                }
-
 				if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
 				{
 					var tenants = await TenantService.GetTenantsAsync();
@@ -421,6 +386,10 @@
 	}
 
 	private async Task SaveSite()
+	{
+		validated = true;
+		var interop = new Interop(JSRuntime);
+		if (await interop.FormValid(form))
 		{
 			try
 			{
@@ -429,13 +398,17 @@
 					var unique = true;
 					if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
 					{
-                    foreach (string name in _urls.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
+						_urls = Regex.Replace(_urls, @"\r\n?|\n", ","); // convert line breaks to commas
+						var aliases = await AliasService.GetAliasesAsync();
+						foreach (string name in _urls.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries).Select(sValue => sValue.Trim()).ToArray())
 						{
-                        if (_aliasList.Exists(item => item.Name == name && item.SiteId != PageState.Alias.SiteId && item.TenantId != PageState.Alias.TenantId))
+							var alias = aliases.Where(item => item.Name == name).FirstOrDefault();
+							if (alias != null && unique)
 							{
-                            unique = false;
+								unique = (alias.TenantId == PageState.Site.TenantId && alias.SiteId == PageState.Site.SiteId);
 							}
 						}
+						if (unique && string.IsNullOrEmpty(_defaultalias)) unique = false;
 					}
 
 					if (unique)
@@ -443,10 +416,19 @@
 						var site = await SiteService.GetSiteAsync(PageState.Site.SiteId);
 						if (site != null)
 						{
-                        bool refresh = (site.DefaultThemeType != _themetype || site.DefaultContainerType != _containertype);
+							bool refresh = false;
+							bool reload = false;
 
 							site.Name = _name;
-                        site.AllowRegistration = (_allowregistration == null ? true : Boolean.Parse(_allowregistration));
+							if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
+							{
+								if (site.Runtime != _runtime || site.RenderMode != _runtime + _prerender)
+								{
+									site.Runtime = _runtime;
+									site.RenderMode = _runtime + _prerender;
+									reload = true; // needs to be reloaded on server
+								}
+							}
 							site.IsDeleted = (_isdeleted == null ? true : Boolean.Parse(_isdeleted));
 
 							site.LogoFileId = null;
@@ -455,44 +437,63 @@
 							{
 								site.LogoFileId = logofileid;
 							}
-                        var faviconFieldId = _faviconfilemanager.GetFileId();
-                        if (faviconFieldId != -1)
+							int? faviconFieldId = _faviconfilemanager.GetFileId();
+							if (faviconFieldId == -1) faviconFieldId = null;
+							if (site.FaviconFileId != faviconFieldId)
 							{
 								site.FaviconFileId = faviconFieldId;
+								reload = true; // needs to be reloaded on server
 							}
+							if (site.DefaultThemeType != _themetype)
+							{
 								site.DefaultThemeType = _themetype;
+								refresh = true; // needs to be refreshed on client
+							}
+							if (site.DefaultContainerType != _containertype)
+							{
 								site.DefaultContainerType = _containertype;
+								refresh = true; // needs to be refreshed on client
+							}
 							site.AdminContainerType = _admincontainertype;
 
-                        site.PwaIsEnabled = (_pwaisenabled == null ? true : Boolean.Parse(_pwaisenabled));
-                        var pwaappiconfileid = _pwaappiconfilemanager.GetFileId();
-                        if (pwaappiconfileid != -1)
+							if (site.PwaIsEnabled.ToString() != _pwaisenabled)
+							{
+								site.PwaIsEnabled = Boolean.Parse(_pwaisenabled);
+								reload = true; // needs to be reloaded on server
+							}
+							int? pwaappiconfileid = _pwaappiconfilemanager.GetFileId();
+							if (pwaappiconfileid == -1) pwaappiconfileid = null;
+							if (site.PwaAppIconFileId != pwaappiconfileid)
 							{
 								site.PwaAppIconFileId = pwaappiconfileid;
+								reload = true; // needs to be reloaded on server
 							}
-                        var pwasplashiconfileid = _pwasplashiconfilemanager.GetFileId();
-                        if (pwasplashiconfileid != -1)
+							int? pwasplashiconfileid = _pwasplashiconfilemanager.GetFileId();
+							if (pwasplashiconfileid == -1) pwasplashiconfileid = null;
+							if (site.PwaSplashIconFileId != pwasplashiconfileid)
 							{
 								site.PwaSplashIconFileId = pwasplashiconfileid;
+								reload = true; // needs to be reloaded on server
 							}
 
 							site = await SiteService.UpdateSiteAsync(site);
 
 							var settings = await SettingService.GetSiteSettingsAsync(site.SiteId);
-                        SettingService.SetSetting(settings, "SMTPHost", _smtphost);
-                        SettingService.SetSetting(settings, "SMTPPort", _smtpport);
-                        SettingService.SetSetting(settings, "SMTPSSL", _smtpssl);
-                        SettingService.SetSetting(settings, "SMTPUsername", _smtpusername);
-                        SettingService.SetSetting(settings, "SMTPPassword", _smtppassword);
-                        SettingService.SetSetting(settings, "SMTPSender", _smtpsender);
+							SettingService.SetSetting(settings, "SMTPHost", _smtphost, true);
+							SettingService.SetSetting(settings, "SMTPPort", _smtpport, true);
+							SettingService.SetSetting(settings, "SMTPSSL", _smtpssl, true);
+							SettingService.SetSetting(settings, "SMTPUsername", _smtpusername, true);
+							SettingService.SetSetting(settings, "SMTPPassword", _smtppassword, true);
+							SettingService.SetSetting(settings, "SMTPSender", _smtpsender, true);
 							await SettingService.UpdateSiteSettingsAsync(settings, site.SiteId);
 
 							if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
 							{
-                            var names = _urls.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
-                            foreach (Alias alias in _aliasList.Where(item => item.SiteId == site.SiteId && item.TenantId == site.TenantId).ToList())
+								var names = _urls.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries)
+									.Select(sValue => sValue.Trim()).ToArray();
+								foreach (Alias alias in _aliases)
 								{
-                                if (!names.Contains(alias.Name))
+									if (!names.Contains(alias.Name.Trim()))
 									{
 										await AliasService.DeleteAliasAsync(alias.AliasId);
 									}
@@ -500,30 +501,43 @@
 
 								foreach (string name in names)
 								{
-                                if (!_aliasList.Exists(item => item.Name == name))
+									var alias = _aliases.Find(item => item.Name.Trim() == name);
+									if (alias == null)
 									{
-                                    Alias alias = new Alias();
+										alias = new Alias();
 										alias.Name = name;
 										alias.TenantId = site.TenantId;
 										alias.SiteId = site.SiteId;
+										alias.IsDefault = (name == _defaultalias);
 										await AliasService.AddAliasAsync(alias);
 									}
+									else
+									{
+										if (alias.Name != name || alias.IsDefault != (alias.Name.Trim() == _defaultalias))
+										{
+											alias.Name = name;
+											alias.IsDefault = (name == _defaultalias);
+											await AliasService.UpdateAliasAsync(alias);
 										}
 									}
+								}
+								await GetAliases();
+							}
 
 							await logger.LogInformation("Site Settings Saved {Site}", site);
 
-                        if (refresh)
+							if (refresh || reload)
 							{
-                            NavigationManager.NavigateTo(NavigateUrl()); // refresh to show new theme or container
+								NavigationManager.NavigateTo(NavigateUrl(true), reload); // refresh/reload
 							}
 							else
 							{
 								AddModuleMessage(Localizer["Success.Settings.SaveSite"], MessageType.Success);
+								await interop.ScrollTo(0, 0, "smooth");
 							}
 						}
 					}
-                else
+					else // deuplicate alias or default alias not specified
 					{
 						AddModuleMessage(Localizer["Message.Aliases.Taken"], MessageType.Warning);
 					}
@@ -539,6 +553,11 @@
 				AddModuleMessage(Localizer["Error.SaveSite"], MessageType.Error);
 			}
 		}
+		else
+		{
+			AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+		}
+	}
 
 	private async Task DeleteSite()
 	{
@@ -577,12 +596,12 @@
 			try
 			{
 				var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
-                SettingService.SetSetting(settings, "SMTPHost", _smtphost);
-                SettingService.SetSetting(settings, "SMTPPort", _smtpport);
-                SettingService.SetSetting(settings, "SMTPSSL", _smtpssl);
-                SettingService.SetSetting(settings, "SMTPUsername", _smtpusername);
-                SettingService.SetSetting(settings, "SMTPPassword", _smtppassword);
-                SettingService.SetSetting(settings, "SMTPSender", _smtpsender);
+				SettingService.SetSetting(settings, "SMTPHost", _smtphost, true);
+				SettingService.SetSetting(settings, "SMTPPort", _smtpport, true);
+				SettingService.SetSetting(settings, "SMTPSSL", _smtpssl, true);
+				SettingService.SetSetting(settings, "SMTPUsername", _smtpusername, true);
+				SettingService.SetSetting(settings, "SMTPPassword", _smtppassword, true);
+				SettingService.SetSetting(settings, "SMTPSender", _smtpsender, true);
 				await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
 				await logger.LogInformation("Site SMTP Settings Saved");
 
@@ -600,4 +619,18 @@
 			AddModuleMessage(Localizer["Message.required.Smtp"], MessageType.Warning);
 		}
 	}
+
+	private async Task GetAliases()
+	{
+		_urls = string.Empty;
+		_defaultalias = string.Empty;
+		_aliases = await AliasService.GetAliasesAsync();
+		_aliases = _aliases.Where(item => item.SiteId == PageState.Site.SiteId && item.TenantId == PageState.Site.TenantId).OrderBy(item => item.AliasId).ToList();
+		foreach (Alias alias in _aliases)
+		{
+			_urls += (_urls == string.Empty) ? alias.Name.Trim() : ", " + alias.Name.Trim();
+			if (alias.IsDefault && string.IsNullOrEmpty(_defaultalias)) _defaultalias = alias.Name.Trim();
+		}
+		if (string.IsNullOrEmpty(_defaultalias)) _defaultalias = _aliases.First().Name.Trim();
+	}
 }

Oqtane.Client/Modules/Admin/Sites/Add.razor

@@ -1,5 +1,6 @@
 @namespace Oqtane.Modules.Admin.Sites
 @using Oqtane.Interfaces
+@using System.Text.RegularExpressions
 @inherits ModuleBase
 @inject NavigationManager NavigationManager
 @inject ITenantService TenantService
@@ -19,57 +20,48 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="name" HelpText="Enter the name of the site" ResourceKey="Name">Site Name: </Label>
-            </td>
-            <td>
-                <input id="name" class="form-control" @bind="@_name" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="alias" HelpText="Enter the aliases for the site. An alias can be a domain name (www.site.com) or a virtual folder (ie. www.site.com/folder). If a site has multiple aliases they can be separated by commas." ResourceKey="Aliases">Aliases: </Label>
-            </td>
-            <td>
-                <textarea id="alias" class="form-control" @bind="@_urls" rows="3"></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="defaultTheme" HelpText="Select the default theme for the website" ResourceKey="DefaultTheme">Default Theme: </Label>
-            </td>
-            <td>
-                <select id="defaultTheme" class="form-select" @onchange="(e => ThemeChanged(e))">
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="name" HelpText="Enter the name of the site" ResourceKey="Name">Site Name: </Label>
+                <div class="col-sm-9">
+                    <input id="name" class="form-control" @bind="@_name" maxlength="200" required />
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="alias" HelpText="Enter the aliases for the site. An alias can be a domain name (www.site.com) or a virtual folder (ie. www.site.com/folder). If a site has multiple aliases they can be separated by commas." ResourceKey="Aliases">Aliases: </Label>
+                <div class="col-sm-9">
+                    <textarea id="alias" class="form-control" @bind="@_urls" rows="3" required></textarea>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="defaultTheme" HelpText="Select the default theme for the website" ResourceKey="DefaultTheme">Default Theme: </Label>
+                <div class="col-sm-9">
+                    <select id="defaultTheme" class="form-select" @onchange="(e => ThemeChanged(e))" required>
                         <option value="-">&lt;@Localizer["Theme.Select"]&gt;</option>
                         @foreach (var theme in _themes)
                         {
                             <option value="@theme.TypeName">@theme.Name</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="defaultContainer" HelpText="Select the default container for the site" ResourceKey="DefaultContainer">Default Container: </Label>
-            </td>
-            <td>
-                <select id="defaultContainer" class="form-select" @bind="@_containertype">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="defaultContainer" HelpText="Select the default container for the site" ResourceKey="DefaultContainer">Default Container: </Label>
+                <div class="col-sm-9">
+                    <select id="defaultContainer" class="form-select" @bind="@_containertype" required>
                         <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
                         @foreach (var container in _containers)
                         {
                             <option value="@container.TypeName">@container.Name</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="adminContainer" HelpText="Select the admin container for the site" ResourceKey="AdminContainer">Admin Container: </Label>
-            </td>
-            <td>
-                <select id="adminContainer" class="form-select" @bind="@_admincontainertype">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="adminContainer" HelpText="Select the admin container for the site" ResourceKey="AdminContainer">Admin Container: </Label>
+                <div class="col-sm-9">
+                    <select id="adminContainer" class="form-select" @bind="@_admincontainertype" required>
                         <option value="-">&lt;@Localizer["Container.Select"]&gt;</option>
                         <option value="">&lt;@Localizer["DefaultContainer.Admin"]&gt;</option>
                         @foreach (var container in _containers)
@@ -77,28 +69,42 @@ else
                             <option value="@container.TypeName">@container.Name</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="siteTemplate" HelpText="Select the site template" ResourceKey="SiteTemplate">Site Template: </Label>
-            </td>
-            <td>
-                <select id="siteTemplate" class="form-select" @bind="@_sitetemplatetype">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="siteTemplate" HelpText="Select the site template" ResourceKey="SiteTemplate">Site Template: </Label>
+                <div class="col-sm-9">
+                    <select id="siteTemplate" class="form-select" @bind="@_sitetemplatetype" required>
                         <option value="-">&lt;@Localizer["SiteTemplate.Select"]&gt;</option>
                         @foreach (SiteTemplate siteTemplate in _siteTemplates)
                         {
                             <option value="@siteTemplate.TypeName">@siteTemplate.Name</option>
                         }
                     </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="tenant" HelpText="Select the tenant for the site" ResourceKey="Tenant">Tenant: </Label>
-            </td>
-            <td>
-                <select id="tenant" class="form-select" @onchange="(e => TenantChanged(e))">
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="runtime" HelpText="The runtime hosting model" ResourceKey="Runtime">Runtime: </Label>
+                <div class="col-sm-9">
+                    <select id="runtime" class="form-select" @bind="@_runtime" required>
+                        <option value="Server">@SharedLocalizer["BlazorServer"]</option>
+                        <option value="WebAssembly">@SharedLocalizer["BlazorWebAssembly"]</option>
+                    </select>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="prerender" HelpText="Specifies if the site should be prerendered (for search crawlers, etc...)" ResourceKey="Prerender">Prerender? </Label>
+                <div class="col-sm-9">
+                    <select id="prerender" class="form-select" @bind="@_prerender" required>
+                        <option value="Prerendered">@SharedLocalizer["Yes"]</option>
+                        <option value="">@SharedLocalizer["No"]</option>
+                    </select>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="tenant" HelpText="Select the tenant for the site" ResourceKey="Tenant">Tenant: </Label>
+                <div class="col-sm-9">
+                    <select id="tenant" class="form-select" @onchange="(e => TenantChanged(e))" required>
                         <option value="-">&lt;@Localizer["Tenant.Select"]&gt;</option>
                         <option value="+">&lt;@Localizer["Tenant.Add"]&gt;</option>
                         @foreach (Tenant tenant in _tenants)
@@ -106,29 +112,23 @@ else
                             <option value="@tenant.TenantId">@tenant.Name</option>
                         }
                     </select>
-            </td>
-        </tr>
+                </div>
+            </div>
             @if (_tenantid == "+")
             {
-            <tr>
-                <td colspan="2">
+                <div class="row mb-1 align-items-center">
                     <hr class="app-rule" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="name" HelpText="Enter the name for the tenant" ResourceKey="TenantName">Tenant Name: </Label>
-                </td>
-                <td>
-                    <input id="name" class="form-control" @bind="@_tenantName" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="databaseType" HelpText="Select the database type for the tenant" ResourceKey="DatabaseType">Database Type: </Label>
-                </td>
-                <td>
-                    <select id="databaseType" class="form-select" value="@_databaseName" @onchange="(e => DatabaseChanged(e))">
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="name" HelpText="Enter the name for the tenant" ResourceKey="TenantName">Tenant Name: </Label>
+                    <div class="col-sm-9">
+                        <input id="name" class="form-control" @bind="@_tenantName" maxlength="100" required />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="databaseType" HelpText="Select the database type for the tenant" ResourceKey="DatabaseType">Database Type: </Label>
+                    <div class="col-sm-9">
+                        <select id="databaseType" class="form-select" value="@_databaseName" @onchange="(e => DatabaseChanged(e))" required>
                             @foreach (var database in _databases)
                             {
                                 if (database.IsDefault)
@@ -141,36 +141,37 @@ else
                                 }
                             }
                         </select>
-                </td>
-            </tr>
+                    </div>
+                </div>
                 if (_databaseConfigType != null)
                 {
                     @DatabaseConfigComponent;
                 }
-            <tr>
-                <td>
-                    <Label For="hostUsername" HelpText="Enter the username of the host for this site" ResourceKey="HostUsername">Host Username:</Label>
-                </td>
-                <td>
-                    <input id="hostUsername" class="form-control" @bind="@_hostUserName" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="hostPassword" HelpText="Enter the password for the host of this site" ResourceKey="HostPassword">Host Password:</Label>
-                </td>
-                <td>
-                    <input id="hostPassword" type="password" class="form-control" @bind="@_hostpassword" />
-                </td>
-            </tr>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="hostUsername" HelpText="Enter the username of an existing host user" ResourceKey="HostUsername">Host Username:</Label>
+                    <div class="col-sm-9">
+                        <input id="hostUsername" class="form-control" @bind="@_hostusername" required />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="hostPassword" HelpText="Enter the password of an existing host user" ResourceKey="HostPassword">Host Password:</Label>
+                    <div class="col-sm-9">
+                        <input id="hostPassword" type="password" class="form-control" @bind="@_hostpassword" required />
+                    </div>
+                </div>
             }
-    </table>
+        </div>
+        <br />
+        <br />
         <button type="button" class="btn btn-success" @onclick="SaveSite">@SharedLocalizer["Save"]</button>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    </form>
 }
 
 @code {
     private List<Database> _databases;
+    private ElementReference form;
+    private bool validated = false;
     private string _databaseName = "LocalDB";
     private Type _databaseConfigType;
     private object _databaseConfig;
@@ -186,7 +187,7 @@ else
 
     private string _tenantName = string.Empty;
 
-    private string _hostUserName = UserNames.Host;
+    private string _hostusername = string.Empty;
     private string _hostpassword = string.Empty;
 
     private string _name = string.Empty;
@@ -195,6 +196,8 @@ else
     private string _containertype = "-";
     private string _admincontainertype = "";
     private string _sitetemplatetype = "-";
+    private string _runtime = "Server";
+    private string _prerender = "Prerendered";
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
@@ -273,9 +276,14 @@ else
     }
 
     private async Task SaveSite()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             if (_tenantid != "-" && _name != string.Empty && _urls != string.Empty && _themetype != "-" && _containertype != "-" && _sitetemplatetype != "-")
             {
+				_urls = Regex.Replace(_urls, @"\r\n?|\n", ",");
                 var duplicates = new List<string>();
                 var aliases = await AliasService.GetAliasesAsync();
                 foreach (string name in _urls.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
@@ -297,7 +305,7 @@ else
                             // validate host credentials
                             var user = new User();
                             user.SiteId = PageState.Site.SiteId;
-                        user.Username = UserNames.Host;
+                            user.Username = _hostusername;
                             user.Password = _hostpassword;
                             user = await UserService.LoginUserAsync(user, false, false);
                             if (user.IsAuthenticated)
@@ -314,8 +322,9 @@ else
                                     config.TenantName = _tenantName;
                                     config.DatabaseType = database.DBType;
                                     config.ConnectionString = connectionString;
-                                config.HostEmail = user.Email;
+									config.HostUsername = _hostusername;
                                     config.HostPassword = _hostpassword;
+                                    config.HostEmail = user.Email;
                                     config.HostName = user.DisplayName;
                                     config.IsNewTenant = true;
                                 }
@@ -354,6 +363,8 @@ else
                         config.DefaultContainer = _containertype;
                         config.DefaultAdminContainer = _admincontainertype;
                         config.SiteTemplate = _sitetemplatetype;
+                        config.Runtime = _runtime;
+                        config.RenderMode = _runtime + _prerender;
 
                         ShowProgressIndicator();
 
@@ -361,8 +372,7 @@ else
                         if (installation.Success)
                         {
                             var aliasname = config.Aliases.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries)[0];
-                        var uri = new Uri(NavigationManager.Uri);
-                        NavigationManager.NavigateTo(uri.Scheme + "://" + aliasname, true);
+                            NavigationManager.NavigateTo(PageState.Uri.Scheme + "://" + aliasname, true);
                         }
                         else
                         {
@@ -381,4 +391,9 @@ else
                 AddModuleMessage(Localizer["Message.Required.Tenant"], MessageType.Warning);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

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

@@ -30,20 +30,16 @@ else
 
 @code {
     private List<Alias> _sites;
-    private string _scheme;
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
     protected override async Task OnParametersSetAsync()
     {
-        var uri = new Uri(NavigationManager.Uri);
-        _scheme = uri.Scheme + "://";
-
         var aliases = await AliasService.GetAliasesAsync();
         _sites = new List<Alias>();
         foreach (Alias alias in aliases)
         {
-            if (!_sites.Exists(item => item.TenantId == alias.TenantId && item.SiteId == alias.SiteId))
+            if (alias.IsDefault && !_sites.Exists(item => item.TenantId == alias.TenantId && item.SiteId == alias.SiteId))
             {
                 _sites.Add(alias);
             }
@@ -52,11 +48,11 @@ else
 
     private void Edit(string name)
     {
-        NavigationManager.NavigateTo(_scheme + name + "/admin/site/?reload");
+        NavigationManager.NavigateTo(PageState.Uri.Scheme + "://" + name + "/admin/site", true);
     }
 
     private void Browse(string name)
     {
-        NavigationManager.NavigateTo(_scheme + name + "/?reload");
+        NavigationManager.NavigateTo(PageState.Uri.Scheme + "://" + name, true);
     }
 }

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

@@ -13,12 +13,11 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="tenant" HelpText="Select the tenant for the SQL server" ResourceKey="Tenant">Tenant: </Label>
-            </td>
-            <td>
+    <div class="container">
+
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="tenant" HelpText="Select the tenant for the SQL server" ResourceKey="Tenant">Tenant: </Label>
+            <div class="col-sm-9">
                 <select id="tenant" class="form-select" value="@_tenantid" @onchange="(e => TenantChanged(e))">
                     <option value="-1">&lt;@Localizer["Tenant.Select"]&gt;</option>
                     @foreach (Tenant tenant in _tenants)
@@ -26,42 +25,59 @@ else
                         <option value="@tenant.TenantId">@tenant.Name</option>
                     }
                 </select>
-            </td>
-        </tr>
+            </div>
+        </div>
         @if (_tenantid != "-1")
         {
-            <tr>
-                <td>
-                    <Label For="database" HelpText="The database for the tenant" ResourceKey="Database">Database: </Label>
-                </td>
-                <td>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="database" HelpText="The database for the tenant" ResourceKey="Database">Database: </Label>
+                <div class="col-sm-9">
                     <input id="database" class="form-control" @bind="@_database" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="connectionstring" HelpText="The connection information for the database" ResourceKey="ConnectionString">Connection: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="connectionstring" HelpText="The connection information for the database" ResourceKey="ConnectionString">Connection: </Label>
+                <div class="col-sm-9">
                     <textarea id="connectionstring" class="form-control" @bind="@_connectionstring" rows="2" readonly></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="sqlQeury" HelpText="Enter the query for the SQL server" ResourceKey="SqlQuery">SQL Query: </Label>
-                </td>
-                <td>
-                    <textarea id="sqlQeury" class="form-control" @bind="@_sql" rows="5"></textarea>
-                </td>
-            </tr>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="sqlQeury" HelpText="Enter the query for the SQL server" ResourceKey="SqlQuery">SQL Query: </Label>
+                <div class="col-sm-9">
+                    <textarea id="sqlQeury" class="form-control" @bind="@_sql" rows="3"></textarea>
+                </div>
+            </div>
         }
-    </table>
+    </div>
+    <br />
     <button type="button" class="btn btn-success" @onclick="Execute">@Localizer["Execute"]</button>
     <br />
     <br />
-    @if (!string.IsNullOrEmpty(_results))
+    @if (_results != null)
     {
-        @((MarkupString)_results)
+        @if (_results.Count > 0)
+        {
+            <Pager Class="table table-bordered" Items="@_results">
+                <Header>
+                    @foreach (KeyValuePair<string, string> kvp in _results.First())
+                    {
+                        <th>@kvp.Key</th>
+                    }
+                </Header>
+                <Row>
+                    @foreach (KeyValuePair<string, string> kvp in context)
+                    {
+                        <td>@kvp.Value</td>
+                    }
+                </Row>
+            </Pager>
+        }
+        else
+        {
+            @Localizer["Return.NoResult"]
+        }
+        <br />
+        <br />
     }
 }
 
@@ -71,7 +87,7 @@ else
     private string _database = string.Empty;
     private string _connectionstring = string.Empty;
     private string _sql = string.Empty;
-    private string _results = string.Empty;
+    private List<Dictionary<string, string>> _results;
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
@@ -118,7 +134,7 @@ else
             {
                 var sqlquery = new SqlQuery { TenantId = int.Parse(_tenantid), Query = _sql };
                 sqlquery = await SqlService.ExecuteQueryAsync(sqlquery);
-                _results = DisplayResults(sqlquery.Results);
+                _results = sqlquery.Results;
                 AddModuleMessage(Localizer["Success.QueryExecuted"], MessageType.Success);
             }
             else
@@ -132,44 +148,4 @@ else
             AddModuleMessage(ex.Message, MessageType.Error);
         }
     }
-
-    private string DisplayResults(List<Dictionary<string, string>> results)
-    {
-        var table = string.Empty;
-        foreach (Dictionary<string, string> item in results)
-        {
-            if (table == string.Empty)
-            {
-                table = "<div class=\"table-responsive\">";
-                table += "<table class=\"table table-bordered\"><thead><tr>";
-
-                foreach (KeyValuePair<string, string> kvp in item)
-                {
-                    table += "<th scope=\"col\">" + kvp.Key + "</th>";
-                }
-
-                table += "</tr></thead><tbody>";
-            }
-
-            table += "<tr>";
-
-            foreach (KeyValuePair<string, string> kvp in item)
-            {
-                table += "<td>" + kvp.Value + "</td>";
-            }
-
-            table += "</tr>";
-        }
-
-        if (table != string.Empty)
-        {
-            table += "</tbody></table></div>";
-        }
-        else
-        {
-            table = Localizer["Return.NoResult"];
-        }
-
-        return table;
-    }
 }

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

@@ -7,105 +7,61 @@
 
 <TabStrip>
     <TabPanel Name="Info" Heading="Info" ResourceKey="Info">
-        <table class="table table-borderless">
-            <tr>
-                <td width="30%">
-                    <Label For="version" HelpText="Framework Version" ResourceKey="FrameworkVersion">Framework Version: </Label>
-                </td>
-                <td>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="version" HelpText="Framework Version" ResourceKey="FrameworkVersion">Framework Version: </Label>
+                <div class="col-sm-9">
                     <input id="version" class="form-control" @bind="@_version" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="clrversion" HelpText="Common Language Runtime Version" ResourceKey="CLRVersion">CLR Version: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="clrversion" HelpText="Common Language Runtime Version" ResourceKey="CLRVersion">CLR Version: </Label>
+                <div class="col-sm-9">
                     <input id="clrversion" class="form-control" @bind="@_clrversion" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="osversion" HelpText="Operating System Version" ResourceKey="OSVersion">OS Version: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="osversion" HelpText="Operating System Version" ResourceKey="OSVersion">OS Version: </Label>
+                <div class="col-sm-9">
                     <input id="osversion" class="form-control" @bind="@_osversion" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="serverpath" HelpText="Server Path" ResourceKey="ServerPath">Server Path: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="serverpath" HelpText="Server Path" ResourceKey="ServerPath">Server Path: </Label>
+                <div class="col-sm-9">
                     <input id="serverpath" class="form-control" @bind="@_serverpath" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="servertime" HelpText="Server Time" ResourceKey="ServerTime">Server Time: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="servertime" HelpText="Server Date/Time (in UTC)" ResourceKey="ServerTime">Server Date/Time: </Label>
+                <div class="col-sm-9">
                     <input id="servertime" class="form-control" @bind="@_servertime" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="installationid" HelpText="The Unique Identifier For Your Installation" ResourceKey="InstallationId">Installation ID: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="installationid" HelpText="The Unique Identifier For Your Installation" ResourceKey="InstallationId">Installation ID: </Label>
+                <div class="col-sm-9">
                     <input id="installationid" class="form-control" @bind="@_installationid" readonly />
-                </td>
-            </tr>
-            <tr>
-                <td>&nbsp;</td>
-                <td>
-                    <br /><input type="checkbox" @onchange="(e => RegisterChecked(e))" /> @Localizer["Register"]
-                </td>
-            </tr>
-        </table>
+                </div>
+            </div>
+        </div>
         <br /><br />
         <ActionDialog Header="Restart Application" Message="Are You Sure You Wish To Restart The Application?" Action="Restart Application" Security="SecurityAccessLevel.Host" Class="btn btn-danger" OnClick="@(async () => await RestartApplication())" ResourceKey="RestartApplication" />
     </TabPanel>
     <TabPanel Name="Options" Heading="Options" ResourceKey="Options">
-        <table class="table table-borderless">
-            <tr>
-                <td width="30%">
-                    <Label For="runtime" HelpText="Blazor Runtime (Server or WebAssembly)" ResourceKey="BlazorRuntime">Blazor Runtime: </Label>
-                </td>
-                <td>
-                    <select id="runtime" class="form-select" @bind="@_runtime">
-                        <option value="Server">@Localizer["Server"]</option>
-                        <option value="WebAssembly">@Localizer["WebAssembly"]</option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="rendermode" HelpText="Blazor Server Render Mode" ResourceKey="RenderMode">Render Mode: </Label>
-                </td>
-                <td>
-                    <select id="rendermode" class="form-select" @bind="@_rendermode">
-                        <option value="Server">@Localizer["Server"]</option>
-                        <option value="ServerPrerendered">@Localizer["ServerPrerendered"]</option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="detailederrors" HelpText="Specify If Detailed Errors Are Enabled For Blazor. This Option Should Not Not Be Enabled In Production." ResourceKey="DetailedErrors">Detailed Errors? </Label>
-                </td>
-                <td>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="detailederrors" HelpText="Specify If Detailed Errors Are Enabled For Blazor. This Option Should Not Not Be Enabled In Production." ResourceKey="DetailedErrors">Detailed Errors? </Label>
+                <div class="col-sm-9">
                     <select id="detailederrors" class="form-select" @bind="@_detailederrors">
                         <option value="true">@SharedLocalizer["True"]</option>
                         <option value="false">@SharedLocalizer["False"]</option>
                     </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="logginglevel" HelpText="The Minimum Logging Level For The Event Log. This Option Can Be Used To Control The Volume Of Items Stored In Your Event Log." ResourceKey="LoggingLevel">Logging Level: </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="logginglevel" HelpText="The Minimum Logging Level For The Event Log. This Option Can Be Used To Control The Volume Of Items Stored In Your Event Log." ResourceKey="LoggingLevel">Logging Level: </Label>
+                <div class="col-sm-9">
                     <select id="logginglevel" class="form-select" @bind="@_logginglevel">
                         <option value="Trace">@Localizer["Trace"]</option>
                         <option value="Debug">@Localizer["Debug"]</option>
@@ -114,31 +70,27 @@
                         <option value="Error">@Localizer["Error"]</option>
                         <option value="Critical">@Localizer["Critical"]</option>
                     </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="swagger" HelpText="Specify If Swagger Is Enabled For Your Server API" ResourceKey="Swagger">Swagger Enabled? </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="swagger" HelpText="Specify If Swagger Is Enabled For Your Server API" ResourceKey="Swagger">Swagger Enabled? </Label>
+                <div class="col-sm-9">
                     <select id="swagger" class="form-select" @bind="@_swagger">
                         <option value="true">@SharedLocalizer["True"]</option>
                         <option value="false">@SharedLocalizer["False"]</option>
                     </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <Label For="packageservice" HelpText="Specify If The Package Service Is Enabled For Installing Modules, Themes, And Translations" ResourceKey="PackageService">Enable Package Service? </Label>
-                </td>
-                <td>
+                </div>
+            </div>
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="packageservice" HelpText="Specify If The Package Service Is Enabled For Installing Modules, Themes, And Translations" ResourceKey="PackageService">Enable Package Service? </Label>
+                <div class="col-sm-9">
                     <select id="packageservice" class="form-select" @bind="@_packageservice">
                         <option value="true">@SharedLocalizer["True"]</option>
                         <option value="false">@SharedLocalizer["False"]</option>
                     </select>
-                </td>
-            </tr>
-        </table>
+                </div>
+            </div>
+        </div>
         <br /><br />
         <button type="button" class="btn btn-success" @onclick="SaveConfig">@SharedLocalizer["Save"]</button>&nbsp;
         <a class="btn btn-primary" href="swagger/index.html" target="_new">@Localizer["Access.ApiFramework"]</a>&nbsp;
@@ -156,8 +108,6 @@
 	private string _servertime = string.Empty;
 	private string _installationid = string.Empty;
 
-    private string _runtime = string.Empty;
-    private string _rendermode = string.Empty;
 	private string _detailederrors = string.Empty;
 	private string _logginglevel = string.Empty;
 	private string _swagger = string.Empty;
@@ -173,11 +123,9 @@
 			_clrversion = systeminfo["clrversion"];
 			_osversion = systeminfo["osversion"];
 			_serverpath = systeminfo["serverpath"];
-            _servertime = systeminfo["servertime"];
+			_servertime = systeminfo["servertime"] + " UTC";
 			_installationid = systeminfo["installationid"];
 
-            _runtime = systeminfo["runtime"];
-            _rendermode = systeminfo["rendermode"];
             _detailederrors = systeminfo["detailederrors"];
             _logginglevel = systeminfo["logginglevel"];
             _swagger = systeminfo["swagger"];
@@ -190,8 +138,6 @@
         try
         {
             var settings = new Dictionary<string, string>();
-            settings.Add("runtime", _runtime);
-            settings.Add("rendermode", _rendermode);
             settings.Add("detailederrors", _detailederrors);
             settings.Add("logginglevel", _logginglevel);
             settings.Add("swagger", _swagger);
@@ -220,20 +166,4 @@
             await logger.LogError(ex, "Error Restarting Application");
         }
     }
-
-    private async Task RegisterChecked(ChangeEventArgs e)
-    {
-        try
-        {
-            if ((bool)e.Value)
-            {
-                await InstallationService.RegisterAsync(PageState.User.Email);
-                AddModuleMessage(Localizer["Success.Register"], MessageType.Success);
-            }
-        }
-        catch (Exception ex)
-        {
-            await logger.LogError(ex, "Error On Register");
-        }
-    }
 }

Oqtane.Client/Modules/Admin/Themes/Add.razor

@@ -9,19 +9,19 @@
 
 <TabStrip>
     <TabPanel Name="Download" ResourceKey="Download">
-        <ModuleMessage Type="MessageType.Info" Message="Download one or more themes from the list below. Once you are ready click Install to complete the installation."></ModuleMessage>
-
-        <table class="table table-borderless" style=" margin: auto; width: 50% !important;">
-            <tr>
-                <td>
+        <div class="row justify-content-center mb-3">
+            <div class="col-sm-6">
+                <div class="input-group">
+                    <select id="price" class="form-select custom-select" @onchange="(e => PriceChanged(e))">
+                        <option value="free">@SharedLocalizer["Free"]</option>
+                        <option value="paid">@SharedLocalizer["Paid"]</option>
+                    </select>
                     <input id="search" class="form-control" placeholder="@SharedLocalizer["Search.Hint"]" @bind="@_search" />
-                </td>
-                <td>
-                    <button type="button" class="btn btn-primary" @onclick="Search">@SharedLocalizer["Search"]</button>&nbsp;
+                    <button type="button" class="btn btn-primary" @onclick="Search">@SharedLocalizer["Search"]</button>
                     <button type="button" class="btn btn-secondary" @onclick="Reset">@SharedLocalizer["Reset"]</button>
-                </td>
-            </tr>
-        </table>
+                </div>
+            </div>
+        </div>
 
         @if (_packages != null)
         {
@@ -32,10 +32,26 @@
                         <td>
                             <h3 style="display: inline;"><a href="@context.ProductUrl" target="_new">@context.Name</a></h3>&nbsp;&nbsp;@SharedLocalizer["Search.By"]:&nbsp;&nbsp;<strong><a href="@context.OwnerUrl" target="new">@context.Owner</a></strong><br />
                             @(context.Description.Length > 400 ? (context.Description.Substring(0, 400) + "...") : context.Description)<br />
-                            <strong>@(String.Format("{0:n0}", context.Downloads))</strong> @SharedLocalizer["Search.Downloads"]&nbsp;&nbsp;|&nbsp;&nbsp; @SharedLocalizer["Search.Released"]: <strong>@context.ReleaseDate.ToString("MMM dd, yyyy")</strong>&nbsp;&nbsp;|&nbsp;&nbsp;@SharedLocalizer["Search.Version"]: <strong>@context.Version</strong>&nbsp;&nbsp;|&nbsp;&nbsp;@SharedLocalizer["Search.Source"]: <strong>@context.PackageUrl</strong>
+                            <strong>@(String.Format("{0:n0}", context.Downloads))</strong> @SharedLocalizer["Search.Downloads"]&nbsp;&nbsp;|&nbsp;&nbsp;
+                            @SharedLocalizer["Search.Released"]: <strong>@context.ReleaseDate.ToString("MMM dd, yyyy")</strong>&nbsp;&nbsp;|&nbsp;&nbsp;
+                            @SharedLocalizer["Search.Version"]: <strong>@context.Version</strong>
+                            @((MarkupString)(context.TrialPeriod > 0 ? "&nbsp;&nbsp;|&nbsp;&nbsp;<strong>" + context.TrialPeriod + " " + @SharedLocalizer["Trial"] + "</strong>" : ""))
                         </td>
-                        <td style="vertical-align: middle;">
-                            <button type="button" class="btn btn-primary" @onclick=@(async () => await DownloadTheme(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                        <td style="width: 1px; vertical-align: middle;">
+                            @if (context.Price != null && !string.IsNullOrEmpty(context.PackageUrl))
+                            {
+                                <button type="button" class="btn btn-primary" @onclick=@(async () => await GetPackage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                            }
+                        </td>
+                        <td style="width: 1px; vertical-align: middle;">
+                            @if (context.Price != null && !string.IsNullOrEmpty(context.PaymentUrl))
+                            {
+                                <a class="btn btn-primary" style="text-decoration: none !important" href="@context.PaymentUrl" target="_new">@context.Price.Value.ToString("$#,##0.00")</a>
+                            }
+                            else
+                            {
+                                <button type="button" class="btn btn-primary" @onclick=@(async () => await GetPackage(context.PackageId, context.Version))>@SharedLocalizer["Download"]</button>
+                            }
                         </td>
                     </Row>
                 </Pager>
@@ -50,25 +66,61 @@
         }
     </TabPanel>
     <TabPanel Name="Upload" ResourceKey="Upload">
-        <table class="table table-borderless">
-            <tr>
-                <td>
-                    <Label HelpText="Upload one or more theme packages. Once they are uploaded click Install to complete the installation." ResourceKey="Theme">Theme: </Label>
-                </td>
-                <td>
-                    <FileManager Filter="nupkg" ShowFiles="false" Folder="Packages" UploadMultiple="@true" />
-                </td>
-            </tr>
-        </table>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" HelpText="Upload one or more theme packages. Once they are uploaded click Install to complete the installation." ResourceKey="Theme">Theme: </Label>
+                <div class="col-sm-9">
+                    <FileManager Folder="@Constants.PackagesFolder" UploadMultiple="true" />
+                </div>
+            </div>
+        </div>
     </TabPanel>
 </TabStrip>
 
+@if (_productname != "")
+{
+    <div class="app-actiondialog">
+        <div class="modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">@SharedLocalizer["Review License Terms"]</h5>
+                        <button type="button" class="btn-close" aria-label="Close" @onclick="HideModal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p style="height: 200px; overflow-y: scroll;">
+                            <h3>@_productname</h3>
+                            @if (!string.IsNullOrEmpty(_license))
+                            {
+                                @((MarkupString)_license)
+                            }
+                            else
+                            {
+                                @SharedLocalizer["License Not Specified"]
+                            }
+                        </p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-success" @onclick="DownloadPackage">@SharedLocalizer["Accept"]</button>
+                        <button type="button" class="btn btn-secondary" @onclick="HideModal">@SharedLocalizer["Cancel"]</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
 <button type="button" class="btn btn-success" @onclick="InstallThemes">@SharedLocalizer["Install"]</button>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 
 @code {
     private List<Package> _packages;
+    private string _price = "free";
     private string _search = "";
+    private string _productname = "";
+    private string _license = "";
+    private string _packageid = "";
+    private string _version = "";
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
@@ -88,7 +140,7 @@
     private async Task LoadThemes()
     {
         var themes = await ThemeService.GetThemesAsync();
-        _packages = await PackageService.GetPackagesAsync("theme", _search);
+        _packages = await PackageService.GetPackagesAsync("theme", _search, _price, "");
 
         if (_packages != null)
         {
@@ -102,6 +154,21 @@
         }
     }
 
+    private async void PriceChanged(ChangeEventArgs e)
+    {
+        try
+        {
+            _price = (string)e.Value;
+            _search = "";
+            await LoadThemes();
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error On PriceChanged");
+        }
+    }
+
     private async Task Search()
     {
         try
@@ -127,6 +194,55 @@
         }
     }
 
+    private void HideModal()
+    {
+        _productname = "";
+        _license = "";
+        StateHasChanged();
+    }
+
+    private async Task GetPackage(string packageid, string version)
+    {
+        try
+        {
+            var package = await PackageService.GetPackageAsync(packageid, version);
+            if (package != null)
+            {
+                _productname = package.Name;
+                if (!string.IsNullOrEmpty(package.License))
+                {
+                    _license = package.License.Replace("\n", "<br />");
+                }
+                _packageid = package.PackageId;
+                _version = package.Version;
+            }
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Getting Package {PackageId} {Version}", packageid, version);
+            AddModuleMessage(Localizer["Error.Theme.Download"], MessageType.Error);
+        }
+    }
+
+    private async Task DownloadPackage()
+    {
+        try
+        {
+            await PackageService.DownloadPackageAsync(_packageid, _version, Constants.PackagesFolder);
+            await logger.LogInformation("Package {PackageId} {Version} Downloaded Successfully", _packageid, _version);
+            AddModuleMessage(Localizer["Success.Theme.Download"], MessageType.Success);
+            _productname = "";
+            _license = "";
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            await logger.LogError(ex, "Error Downloading Package {PackageId} {Version}", _packageid, _version);
+            AddModuleMessage(Localizer["Error.Theme.Download"], MessageType.Error);
+        }
+    }
+
     private async Task InstallThemes()
     {
         try
@@ -139,20 +255,4 @@
             await logger.LogError(ex, "Error Installing Theme");
         }
     }
-
-    private async Task DownloadTheme(string packageid, string version)
-    {
-        try
-        {
-            await PackageService.DownloadPackageAsync(packageid, version, "Packages");
-            await logger.LogInformation("Theme {ThemeName} {Version} Downloaded Successfully", packageid, version);
-            AddModuleMessage(Localizer["Success.Theme.Download"], MessageType.Success);
-            StateHasChanged();
-        }
-        catch (Exception ex)
-        {
-            await logger.LogError(ex, "Error Downloading Module {ThemeName} {Version}", packageid, version);
-            AddModuleMessage(Localizer["Error.Theme.Download"], MessageType.Error);
-        }
-    }
 }

Oqtane.Client/Modules/Admin/Themes/Create.razor

@@ -11,28 +11,22 @@
 
 @if (_templates != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="owner" HelpText="Enter the name of the organization who is developing this theme. It should not contain spaces or punctuation." ResourceKey="OwnerName">Owner Name: </Label>
-            </td>
-            <td>
+	<div class="container">
+		<div class="row mb-1 align-items-center">
+			<Label Class="col-sm-3" For="owner" HelpText="Enter the name of the organization who is developing this theme. It should not contain spaces or punctuation." ResourceKey="OwnerName">Owner Name: </Label>
+			<div class="col-sm-9">
 				<input id="owner" class="form-control" @bind="@_owner" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="module" HelpText="Enter a name for this theme. It should not contain spaces or punctuation." ResourceKey="ThemeName">Theme Name: </Label>
-            </td>
-            <td>
+			</div>
+		</div>
+		<div class="row mb-1 align-items-center">
+			<Label Class="col-sm-3" For="module" HelpText="Enter a name for this theme. It should not contain spaces or punctuation." ResourceKey="ThemeName">Theme Name: </Label>
+			<div class="col-sm-9">
 				<input id="module" class="form-control" @bind="@_theme" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="template" HelpText="Select a theme template. Templates are located in the wwwroot/Themes/Templates folder on the server." ResourceKey="Template">Template: </Label>
-            </td>
-            <td>
+			</div>
+		</div>
+		<div class="row mb-1 align-items-center">
+			<Label Class="col-sm-3" For="template" HelpText="Select a theme template. Templates are located in the wwwroot/Themes/Templates folder on the server." ResourceKey="Template">Template: </Label>
+			<div class="col-sm-9">
 				<select id="template" class="form-select" @onchange="(e => TemplateChanged(e))">
 					<option value="-">&lt;@Localizer["Template.Select"]&gt;</option>
 					@foreach (Template template in _templates)
@@ -40,13 +34,11 @@
 						<option value="@template.Name">@template.Title</option>
 					}
 				</select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="reference" HelpText="Select a framework reference version" ResourceKey="FrameworkReference">Framework Reference: </Label>
-            </td>
-            <td>
+			</div>
+		</div>
+		<div class="row mb-1 align-items-center">
+			<Label Class="col-sm-3" For="reference" HelpText="Select a framework reference version" ResourceKey="FrameworkReference">Framework Reference: </Label>
+			<div class="col-sm-9">
 				<select id="reference" class="form-select" @bind="@_reference">
 					@foreach (string version in _versions)
 					{
@@ -57,20 +49,19 @@
 					}
 					<option value="local">@SharedLocalizer["LocalVersion"]</option>
 				</select>
-            </td>
-        </tr>
+			</div>
+		</div>
 		@if (!string.IsNullOrEmpty(_location)) 
 		{
-            <tr>
-                <td>
-                    <Label For="location" HelpText="Location where the theme will be created" ResourceKey="Location">Location: </Label>
-                </td>
-                <td>
+			<div class="row mb-1 align-items-center">
+				<Label Class="col-sm-3" For="location" HelpText="Location where the theme will be created" ResourceKey="Location">Location: </Label>
+				<div class="col-sm-9">
 					<input id="module" class="form-control" @bind="@_location" readonly />
-                </td>
-            </tr>
+				</div>
+			</div>
 		}
-    </table>
+	</div>
+    <br />
     <button type="button" class="btn btn-success" @onclick="CreateTheme">@Localizer["Theme.Create"]</button>
     <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 }
@@ -87,13 +78,17 @@
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Host;
 
+    protected override void OnInitialized()
+    {
+        AddModuleMessage(Localizer["Info.Theme.CreatorIntent"], MessageType.Info);
+    }
+	
 	protected override async Task OnParametersSetAsync()
     {
         try
         {
             _templates = await ThemeService.GetThemeTemplatesAsync();
             _versions = Constants.ReleaseVersions.Split(',').Where(item => Version.Parse(item).CompareTo(Version.Parse("2.0.0")) >= 0).ToArray();
-            AddModuleMessage(Localizer["Info.Theme.CreatorIntent"], MessageType.Info);
         }
         catch (Exception ex)
         {

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

@@ -21,8 +21,9 @@ else
         <Header>
             <th style="width: 1px;">&nbsp;</th>
             <th style="width: 1px;">&nbsp;</th>
-            <th scope="col">@SharedLocalizer["Name"]</th>
-            <th scope="col">@SharedLocalizer["Version"]</th>
+            <th>@SharedLocalizer["Name"]</th>
+            <th>@SharedLocalizer["Version"]</th>
+            <th>@SharedLocalizer["Expires"]</th>
             <th>&nbsp;</th>
         </Header>
         <Row>
@@ -35,6 +36,9 @@ else
             </td>
             <td>@context.Name</td>
             <td>@context.Version</td>
+            <td>
+                @((MarkupString)PurchaseLink(context.PackageName))
+            </td>
             <td>
                 @if (UpgradeAvailable(context.PackageName, context.Version))
                 {
@@ -69,10 +73,31 @@ else
         }
     }
 
+    private string PurchaseLink(string packagename)
+    {
+        string link = "";
+        if (!string.IsNullOrEmpty(packagename) && _packages != null)
+        {
+            var package = _packages.Where(item => item.PackageId == packagename).FirstOrDefault();
+            if (package != null)
+            {
+                if (package.ExpiryDate != null && package.ExpiryDate.Value.Date != DateTime.MaxValue.Date)
+                {
+                    link += "<span>" + package.ExpiryDate.Value.Date.ToString("MMM dd, yyyy") + "</span>";
+                    if (!string.IsNullOrEmpty(package.PaymentUrl))
+                    {
+                        link += "&nbsp;&nbsp;<a class=\"btn btn-primary\" style=\"text-decoration: none !important\" href=\"" + package.PaymentUrl + "\" target=\"_new\">" + SharedLocalizer["Extend"] + "</a>";
+                    }
+                }
+            }
+        }
+        return link;
+    }
+
     private bool UpgradeAvailable(string packagename, string version)
     {
         var upgradeavailable = false;
-        if (_packages != null)
+        if (!string.IsNullOrEmpty(packagename) && _packages != null)
         {
             var package = _packages.Where(item => item.PackageId == packagename).FirstOrDefault();
             if (package != null)
@@ -87,7 +112,7 @@ else
     {
         try
         {
-            await PackageService.DownloadPackageAsync(packagename, version, "Packages");
+            await PackageService.DownloadPackageAsync(packagename, version, Constants.PackagesFolder);
             await logger.LogInformation("Theme Downloaded {ThemeName} {Version}", packagename, version);
             await ThemeService.InstallThemesAsync();
             AddModuleMessage(string.Format(Localizer["Success.Theme.Install"], NavigateUrl("admin/system")), MessageType.Success);

Oqtane.Client/Modules/Admin/Themes/View.razor

@@ -6,64 +6,50 @@
 @inject IStringLocalizer<View> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="name" HelpText="The name of the theme" ResourceKey="Name">Name: </Label>
-        </td>
-        <td>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="name" HelpText="The name of the theme" ResourceKey="Name">Name: </Label>
+        <div class="col-sm-9">
             <input id="name" class="form-control" @bind="@_name" disabled />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="themename" HelpText="The internal name of the module" ResourceKey="InternalName">Internal Name: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="themename" HelpText="The internal name of the module" ResourceKey="InternalName">Internal Name: </Label>
+        <div class="col-sm-9">
             <input id="themename" class="form-control" @bind="@_themeName" disabled />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="version" HelpText="The version of the theme" ResourceKey="Version">Version: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="version" HelpText="The version of the theme" ResourceKey="Version">Version: </Label>
+        <div class="col-sm-9">
             <input id="version" class="form-control" @bind="@_version" disabled />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="owner" HelpText="The owner or creator of the theme" ResourceKey="Owner">Owner: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="owner" HelpText="The owner or creator of the theme" ResourceKey="Owner">Owner: </Label>
+        <div class="col-sm-9">
             <input id="owner" class="form-control" @bind="@_owner" disabled />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="url" HelpText="The reference url of the theme" ResourceKey="ReferenceUrl">Reference Url: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="url" HelpText="The reference url of the theme" ResourceKey="ReferenceUrl">Reference Url: </Label>
+        <div class="col-sm-9">
             <input id="url" class="form-control" @bind="@_url" disabled />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="contact" HelpText="The contact for the theme" ResourceKey="Contact">Contact: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="contact" HelpText="The contact for the theme" ResourceKey="Contact">Contact: </Label>
+        <div class="col-sm-9">
             <input id="contact" class="form-control" @bind="@_contact" disabled />
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <Label For="license" HelpText="The license of the theme" ResourceKey="License">License: </Label>
-        </td>
-        <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="license" HelpText="The license of the theme" ResourceKey="License">License: </Label>
+        <div class="col-sm-9">
             <textarea id="license" class="form-control" @bind="@_license" rows="5" disabled></textarea>
-        </td>
-    </tr>
-</table>
+        </div>
+    </div>
+</div>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 
 @code {

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

@@ -22,16 +22,14 @@
     </TabPanel>
     <TabPanel Name="Upload" ResourceKey="Upload">
         <ModuleMessage Type="MessageType.Info" Message="Upload A Framework Package (Oqtane.Framework.version.nupkg) And Then Select Upgrade"></ModuleMessage>
-        <table class="table table-borderless">
-            <tr>
-                <td>
-                    <Label HelpText="Upload A Framework Package And Then Select Upgrade" ResourceKey="Framework">Framework: </Label>
-                </td>
-                <td>
-                    <FileManager Filter="nupkg" ShowFiles="false" Folder="Packages" />
-                </td>
-            </tr>
-        </table>
+        <div class="container">
+            <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" HelpText="Upload A Framework Package And Then Select Upgrade" ResourceKey="Framework">Framework: </Label>
+                <div class="col-sm-9">
+                    <FileManager Folder="@Constants.PackagesFolder" />
+                </div>
+            </div>
+        </div>
         <button type="button" class="btn btn-success" @onclick="Upgrade">@SharedLocalizer["Upgrade"]</button>
     </TabPanel>
 </TabStrip>
@@ -46,7 +44,7 @@
     {
         try
         {
-            List<Package> packages = await PackageService.GetPackagesAsync("framework");
+            List<Package> packages = await PackageService.GetPackagesAsync("framework", "", "", "");
             if (packages != null)
             {
                 _package = packages.Where(item => item.PackageId.StartsWith(Constants.PackageId)).FirstOrDefault();
@@ -73,7 +71,7 @@
             AddModuleMessage(Localizer["Info.Upgrade.Wait"], MessageType.Info);
             ShowProgressIndicator();
             var interop = new Interop(JSRuntime);
-            await interop.RedirectBrowser(NavigateUrl(), 20);
+            await interop.RedirectBrowser(NavigateUrl(), 10);
             await InstallationService.Upgrade();
         }
         catch (Exception ex)
@@ -87,8 +85,8 @@
     {
         try
         {
-            await PackageService.DownloadPackageAsync(packageid, version, "Packages");
-            await PackageService.DownloadPackageAsync(Constants.UpdaterPackageId, version, "Packages");
+            await PackageService.DownloadPackageAsync(packageid, version, Constants.PackagesFolder);
+            await PackageService.DownloadPackageAsync(Constants.UpdaterPackageId, version, Constants.PackagesFolder);
             AddModuleMessage(Localizer["Success.Framework.Download"], MessageType.Success);
         }
         catch (Exception ex)

Oqtane.Client/Modules/Admin/UrlMappings/Add.razor

@@ -0,0 +1,89 @@
+@namespace Oqtane.Modules.Admin.UrlMappings
+@inherits ModuleBase
+@inject NavigationManager NavigationManager
+@inject IUrlMappingService UrlMappingService
+@inject IStringLocalizer<Edit> Localizer
+@inject IStringLocalizer<SharedResources> SharedLocalizer
+
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="url" HelpText="The fully qualified Url for this site" ResourceKey="Url">Url:</Label>
+            <div class="col-sm-9">
+                <input id="url" class="form-control" @bind="@_url" maxlength="500" required />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="mappedurl" HelpText="A fully qualified Url where the user will be redirected" ResourceKey="MappedUrl">Redirect To:</Label>
+            <div class="col-sm-9">
+                <input id="mappedurl" class="form-control" @bind="@_mappedurl" maxlength="500" required />
+            </div>
+        </div>
+        <br /><br />
+        <button type="button" class="btn btn-success" @onclick="SaveUrlMapping">@SharedLocalizer["Save"]</button>
+        <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    </div>
+</form>
+
+@code {
+	private ElementReference form;
+	private bool validated = false;
+
+	private string _url = string.Empty;
+	private string _mappedurl = string.Empty;
+
+	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
+
+	private async Task SaveUrlMapping()
+	{
+		validated = true;
+		var interop = new Interop(JSRuntime);
+		if (await interop.FormValid(form))
+		{
+			if (_url != _mappedurl)
+			{
+				var url = PageState.Uri.Scheme + "://" + PageState.Uri.Authority + "/";
+				url = url + (!string.IsNullOrEmpty(PageState.Alias.Path) ? PageState.Alias.Path + "/" : "");
+
+				_url = (_url.StartsWith("/")) ? _url.Substring(1) : _url;
+				_url = (!_url.StartsWith("http")) ? url + _url : _url;
+
+				if (_url.StartsWith(url))
+				{
+					var urlmapping = new UrlMapping();
+					urlmapping.SiteId = PageState.Site.SiteId;
+					var route = new Route(_url, PageState.Alias.Path);
+					urlmapping.Url = route.PagePath;
+					urlmapping.MappedUrl = _mappedurl.Replace(url, "");
+					urlmapping.Requests = 0;
+					urlmapping.CreatedOn = DateTime.UtcNow;
+					urlmapping.RequestedOn = DateTime.UtcNow;
+
+					try
+					{
+						urlmapping = await UrlMappingService.AddUrlMappingAsync(urlmapping);
+						await logger.LogInformation("UrlMapping Saved {UrlMapping}", urlmapping);
+						NavigationManager.NavigateTo(NavigateUrl());
+					}
+					catch (Exception ex)
+					{
+						await logger.LogError(ex, "Error Saving UrlMapping {UrlMapping} {Error}", urlmapping, ex.Message);
+						AddModuleMessage(Localizer["Error.SaveUrlMapping"], MessageType.Error);
+					}
+				}
+				else
+				{
+					AddModuleMessage(Localizer["Message.SaveUrlMapping"], MessageType.Warning);
+				}
+			}
+			else
+			{
+                AddModuleMessage(Localizer["Message.DuplicateUrlMapping"], MessageType.Warning);
+			}
+        }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
+}

Oqtane.Client/Modules/Admin/UrlMappings/Edit.razor

@@ -0,0 +1,92 @@
+@namespace Oqtane.Modules.Admin.UrlMappings
+@inherits ModuleBase
+@inject NavigationManager NavigationManager
+@inject IUrlMappingService UrlMappingService
+@inject IStringLocalizer<Edit> Localizer
+@inject IStringLocalizer<SharedResources> SharedLocalizer
+
+<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="url" HelpText="A fully qualified Url for this site" ResourceKey="Url">Url:</Label>
+            <div class="col-sm-9">
+                <input id="url" class="form-control" @bind="@_url" maxlength="500" readonly />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="mappedurl" HelpText="A fully qualified Url where the user will be redirected" ResourceKey="MappedUrl">Redirect To:</Label>
+            <div class="col-sm-9">
+                <input id="mappedurl" class="form-control" @bind="@_mappedurl" maxlength="500" required />
+            </div>
+        </div>
+        <br /><br />
+        <button type="button" class="btn btn-success" @onclick="SaveUrlMapping">@SharedLocalizer["Save"]</button>
+        <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+    </div>
+</form>
+
+@code {
+	private ElementReference form;
+	private bool validated = false;
+
+	private int _urlmappingid;
+	private string _url = string.Empty;
+	private string _mappedurl = string.Empty;
+
+	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
+
+	protected override async Task OnInitializedAsync()
+	{
+		try
+		{
+			_urlmappingid = Int32.Parse(PageState.QueryString["id"]);
+			var urlmapping = await UrlMappingService.GetUrlMappingAsync(_urlmappingid);
+			if (urlmapping != null)
+			{
+				_url = urlmapping.Url;
+				_mappedurl = urlmapping.MappedUrl;
+			}
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Loading UrlMapping {UrlMappingId} {Error}", _urlmappingid, ex.Message);
+			AddModuleMessage(Localizer["Error.LoadUrlMapping"], MessageType.Error);
+		}
+	}
+
+	private async Task SaveUrlMapping()
+	{
+		validated = true;
+		var interop = new Interop(JSRuntime);
+		if (await interop.FormValid(form))
+		{
+			if (_url != _mappedurl)
+			{
+				try
+				{
+					var url = PageState.Uri.Scheme + "://" + PageState.Uri.Authority + "/";
+					url = url + (!string.IsNullOrEmpty(PageState.Alias.Path) ? PageState.Alias.Path + "/" : "");
+
+					var urlmapping = await UrlMappingService.GetUrlMappingAsync(_urlmappingid);
+					urlmapping.MappedUrl = _mappedurl.Replace(url, "");
+					urlmapping = await UrlMappingService.UpdateUrlMappingAsync(urlmapping);
+					await logger.LogInformation("UrlMapping Saved {UrlMapping}", urlmapping);
+					NavigationManager.NavigateTo(NavigateUrl());
+				}
+				catch (Exception ex)
+				{
+					await logger.LogError(ex, "Error Saving UrlMapping {UrlMappingId} {Error}", _urlmappingid, ex.Message);
+					AddModuleMessage(Localizer["Error.SaveUrlMapping"], MessageType.Error);
+				}
+			}
+			else
+			{
+                AddModuleMessage(Localizer["Message.DuplicateUrlMapping"], MessageType.Warning);
+			}
+		}
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
+}

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

@@ -0,0 +1,135 @@
+@namespace Oqtane.Modules.Admin.UrlMappings
+@inherits ModuleBase
+@inject NavigationManager NavigationManager
+@inject IUrlMappingService UrlMappingService
+@inject ISiteService SiteService
+@inject IStringLocalizer<Index> Localizer
+@inject IStringLocalizer<SharedResources> SharedLocalizer
+
+@if (_urlMappings == null)
+{
+    <p><em>@SharedLocalizer["Loading"]</em></p>
+}
+else
+{
+    <TabStrip>
+        <TabPanel Name="Urls" Heading="Urls" ResourceKey="Urls">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<div class="col-sm-6">
+						<ActionLink Action="Add" Text="Add Url Mapping" ResourceKey="AddUrlMapping" />
+					</div>
+					<div class="col-sm-6">
+						<select id="type" class="form-select custom-select" @onchange="(e => MappedChanged(e))">
+							<option value="true">@Localizer["Mapped"]</option>
+							<option value="false">@Localizer["Broken"]</option>
+						</select>
+					</div>
+				</div>
+			</div>
+			<br/>
+			<Pager Items="@_urlMappings">
+				<Header>
+					<th style="width: 1px;">&nbsp;</th>
+					<th style="width: 1px;">&nbsp;</th>
+					<th>@Localizer["Url"]</th>
+					<th>@Localizer["Requests"]</th>
+					<th>@Localizer["Requested"]</th>
+				</Header>
+				<Row>
+					<td><ActionLink Action="Edit" Parameters="@($"id=" + context.UrlMappingId.ToString())" ResourceKey="Edit" /></td>
+					<td><ActionDialog Header="Delete Url Mapping" Message="@string.Format(Localizer["Confirm.DeleteUrlMapping"], context.Url)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteUrlMapping(context))" ResourceKey="DeleteUrlMapping" /></td>
+					<td>
+						<a href="@Utilities.TenantUrl(PageState.Alias, context.Url)">@context.Url</a>
+						@if (_mapped)
+						{
+							@((MarkupString)"<br />&gt;&gt;&nbsp;")<a href="@((context.MappedUrl.StartsWith("http") ? context.MappedUrl : Utilities.TenantUrl(PageState.Alias, context.MappedUrl)))">@context.MappedUrl</a>
+						}
+					</td>
+					<td>@context.Requests</td>
+					<td>@context.RequestedOn</td>
+				</Row>
+			</Pager>
+		</TabPanel>
+        <TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="capturebrokenurls" HelpText="Specify if broken Urls should be captured automatically and saved in Url Mappings" ResourceKey="CaptureBrokenUrls">Capture Broken Urls? </Label>
+					<div class="col-sm-9">
+						<select id="capturebrokenurls" class="form-select" @bind="@_capturebrokenurls" >
+							<option value="True">@SharedLocalizer["Yes"]</option>
+							<option value="False">@SharedLocalizer["No"]</option>
+						</select>
+					</div>
+				</div>
+			</div>
+			<br />
+			<button type="button" class="btn btn-success" @onclick="SaveSiteSettings">@SharedLocalizer["Save"]</button>
+		</TabPanel>
+	</TabStrip>
+}
+
+@code {
+	private bool _mapped = true;
+	private List<UrlMapping> _urlMappings;
+	private string _capturebrokenurls;
+
+	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
+
+	protected override async Task OnParametersSetAsync()
+	{
+		await GetUrlMappings();
+		_capturebrokenurls = PageState.Site.CaptureBrokenUrls.ToString();
+	}
+
+	private async void MappedChanged(ChangeEventArgs e)
+	{
+		try
+		{
+			_mapped = bool.Parse(e.Value.ToString());
+			await GetUrlMappings();
+			StateHasChanged();
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error On TypeChanged");
+		}
+	}
+
+	private async Task DeleteUrlMapping(UrlMapping urlMapping)
+	{
+		try
+		{
+			await UrlMappingService.DeleteUrlMappingAsync(urlMapping.UrlMappingId);
+			await logger.LogInformation("UrlMapping Deleted {UrlMapping}", urlMapping);
+			await GetUrlMappings();
+			StateHasChanged();
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Deleting UrlMapping {UrlMapping} {Error}", urlMapping, ex.Message);
+			AddModuleMessage(Localizer["Error.DeleteUrlMapping"], MessageType.Error);
+		}
+	}
+
+	private async Task GetUrlMappings()
+	{
+		_urlMappings = await UrlMappingService.GetUrlMappingsAsync(PageState.Site.SiteId, _mapped);
+	}
+
+	private async Task SaveSiteSettings()
+	{
+		try
+		{
+			var site = PageState.Site;
+			site.CaptureBrokenUrls = bool.Parse(_capturebrokenurls);
+			await SiteService.UpdateSiteAsync(site);
+			AddModuleMessage(Localizer["Success.SaveSiteSettings"], MessageType.Success);
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Saving Site Settings {Error}", ex.Message);
+			AddModuleMessage(Localizer["Error.SaveSiteSettings"], MessageType.Error);
+		}
+	}
+}

Oqtane.Client/Modules/Admin/UserProfile/Add.razor

@@ -8,32 +8,27 @@
 
 @if (PageState.User != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="to" HelpText="Enter the username you wish to send a message to" ResourceKey="To">To: </Label>
-            </td>
-            <td>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="to" HelpText="Enter the username you wish to send a message to" ResourceKey="To">To: </Label>
+        <div class="col-sm-9">
             <input id="to" class="form-control" @bind="@username" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="subject" HelpText="Enter the subject of the message" ResourceKey="Subject">Subject: </Label>
-            </td>
-            <td>
+        </div> >
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="subject" HelpText="Enter the subject of the message" ResourceKey="Subject">Subject: </Label>
+        <div class="col-sm-9">
             <input id="subject" class="form-control" @bind="@subject" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="message" HelpText="Enter the message" ResourceKey="Message">Message: </Label>
-            </td>
-            <td>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="message" HelpText="Enter the message" ResourceKey="Message">Message: </Label>
+        <div class="col-sm-9">
             <textarea id="message" class="form-control" @bind="@body" rows="5" />
-            </td>
-        </tr>
-    </table>
+        </div>
+    </div>
+</div>
+<br/>
     <button type="button" class="btn btn-primary" @onclick="Send">@SharedLocalizer["Send"]</button>
     <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 }

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

@@ -6,12 +6,13 @@
 @inject ISettingService SettingService
 @inject INotificationService NotificationService
 @inject IFileService FileService
+@inject IFolderService FolderService
 @inject IStringLocalizer<Index> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
 @if (PageState.User != null && photo != null)
 {
-    <img src="@photo.Url" alt="@displayname" style="max-width: 400px" class="rounded-circle mx-auto d-block">
+    <img src="@ImageUrl(photofileid, 400, 400)" alt="@displayname" style="max-width: 400px" class="rounded-circle mx-auto d-block">
 }
 else
 {
@@ -19,58 +20,47 @@ else
 }
 <TabStrip>
     <TabPanel Name="Identity" ResourceKey="Identity">
-        @if (PageState.User != null)
+        @if (profiles != null && settings != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="Your username. Note that this field can not be modified." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="Your username. Note that this field can not be modified." ResourceKey="Username"></Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@username" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
-                        <input id ="password" type="password" class="form-control" @bind="@password" autocomplete="new-password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
+                        <input id="password" type="password" class="form-control" @bind="@password" autocomplete="new-password" />
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@confirm" autocomplete="new-password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
+                    <div class="col-sm-9">
                         <input id="email" class="form-control" @bind="@email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="Your full name" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="displayname" HelpText="Your full name" ResourceKey="DisplayName"></Label>
+                    <div class="col-sm-9">
                         <input id="displayname" class="form-control" @bind="@displayname" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="@photofileid.ToString()" HelpText="A photo of yourself" ResourceKey="Photo"></Label>
-                    </td>
-                    <td>
-                        <FileManager FileId="@photofileid" @ref="filemanager" />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="@photofileid.ToString()" HelpText="A photo of yourself" ResourceKey="Photo"></Label>
+                    <div class="col-sm-9">
+                        <FileManager FileId="@photofileid" Filter="@Constants.ImageFiles" ShowFolders="false" ShowFiles="true" UploadMultiple="false" FolderId="@folderid" @ref="filemanager" />
+                    </div>
+                </div>
+            </div>
+            <br />
             <button type="button" class="btn btn-success" @onclick="Save">@SharedLocalizer["Save"]</button>
             <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
         }
@@ -78,7 +68,8 @@ else
     <TabPanel Name="Profile" ResourceKey="Profile">
         @if (profiles != null && settings != null)
         {
-            <table class="table table-borderless">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
                     @foreach (Profile profile in profiles)
                     {
                         var p = profile;
@@ -86,18 +77,14 @@ else
                         {
                             if (p.Category != category)
                             {
-                            <tr>
-                                <th colspan="2" style="text-align: center;">
+                                <div class="col text-center pb-2">
                                     @p.Category
-                                </th>
-                            </tr>
+                                </div>
                                 category = p.Category;
                             }
-                        <tr>
-                            <td width="30%">
-                                <Label For="@p.Name" HelpText="@p.Description">@p.Title</Label>
-                            </td>
-                            <td>
+                            <div class="row mb-1 align-items-center">
+                                <Label Class="col-sm-3" For="@p.Name" HelpText="@p.Description">@p.Title</Label>
+                                <div class="col-sm-9">
                                     @if (!string.IsNullOrEmpty(p.Options))
                                     {
                                         <select id="@p.Name" class="form-select" @onchange="@(e => ProfileChanged(e, p.Name))">
@@ -125,11 +112,12 @@ else
                                             <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
                                         }
                                     }
-                            </td>
-                        </tr>
+                                </div>
+                            </div>
                         }
                     }
-            </table>
+                </div>
+            </div>
             <button type="button" class="btn btn-success" @onclick="Save">@SharedLocalizer["Save"]</button>
             <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
         }
@@ -221,6 +209,7 @@ else
     private string email = string.Empty;
     private string displayname = string.Empty;
     private FileManager filemanager;
+    private int folderid = -1;
     private int photofileid = -1;
     private File photo = null;
     private List<Profile> profiles;
@@ -241,6 +230,13 @@ else
                 email = PageState.User.Email;
                 displayname = PageState.User.DisplayName;
 
+                // get user folder
+                var folder = await FolderService.GetFolderAsync(ModuleState.SiteId, PageState.User.FolderPath);
+                if (folder != null)
+                {
+                    folderid = folder.FolderId;
+                }
+
                 if (PageState.User.PhotoFileId != null)
                 {
                     photofileid = PageState.User.PhotoFileId.Value;

Oqtane.Client/Modules/Admin/UserProfile/View.razor

@@ -8,75 +8,71 @@
 
 @if (PageState.User != null)
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <label class="control-label">@Localizer["Title"] </label>
-            </td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <label Class="col-sm-3">@Localizer["Title"] </label>
             @if (title == "From")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@username" readonly />
-                </td>
+                </div>
             }
             @if (title == "To")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@username" />
-                </td>
+                </div>
             }
-        </tr>
-        <tr>
-            <td>
-                <label class="control-label">@Localizer["Subject"] </label>
-            </td>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <label Class="col-sm-3">@Localizer["Subject"] </label>
             @if (title == "From")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@subject" readonly />
-                </td>
+                </div>
             }
             @if (title == "To")
             {
-                <td>
+                <div class="col-sm-3">
                     <input class="form-control" @bind="@subject" />
-                </td>
+                </div>
             }
-        </tr>
+        </div>
+    </div>
+    <div class="container">
         @if (title == "From")
         {
-            <tr>
-                <td>
-                    <label class="control-label">@Localizer["Date"] </label>
-                </td>
-                <td>
+            <div class="row mb-1 align-items-center">
+                <label class="col-sm-3">@Localizer["Date"] </label>
+                <div class="col-sm-9">
                     <input class="form-control" @bind="@createdon" readonly />
-                </td>
-            </tr>
+                </div>
+            </div>
         }
         @if (title == "From")
         {
-            <tr>
-                <td>
-                    <label class="control-label">@Localizer["Message"] </label>
-                </td>
-                <td>
+                <div class="row mb-1 align-items-center">
+                    <label class="col-sm-3">@Localizer["Message"] </label>
+                    <div class="col-sm-9">
                         <textarea class="form-control" @bind="@body" rows="5" readonly />
-                </td>
-            </tr>
+                    </div>
+                </div>
+
         }
         @if (title == "To")
         {
-            <tr>
-                <td>
-                    <label class="control-label">@Localizer["Message"] </label>
-                </td>
-                <td>
-                    <textarea class="form-control" @bind="@body" rows="5" />
-                </td>
-            </tr>
+
+                <div class="row mb-1 align-items-center">
+                    <label class="col-sm-3">@Localizer["Message"] </label>
+                    <div class="col-sm-9">
+                        <textarea class="form-control" @bind="@body" rows="5" readonly />
+                    </div>
+                </div>
+
         }
-    </table>
+
+    </div>
 
 
     @if (reply != string.Empty)

Oqtane.Client/Modules/Admin/Users/Add.razor

@@ -11,71 +11,59 @@
     <TabPanel Name="Identity" ResourceKey="Identity">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="A unique username for a user. Note that this field can not be modified once it is saved." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="A unique username for a user. Note that this field can not be modified once it is saved." ResourceKey="Username"></Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@username" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
                         <input id="password" type="password" class="form-control" @bind="@password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@confirm" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
+                    <div class="col-sm-9">
                         <input id="email" class="form-control" @bind="@email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
+                    <div class="col-sm-9">
                         <input id="displayname" class="form-control" @bind="@displayname" />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
+
         }
     </TabPanel>
     <TabPanel Name="Profile" ResourceKey="Profile">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
                     @foreach (Profile profile in profiles)
                     {
                         var p = profile;
                         if (p.Category != category)
                         {
-                        <tr>
-                            <th colspan="2" style="text-align: center;">
-                                @p.Category
-                            </th>
-                        </tr>
+                            <div class="col text-center pb-2">
+                                <strong>@p.Category</strong>
+                            </div>
                             category = p.Category;
                         }
-                    <tr>
-                        <td width="30%">
-                            <Label For="@p.Name" HelpText="@p.Description">@p.Title</Label>
-                        </td>
-                        <td>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="@p.Name" HelpText="@p.Description">@p.Title</Label>
+                            <div class="col-sm-9">
                                 @if (p.IsRequired)
                                 {
                                     <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
@@ -84,14 +72,17 @@
                                 {
                                     <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
                                 }
-                        </td>
-                    </tr>
+                            </div>
+                        </div>
                     }
-            </table>
+
+                </div>
+            </div>
         }
     </TabPanel>
 </TabStrip>
-
+<br />
+<br />
 <button type="button" class="btn btn-success" @onclick="SaveUser">@SharedLocalizer["Save"]</button>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 

Oqtane.Client/Modules/Admin/Users/Edit.razor

@@ -20,90 +20,92 @@ else
     <TabPanel Name="Identity" ResourceKey="Identity">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="The unique username for a user. Note that this field can not be modified." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="The unique username for a user. Note that this field can not be modified." ResourceKey="Username"></Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@username" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
                         <input id="password" type="password" class="form-control" @bind="@password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@confirm" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
+                    <div class="col-sm-9">
                         <input id="email" class="form-control" @bind="@email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
+                    <div class="col-sm-9">
                         <input id="displayname" class="form-control" @bind="@displayname" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="@photofileid.ToString()" HelpText="A photo of the user" ResourceKey="Photo"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="@photofileid.ToString()" HelpText="A photo of the user" ResourceKey="Photo"></Label>
+                    <div class="col-sm-9">
                         <FileManager FileId="@photofileid" @ref="filemanager" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="isdeleted" HelpText="Indicate if the user is active" ResourceKey="IsDeleted"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="isdeleted" HelpText="Indicate if the user is active" ResourceKey="IsDeleted"></Label>
+                    <div class="col-sm-9">
                         <select id="isdeleted" class="form-select" @bind="@isdeleted">
                             <option value="True">@SharedLocalizer["Yes"]</option>
                             <option value="False">@SharedLocalizer["No"]</option>
                         </select>
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
+
         }
     </TabPanel>
     <TabPanel Name="Profile" ResourceKey="Profile">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
                     @foreach (Profile profile in profiles)
                     {
                         var p = profile;
                         if (p.Category != category)
                         {
-                        <tr>
-                            <th colspan="2" style="text-align: center;">
-                                @p.Category
-                            </th>
-                        </tr>
+                            <div class="col text-center pb-2">
+                                <strong>@p.Category</strong>
+                            </div>
                             category = p.Category;
                         }
-                    <tr>
-                        <td width="30%">
-                            <Label For="@p.Name" HelpText="@p.Description">@p.Title</Label>
-                        </td>
-                        <td>
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="@p.Name" HelpText="@p.Description">@p.Title</Label>
+                            <div class="col-sm-9">
+                                @if (!string.IsNullOrEmpty(p.Options))
+                                {
+                                    <select id="@p.Name" class="form-select" @onchange="@(e => ProfileChanged(e, p.Name))">
+                                        @foreach (var option in p.Options.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
+                                        {
+                                            @if (GetProfileValue(p.Name, "") == option || (GetProfileValue(p.Name, "") == "" && p.DefaultValue == option))
+                                            {
+                                                <option value="@option" selected>@option</option>
+                                            }
+                                            else
+                                            {
+                                                <option value="@option">@option</option>
+                                            }
+                                        }
+                                    </select>
+                                }
+                                else
+                                {
                                     @if (p.IsRequired)
                                     {
                                         <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
@@ -112,10 +114,12 @@ else
                                     {
                                         <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
                                     }
-                        </td>
-                    </tr>
                                 }
-            </table>
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
         }
     </TabPanel>
 </TabStrip>

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

@@ -3,6 +3,7 @@
 @inject IUserRoleService UserRoleService
 @inject IUserService UserService
 @inject ISettingService SettingService
+@inject ISiteService SiteService
 @inject IStringLocalizer<Index> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
@@ -14,20 +15,21 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td>
-                <div><ActionLink Action="Add" Text="Add User" ResourceKey="AddUser" /></div>
-            </td>
-            <td>
+    <TabStrip>
+        <TabPanel Name="Users" Heading="Users" ResourceKey="Users">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<div class="col-sm-4">
+						<ActionLink Action="Add" Text="Add User" ResourceKey="AddUser" />
+					</div>
+					<div class="col-sm-4">
 						<input class="form-control" @bind="@_search" />
-            </td>
-            <td>
-                <button class="btn btn-secondary" @onclick="OnSearch">@SharedLocalizer["Search"]</button>
-            </td>
-        </tr>
-    </table>
-
+					</div>
+					<div class="col-sm-4">
+						<button type="button" class="btn btn-secondary" @onclick="OnSearch">@SharedLocalizer["Search"]</button>
+					</div>
+				</div>
+			</div>
 			<Pager Items="@userroles">
 				<Header>
 				<th style="width: 1px;">&nbsp;</th>
@@ -40,7 +42,7 @@ else
 						<ActionLink Action="Edit" Parameters="@($"id=" + context.UserId.ToString())" ResourceKey="EditUser" />
 					</td>
 					<td>
-                <ActionDialog Header="Delete User" Message="@string.Format(Localizer["Confirm.User.Delete"], context.User.DisplayName)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteUser(context))" Disabled="@(context.Role.Name == RoleNames.Host)" ResourceKey="DeleteUser" />
+						<ActionDialog Header="Delete User" Message="@string.Format(Localizer["Confirm.User.Delete"], context.User.DisplayName)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteUser(context))" Disabled="@(context.UserId == PageState.User.UserId)" ResourceKey="DeleteUser" />
 					</td>
 					<td>
 						<ActionLink Action="Roles" Parameters="@($"id=" + context.UserId.ToString())" ResourceKey="Roles" />
@@ -48,12 +50,30 @@ else
 					<td>@context.User.DisplayName</td>
 				</Row>
 			</Pager>
+	</TabPanel>
+        <TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="allowregistration" HelpText="Do you want to allow visitors to be able to register for a user account on the site" ResourceKey="AllowRegistration">Allow User Registration? </Label>
+					<div class="col-sm-9">
+						<select id="allowregistration" class="form-select" @bind="@_allowregistration" required>
+							<option value="True">@SharedLocalizer["Yes"]</option>
+							<option value="False">@SharedLocalizer["No"]</option>
+						</select>
+					</div>
+				</div>
+			</div>
+			<br />
+			<button type="button" class="btn btn-success" @onclick="SaveSiteSettings">@SharedLocalizer["Save"]</button>
+		</TabPanel>
+	</TabStrip>
 }
 
 @code {
     private List<UserRole> allroles;
     private List<UserRole> userroles;
     private string _search;
+	private string _allowregistration;
 
     public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
 
@@ -62,13 +82,14 @@ else
         allroles = await UserRoleService.GetUserRolesAsync(PageState.Site.SiteId);
         await LoadSettingsAsync();
         userroles = Search(_search);
+		_allowregistration = PageState.Site.AllowRegistration.ToString();
     }
 
     private List<UserRole> Search(string search)
     {
         var results = allroles.Where(item => item.Role.Name == RoleNames.Registered || (item.Role.Name == RoleNames.Host && UserSecurity.IsAuthorized(PageState.User, RoleNames.Host)));
 
-        if (string.IsNullOrEmpty(_search))
+        if (!string.IsNullOrEmpty(_search))
         {
             results = results.Where(item =>
                 (
@@ -96,6 +117,8 @@ else
             {
                 await UserService.DeleteUserAsync(user.UserId, PageState.Site.SiteId);
                 await logger.LogInformation("User Deleted {User}", UserRole.User);
+                allroles = await UserRoleService.GetUserRolesAsync(PageState.Site.SiteId);
+                userroles = Search(_search);
                 StateHasChanged();
             }
         }
@@ -121,4 +144,20 @@ else
         await SettingService.UpdateUserSettingsAsync(settings, PageState.User.UserId);
     }
 
+	private async Task SaveSiteSettings()
+	{
+		try
+		{
+			var site = PageState.Site;
+			site.AllowRegistration = bool.Parse(_allowregistration);
+			await SiteService.UpdateSiteAsync(site);
+			AddModuleMessage(Localizer["Success.SaveSiteSettings"], MessageType.Success);
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Saving Site Settings {Error}", ex.Message);
+			AddModuleMessage(Localizer["Error.SaveSiteSettings"], MessageType.Error);
+		}
+	}
+
 }

Oqtane.Client/Modules/Admin/Users/Roles.razor

@@ -12,20 +12,16 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="user" HelpText="The user you are assigning roles to" ResourceKey="User">User: </Label>
-            </td>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="user" HelpText="The user you are assigning roles to" ResourceKey="User">User: </Label>
+            <div class="col-sm-9">
                 <input id="user" class="form-control" @bind="@name" disabled />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="role" HelpText="Select a role" ResourceKey="Role">Role: </Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="role" HelpText="Select a role" ResourceKey="Role">Role: </Label>
+            <div class="col-sm-9">
                 <select id="role" class="form-select" @bind="@roleid">
                     <option value="-1">&lt;@Localizer["Role.Select"]&gt;</option>
                     @foreach (Role role in roles)
@@ -33,28 +29,26 @@ else
                         <option value="@(role.RoleId)">@role.Name</option>
                     }
                 </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
+            <div class="col-sm-9">
                 <input id="effectiveDate" class="form-control" @bind="@effectivedate" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
+            <div class="col-sm-9">
                 <input id="expiryDate" class="form-control" @bind="@expirydate" />
-            </td>
-        </tr>
-    </table>
+            </div>
+        </div>
+
+    </div>
+    <br />
+    <br />
     <button type="button" class="btn btn-success" @onclick="SaveUserRole">@SharedLocalizer["Save"]</button>
     <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-
     <hr class="app-rule" />
     <p align="center">
         <Pager Items="@userroles">

Oqtane.Client/Modules/Admin/Visitors/Detail.razor

@@ -0,0 +1,123 @@
+@namespace Oqtane.Modules.Admin.Visitors
+@using System.Globalization
+@inherits ModuleBase
+@inject NavigationManager NavigationManager
+@inject IVisitorService VisitorService
+@inject IUserService UserService
+@inject IStringLocalizer<Detail> Localizer
+@inject IStringLocalizer<SharedResources> SharedLocalizer
+
+    <div class="container">
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="ip" HelpText="The last recorded IP address for this visitor" ResourceKey="IP">IP Address: </Label>
+            <div class="col-sm-9">
+                <input id="ip" class="form-control" @bind="@_ip" readonly />
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="language" HelpText="The last recorded language for this visitor" ResourceKey="Language">Language: </Label>
+            <div class="col-sm-9">
+                <input id="language" class="form-control" @bind="@_language" readonly />
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="useragent" HelpText="The last recorded user agent for this visitor" ResourceKey="UserAgent">User Agent: </Label>
+            <div class="col-sm-9">
+                <input id="useragent" class="form-control" @bind="@_useragent" readonly />
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="url" HelpText="The last recorded url for this visitor" ResourceKey="Url">Url: </Label>
+            <div class="col-sm-9">
+                <input id="url" class="form-control" @bind="@_url" readonly />
+            </div>
+       </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="referrer" HelpText="The last recorded referrer for this visitor" ResourceKey="Referrer">Referrer: </Label>
+            <div class="col-sm-9">
+                <input id="referrer" class="form-control" @bind="@_referrer" readonly />
+            </div>
+       </div>
+        @if (_user != string.Empty)
+        {
+           <div class="row mb-1 align-items-center">
+                <Label Class="col-sm-3" For="user" HelpText="The last recorded user associated with this visitor" ResourceKey="User">User: </Label>
+                <div class="col-sm-9">
+                    <input id="user" class="form-control" @bind="@_user" readonly />
+                </div>
+           </div>
+        }
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="visits" HelpText="The total number of visits by this visitor all time" ResourceKey="Visits">Visits: </Label>
+            <div class="col-sm-9">
+                <input id="visits" class="form-control" @bind="@_visits" readonly />
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="visited" HelpText="The last recorded date/time when the visitor visited the site" ResourceKey="Visited">Visited: </Label>
+                <div class="col-sm-9">
+                <input id="visited" class="form-control" @bind="@_visited" readonly />
+            </div>
+        </div>
+       <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="created" HelpText="The first recorded date/time when this visitor visited the site" ResourceKey="Created">Created: </Label>
+            <div class="col-sm-9">
+                <input id="created" class="form-control" @bind="@_created" readonly />
+            </div>
+       </div>
+	</div>
+
+    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+
+@code {
+	private int _visitorId;
+	private string _ip = string.Empty;
+	private string _language = string.Empty;
+	private string _useragent = string.Empty;
+	private string _url = string.Empty;
+	private string _referrer = string.Empty;
+	private string _user = string.Empty;
+	private string _visits = string.Empty;
+	private string _visited = string.Empty;
+	private string _created = string.Empty;
+
+	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
+
+	protected override async Task OnInitializedAsync()
+	{
+		try
+		{
+			_visitorId = Int32.Parse(PageState.QueryString["id"]);
+			var visitor = await VisitorService.GetVisitorAsync(_visitorId);
+			if (visitor != null)
+			{
+				_ip = visitor.IPAddress;
+				_language = visitor.Language;
+				_useragent = visitor.UserAgent;
+				_url = visitor.Url;
+				_referrer = visitor.Referrer;
+				_visits = visitor.Visits.ToString();
+				_visited = visitor.VisitedOn.ToString(CultureInfo.CurrentCulture);
+				_created = visitor.CreatedOn.ToString(CultureInfo.CurrentCulture);
+
+				if (visitor.UserId != null)
+				{
+					var user = await UserService.GetUserAsync(visitor.UserId.Value, PageState.Site.SiteId);
+					if (user != null)
+					{
+						_user = user.DisplayName;
+					}
+				}
+			}
+			else
+			{
+				AddModuleMessage(Localizer["Error.LoadVisitor"], MessageType.Error);
+			}
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Loading Visitor {VisitorId} {Error}", _visitorId, ex.Message);
+			AddModuleMessage(Localizer["Error.LoadVisitor"], MessageType.Error);
+		}
+	}
+    }

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

@@ -0,0 +1,167 @@
+@namespace Oqtane.Modules.Admin.Visitors
+@inherits ModuleBase
+@inject IVisitorService VisitorService
+@inject ISiteService SiteService
+@inject ISettingService SettingService
+@inject IStringLocalizer<Index> Localizer
+@inject IStringLocalizer<SharedResources> SharedLocalizer
+
+@if (_visitors == null)
+{
+    <p><em>@SharedLocalizer["Loading"]</em></p>
+}
+else
+{
+    <TabStrip>
+        <TabPanel Name="Visitors" Heading="Visitors" ResourceKey="Visitors">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<div class="col-sm-6">
+						<select id="type" class="form-select custom-select" @onchange="(e => TypeChanged(e))">
+							<option value="false">@Localizer["AllVisitors"]</option>
+							<option value="true">@Localizer["UsersOnly"]</option>
+						</select>
+					</div>
+					<div class="col-sm-6">
+						<select id="type" class="form-select custom-select" @onchange="(e => DateChanged(e))">
+							<option value="1">@Localizer["PastDay"]</option>
+							<option value="7">@Localizer["PastWeek"]</option>
+							<option value="30">@Localizer["PastMonth"]</option>
+						</select>
+					</div>
+				</div>
+			</div>
+			<br/>
+			<Pager Items="@_visitors">
+				<Header>
+					<th style="width: 1px;">&nbsp;</th>
+					<th>@Localizer["IP"]</th>
+					<th>@Localizer["User"]</th>
+					<th>@Localizer["Language"]</th>
+					<th>@Localizer["Visits"]</th>
+					<th>@Localizer["Visited"]</th>
+					<th>@Localizer["Created"]</th>
+				</Header>
+				<Row>
+					<td><ActionLink Action="Detail" Parameters="@($"id=" + context.VisitorId.ToString())" ResourceKey="Details" /></td>
+					<td>@context.IPAddress</td>
+					<td>
+						@if (context.UserId != null)
+						{
+							@context.User.DisplayName
+						}
+					</td>
+					<td>@context.Language</td>
+					<td>@context.Visits</td>
+					<td>@context.VisitedOn</td>
+					<td>@context.CreatedOn</td>
+				</Row>
+			</Pager>
+		</TabPanel>
+        <TabPanel Name="Settings" Heading="Settings" ResourceKey="Settings">
+			<div class="container">
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="tracking" HelpText="Specify if visitor tracking is enabled" ResourceKey="Tracking">Tracking Enabled? </Label>
+					<div class="col-sm-9">
+						<select id="tracking" class="form-select" @bind="@_tracking" >
+							<option value="True">@SharedLocalizer["Yes"]</option>
+							<option value="False">@SharedLocalizer["No"]</option>
+						</select>
+					</div>
+				</div>
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="filter" HelpText="Comma delimited list of terms which may exist in IP addresses, user agents, or languages which identify visitors which should not be tracked (ie. bots)" ResourceKey="Filter">Filter: </Label>
+					<div class="col-sm-9">
+						<textarea id="filter" class="form-control" @bind="@_filter" rows="3"></textarea>
+					</div>
+				</div>
+				<div class="row mb-1 align-items-center">
+					<Label Class="col-sm-3" For="retention" HelpText="Number of days of visitor activity to retain" ResourceKey="Retention">Retention (Days): </Label>
+					<div class="col-sm-9">
+						<input id="retention" class="form-control" @bind="@_retention" />
+					</div>
+				</div>
+			</div>
+			<br />
+			<button type="button" class="btn btn-success" @onclick="SaveSiteSettings">@SharedLocalizer["Save"]</button>
+		</TabPanel>
+	</TabStrip>
+}
+
+@code {
+	private bool _users = false;
+	private int _days = 1;
+	private List<Visitor> _visitors;
+	private string _tracking;
+	private string _filter = "";
+	private string _retention = "";
+
+	public override SecurityAccessLevel SecurityAccessLevel => SecurityAccessLevel.Admin;
+
+	protected override async Task OnParametersSetAsync()
+	{
+		await GetVisitors();
+		_tracking = PageState.Site.VisitorTracking.ToString();
+		_filter = SettingService.GetSetting(PageState.Site.Settings, "VisitorFilter", "");
+		_retention = SettingService.GetSetting(PageState.Site.Settings, "VisitorRetention", "30");
+	}
+
+	private async void TypeChanged(ChangeEventArgs e)
+	{
+		try
+		{
+			_users = bool.Parse(e.Value.ToString());
+			await GetVisitors();
+			StateHasChanged();
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error On TypeChanged");
+		}
+	}
+
+	private async void DateChanged(ChangeEventArgs e)
+	{
+		try
+		{
+			_days = int.Parse(e.Value.ToString());
+			await GetVisitors();
+			StateHasChanged();
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error On DateChanged");
+		}
+	}
+
+	private async Task GetVisitors()
+	{
+		_visitors = await VisitorService.GetVisitorsAsync(PageState.Site.SiteId, DateTime.UtcNow.AddDays(-_days));
+		if (_users)
+		{
+			_visitors = _visitors.Where(item => item.UserId != null).ToList();
+		}
+	}
+
+	private async Task SaveSiteSettings()
+	{
+		try
+		{
+			var site = PageState.Site;
+			site.VisitorTracking = bool.Parse(_tracking);
+			await SiteService.UpdateSiteAsync(site);
+
+			var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
+			settings = SettingService.SetSetting(settings, "VisitorFilter", _filter, true);
+			settings = SettingService.SetSetting(settings, "VisitorRetention", _retention, true);
+            await SettingService.UpdateSiteSettingsAsync(settings, PageState.Site.SiteId);
+
+			AddModuleMessage(Localizer["Success.SaveSiteSettings"], MessageType.Success);
+		}
+		catch (Exception ex)
+		{
+			await logger.LogError(ex, "Error Saving Site Settings {Error}", ex.Message);
+			AddModuleMessage(Localizer["Error.SaveSiteSettings"], MessageType.Error);
+		}
+	}
+}

Oqtane.Client/Modules/Controls/ActionDialog.razor

@@ -17,7 +17,7 @@
                     <div class="modal-footer">
                         @if (!string.IsNullOrEmpty(Action))
                         {
-                            <button type="button" class="@Class" @onclick="Confirm">@((MarkupString)_iconSpan) @Localize(Action)</button>
+                            <button type="button" class="@Class" @onclick="Confirm">@((MarkupString)_iconSpan) @Text</button>
                         }
                         <button type="button" class="btn btn-secondary" @onclick="DisplayModal">@Localize("Cancel")</button>
                     </div>
@@ -30,16 +30,17 @@
 {
     if (Disabled)
     {
-        <button class="@Class" disabled>@((MarkupString)_iconSpan) @Text</button>
+        <button type="button" class="@Class" disabled>@((MarkupString)_iconSpan) @Text</button>
     }
     else
     {
-        <button class="@Class" @onclick="DisplayModal">@((MarkupString)_iconSpan) @Text</button>
+        <button type="button" class="@Class" @onclick="DisplayModal">@((MarkupString)_iconSpan) @Text</button>
     }
 }
 
 @code {
     private bool _visible = false;
+	private string _permissions = string.Empty;
     private bool _editmode = false;
     private bool _authorized = false;
     private string _iconSpan = string.Empty;
@@ -59,6 +60,9 @@
     [Parameter]
     public SecurityAccessLevel? Security { get; set; } // optional - can be used to explicitly specify SecurityAccessLevel
 
+	[Parameter]
+	public string Permissions { get; set; } // optional - can be used to specify a permission string
+
     [Parameter]
     public string Class { get; set; } // optional
 
@@ -105,6 +109,7 @@
         Header = Localize(nameof(Header), Header);
         Message = Localize(nameof(Message), Message);
 
+		_permissions = (string.IsNullOrEmpty(Permissions)) ? ModuleState.Permissions : Permissions;
         _authorized = IsAuthorized();
     }
 
@@ -138,10 +143,10 @@
                     authorized = true;
                     break;
                 case SecurityAccessLevel.View:
-                    authorized = UserSecurity.IsAuthorized(PageState.User,PermissionNames.View, ModuleState.Permissions);
+                    authorized = UserSecurity.IsAuthorized(PageState.User,PermissionNames.View, _permissions);
                     break;
                 case SecurityAccessLevel.Edit:
-                    authorized = UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, ModuleState.Permissions);
+                    authorized = UserSecurity.IsAuthorized(PageState.User,PermissionNames.Edit, _permissions);
                     break;
                 case SecurityAccessLevel.Admin:
                     authorized = UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin);

Oqtane.Client/Modules/Controls/ActionLink.razor

@@ -6,41 +6,52 @@
 {
     if (Disabled)
     {
-        <button class="@_classname" style="@_style" disabled>@((MarkupString)_iconSpan) @_text</button>
+		<button type="button" class="@_classname" style="@_style" disabled>@((MarkupString)_iconSpan) @_text</button>
 	}
 	else
+	{
+		if (OnClick == null)
 		{
 			<NavLink class="@_classname" href="@_url" style="@_style">@((MarkupString)_iconSpan) @_text</NavLink>
 		}
+		else
+		{
+			<button type="button" class="@_classname" style="@_style" onclick="@OnClick">@((MarkupString)_iconSpan) @_text</button>
+		}
+	}
 }
 
 @code {
 	private string _text = string.Empty;
-    private string _url = string.Empty;
 	private string _parameters = string.Empty;
-    private string _classname = "btn btn-primary";
-    private string _style = string.Empty;
+	private string _url = string.Empty;
+	private string _permissions = string.Empty;
 	private bool _editmode = false;
 	private bool _authorized = false;
+	private string _classname = "btn btn-primary";
+	private string _style = string.Empty;
 	private string _iconSpan = string.Empty;
 
 	[Parameter]
 	public string Action { get; set; } // required
 
-    [Parameter]
-    public SecurityAccessLevel? Security { get; set; } // optional - can be used to explicitly specify SecurityAccessLevel
-
 	[Parameter]
 	public string Text { get; set; } // optional - defaults to Action if not specified
 
 	[Parameter]
-    public string Parameters { get; set; } // optional - querystring parameter should be in the form of "id=x&name=y"
+	public string Parameters { get; set; } // optional - querystring parameters should be in the form of "id=x&name=y"
 
 	[Parameter]
-    public string Class { get; set; } // optional - defaults to primary if not specified
+	public int ModuleId { get; set; } = -1; // optional - allows the link to target a specific moduleid
 
 	[Parameter]
-    public string Style { get; set; } // optional
+	public Action OnClick { get; set; } = null; // optional - executes a method in the calling component
+
+	[Parameter]
+	public SecurityAccessLevel? Security { get; set; } // optional - can be used to explicitly specify SecurityAccessLevel
+
+	[Parameter]
+	public string Permissions { get; set; } // optional - can be used to specify a permission string
 
 	[Parameter]
 	public bool Disabled { get; set; } // optional
@@ -48,6 +59,12 @@
 	[Parameter]
 	public string EditMode { get; set; } // optional - specifies if an authorized user must be in edit mode to see the action - default is false.
 
+	[Parameter]
+	public string Class { get; set; } // optional - defaults to primary if not specified
+
+	[Parameter]
+	public string Style { get; set; } // optional
+
 	[Parameter]
 	public string IconName { get; set; } // optional - specifies an icon for the link - default is no icon
 
@@ -96,11 +113,11 @@
 				IconName = "oi oi-" + IconName;
 			}
 			_iconSpan = $"<span class=\"{IconName}\"></span>{(IconOnly ? "" : "&nbsp")}";
-
 		}
 
+		_permissions = (string.IsNullOrEmpty(Permissions)) ? ModuleState.Permissions : Permissions;
 		_text = Localize(nameof(Text), _text);		
-        _url = EditUrl(Action, _parameters);
+        _url = (ModuleId == -1) ? EditUrl(Action, _parameters) : EditUrl(ModuleId, Action, _parameters);
         _authorized = IsAuthorized();
     }
 
@@ -136,10 +153,10 @@
                     authorized = true;
                     break;
                 case SecurityAccessLevel.View:
-                    authorized = UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, ModuleState.Permissions);
+                    authorized = UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, _permissions);
                     break;
                 case SecurityAccessLevel.Edit:
-                    authorized = UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, ModuleState.Permissions);
+                    authorized = UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, _permissions);
                     break;
                 case SecurityAccessLevel.Admin:
                     authorized = UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin);

Oqtane.Client/Modules/Controls/AuditInfo.razor

@@ -35,6 +35,9 @@
     [Parameter]
     public string Style { get; set; }
 
+    [Parameter]
+    public string DateTimeFormat { get; set; } = "MMM dd yyyy HH:mm:ss";
+
     protected override void OnParametersSet()
     {
         _text = string.Empty;
@@ -49,7 +52,7 @@
 
             if (CreatedOn != null)
             {
-                _text += $" {Localizer["On"]} <b>{CreatedOn.Value.ToString("MMM dd yyyy HH:mm:ss")}</b>";
+                _text += $" {Localizer["On"]} <b>{CreatedOn.Value.ToString(DateTimeFormat)}</b>";
             }
 
             _text += "</p>";
@@ -66,7 +69,7 @@
 
             if (ModifiedOn != null)
             {
-                _text += $" {Localizer["on"]} <b>{ModifiedOn.Value.ToString("MMM dd yyyy HH:mm:ss")}</b>";
+                _text += $" {Localizer["on"]} <b>{ModifiedOn.Value.ToString(DateTimeFormat)}</b>";
             }
 
             _text += "</p>";
@@ -83,7 +86,7 @@
 
             if (DeletedOn != null)
             {
-                _text += $" {Localizer["On"]} <b>{DeletedOn.Value.ToString("MMM dd yyyy HH:mm:ss")}</b>";
+                _text += $" {Localizer["On"]} <b>{DeletedOn.Value.ToString(DateTimeFormat)}</b>";
             }
 
             _text += "</p>";

Oqtane.Client/Modules/Controls/FileManager.razor

@@ -10,24 +10,25 @@
     <div id="@Id" class="container-fluid px-0">
         <div class="row">
             <div class="col">
-                @if (ShowFolders || FolderId <= 0)
+                <div class="container-fluid px-0">
+                    @if (ShowFolders)
                     {
-                    <div>
+                        <div class="row">
+                            <div class="col">
                                 <select class="form-select" value="@FolderId" @onchange="(e => FolderChanged(e))">
-                            @if (string.IsNullOrEmpty(Folder))
-                            {
                                     <option value="-1">&lt;@Localizer["Folder.Select"]&gt;</option>
-                            }
                                     @foreach (Folder folder in _folders)
                                     {
                                         <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                                     }
                                 </select>
                             </div>
+                        </div>
                     }
                     @if (ShowFiles)
                     {
-                    <div>
+                        <div class="row mt-1">
+                            <div class="col">
                                 <select class="form-select" value="@FileId" @onchange="(e => FileChanged(e))">
                                     <option value="-1">&lt;@Localizer["File.Select"]&gt;</option>
                                     @foreach (File file in _files)
@@ -36,10 +37,12 @@
                                     }
                                 </select>
                             </div>
+                        </div>
                     }
                     @if (ShowUpload && _haseditpermission)
                     {
-                    <div>
+                        <div class="row">
+                            <div class="col mt-2">
                                 @if (UploadMultiple)
                                 {
                                     <input type="file" id="@_fileinputid" name="file" accept="@_filter" multiple />
@@ -48,17 +51,21 @@
                                 {
                                     <input type="file" id="@_fileinputid" name="file" accept="@_filter" />
                                 }
-                        <span id="@_progressinfoid"></span><progress id="@_progressbarid" style="width: 150px; visibility: hidden;"></progress>
-                        <span class="float-end">
+                            </div>
+                            <div class="col mt-2 text-center">
                                 <button type="button" class="btn btn-success" @onclick="UploadFile">@SharedLocalizer["Upload"]</button>
                                 @if (ShowFiles && GetFileId() != -1)
                                 {
-                                <button type="button" class="btn btn-danger" @onclick="DeleteFile">@SharedLocalizer["Delete"]</button>
+                                    <button type="button" class="btn btn-danger mx-1" @onclick="DeleteFile">@SharedLocalizer["Delete"]</button>
                                 }
-                        </span>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col mt-1"><span id="@_progressinfoid" style="display: none;"></span></div>
+                            <div class="col text-center mt-1"><progress id="@_progressbarid" class="mt-1" style="display: none;"></progress></div>
                         </div>
                     }
-                <ModuleMessage Message="@_message" Type="@_messagetype"></ModuleMessage>
+                </div>
             </div>
             @if (_image != string.Empty)
             {
@@ -67,6 +74,14 @@
                 </div>
             }
         </div>
+        @if (!string.IsNullOrEmpty(_message))
+        {
+            <div class="row mt-1">
+                <div class="col">
+                    <ModuleMessage Message="@_message" Type="@_messagetype" />
+                </div>
+            </div>
+        }
     </div>
 }
 
@@ -89,10 +104,16 @@
     public string Id { get; set; } // optional - for setting the id of the FileManager component for accessibility
 
     [Parameter]
-    public string Folder { get; set; } // optional - for setting a specific folder by default
+    public int FolderId { get; set; } = -1; // optional - for setting a specific default folder by folderid 
 
     [Parameter]
-    public int FolderId { get; set; } = -1; // optional - for setting a specific folderid by default
+    public string Folder { get; set; } = ""; // optional - for setting a specific default folder by folder path 
+
+    [Parameter]
+    public int FileId { get; set; } = -1; // optional - for selecting a specific file by default
+
+    [Parameter]
+    public string Filter { get; set; } // optional - comma delimited list of file types that can be selected or uploaded ie. "jpg,gif"
 
     [Parameter]
     public bool ShowFiles { get; set; } = true; // optional - for indicating whether a list of files should be displayed - default is true
@@ -104,14 +125,23 @@
     public bool ShowFolders { get; set; } = true; // optional - for indicating whether a list of folders should be displayed - default is true
 
     [Parameter]
-    public int FileId { get; set; } = -1; // optional - for setting a specific file by default
+    public bool ShowImage { get; set; } = true; // optional - for indicating whether an image thumbnail should be displayed - default is true
 
     [Parameter]
-    public string Filter { get; set; } // optional - comma delimited list of file types that can be selected or uploaded ie. "jpg,gif"
+    public bool ShowSuccess { get; set; } = false; // optional - for indicating whether a success message should be displayed upon successful upload - default is false
 
     [Parameter]
     public bool UploadMultiple { get; set; } = false; // optional - enable multiple file uploads - default false
 
+    [Parameter]
+    public EventCallback<int> OnUpload { get; set; } // optional - executes a method in the calling component when a file is uploaded
+
+    [Parameter]
+    public EventCallback<int> OnSelect { get; set; } // optional - executes a method in the calling component when a file is selected
+
+    [Parameter]
+    public EventCallback<int> OnDelete { get; set; } // optional - executes a method in the calling component when a file is deleted
+
     protected override async Task OnInitializedAsync()
     {
         if (!string.IsNullOrEmpty(Id))
@@ -119,14 +149,35 @@
             _id = Id;
         }
 
-        if (!string.IsNullOrEmpty(Folder))
+        // packages folder is a framework folder for uploading installable nuget packages
+        if (Folder == Constants.PackagesFolder)
         {
-            _folders = new List<Folder> { new Folder { FolderId = -1, Name = Folder } };
-            FolderId = -1;
+            ShowFiles = false;
+            ShowFolders = false;
+            Filter = "nupkg";
+            ShowSuccess = true;
+        }
+
+        if (!ShowFiles)
+        {
+            ShowImage = false;
+        }
+
+        _folders = await FolderService.GetFoldersAsync(ModuleState.SiteId);
+
+        if (!string.IsNullOrEmpty(Folder) && Folder != Constants.PackagesFolder)
+        {
+            Folder folder = await FolderService.GetFolderAsync(ModuleState.SiteId, Folder);
+            if (folder != null)
+            {
+                FolderId = folder.FolderId;
             }
             else
             {
-            _folders = await FolderService.GetFoldersAsync(ModuleState.SiteId);
+                FolderId = -1;
+                _message = "Folder Path " + Folder + "Does Not Exist";
+                _messagetype = MessageType.Error;
+            }
         }
 
         if (FileId != -1)
@@ -135,12 +186,16 @@
             if (file != null)
             {
                 FolderId = file.FolderId;
+                await OnSelect.InvokeAsync(FileId);
             }
             else
             {
                 FileId = -1; // file does not exist
+                _message = "FileId " + FileId.ToString() + "Does Not Exist";
+                _messagetype = MessageType.Error;
             }
         }
+
         await SetImage();
 
         if (!string.IsNullOrEmpty(Filter))
@@ -160,10 +215,10 @@
     private async Task GetFiles()
     {
         _haseditpermission = false;
-        if (!string.IsNullOrEmpty(Folder))
+        if (Folder == Constants.PackagesFolder)
         {
             _haseditpermission = UserSecurity.IsAuthorized(PageState.User, RoleNames.Host);
-            _files = await FileService.GetFilesAsync(Folder);
+            _files = new List<File>();
         }
         else
         {
@@ -208,7 +263,6 @@
         catch (Exception ex)
         {
             await logger.LogError(ex, "Error Loading Files {Error}", ex.Message);
-
             _message = Localizer["Error.File.Load"];
             _messagetype = MessageType.Error;
         }
@@ -218,6 +272,10 @@
     {
         _message = string.Empty;
         FileId = int.Parse((string)e.Value);
+        if (FileId != -1)
+        {
+            await OnSelect.InvokeAsync(FileId);
+        }
 
         await SetImage();
         StateHasChanged();
@@ -230,7 +288,7 @@
         if (FileId != -1)
         {
             _file = await FileService.GetFileAsync(FileId);
-            if (_file != null && _file.ImageHeight != 0 && _file.ImageWidth != 0)
+            if (_file != null && ShowImage && _file.ImageHeight != 0 && _file.ImageWidth != 0)
             {
                 var maxwidth = 200;
                 var maxheight = 200;
@@ -256,7 +314,7 @@
             try
             {
                 string result;
-                if (!string.IsNullOrEmpty(Folder))
+                if (Folder == Constants.PackagesFolder)
                 {
                     result = await FileService.UploadFilesAsync(Folder, upload, _guid);
                 }
@@ -268,20 +326,20 @@
                 if (result == string.Empty)
                 {
                     await logger.LogInformation("File Upload Succeeded {Files}", upload);
-
+                    if (ShowSuccess)
+                    {
                         _message = Localizer["Success.File.Upload"];
                         _messagetype = MessageType.Success;
+                    }
 
+                    // set FileId to first file in upload collection
                     await GetFiles();
-
-                    if (upload.Length == 1)
-                    {
                     var file = _files.Where(item => item.Name == upload[0]).FirstOrDefault();
                     if (file != null)
                     {
                         FileId = file.FileId;
                         await SetImage();
-                        }
+                        await OnUpload.InvokeAsync(FileId);
                     }
                     StateHasChanged();
                 }
@@ -315,6 +373,7 @@
         {
             await FileService.DeleteFileAsync(FileId);
             await logger.LogInformation("File Deleted {File}", FileId);
+            await OnDelete.InvokeAsync(FileId);
 
             _message = Localizer["Success.File.Delete"];
             _messagetype = MessageType.Success;
@@ -335,5 +394,7 @@
 
     public int GetFileId() => FileId;
 
+    public int GetFolderId() => FolderId;
+
     public File GetFile() => _file;
 }

Oqtane.Client/Modules/Controls/Label.razor

@@ -3,17 +3,16 @@
 
 @if (!string.IsNullOrEmpty(HelpText))
 {
-    <span class="app-tooltip" data-tip="@((MarkupString)HelpText)">@((MarkupString)_openLabel)@ChildContent@((MarkupString)_closeLabel) <img src="images/help.png" /></span>
+    <span class="@_spanclass" data-tip="@((MarkupString)@_helptext)">
+        <label for="@For" class="@_labelclass">@ChildContent</label> <img src="images/help.png" />
+    </span>
 }
 else
 {
-    @((MarkupString)_openLabel)@ChildContent@((MarkupString)_closeLabel)
+    <label for="@For" class="@_labelclass">@ChildContent</label>
 }
 
 @code {
-    private string _openLabel = string.Empty;
-    private string _closeLabel = "</label>";
-
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
@@ -21,39 +20,37 @@ else
     public string For { get; set; } // optional - the id of the associated input control for accessibility
 
     [Parameter]
-    public string Class { get; set; } // optional - the class for the label ( ie. control-label )
+    public string Class { get; set; } // optional - CSS classes
 
     [Parameter]
     public string HelpText { get; set; } // optional - tooltip for this label
 
+    private string _spanclass;
+    private string _labelclass;
+    private string _helptext = string.Empty;
+
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
-        if (string.IsNullOrEmpty(Class))
+        if (!string.IsNullOrEmpty(HelpText))
         {
-            Class = "form-label";
-        }
+            _helptext = Localize(nameof(HelpText), HelpText);
+            _labelclass = "form-label";
 
-        _openLabel = "<label";
-        if (!string.IsNullOrEmpty(For))
+            var spanclass = (!string.IsNullOrEmpty(Class)) ? " " + Class : "";
+            _spanclass = "app-tooltip" + spanclass;
+        }
+        else
         {
-            _openLabel += " for=\"" + For + "\"";
+            var labelclass = (!string.IsNullOrEmpty(Class)) ? " " + Class : "";
+            _labelclass = "form-label" + labelclass;
         }
 
-        if (!string.IsNullOrEmpty(Class))
-        {
-            _openLabel += " class=\"" + Class + "\"";
-        }
-
-        _openLabel += ">";
-
         var text = Localize("Text", String.Empty);
-        if (text != String.Empty)
+        if (!string.IsNullOrEmpty(text))
         {
             ChildContent =@<text>@text</text>;
         }
-
-        HelpText = Localize(nameof(HelpText), HelpText);
     }
 }

Oqtane.Client/Modules/Controls/LocalizableComponent.cs

@@ -13,6 +13,9 @@ namespace Oqtane.Modules.Controls
         [Parameter]
         public string ResourceKey { get; set; }
 
+        [Parameter]
+        public string ResourceType { get; set; }
+
         protected bool IsLocalizable { get; private set; }
 
         protected string Localize(string name) => _localizer?[name] ?? name;
@@ -50,9 +53,14 @@ namespace Oqtane.Modules.Controls
         {
             IsLocalizable = false;
 
-            if (!String.IsNullOrEmpty(ResourceKey) && ModuleState?.ModuleType != null)
+            if (string.IsNullOrEmpty(ResourceType))
             {
-                var moduleType = Type.GetType(ModuleState.ModuleType);
+                ResourceType = ModuleState?.ModuleType;
+            }
+
+            if (!String.IsNullOrEmpty(ResourceKey) && !string.IsNullOrEmpty(ResourceType))
+            {
+                var moduleType = Type.GetType(ResourceType);
                 if (moduleType != null)
                 {
                     using (var scope = ServiceActivator.GetScope())

Oqtane.Client/Modules/Controls/ModuleMessage.razor

@@ -4,7 +4,7 @@
 
 @if (!string.IsNullOrEmpty(_message))
 {
-    <div class="@_classname alert-dismissible fade show" role="alert">
+    <div class="@_classname alert-dismissible fade show mb-3" role="alert">
         @((MarkupString)_message)
         @if (Type == MessageType.Error && PageState != null && UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
         {
@@ -12,7 +12,6 @@
         }
         <button type="button" class="btn-close" aria-label="Close" @onclick="DismissModal"></button>
     </div>
-    <br />
 }
 
 @code {

Oqtane.Client/Modules/Controls/Pager.razor

@@ -2,46 +2,59 @@
 @inherits ModuleControlBase
 @typeparam TableItem
 
-<p>
-    @if (Toolbar == "Top")
+@if (ItemList != null)
+{
+    @if ((Toolbar == "Top" || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems)
     {
-        <div class="mx-auto text-center">
-            @if (_endPage > 1)
+        <ul class="pagination justify-content-center my-2">
+            <li class="page-item@((_page > 1) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a>
+            </li>
+            @if (_pages > _displayPages && _displayPages > 1)
             {
-                <button class="btn btn-secondary m-1" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="first" aria-hidden="true"></span></button>
+                <li class="page-item@((_page > _displayPages) ? "" : " disabled")">
+                    <a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a>
+                </li>
             }
-            @if (_page > _maxPages)
-            {
-                <button class="btn btn-secondary m-1" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></button>
-            }
-            @if (_endPage > 1)
-            {
-                <button class="btn btn-secondary m-1" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></button>
+            <li class="page-item@((_page > 1) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a>
+            </li>
             @for (int i = _startPage; i <= _endPage; i++)
             {
                 var pager = i;
-                    <button class="btn @((pager == _page) ? "btn-primary" : "btn-link")" @onclick=@(async () => UpdateList(pager))>
-                        @pager
-                    </button>
-                }
-                <button class="btn btn-secondary m-1" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></button>
-            }
-            @if (_endPage < _pages)
+                if (pager == _page)
                 {
-                <button class="btn btn-secondary m-1" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></button>
+                    <li class="page-item active">
+                        <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
+                    </li>
                 }
-            @if (_endPage > 1)
+                else
                 {
-                <button class="btn btn-secondary m-1" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="last" aria-hidden="true"></span></button>
+                    <li class="page-item">
+                        <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
+                    </li>
                 }
-            @if (_endPage > 1)
+            }
+            <li class="page-item@((_page < _pages) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
+            </li>
+            @if (_pages > _displayPages && _displayPages > 1)
             {
-                <span class="btn btn-link disabled">Page @_page of @_pages</span>
+                <li class="page-item@((_endPage < _pages) ? "" : " disabled")">
+                    <a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a>
+                </li>
             }
-        </div>
+            <li class="page-item@((_page < _pages) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a>
+            </li>
+            <li class="page-item disabled">
+                <a class="page-link" style="white-space: nowrap;">Page @_page of @_pages</a>
+            </li>
+        </ul>
     }
-    @if (Format == "Table")
+    @if (Format == "Table" && Row != null)
     {
+		<div class="table-responsive">
 			<table class="@Class">
 				<thead>
 					<tr>@Header</tr>
@@ -57,91 +70,127 @@
 					}
 				</tbody>
 			</table>
+		</div>
     }
-    @if (Format == "Grid")
+    @if (Format == "Grid" && Row != null)
     {
+        int count = 0;
+        if (ItemList != null)
+        {
+            count = (int)Math.Ceiling(ItemList.Count() / (decimal)_columns) * _columns;
+        }
         <div class="@Class">
-            <div class="row">@Header</div>
-            @foreach (var item in ItemList)
+            @if (Header != null)
             {
-                <div class="row">@Row(item)</div>
-                @if (Detail != null)
+                <div class="row"><div class="col">@Header</div></div>
+            }
+            @for (int row = 0; row < (count / _columns); row++)
             {
-                    <div class="row">@Detail(item)</div>
+                <div class="row">
+                    @for (int col = 0; col < _columns; col++)
+                    {
+                        int index = (row * _columns) + col;
+                        if (index < ItemList.Count())
+                        {
+                            <div class="col">@Row(ItemList.ElementAt(index))</div>
+                        }
+                        else
+                        {
+                            <div class="col">&nbsp;</div>
                         }
                     }
                 </div>
             }
-    @if (Toolbar == "Bottom")
-    {
-        <div class="mx-auto text-center">
-            @if (_endPage > 1)
-            {
-                <button class="btn btn-secondary mr-1" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="first" aria-hidden="true"></span></button>
+        </div>
     }
-            @if (_page > _maxPages)
+    @if ((Toolbar == "Bottom"  || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems)
     {
-                <button class="btn btn-secondary mr-1" @onclick=@(async () => SetPagerSize("back"))><span class="oi oi-media-skip-backward" title="back" aria-hidden="true"></span></button>
+        <ul class="pagination justify-content-center my-2">
+            <li class="page-item@((_page > 1) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => UpdateList(1))><span class="oi oi-media-step-backward" title="start" aria-hidden="true"></span></a>
+            </li>
+            @if (_pages > _displayPages && _displayPages > 1)
+             {
+                <li class="page-item@((_page > _displayPages) ? "" : " disabled")">
+                    <a class="page-link" @onclick=@(async () => SkipPages("back"))><span class="oi oi-media-skip-backward" title="skip back" aria-hidden="true"></span></a>
+                </li>
             }
-            @if (_endPage > 1)
-            {
-                <button class="btn btn-secondary mr-1" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></button>
+            <li class="page-item@((_page > 1) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => NavigateToPage("previous"))><span class="oi oi-chevron-left" title="previous" aria-hidden="true"></span></a>
+            </li>
             @for (int i = _startPage; i <= _endPage; i++)
             {
                 var pager = i;
-                    <button class="btn @((pager == _page) ? "btn-primary" : "btn-link")" @onclick=@(async () => UpdateList(pager))>
-                        @pager
-                    </button>
-                }
-                <button class="btn btn-secondary mr-1" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></button>
-            }
-            @if (_endPage < _pages)
+                if (pager == _page)
                 {
-                <button class="btn btn-secondary mr-1" @onclick=@(async () => SetPagerSize("forward"))><span class="oi oi-media-skip-forward" title="forward" aria-hidden="true"></span></button>
+                    <li class="page-item active">
+                        <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
+                    </li>
                 }
-            @if (_endPage > 1)
+                else
                 {
-                <button class="btn btn-secondary mr-1" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="last" aria-hidden="true"></span></button>
+                    <li class="page-item">
+                        <a class="page-link" @onclick=@(async () => UpdateList(pager))>@pager</a>
+                    </li>
                 }
-            @if (_endPage > 1)
+            }
+            <li class="page-item@((_page < _pages) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => NavigateToPage("next"))><span class="oi oi-chevron-right" title="next" aria-hidden="true"></span></a>
+            </li>
+            @if (_pages > _displayPages && _displayPages > 1)
             {
-                <span class="btn btn-link disabled">Page @_page of @_pages</span>
+                <li class="page-item@((_endPage < _pages) ? "" : " disabled")">
+                    <a class="page-link" @onclick=@(async () => SkipPages("forward"))><span class="oi oi-media-skip-forward" title="skip forward" aria-hidden="true"></span></a>
+                </li>
             }
-        </div>
+            <li class="page-item@((_page < _pages) ? "" : " disabled")">
+                <a class="page-link" @onclick=@(async () => UpdateList(_pages))><span class="oi oi-media-step-forward" title="end" aria-hidden="true"></span></a>
+            </li>
+            <li class="page-item disabled">
+               <a class="page-link" style="white-space: nowrap;">Page @_page of @_pages</a>
+            </li>
+        </ul>
     }
-</p>
+}
 
 @code {
     private int _pages = 0;
     private int _page = 1;
     private int _maxItems = 10;
-    private int _maxPages = 5;
+    private int _displayPages = 5;
     private int _startPage = 0;
     private int _endPage = 0;
+    private int _columns = 1;
 
     [Parameter]
-    public string Format { get; set; }
+    public string Format { get; set; } // Table or Grid
 
     [Parameter]
-    public string Toolbar { get; set; }
+    public string Toolbar { get; set; } // Top, Bottom or Both
 
     [Parameter]
-    public RenderFragment Header { get; set; }
+    public RenderFragment Header { get; set; } = null;
 
     [Parameter]
-    public RenderFragment<TableItem> Row { get; set; }
+    public RenderFragment<TableItem> Row { get; set; } = null;
 
     [Parameter]
-    public RenderFragment<TableItem> Detail { get; set; }
+    public RenderFragment<TableItem> Detail { get; set; } = null; // only applicable to Table layouts
 
     [Parameter]
-    public IEnumerable<TableItem> Items { get; set; }
+    public IEnumerable<TableItem> Items { get; set; } // the IEnumerable data source
 
     [Parameter]
-    public string PageSize { get; set; }
+    public string PageSize { get; set; } // number of items to display on a page
 
     [Parameter]
-    public string DisplayPages { get; set; }
+    public string Columns { get; set; } // only applicable to Grid layouts
+
+    [Parameter]
+    public string CurrentPage { get; set; } // optional property to set the initial page to display
+
+    [Parameter]
+    public string DisplayPages { get; set; } // maximum number of page numbers to display for user selection
 
     [Parameter]
     public string Class { get; set; }
@@ -168,7 +217,7 @@
             }
             else
             {
-                Class = "container";
+                Class = "container-fluid px-0";
             }
         }
 
@@ -177,86 +226,89 @@
             _maxItems = int.Parse(PageSize);
         }
 
-        if (!string.IsNullOrEmpty(DisplayPages))
+        if (!string.IsNullOrEmpty(Columns))
         {
-            _maxPages = int.Parse(DisplayPages);
+            _columns = int.Parse(Columns);
         }
 
+        if (!string.IsNullOrEmpty(DisplayPages))
+        {
+            _displayPages = int.Parse(DisplayPages);
+        }
+
+        if (!string.IsNullOrEmpty(CurrentPage))
+        {
+            _page = int.Parse(CurrentPage);
+        }
+        else
+        {
             _page = 1;
+        }
+
         _startPage = 0;
         _endPage = 0;
 
         if (Items != null)
         {
-            ItemList = Items.Skip((_page - 1) * _maxItems).Take(_maxItems);
             _pages = (int)Math.Ceiling(Items.Count() / (decimal)_maxItems);
+            if (_page > _pages)
+            {
+                _page = _pages;
+            }
+            ItemList = Items.Skip((_page - 1) * _maxItems).Take(_maxItems);
+            SetPagerSize();
+        }
     }
 
-        SetPagerSize("forward");
-    }
-
-    public void UpdateList(int currentPage)
+    public void SetPagerSize()
     {
-        ItemList = Items.Skip((currentPage - 1) * _maxItems).Take(_maxItems);
-        _page = currentPage;
-
-        StateHasChanged();
-    }
-
-    public void SetPagerSize(string direction)
-    {
-        if (direction == "forward")
-        {
-            if (_endPage + 1 < _pages)
-            {
-                _startPage = _endPage + 1;
-            }
-            else
-            {
-                _startPage = 1;
-            }
-
-            if (_endPage + _maxPages < _pages)
-            {
-                _endPage = _startPage + _maxPages - 1;
-            }
-            else
+        _startPage = ((_page - 1) / _displayPages) * _displayPages + 1;
+        _endPage = _startPage + _displayPages - 1;
+        if (_endPage > _pages)
         {
             _endPage = _pages;
         }
-
         StateHasChanged();
     }
-        else if (direction == "back")
+
+    public void UpdateList(int page)
     {
-            _endPage = _startPage - 1;
-            _startPage = _startPage - _maxPages;
+        ItemList = Items.Skip((page - 1) * _maxItems).Take(_maxItems);
+        _page = page;
+        SetPagerSize();
     }
+
+    public void SkipPages(string direction)
+    {
+        switch (direction)
+        {
+            case "forward":
+                _page = _endPage + 1;
+                break;
+            case "back":
+                _page = _startPage - 1;
+                break;
+        }
+
+        SetPagerSize();
     }
 
     public void NavigateToPage(string direction)
     {
-        if (direction == "next")
+        switch (direction)
         {
+            case "next":
                 if (_page < _pages)
                 {
-                if (_page == _endPage)
-                {
-                    SetPagerSize("forward");
-                }
                     _page += 1;
                 }
-        }
-        else if (direction == "previous")
-        {
+                break;
+            case "previous":
                 if (_page > 1)
                 {
-                if (_page == _startPage)
-                {
-                    SetPagerSize("back");
-                }
                     _page -= 1;
                 }
+                break;
         }
 
         UpdateList(_page);

Oqtane.Client/Modules/Controls/PermissionGrid.razor

@@ -7,8 +7,10 @@
 
 @if (_permissions != null)
 {
-    <br />
-    <table class="table table-borderless" style="width: 50%; min-width: 250px;">
+<div class="container">
+    <div class="row">
+        <div class="col">
+            <table class="table table-borderless">
                 <tbody>
                     <tr>
                         <th scope="col">@Localizer["Role"]</th>
@@ -32,9 +34,18 @@
                     }
                 </tbody>
             </table>
+            <br />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
             @if (_users.Count != 0)
             {
-        <table class="table table-borderless" style="width: 50%; min-width: 250px;">
+                <div class="row">
+                    <div class="col">
+                    </div>
+                </div>
+                <table class="table table-borderless">
                     <thead>
                         <tr>
                             <th scope="col">@Localizer["User"]</th>
@@ -61,8 +72,13 @@
                         }
                     </tbody>
                 </table>
+                <br />
             }
-    <table class="table table-borderless" style="width: 50%; min-width: 250px;">
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <table class="table table-borderless">
                 <tbody>
                     <tr>
                         <td class="input-group">
@@ -73,7 +89,14 @@
                 </tbody>
             </table>
             <br />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
             <ModuleMessage Type="MessageType.Error" Message="@_message" />
+        </div>
+    </div>
+</div>
 }
 
 @code {

Oqtane.Client/Modules/Controls/RichTextEditor.razor

@@ -115,23 +115,24 @@
 
     public override List<Resource> Resources => new List<Resource>()
     {
-        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill1.3.6.min.js" },
+        new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill1.3.7.min.js" },
         new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-blot-formatter.min.js" },
         new Resource { ResourceType = ResourceType.Script, Bundle = "Quill", Url = "js/quill-interop.js" }
     };
 
-    protected override void OnInitialized()
+    protected override async Task OnParametersSetAsync()
     {
         _content = Content; // raw HTML
+        await RefreshRichText();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        var interop = new RichTextEditorInterop(JSRuntime);
         if (firstRender)
         {
             await base.OnAfterRenderAsync(firstRender);
 
-            var interop = new RichTextEditorInterop(JSRuntime);
 
             await interop.CreateEditor(
                 _editorElement,
@@ -145,10 +146,10 @@
 
             _content = Content; // raw HTML
 
+        }
             // preserve a copy of the rich text content ( Quill sanitizes content so we need to retrieve it from the editor )
             _original = await interop.GetHtml(_editorElement);
     }
-    }
 
     public void CloseFileManager()
     {

Oqtane.Client/Modules/Controls/TabPanel.razor

@@ -38,7 +38,7 @@ else
 
         if (string.IsNullOrEmpty(Heading))
         {
-            Name = Localize(nameof(Name), Name);
+            Heading = Localize(nameof(Name), Name);
         }
         else
         {

Oqtane.Client/Modules/Controls/TabStrip.razor

@@ -43,16 +43,12 @@
     [Parameter]
     public bool Refresh { get; set; } // optional - used in scenarios where TabPanels are added/removed dynamically within a parent form. ActiveTab may need to be reset as well when this property is used.
 
-    protected override void OnInitialized()
+    protected override void OnParametersSet()
     {
         if (PageState.QueryString.ContainsKey("tab"))
         {
             ActiveTab = PageState.QueryString["tab"];
         }
-    }
-
-    protected override void OnParametersSet()
-    {
         if (_tabPanels == null || Refresh)
         {
             _tabPanels = new List<TabPanel>();

Oqtane.Client/Modules/HtmlText/Edit.razor

@@ -30,8 +30,8 @@
     public override List<Resource> Resources => new List<Resource>()
 {
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },
-        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.bubble.css" },
-        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.6.snow.css" }
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.7.bubble.css" },
+        new Resource { ResourceType = ResourceType.Stylesheet, Url = "css/quill/quill1.3.7.snow.css" }
     };
 
     private RichTextEditor RichTextEditorHtml;
@@ -65,8 +65,8 @@
         }
         catch (Exception ex)
         {
-            await logger.LogError(ex, "An Error Occurred Loading Html/Text Content. " + ex.Message);
-            AddModuleMessage(ex.Message, MessageType.Error);
+            await logger.LogError(ex, "Error Loading Content {Error}", ex.Message);
+            AddModuleMessage(Localizer["Error.Content.Load"], MessageType.Error);
         }
     }
 
@@ -91,7 +91,7 @@
                 await HtmlTextService.AddHtmlTextAsync(htmltext);
             }
 
-            await logger.LogInformation("Html/Text Content Saved {HtmlText}", htmltext);
+            await logger.LogInformation("Content Saved {HtmlText}", htmltext);
             NavigationManager.NavigateTo(NavigateUrl());
         }
         catch (Exception ex)

Oqtane.Client/Modules/HtmlText/Index.razor

@@ -2,7 +2,7 @@
 @namespace Oqtane.Modules.HtmlText
 @inherits ModuleBase
 @inject IHtmlTextService HtmlTextService
-@inject IStringLocalizer<Edit> Localizer
+@inject IStringLocalizer<Index> Localizer
 
 @((MarkupString)content)
 
@@ -16,7 +16,7 @@
 
 @code {
 	public override List<Resource> Resources => new List<Resource>()
-{
+    {
         new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" }
     };
 
@@ -35,8 +35,8 @@
         }
         catch (Exception ex)
         {
-            await logger.LogError(ex, "An Error Occurred Loading Html/Text Content. " + ex.Message);
-            AddModuleMessage(ex.Message, MessageType.Error);
+			await logger.LogError(ex, "Error Loading Content {Error}", ex.Message);
+            AddModuleMessage(Localizer["Error.Content.Load"], MessageType.Error);
         }
     }
 }

Oqtane.Client/Modules/HtmlText/ModuleInfo.cs

@@ -1,7 +1,9 @@
+using Oqtane.Documentation;
 using Oqtane.Models;
 
 namespace Oqtane.Modules.HtmlText
 {
+    [PrivateApi("Mark HtmlText classes as private, since it's not very useful in the public docs")]
     public class ModuleInfo : IModule
     {
         public ModuleDefinition ModuleDefinition => new ModuleDefinition

Oqtane.Client/Modules/HtmlText/Services/HtmlTextService.cs

@@ -1,10 +1,12 @@
 using System.Net.Http;
 using System.Threading.Tasks;
+using Oqtane.Documentation;
 using Oqtane.Services;
 using Oqtane.Shared;
 
 namespace Oqtane.Modules.HtmlText.Services
 {
+    [PrivateApi("Mark HtmlText classes as private, since it's not very useful in the public docs")]
     public class HtmlTextService : ServiceBase, IHtmlTextService, IService
     {        
         public HtmlTextService(HttpClient http, SiteState siteState) : base(http, siteState) {}

Oqtane.Client/Modules/HtmlText/Services/IHtmlTextService.cs

@@ -1,9 +1,11 @@
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Threading.Tasks;
+using Oqtane.Documentation;
 using Oqtane.Modules.HtmlText.Models;
 
 namespace Oqtane.Modules.HtmlText.Services
 {
+    [PrivateApi("Mark HtmlText classes as private, since it's not very useful in the public docs")]
     public interface IHtmlTextService 
     {
         Task<Models.HtmlText> GetHtmlTextAsync(int ModuleId);

Oqtane.Client/Modules/HtmlText/Settings.razor

@@ -5,21 +5,20 @@
 @inject IStringLocalizer<Settings> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
-<table class="table table-borderless">
-    <tr>
-        <td width="30%">
-            <Label For="files" ResourceKey="Allow File Management" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
-        </td>
-        <td>
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="files" ResourceKey="AllowFileManagement" ResourceType="@resourceType" HelpText="Specify If Editors Can Upload and Select Files">Allow File Management: </Label>
+        <div class="col-sm-9">
             <select id="files" class="form-select" @bind="@_allowfilemanagement">
                 <option value="true">@SharedLocalizer["Yes"]</option>
                 <option value="false">@SharedLocalizer["No"]</option>
             </select>
-        </td>
-    </tr>
-</table>
+        </div>
+    </div>
+</div>
 
 @code {		
+	private string resourceType = "Oqtane.Modules.HtmlText.Settings, Oqtane.Client"; // for localization
     private string _allowfilemanagement;
 
     protected override void OnInitialized()
@@ -38,7 +37,7 @@
     {
         try
         {
-            var settings = ModuleState.Settings;
+			var settings = await SettingService.GetModuleSettingsAsync(ModuleState.ModuleId);
             settings = SettingService.SetSetting(settings, "AllowFileManagement", _allowfilemanagement);
             await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
         }

Oqtane.Client/Modules/ModuleBase.cs

@@ -30,8 +30,8 @@ namespace Oqtane.Modules
         [CascadingParameter]
         protected Module ModuleState { get; set; }
 
-        [CascadingParameter]
-        protected ModuleInstance ModuleInstance { get; set; }
+        [Parameter]
+        public ModuleInstance ModuleInstance { get; set; }
 
         // optional interface properties
         public virtual SecurityAccessLevel SecurityAccessLevel { get { return SecurityAccessLevel.View; } set { } } // default security
@@ -134,6 +134,21 @@ namespace Oqtane.Modules
             return Utilities.ContentUrl(PageState.Alias, fileid, asAttachment);
         }
 
+        public string ImageUrl(int fileid, int width, int height)
+        {
+            return ImageUrl(fileid, width, height, "");
+        }
+
+        public string ImageUrl(int fileid, int width, int height, string mode)
+        {
+            return ImageUrl(fileid, width, height, mode, "", "", 0, false);
+        }
+
+        public string ImageUrl(int fileid, int width, int height, string mode, string position, string background, int rotate, bool recreate)
+        {
+            return Utilities.ImageUrl(PageState.Alias, fileid, width, height, mode, position, background, rotate, recreate);
+        }
+
         public virtual Dictionary<string, string> GetUrlParameters(string parametersTemplate = "")
         {
             var urlParameters = new Dictionary<string, string>();
@@ -205,6 +220,38 @@ namespace Oqtane.Modules
 
         // logging methods
         public async Task Log(Alias alias, LogLevel level, string function, Exception exception, string message, params object[] args)
+        {
+            LogFunction logFunction;
+            if (string.IsNullOrEmpty(function))
+            {
+                // try to infer from page action
+                function = PageState.Action;
+            }
+            if (!Enum.TryParse(function, out logFunction))
+            {
+                switch (function.ToLower())
+                {
+                    case "add":
+                        logFunction = LogFunction.Create;
+                        break;
+                    case "edit":
+                        logFunction = LogFunction.Update;
+                        break;
+                    case "delete":
+                        logFunction = LogFunction.Delete;
+                        break;
+                    case "":
+                        logFunction = LogFunction.Read;
+                        break;
+                    default:
+                        logFunction = LogFunction.Other;
+                        break;
+                }
+            }
+            await Log(alias, level, logFunction, exception, message, args);
+        }
+
+        public async Task Log(Alias alias, LogLevel level, LogFunction function, Exception exception, string message, params object[] args)
         {
             int pageId = ModuleState.PageId;
             int moduleId = ModuleState.ModuleId;
@@ -215,34 +262,8 @@ namespace Oqtane.Modules
             }
             string category = GetType().AssemblyQualifiedName;
             string feature = Utilities.GetTypeNameLastSegment(category, 1);
-            LogFunction logFunction;
-            if (string.IsNullOrEmpty(function))
-            {
-                function = PageState.Action;
-            }
-            switch (function.ToLower())
-            {
-                case "add":
-                    logFunction = LogFunction.Create;
-                    break;
 
-                case "edit":
-                    logFunction = LogFunction.Update;
-                    break;
-
-                case "delete":
-                    logFunction = LogFunction.Delete;
-                    break;
-
-                default:
-                    logFunction = LogFunction.Read;
-                    break;
-            }
-            if (feature == "Login")
-            {
-                logFunction = LogFunction.Security;
-            }
-            await LoggingService.Log(alias, pageId, moduleId, userId, category, feature, logFunction, level, exception, message, args);
+            await LoggingService.Log(alias, pageId, moduleId, userId, category, feature, function, level, exception, message, args);
         }
 
         public class Logger
@@ -259,6 +280,11 @@ namespace Oqtane.Modules
                 await _moduleBase.Log(null, LogLevel.Trace, "", null, message, args);
             }
 
+            public async Task LogTrace(LogFunction function, string message, params object[] args)
+            {
+                await _moduleBase.Log(null, LogLevel.Trace, function, null, message, args);
+            }
+
             public async Task LogTrace(Exception exception, string message, params object[] args)
             {
                 await _moduleBase.Log(null, LogLevel.Trace, "", exception, message, args);
@@ -269,6 +295,11 @@ namespace Oqtane.Modules
                 await _moduleBase.Log(null, LogLevel.Debug, "", null, message, args);
             }
 
+            public async Task LogDebug(LogFunction function, string message, params object[] args)
+            {
+                await _moduleBase.Log(null, LogLevel.Debug, function, null, message, args);
+            }
+
             public async Task LogDebug(Exception exception, string message, params object[] args)
             {
                 await _moduleBase.Log(null, LogLevel.Debug, "", exception, message, args);
@@ -279,6 +310,11 @@ namespace Oqtane.Modules
                 await _moduleBase.Log(null, LogLevel.Information, "", null, message, args);
             }
 
+            public async Task LogInformation(LogFunction function, string message, params object[] args)
+            {
+                await _moduleBase.Log(null, LogLevel.Information, function, null, message, args);
+            }
+
             public async Task LogInformation(Exception exception, string message, params object[] args)
             {
                 await _moduleBase.Log(null, LogLevel.Information, "", exception, message, args);
@@ -289,6 +325,11 @@ namespace Oqtane.Modules
                 await _moduleBase.Log(null, LogLevel.Warning, "", null, message, args);
             }
 
+            public async Task LogWarning(LogFunction function, string message, params object[] args)
+            {
+                await _moduleBase.Log(null, LogLevel.Warning, function, null, message, args);
+            }
+
             public async Task LogWarning(Exception exception, string message, params object[] args)
             {
                 await _moduleBase.Log(null, LogLevel.Warning, "", exception, message, args);
@@ -299,6 +340,11 @@ namespace Oqtane.Modules
                 await _moduleBase.Log(null, LogLevel.Error, "", null, message, args);
             }
 
+            public async Task LogError(LogFunction function, string message, params object[] args)
+            {
+                await _moduleBase.Log(null, LogLevel.Error, function, null, message, args);
+            }
+
             public async Task LogError(Exception exception, string message, params object[] args)
             {
                 await _moduleBase.Log(null, LogLevel.Error, "", exception, message, args);
@@ -309,6 +355,11 @@ namespace Oqtane.Modules
                 await _moduleBase.Log(null, LogLevel.Critical, "", null, message, args);
             }
 
+            public async Task LogCritical(LogFunction function, string message, params object[] args)
+            {
+                await _moduleBase.Log(null, LogLevel.Critical, function, null, message, args);
+            }
+
             public async Task LogCritical(Exception exception, string message, params object[] args)
             {
                 await _moduleBase.Log(null, LogLevel.Critical, "", exception, message, args);

Oqtane.Client/Oqtane.Client.csproj

@@ -1,11 +1,11 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net6.0</TargetFramework>
     <OutputType>Exe</OutputType>
     <RazorLangVersion>3.0</RazorLangVersion>
     <Configurations>Debug;Release</Configurations>
-    <Version>2.2.0</Version>
+    <Version>3.0.2</Version>
     <Product>Oqtane</Product>
     <Authors>Shaun Walker</Authors>
     <Company>.NET Foundation</Company>
@@ -13,7 +13,7 @@
     <Copyright>.NET Foundation</Copyright>
     <PackageProjectUrl>https://www.oqtane.org</PackageProjectUrl>
     <PackageLicenseUrl>https://github.com/oqtane/oqtane.framework/blob/dev/LICENSE</PackageLicenseUrl>
-    <PackageReleaseNotes>https://github.com/oqtane/oqtane.framework/releases/tag/v2.2.0</PackageReleaseNotes>
+    <PackageReleaseNotes>https://github.com/oqtane/oqtane.framework/releases/tag/v3.0.2</PackageReleaseNotes>
     <RepositoryUrl>https://github.com/oqtane/oqtane.framework</RepositoryUrl>
     <RepositoryType>Git</RepositoryType>
     <RootNamespace>Oqtane</RootNamespace>
@@ -22,12 +22,12 @@
   </PropertyGroup>
   
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.4" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.4" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="6.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Localization" Version="2.2.0" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.4" />
-    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.0" />
+    <PackageReference Include="System.Net.Http.Json" Version="6.0.0" />
   </ItemGroup>
 
   <ItemGroup>
@@ -35,7 +35,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="Resources\" />
-    <Folder Include="Resources\Themes\Controls\Theme\" />
+    <TrimmerRootAssembly Include="System.Runtime" />
+    <TrimmerRootAssembly Include="System.Linq.Parallel" />
+    <TrimmerRootAssembly Include="System.Runtime.CompilerServices.VisualC" />
   </ItemGroup>
+
+  <PropertyGroup>
+    <BlazorEnableCompression>false</BlazorEnableCompression>
+  </PropertyGroup>
+
 </Project>

Oqtane.Client/Program.cs

@@ -12,6 +12,7 @@ using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.AspNetCore.Localization;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.JSInterop;
+using Oqtane.Documentation;
 using Oqtane.Modules;
 using Oqtane.Services;
 using Oqtane.Shared;
@@ -19,12 +20,12 @@ using Oqtane.UI;
 
 namespace Oqtane.Client
 {
+    [PrivateApi("Mark Entry-Program as private, since it's not very useful in the public docs")]
     public class Program
     {
         public static async Task Main(string[] args)
         {
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
-            builder.RootComponents.Add<App>("app");
 
             var httpClient = new HttpClient {BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)};
 

Oqtane.Client/Resources/Installer/Controls/PostgreSQLConfig.resx

@@ -153,4 +153,10 @@
   <data name="Pwd.HelpText" xml:space="preserve">
     <value>Enter the password to use for the database</value>
   </data>
+  <data name="Custom" xml:space="preserve">
+    <value>Custom</value>
+  </data>
+  <data name="Integrated" xml:space="preserve">
+    <value>Integrated</value>
+  </data>
 </root>

Oqtane.Client/Resources/Installer/Controls/SqlServerConfig.resx

@@ -147,4 +147,28 @@
   <data name="Pwd.HelpText" xml:space="preserve">
     <value>Enter the password to use for the database</value>
   </data>
+  <data name="Custom" xml:space="preserve">
+    <value>Custom</value>
+  </data>
+  <data name="Integrated" xml:space="preserve">
+    <value>Integrated</value>
+  </data>
+  <data name="Encryption,Text" xml:space="preserve">
+    <value>Encryption:</value>
+  </data>
+  <data name="Encryption.HelpText" xml:space="preserve">
+    <value>Specify if you are using an encrypted database connection. It is highly recommended to use encryption in a production environment.</value>
+  </data>
+  <data name="Self Signed" xml:space="preserve">
+    <value>Self Signed</value>
+  </data>
+  <data name="TrustServerCertificate.HelpText" xml:space="preserve">
+    <value>Specify the type of certificate you are using for encryption</value>
+  </data>
+  <data name="TrustServerCertificate.Text" xml:space="preserve">
+    <value>Trust Server Certificate:</value>
+  </data>
+  <data name="Verifiable" xml:space="preserve">
+    <value>Verifiable</value>
+  </data>
 </root>

Oqtane.Client/Resources/Installer/Installer.resx

@@ -120,8 +120,8 @@
   <data name="DatabaseConfig" xml:space="preserve">
     <value>Database Configuration</value>
   </data>
-  <data name="DatabaseType" xml:space="preserve">
-    <value>Database Type:</value>
+  <data name="DatabaseType.Text" xml:space="preserve">
+    <value>Database:</value>
   </data>
   <data name="ApplicationAdmin" xml:space="preserve">
     <value>Application Administrator</value>
@@ -138,4 +138,31 @@
   <data name="Register" xml:space="preserve">
     <value>Please Register Me For Major Product Updates And Security Bulletins</value>
   </data>
+  <data name="Confirm.HelpText" xml:space="preserve">
+    <value>Please confirm the password entered above by entering it again</value>
+  </data>
+  <data name="Confirm.Text" xml:space="preserve">
+    <value>Confirm:</value>
+  </data>
+  <data name="DatabaseType.HelpText" xml:space="preserve">
+    <value>Select the type of database you wish to use</value>
+  </data>
+  <data name="Email.HelpText" xml:space="preserve">
+    <value>Provide the email address for the host user account</value>
+  </data>
+  <data name="Email.Text" xml:space="preserve">
+    <value>Email:</value>
+  </data>
+  <data name="Password.HelpText" xml:space="preserve">
+    <value>Provide a password for the primary user account</value>
+  </data>
+  <data name="Password.Text" xml:space="preserve">
+    <value>Password:</value>
+  </data>
+  <data name="Username.HelpText" xml:space="preserve">
+    <value>Provide a username for the primary user account</value>
+  </data>
+  <data name="Username.Text" xml:space="preserve">
+    <value>Username:</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Files/Add.resx

@@ -156,4 +156,10 @@
   <data name="UploadFiles.Heading" xml:space="preserve">
     <value>Upload Files</value>
   </data>
+  <data name="Name.HelpText" xml:space="preserve">
+    <value>Enter the name of the file being downloaded</value>
+  </data>
+  <data name="Name.Text" xml:space="preserve">
+    <value>Name:</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Files/Details.resx

@@ -144,4 +144,10 @@
   <data name="Size.Text" xml:space="preserve">
     <value>Size: </value>
   </data>
+  <data name="Description.HelpText" xml:space="preserve">
+    <value>A description of the file. This can be used as a caption for image files.</value>
+  </data>
+  <data name="Description.Text" xml:space="preserve">
+    <value>Description:</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Files/Edit.resx

@@ -165,4 +165,22 @@
   <data name="DeleteFolder.Message" xml:space="preserve">
     <value>Are You Sure You Wish To Delete This Folder?</value>
   </data>
+  <data name="Type.HelpText" xml:space="preserve">
+    <value>Select the folder type. Private folders are only accessible by authorized users. Public folders can be accessed by all users</value>
+  </data>
+  <data name="Type.Text" xml:space="preserve">
+    <value>Type:</value>
+  </data>
+  <data name="Capacity.HelpText" xml:space="preserve">
+    <value>Enter the maximum folder capacity (in megabytes). Specify zero if the capacity is unlimited.</value>
+  </data>
+  <data name="Capacity.Text" xml:space="preserve">
+    <value>Capacity:</value>
+  </data>
+  <data name="ImageSizes.HelpText" xml:space="preserve">
+    <value>Enter a list of image sizes which can be generated dynamically from uploaded images (ie. 200x200,x200,200x)</value>
+  </data>
+  <data name="ImageSizes.Text" xml:space="preserve">
+    <value>Image Sizes:</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Files/Index.resx

@@ -159,4 +159,10 @@
   <data name="Type" xml:space="preserve">
     <value>Type</value>
   </data>
+  <data name="DeleteFile.Text" xml:space="preserve">
+    <value>Delete</value>
+  </data>
+  <data name="UploadFiles.Text" xml:space="preserve">
+    <value>Upload Files</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Jobs/Edit.resx

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <root>
   <!-- 
     Microsoft ResX Schema 
@@ -154,16 +154,16 @@
     <value>Select how often you want the job to run</value>
   </data>
   <data name="Starting.HelpText" xml:space="preserve">
-    <value>What time do you want the job to start</value>
+    <value>Optionally enter the date and time when this job should start executing</value>
   </data>
   <data name="Ending.HelpText" xml:space="preserve">
-    <value>When do you want the job to end</value>
+    <value>Optionally enter the date and time when this job should stop executing</value>
   </data>
   <data name="RetentionLog.HelpText" xml:space="preserve">
     <value>Number of log entries to retain for this job</value>
   </data>
   <data name="NextExecution.HelpText" xml:space="preserve">
-    <value>Next execution for this job.</value>
+    <value>Optionally modify the date and time when this job should execute next</value>
   </data>
   <data name="Type.Text" xml:space="preserve">
     <value>Type: </value>
@@ -186,4 +186,10 @@
   <data name="NextExecution.Text" xml:space="preserve">
     <value>Next Execution: </value>
   </data>
+  <data name="Week(s)" xml:space="preserve">
+    <value>Week(s)</value>
+  </data>
+  <data name="Once" xml:space="preserve">
+    <value>Execute Once</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Jobs/Index.resx

@@ -133,19 +133,16 @@
     <value>Every</value>
   </data>
   <data name="Minute" xml:space="preserve">
-    <value>Minute</value>
+    <value>Minute(s)</value>
   </data>
   <data name="Hour" xml:space="preserve">
-    <value>Hour</value>
+    <value>Hour(s)</value>
   </data>
   <data name="Day" xml:space="preserve">
-    <value>Day</value>
+    <value>Day(s)</value>
   </data>
   <data name="Month" xml:space="preserve">
-    <value>Month</value>
-  </data>
-  <data name="s" xml:space="preserve">
-    <value>s</value>
+    <value>Month(s)</value>
   </data>
   <data name="Error.Job.Delete" xml:space="preserve">
     <value>Error Deleting Job</value>
@@ -168,4 +165,31 @@
   <data name="Stop" xml:space="preserve">
     <value>Stop</value>
   </data>
+  <data name="DeleteJob.Text" xml:space="preserve">
+    <value>Delete</value>
+  </data>
+  <data name="EditJob.Text" xml:space="preserve">
+    <value>Edit</value>
+  </data>
+  <data name="JobLog.Text" xml:space="preserve">
+    <value>Log</value>
+  </data>
+  <data name="Error.Job.Start" xml:space="preserve">
+    <value>An error occurred when starting the job</value>
+  </data>
+  <data name="Error.Job.Stop" xml:space="preserve">
+    <value>An error occurred when stopping the job</value>
+  </data>
+  <data name="Message.Job.Start" xml:space="preserve">
+    <value>The process responsible for executing this job has been started. The next execution will be based on the schedule criteria for the job.</value>
+  </data>
+  <data name="Message.Job.Stop" xml:space="preserve">
+    <value>The process responsible for executing this job has been stopped. In order to restart the process you will need to use the Start button or restart the application.</value>
+  </data>
+  <data name="Week" xml:space="preserve">
+    <value>Week(s)</value>
+  </data>
+  <data name="Once" xml:space="preserve">
+    <value>Execute Once</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Languages/Add.resx

@@ -153,4 +153,19 @@
   <data name="Search.NoResults" xml:space="preserve">
     <value>No Translations Match The Criteria Provided Or Package Service Is Disabled</value>
   </data>
+  <data name="Download.Heading" xml:space="preserve">
+    <value>Download</value>
+  </data>
+  <data name="LanguageUpload.HelpText" xml:space="preserve">
+    <value>Upload one or more translations. Once they are uploaded click Install to complete the installation.</value>
+  </data>
+  <data name="LanguageUpload.Text" xml:space="preserve">
+    <value>Upload Language</value>
+  </data>
+  <data name="Manage.Heading" xml:space="preserve">
+    <value>Manage</value>
+  </data>
+  <data name="Upload.Heading" xml:space="preserve">
+    <value>Upload</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Languages/Index.resx

@@ -141,4 +141,7 @@
   <data name="Default" xml:space="preserve">
     <value>Default</value>
   </data>
+  <data name="DeleteLanguage.Text" xml:space="preserve">
+    <value>Delete</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Login/Index.resx

@@ -138,4 +138,13 @@
   <data name="Info.SignedIn" xml:space="preserve">
     <value>You Are Already Signed In</value>
   </data>
+  <data name="Message.ForgotPassword" xml:space="preserve">
+    <value>Please Enter The Username Related To Your Account And Then Select The Forgot Password Option Again</value>
+  </data>
+  <data name="Message.ForgotUser" xml:space="preserve">
+    <value>Please Check The Email Address Associated To Your User Account For A Password Reset Notification</value>
+  </data>
+  <data name="Message.UserDoesNotExist" xml:space="preserve">
+    <value>User Does Not Exist</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Logs/Index.resx

@@ -189,4 +189,25 @@
   <data name="Create" xml:space="preserve">
     <value>Create</value>
   </data>
+  <data name="LogDetails.Text" xml:space="preserve">
+    <value>Details</value>
+  </data>
+  <data name="Error.SaveSiteSettings" xml:space="preserve">
+    <value>Error Saving Settings</value>
+  </data>
+  <data name="Events.Heading" xml:space="preserve">
+    <value>Events</value>
+  </data>
+  <data name="Retention.HelpText" xml:space="preserve">
+    <value>Number of days of events to retain</value>
+  </data>
+  <data name="Retention.Text" xml:space="preserve">
+    <value>Retention (Days):</value>
+  </data>
+  <data name="Settings.Heading" xml:space="preserve">
+    <value>Settings</value>
+  </data>
+  <data name="Success.SaveSiteSettings" xml:space="preserve">
+    <value>Settings Saved Successfully</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/ModuleDefinitions/Add.resx

@@ -138,4 +138,10 @@
   <data name="Search.NoResults" xml:space="preserve">
     <value>No Modules Match The Criteria Provided Or Package Service Is Disabled</value>
   </data>
+  <data name="Download.Heading" xml:space="preserve">
+    <value>Download</value>
+  </data>
+  <data name="Upload.Heading" xml:space="preserve">
+    <value>Upload</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/ModuleDefinitions/Edit.resx

@@ -183,7 +183,16 @@
   <data name="Runtimes.Text" xml:space="preserve">
     <value>Runtimes: </value>
   </data>
-  <data name="Definition.Name" xml:space="preserve">
+  <data name="Definition.Heading" xml:space="preserve">
     <value>Definition</value>
   </data>
+  <data name="Information.Heading" xml:space="preserve">
+    <value>Information</value>
+  </data>
+  <data name="Permissions.Heading" xml:space="preserve">
+    <value>Permissions</value>
+  </data>
+  <data name="Information.Text" xml:space="preserve">
+    <value>Information</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/ModuleDefinitions/Index.resx

@@ -144,4 +144,10 @@
   <data name="DeleteModule.Header" xml:space="preserve">
     <value>Delete Module</value>
   </data>
+  <data name="InUse" xml:space="preserve">
+    <value>In Use</value>
+  </data>
+  <data name="EditModule.Text" xml:space="preserve">
+    <value>Edit</value>
+  </data>
 </root>

Oqtane.Client/Resources/Modules/Admin/Modules/Export.resx

@@ -121,9 +121,15 @@
     <value>Export</value>
   </data>
   <data name="Content.HelpText" xml:space="preserve">
-    <value>Enter the module content</value>
+    <value>The Exported Module Content</value>
   </data>
   <data name="Content.Text" xml:space="preserve">
     <value>Content: </value>
   </data>
+  <data name="Error.Module.Export" xml:space="preserve">
+    <value>Error Exporting Module Content</value>
+  </data>
+  <data name="Success.Content.Export" xml:space="preserve">
+    <value>Content Exported Successfully</value>
+  </data>
 </root>