Menu component refactoring

Login component refactoring

Oqtane.Client/Themes/Controls/Login.razor

@@ -1,9 +1,5 @@
 @namespace Oqtane.Themes.Controls
-@inherits ThemeControlBase
+@inherits LoginBase
-@inject NavigationManager NavigationManager
-@inject IUserService UserService
-@inject IJSRuntime jsRuntime
-@inject IServiceProvider ServiceProvider
 
 <AuthorizeView>
     <Authorizing>
@@ -16,38 +12,3 @@
         <button type="button" class="btn btn-primary" @onclick="LoginUser">Login</button>
     </NotAuthorized>
 </AuthorizeView>
-
-
-@code {
-    private void LoginUser()
-    {
-        var returnurl = PageState.Alias.Path;
-        if (PageState.Page.Path != "/")
-        {
-            returnurl += "/" + PageState.Page.Path;
-        }
-        
-        NavigationManager.NavigateTo(NavigateUrl("login", "returnurl=" + returnurl));
-    }
-
-    private async Task LogoutUser()
-    {
-        await UserService.LogoutUserAsync(PageState.User);
-
-        if (PageState.Runtime == Runtime.Server)
-        {
-            // server-side Blazor
-            var interop = new Interop(jsRuntime);
-            string antiforgerytoken = await interop.GetElementByName("__RequestVerificationToken");
-            var fields = new { __RequestVerificationToken = antiforgerytoken, returnurl = (PageState.Alias.Path + "/" + PageState.Page.Path) };
-            await interop.SubmitForm("/pages/logout/", fields);
-        }
-        else
-        {
-            // client-side Blazor
-            var authstateprovider = (IdentityAuthenticationStateProvider)ServiceProvider.GetService(typeof(IdentityAuthenticationStateProvider));
-            authstateprovider.NotifyAuthenticationChanged();
-            NavigationManager.NavigateTo(NavigateUrl(PageState.Page.Path, "reload"));
-        }
-    }
-}

Oqtane.Client/Themes/Controls/LoginBase.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Oqtane.Providers;
+using Oqtane.Services;
+using Oqtane.UI;
+
+namespace Oqtane.Themes.Controls
+{
+    public class LoginBase : ThemeControlBase
+    {
+        [Inject] public NavigationManager NavigationManager {get;set;}
+        [Inject]public IUserService UserService {get;set;}
+        [Inject]public IJSRuntime jsRuntime {get;set;}
+        [Inject]public IServiceProvider ServiceProvider {get;set;}
+
+        protected void LoginUser()
+        {
+            var returnurl = PageState.Alias.Path;
+            if (PageState.Page.Path != "/")
+            {
+                returnurl += "/" + PageState.Page.Path;
+            }
+            NavigationManager.NavigateTo(NavigateUrl("login", "returnurl=" + returnurl));
+        }
+
+        protected async Task LogoutUser()
+        {
+            await UserService.LogoutUserAsync(PageState.User);
+
+            if (PageState.Runtime == Runtime.Server)
+            {
+                // server-side Blazor
+                var interop = new Interop(jsRuntime);
+                string antiforgerytoken = await interop.GetElementByName("__RequestVerificationToken");
+                var fields = new { __RequestVerificationToken = antiforgerytoken, returnurl = (PageState.Alias.Path + "/" + PageState.Page.Path) };
+                await interop.SubmitForm("/pages/logout/", fields);
+            }
+            else
+            {
+                // client-side Blazor
+                var authstateprovider = (IdentityAuthenticationStateProvider)ServiceProvider.GetService(typeof(IdentityAuthenticationStateProvider));
+                authstateprovider.NotifyAuthenticationChanged();
+                NavigationManager.NavigateTo(NavigateUrl(PageState.Page.Path, "reload"));
+            }
+        }
+    }
+}

Oqtane.Client/Themes/Controls/Menu.razor

@@ -1,133 +1,20 @@
 @namespace Oqtane.Themes.Controls
-@inherits ThemeControlBase
 
-@if (menu != string.Empty)
+@switch (Orientation)
 {
-    <div class="app-menu">
+    case "Horizontal":
-        @((MarkupString)menu)
+        <MenuHorizontal/>
-    </div>
+        break;
+    default: // Vertical
+    {
+        <MenuVertical/>
+        break;
+    }
 }
 
-@code {
+@code{
-    private string menu = string.Empty;
 
     [Parameter]
     public string Orientation { get; set; }
 
-    protected override void OnParametersSet()
-    {
-        switch (Orientation)
-        {
-            case "Horizontal":
-                CreateHorizontalMenu();
-                break;
-            default: // Vertical
-                CreateVerticalMenu();
-                break;
-        }
-    }
-
-    private void CreateVerticalMenu()
-    {
-        var level = -1;
-        var securitylevel = int.MaxValue;
-
-        menu = "<ul class=\"nav flex-column\">\n";
-
-        foreach (Page p in PageState.Pages.Where(item => item.IsNavigation && !item.IsDeleted))
-        {
-            if (UserSecurity.IsAuthorized(PageState.User,PermissionNames.View, p.Permissions) && p.Level <= securitylevel)
-            {
-                securitylevel = int.MaxValue;
-
-                menu += "<li class=\"nav-item px-3\">";
-                if (string.IsNullOrEmpty(p.Url))
-                {
-                    menu += "<a href=\"" + NavigateUrl(p.Path) + "\" class=\"nav-link\" style=\"padding-left: " + ((p.Level + 1) * 15).ToString() + "px !important;\">";
-                }
-                else
-                {
-                    string target = String.Empty;
-                    if (p.Url.StartsWith("http"))
-                    {
-                        target = " target=\"_new\"";
-                    }
-                    menu += "<a href=\"" + p.Url + "\" class=\"nav-link\" style=\"padding-left: " + ((p.Level + 1) * 15).ToString() + "px !important;\"" + target + ">";
-                }
-                
-                if (p.HasChildren)
-                {
-                    menu += "<i class=\"oi oi-chevron-right\"></i>";
-                }
-                
-                if (p.Icon != string.Empty)
-                {
-                    menu += "<span class=\"oi oi-" + p.Icon + "\" aria-hidden=\"true\"></span>";
-                }
-                
-                menu += p.Name;
-                menu += "</a>\n";
-                menu += "</li>\n";
-
-                level = p.Level;
-            }
-            else
-            {
-                if (securitylevel == int.MaxValue)
-                {
-                    securitylevel = p.Level;
-                }
-            }
-        }
-        
-        menu += "</ul>";
-    }
-
-    private void CreateHorizontalMenu()
-    {
-        var url = String.Empty;
-        var target = String.Empty;
-
-        menu = "<button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#Menu\" aria-controls=\"Menu\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"><span class=\"navbar-toggler-icon\"></span></button>";
-        menu += "<div class=\"collapse navbar-collapse\" id=\"Menu\">";
-        menu += "<ul class=\"navbar-nav mr-auto\">";
-        
-        foreach (Page p in PageState.Pages.Where(item => item.IsNavigation && !item.IsDeleted))
-        {
-            if (UserSecurity.IsAuthorized(PageState.User,PermissionNames.View, p.Permissions) && p.ParentId == PageState.Page.ParentId && p.Level == PageState.Page.Level)
-            {
-                if (string.IsNullOrEmpty(p.Url))
-                {
-                    url = NavigateUrl(p.Path);
-                    target = String.Empty;
-                }
-                else
-                {
-                    url = p.Url;
-                    if (p.Url.StartsWith("http"))
-                    {
-                        target = " target=\"_new\"";
-                    }
-                }
-
-                if (p.PageId == PageState.Page.PageId)
-                {
-                    menu += "<li class=\"nav-item active\">" +
-                        "<a class=\"nav-link\" href=\"" + NavigateUrl(p.Path) + "\">" +
-                        ((p.Icon != string.Empty) ? "<span class=\"oi oi-" + p.Icon + "\" aria-hidden=\"true\"></span> " : string.Empty) + 
-                        p.Name + " <span class=\"sr-only\">(current)</span></a></li>";
-                }
-                else
-                {
-                    menu += "<li class=\"nav-item\">" +
-                        "<a class=\"nav-link\" href=\"" + NavigateUrl(p.Path) + "\">" +
-                        ((p.Icon != string.Empty) ? "<span class=\"oi oi-" + p.Icon + "\" aria-hidden=\"true\"></span> " : string.Empty) + 
-                        p.Name + "</a></li>";
-                }
-            }
-        }
-        
-        menu += "</ul>";
-        menu += "</div>";
-    }
 }

Oqtane.Client/Themes/Controls/MenuBase.cs

@@ -0,0 +1,45 @@
+using System.Collections.Generic;
+using System.Linq;
+using Oqtane.Models;
+using Oqtane.Security;
+using Oqtane.Shared;
+
+namespace Oqtane.Themes.Controls
+{
+    public class MenuBase : ThemeControlBase
+    {
+        private List<Page> _menuPages;
+
+        protected IEnumerable<Page> MenuPages => _menuPages ?? (_menuPages = GetMenuPages().ToList());
+
+        protected string GetTarget(Page page)
+        {
+            return page.Url.StartsWith("http") ? "_new" : string.Empty;
+        }
+
+        protected string GetUrl(Page page)
+        {
+            return string.IsNullOrEmpty(page.Url) ? NavigateUrl(page.Path) : page.Url;
+        }
+
+        private IEnumerable<Page> GetMenuPages()
+        {
+            var securityLevel = int.MaxValue;
+            foreach (Page p in PageState.Pages.Where(item => item.IsNavigation && !item.IsDeleted))
+            {
+                if (p.Level <= securityLevel && UserSecurity.IsAuthorized(PageState.User, PermissionNames.View, p.Permissions))
+                {
+                    securityLevel = int.MaxValue;
+                    yield return p;
+                }
+                else
+                {
+                    if (securityLevel == int.MaxValue)
+                    {
+                        securityLevel = p.Level;
+                    }
+                }
+            }
+        }
+    }
+}

Oqtane.Client/Themes/Controls/MenuHorizontal.Razor

@@ -0,0 +1,42 @@
+@namespace Oqtane.Themes.Controls
+@inherits MenuBase
+@if (MenuPages.Any())
+{
+    <div class="app-menu">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Menu" aria-controls="Menu" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="Menu">
+            <ul class="navbar-nav mr-auto">
+                @foreach (var p in MenuPages)
+                {
+                    if (p.PageId == PageState.Page.PageId)
+                    {
+                        <li class="nav-item active">
+                            <a class="nav-link" href="@NavigateUrl(p.Path)">
+                                @if (p.Icon != string.Empty)
+                                {
+                                    <span class="oi oi-@p.Icon" aria-hidden="true"></span>
+                                }
+                                @p.Name<span class="sr-only">(current)</span>
+                            </a>
+                        </li>
+                    }
+                    else
+                    {
+                        <li class="nav-item">
+                            <a class="nav-link" href="@NavigateUrl(p.Path)">
+                                @if (p.Icon != string.Empty)
+                                {
+                                    <span class="oi oi-@p.Icon" aria-hidden="true"></span>
+                                }
+                                @p.Name
+                            </a>
+                        </li>
+                    }
+                }
+            </ul>
+        </div>
+    </div>
+}

Oqtane.Client/Themes/Controls/MenuVertical.razor

@@ -0,0 +1,27 @@
+@namespace Oqtane.Themes.Controls
+@inherits MenuBase
+@if (MenuPages.Any())
+{
+    <div class="app-menu">
+        <ul class="nav flex-column">
+            @foreach (var p in MenuPages)
+            {
+                <li class="nav-item px-3">
+                    <a href="@GetUrl(p)" class="nav-link" style="padding-left:@((p.Level + 1) * 15)px !important;" target="@GetTarget(p)">
+
+                        @if (p.HasChildren)
+                        {
+                            <i class="oi oi-chevron-right"></i>
+                        }
+                        @if (p.Icon != string.Empty)
+                        {
+                            <span class="oi oi-@p.Icon" aria-hidden="true"></span>
+                        }
+                        @p.Name
+
+                    </a>
+                </li>
+            }
+        </ul>
+    </div>
+}