Merge pull request 'Simplified logn and logout process' (#46) from mock-data into main

Reviewed-on: #46

MidrandBookshop/Components/Layout/MainLayout.razor

@@ -2,8 +2,6 @@
 @inject NavigationManager Navigation
 
 <div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
-
-    @* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
     <div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
     <div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
         <div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
@@ -77,9 +75,7 @@
         }
     </div>
 
-    @* --- TOP FIXED LAYOUT AREA --- *@
     <div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
-        @* Decorative Background SVG Watermark Line Graphic *@
         <div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
             <svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
@@ -138,15 +134,16 @@
                         <input type="text"
                                class="form-control form-control-sm rounded-pill border-light-subtle px-3 text-dark bg-light custom-search-field"
                                placeholder="Search by ISBN, Author, Title..."
-                               value="@GlobalSearchQuery"
-                               @oninput="OnSearchInput" />
+                               @bind="SearchInputBuffer"
+                               @bind:event="oninput"
+                               @onkeydown="HandleSearchKeyDown" />
                     </div>
 
-                    <button class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center border-0 p-0 transition-smooth @(IsSearchActive ? "bg-dark text-white" : "bg-light text-dark")"
-                            style="width: 32px; height: 32px;"
+                    <button class="btn btn-link text-dark p-1 me-2 border-0 header-action-btn"
                             @onclick="ToggleGlobalSearch"
-                            type="button">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            type="button"
+                            aria-label="Toggle Search">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                             <circle cx="11" cy="11" r="8"></circle>
                             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                         </svg>
@@ -170,7 +167,7 @@
                             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                             <circle cx="12" cy="7" r="4" />
                         </svg>
-                        LogIn
+                        Account
                     </a>
 
                     <a href="/profile" class="btn btn-sm btn-dark rounded-circle d-inline-flex d-md-none align-items-center justify-content-center border-0 p-0 shadow-sm"
@@ -186,7 +183,6 @@
         </nav>
     </div>
 
-    @* --- MAIN INDEPENDENT SCROLL LAYER --- *@
     <div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
         <main class="position-relative" style="z-index: 5;">
             <CascadingValue Value="GlobalSearchQuery">
@@ -247,56 +243,3 @@
     </div>
 </div>
 
-@code {
-    private string GlobalSearchQuery { get; set; } = string.Empty;
-    private bool IsSearchActive { get; set; } = false;
-    private bool IsCartOpen { get; set; } = false;
-
-    private List<CartItem> CartItems = new()
-    {
-        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
-        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
-        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
-    };
-
-    private void ToggleGlobalSearch() => IsSearchActive = !IsSearchActive;
-    private void ToggleCart() => IsCartOpen = !IsCartOpen;
-
-    private void OnSearchInput(ChangeEventArgs e)
-    {
-        GlobalSearchQuery = e.Value?.ToString() ?? string.Empty;
-    }
-
-    private void ChangeQuantity(CartItem item, int delta)
-    {
-        item.Quantity += delta;
-        if (item.Quantity <= 0)
-        {
-            CartItems.Remove(item);
-        }
-    }
-
-    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
-    private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
-
-    private void RedirectToCart()
-    {
-        IsCartOpen = false;
-        Navigation.NavigateTo("/cart");
-    }
-
-    private void RedirectToCheckout()
-    {
-        IsCartOpen = false;
-        Navigation.NavigateTo("/checkout");
-    }
-
-    public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }
-}

MidrandBookshop/Components/Layout/MainLayout.razor.cs

@@ -0,0 +1,131 @@
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.WebUtilities;
+
+namespace MidrandBookshop.Components.Layout;
+
+public partial class MainLayout : IDisposable
+{
+    private string SearchInputBuffer { get; set; } = string.Empty;
+    private string GlobalSearchQuery { get; set; } = string.Empty;
+    private bool IsSearchActive { get; set; } = false;
+    private bool IsCartOpen { get; set; } = false;
+
+    private List<CartItem> CartItems = new()
+    {
+        new CartItem { Id = 1, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Quantity = 1 },
+        new CartItem { Id = 2, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Quantity = 1 },
+        new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
+    };
+
+    protected override void OnInitialized()
+    {
+        Navigation.LocationChanged += OnLocationChanged;
+
+        SyncSearchQueryFromUrl();
+    }
+
+    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        SyncSearchQueryFromUrl();
+        StateHasChanged();
+    }
+
+    private void SyncSearchQueryFromUrl()
+    {
+        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
+        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
+
+        if (queryParameters.TryGetValue("q", out var queryVal) && !string.IsNullOrWhiteSpace(queryVal))
+        {
+            GlobalSearchQuery = queryVal.ToString();
+            SearchInputBuffer = GlobalSearchQuery;
+            IsSearchActive = true;
+        }
+        else
+        {
+            GlobalSearchQuery = string.Empty;
+            SearchInputBuffer = string.Empty;
+            IsSearchActive = false;
+        }
+    }
+
+    private void ToggleGlobalSearch()
+    {
+        if (!IsSearchActive)
+            IsSearchActive = true;
+        else
+            CommitSearchNavigation();
+    }
+
+    private void HandleSearchKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter") CommitSearchNavigation();
+    }
+
+    private void CommitSearchNavigation()
+    {
+        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
+        var queryParameters = QueryHelpers.ParseQuery(uri.Query);
+
+        var newRouteParams = new Dictionary<string, object?>();
+
+        foreach (var param in queryParameters)
+        {
+            if (param.Key != "q")
+            {
+                newRouteParams[param.Key] = param.Value.ToString();
+            }
+        }
+
+        if (!string.IsNullOrWhiteSpace(SearchInputBuffer))
+            newRouteParams["q"] = SearchInputBuffer.Trim();
+        else
+            newRouteParams["q"] = null;
+
+        var baseRoute = uri.AbsolutePath.StartsWith("/product/", StringComparison.OrdinalIgnoreCase) ? "/" : uri.AbsolutePath;
+        var updatedUri = Navigation.GetUriWithQueryParameters(baseRoute, newRouteParams);
+
+        Navigation.NavigateTo(updatedUri);
+    }
+
+    private void ToggleCart() => IsCartOpen = !IsCartOpen;
+
+    private void ChangeQuantity(CartItem item, int delta)
+    {
+        item.Quantity += delta;
+        if (item.Quantity <= 0)
+        {
+            CartItems.Remove(item);
+        }
+    }
+
+    private void RemoveFromCart(CartItem item) => CartItems.Remove(item);
+    private int GetCartTotal() => CartItems.Sum(item => item.Price * item.Quantity);
+
+    private void RedirectToCart()
+    {
+        IsCartOpen = false;
+        Navigation.NavigateTo("/cart");
+    }
+
+    private void RedirectToCheckout()
+    {
+        IsCartOpen = false;
+        Navigation.NavigateTo("/checkout");
+    }
+
+    public void Dispose()
+    {
+        Navigation.LocationChanged -= OnLocationChanged;
+    }
+
+    public class CartItem
+    {
+        public int Id { get; set; }
+        public string Title { get; set; } = string.Empty;
+        public string Author { get; set; } = string.Empty;
+        public int Price { get; set; }
+        public int Quantity { get; set; }
+    }
+}

MidrandBookshop/Components/Layout/MainLayout.razor.css

@@ -20,10 +20,10 @@
     transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.cart-overlay.is-visible {
-    opacity: 1;
-    pointer-events: auto;
-}
+    .cart-overlay.is-visible {
+        opacity: 1;
+        pointer-events: auto;
+    }
 
 .cart-drawer {
     position: fixed;
@@ -37,10 +37,10 @@
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.cart-drawer.is-open {
-    transform: translateX(-420px);
-    pointer-events: auto;
-}
+    .cart-drawer.is-open {
+        transform: translateX(-420px);
+        pointer-events: auto;
+    }
 
 .cart-badge {
     position: absolute;
@@ -71,16 +71,16 @@
     padding: 2px 4px;
 }
 
-.quantity-picker button {
-    font-size: 0.85rem;
-    font-weight: 600;
-    line-height: 1;
-}
+    .quantity-picker button {
+        font-size: 0.85rem;
+        font-weight: 600;
+        line-height: 1;
+    }
 
-.quantity-picker button:hover {
-    background-color: rgba(0,0,0,0.05);
-    border-radius: 50%;
-}
+        .quantity-picker button:hover {
+            background-color: rgba(0,0,0,0.05);
+            border-radius: 50%;
+        }
 
 .custom-site-footer {
     width: 100%;
@@ -120,9 +120,9 @@
     transition: color 0.2s ease;
 }
 
-.footer-contact-link:hover {
-    color: #FFFFFF !important;
-}
+    .footer-contact-link:hover {
+        color: #FFFFFF !important;
+    }
 
 .footer-section-heading {
     font-size: 0.65rem;
@@ -138,9 +138,9 @@
     transition: color 0.2s ease;
 }
 
-.footer-nav-link:hover {
-    color: #FFFFFF !important;
-}
+    .footer-nav-link:hover {
+        color: #FFFFFF !important;
+    }
 
 .footer-meta-item {
     font-size: 0.8rem;
@@ -179,15 +179,15 @@
     transition: transform 0.2s ease, background-color 0.2s ease;
 }
 
-.btn-back-to-top:hover {
-    background-color: #333333;
-    transform: translateY(-2px);
-}
+    .btn-back-to-top:hover {
+        background-color: #333333;
+        transform: translateY(-2px);
+    }
 
-.btn-back-to-top:active {
-    transform: translateY(0);
-}
+    .btn-back-to-top:active {
+        transform: translateY(0);
+    }
 
 .scroll-container {
     scroll-behavior: smooth;
-}
+}

MidrandBookshop/Components/Pages/Home.razor

@@ -1,7 +1,9 @@
 @page "/"
 @rendermode InteractiveServer
 
-<div id="top-target" class="container text-center text-hero-wrapper">
+<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
+
+<div class="container text-center text-hero-wrapper">
     <h1 class="display-3 text-dark mb-3 px-2 master-headline">
         Discover thoughtfully curated<br>books for every reader.
     </h1>
@@ -147,7 +149,7 @@
             {
                 <BookCard Id="@book.Id"
                           Title="@book.Name"
-                          Author="@(ActiveAuthorFilterName ?? "Multiple Authors")"
+                          Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
                           Price="@ProductPriceCache[book.Id]"
                           Category="@ProductPrimaryCategoryCache[book.Id]"
                           IsNew="@book.Enabled"
@@ -166,7 +168,7 @@
                      @onclick="() => NavigateToProduct(book.Id)">
                     <div class="d-flex align-items-center gap-4 structural-list-left">
                         <span class="text-dark fw-medium list-item-title">@book.Name</span>
-                        <span class="text-muted small list-item-author">by @(ActiveAuthorFilterName ?? "Multiple Authors")</span>
+                        <span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
                         <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
                     </div>
                     <div class="d-flex align-items-center gap-4">
@@ -196,7 +198,6 @@
 
 <a class="back-to-top-btn d-flex align-items-center justify-content-center"
    aria-label="Back to top"
-   href="#top-target"
-   onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">
+   href="#top-target">
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
 </a>

MidrandBookshop/Components/Pages/Home.razor.cs

@@ -1,4 +1,4 @@
-using LiteCharms.Features.MidrandBooks;
+using LiteCharms.Features;
 using LiteCharms.Features.MidrandBooks.AuthorBooks;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Categories;
@@ -16,9 +16,10 @@ public partial class Home : ComponentBase
     [Inject] private CategoryService CategoryService { get; set; } = default!;
     [Inject] private NavigationManager Navigation { get; set; } = default!;
 
-    [CascadingParameter] public string SharedSearchQuery { get; set; } = string.Empty;
+    [SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
     [SupplyParameterFromQuery] public long? AuthorId { get; set; }
 
+    private ElementReference topTargetRef;
     public enum ViewMode { Grid, List }
     private ViewMode CurrentViewMode = ViewMode.Grid;
     private string ActiveCategory = "All";
@@ -40,6 +41,7 @@ public partial class Home : ComponentBase
 
     private Dictionary<long, decimal> ProductPriceCache { get; set; } = [];
     private Dictionary<long, string> ProductPrimaryCategoryCache { get; set; } = [];
+    private Dictionary<long, string> ProductAuthorCache { get; set; } = [];
 
     private IEnumerable<Product> FilteredData
     {
@@ -47,19 +49,44 @@ public partial class Home : ComponentBase
         {
             var data = ProductsCollection.AsEnumerable();
 
-            // Category filtering restricts rendering solely when checking the open catalog
             if (ActiveCategory != "All" && !AuthorId.HasValue)
+            {
                 data = data.Where(p => ProductPrimaryCategoryCache.ContainsKey(p.Id) &&
                     ProductPrimaryCategoryCache[p.Id] == ActiveCategory);
+            }
 
-            // Text matching is completely restricted from evaluating author metadata properties
             if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
             {
                 var q = SharedSearchQuery.Trim();
-
                 data = data.Where(p => (p.Name ?? "").Contains(q, StringComparison.OrdinalIgnoreCase));
             }
 
+            if (ActivePriceFilter != "all")
+            {
+                data = data.Where(p =>
+                {
+                    var price = ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m;
+
+                    return ActivePriceFilter switch
+                    {
+                        "under-500" => price < 500m,
+                        "500-1000" => price >= 500m && price <= 1000m,
+                        "over-1000" => price > 1000m,
+                        _ => true
+                    };
+                });
+            }
+
+            if (OnlyShowNew) data = data.Where(p => p.Enabled);
+
+            data = SelectedSortOption switch
+            {
+                "price-low" => data.OrderBy(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
+                "price-high" => data.OrderByDescending(p => ProductPriceCache.TryGetValue(p.Id, out var amt) ? amt : 0m),
+                "title-asc" => data.OrderBy(p => p.Name ?? string.Empty, StringComparer.OrdinalIgnoreCase),
+                "default" or _ => data
+            };
+
             return data;
         }
     }
@@ -75,9 +102,9 @@ public partial class Home : ComponentBase
         ProductsCollection.Clear();
         ProductPriceCache.Clear();
         ProductPrimaryCategoryCache.Clear();
+        ProductAuthorCache.Clear();
         ActiveAuthorFilterName = null;
 
-        // Pipeline A: Extract scoped books directly associated with an ID token parameter
         if (AuthorId.HasValue)
         {
             var authorResult = await AuthorService.GetAuthorAsync(AuthorId.Value);
@@ -102,9 +129,10 @@ public partial class Home : ComponentBase
                         var product = authorBook.Product;
 
                         ProductsCollection.Add(product);
-
                         ProductPriceCache[product.Id] = product.Price?.Amount ?? 0m;
 
+                        ProductAuthorCache[product.Id] = ActiveAuthorFilterName ?? "Unknown Author";
+
                         var categoryResult = await ProductService.GetProductCategoriesAsync(product.Id);
 
                         ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
@@ -116,7 +144,6 @@ public partial class Home : ComponentBase
             return;
         }
 
-        // Pipeline B: Safe structural fallback mapping utilizing the exact backend DateRange object setup
         var selectionRange = new DateRange
         {
             From = new DateOnly(2020, 1, 1),
@@ -139,6 +166,10 @@ public partial class Home : ComponentBase
                 ProductPrimaryCategoryCache[product.Id] = (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
                     ? (categoryResult.Value[0].Name ?? "General")
                     : "General";
+
+                ProductAuthorCache[product.Id] = !string.IsNullOrWhiteSpace(product.Metadata?.Manufacturer)
+                    ? product.Metadata.Manufacturer
+                    : "Unknown Author";
             }
         }
 
@@ -156,15 +187,38 @@ public partial class Home : ComponentBase
         }
     }
 
-    private void ClearAuthorFilter() => Navigation.NavigateTo("/");
+    private void ClearAuthorFilter()
+    {
+        var newUri = Navigation.GetUriWithQueryParameters("/", new Dictionary<string, object?> { { "authorId", null } });
+
+        Navigation.NavigateTo(newUri);
+    }
+
+    private void ResetFilters()
+    {
+        SelectedSortOption = "default";
+        ActivePriceFilter = "all";
+        OnlyShowNew = false;
+        VisibleCount = ItemsPerPage;
+    }
+
     private void NavigateToProduct(long id) => Navigation.NavigateTo($"/product/{id}");
     private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
-    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
+
+    private void SelectCategory(string categoryName)
+    {
+        ActiveCategory = categoryName;
+        VisibleCount = ItemsPerPage;
+
+        var updatedUri = Navigation.GetUriWithQueryParameters(Navigation.Uri, new Dictionary<string, object?> {{ "q", null }});
+
+        Navigation.NavigateTo(updatedUri);
+    }
+
     private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
     private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
     private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
     private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
     private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
-    private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
     private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
 }

MidrandBookshop/Components/Pages/Home.razor.css

@@ -169,4 +169,9 @@ html {
         color: #ffffff !important;
         border-color: #ffffff !important;
         box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
-    }
+    }
+
+/* Direct the smooth scroll action straight to the layout viewport boundary */
+#top-target {
+    scroll-margin-top: 100vh;
+}

MidrandBookshop/Components/Pages/ProductView.razor.cs

@@ -1,4 +1,4 @@
-using LiteCharms.Features.MidrandBooks;
+using LiteCharms.Features;
 using LiteCharms.Features.MidrandBooks.Authors;
 using LiteCharms.Features.MidrandBooks.Authors.Models;
 using LiteCharms.Features.MidrandBooks.Products;
@@ -35,7 +35,6 @@ public partial class ProductView : ComponentBase
             CurrentAuthor = null;
             Thumbnails.Clear();
 
-            // 1. Resolve product listing details
             var productResult = await ProductService.GetProductAsync(BookId);
 
             if (productResult.IsSuccess && productResult.Value != null)
@@ -43,31 +42,24 @@ public partial class ProductView : ComponentBase
                 CurrentProduct = productResult.Value;
                 AuthorName = CurrentProduct.Metadata?.Manufacturer ?? "Unknown Author";
 
-                // 2. Load pricing data
                 var priceResult = await ProductService.GetProductPriceAsync(BookId);
                 LivePrice = priceResult.IsSuccess ? priceResult.Value.Amount : 0m;
 
-                // 3. Extract active catalog categories
                 var categoryResult = await ProductService.GetProductCategoriesAsync(BookId);
                 if (categoryResult.IsSuccess && categoryResult.Value.Length > 0)
-                {
                     PrimaryCategory = categoryResult.Value[0].Name ?? "General";
-                }
 
-                // 4. Retrieve complete contextual model through the newly instantiated AuthorService lookup
                 var authorResult = await AuthorService.GetAuthorByProductIdAsync(BookId);
                 if (authorResult.IsSuccess && authorResult.Value != null)
                 {
                     CurrentAuthor = authorResult.Value;
 
-                    // Format fully qualified author text cleanly depending on their publisher model details
                     if (CurrentAuthor.PublisherType == PublisherTypes.Company && !string.IsNullOrWhiteSpace(CurrentAuthor.Company))
                         AuthorName = CurrentAuthor.Company;
                     else
                         AuthorName = $"{CurrentAuthor.Name} {CurrentAuthor.LastName}".Trim();
                 }
 
-                // 5. Build presentation image viewer variables
                 if (!string.IsNullOrWhiteSpace(CurrentProduct.ImageUrl))
                     Thumbnails.Add(CurrentProduct.ImageUrl);
 

MidrandBookshop/Components/Pages/ProductView.razor.css

@@ -1,7 +1,6 @@
 /* ==========================================================================
    Structural Layout Containers
    ========================================================================== */
-
 .product-container {
     max-width: 1200px;
     margin: 0 auto;
@@ -18,7 +17,6 @@
 /* ==========================================================================
    Breadcrumb Navigation Links
    ========================================================================== */
-
 .breadcrumb {
     font-size: 0.85rem;
     margin-bottom: 2.5rem;
@@ -49,7 +47,6 @@
 /* ==========================================================================
    Left Section: Media Gallery Components
    ========================================================================== */
-
 .gallery-section {
     display: flex;
     flex-direction: column;
@@ -76,16 +73,21 @@
     mix-blend-mode: multiply;
 }
 
-/* Dynamic Overlaid Attribute Badges */
+/* Dynamic Overlaid Attribute Badges - Centered flawlessly without stacking */
 .format-badges {
-    position: absolute;
-    bottom: 1.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    white-space: nowrap;
+    position: absolute !important;
+    bottom: 1.5rem !important;
+    left: 50% !important; /* Move anchor point to exactly half-width */
+    right: auto !important;
+    transform: translateX(-50%) !important; /* Offset width symmetrically to center perfectly */
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important; /* Firmly prevents items from stacking vertically */
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    width: max-content !important; /* Expands safely according to badges text values */
+    max-width: 90% !important; /* Keeps bounding box clean of parent borders */
 }
 
 .badge {
@@ -96,6 +98,8 @@
     border-radius: 100px;
     font-weight: 600;
     border: 1px solid transparent;
+    display: inline-block !important;
+    white-space: nowrap !important; /* Protects badge inner labels from broken line wrapping */
 }
 
 .badge-physical {
@@ -148,7 +152,6 @@
 /* ==========================================================================
    Right Section: Product Details & Typography Controls
    ========================================================================== */
-
 .details-section {
     display: flex;
     flex-direction: column;
@@ -209,7 +212,6 @@
 /* ==========================================================================
    Interactive E-Commerce Selection Bars
    ========================================================================== */
-
 .purchase-actions {
     display: flex;
     gap: 1rem;
@@ -274,7 +276,6 @@
 /* ==========================================================================
    Informational Text Elements & Links
    ========================================================================== */
-
 .info-block {
     margin-bottom: 2rem;
 }
@@ -321,7 +322,6 @@
 /* ==========================================================================
    Responsive Adaptations & Breakpoints
    ========================================================================== */
-
 @media (max-width: 992px) {
     .product-layout {
         grid-template-columns: 1fr;
@@ -338,6 +338,25 @@
         padding: 1rem 1rem;
     }
 
+    .main-image-wrapper {
+        min-height: 320px;
+        padding: 2rem 1rem 4.5rem 1rem; /* Extra padding baseline clearance */
+    }
+
+    .main-image {
+        max-height: 240px; /* Fluidly limits image height to avoid overlay overlapping */
+    }
+
+    .format-badges {
+        bottom: 1.25rem !important; /* Fits beautifully aligned at the bottom center */
+        gap: 0.4rem !important;
+    }
+
+    .badge {
+        font-size: 0.65rem !important; /* Clean uniform scaling factor to clear margins */
+        padding: 0.25rem 0.65rem !important;
+    }
+
     .product-title {
         font-size: 1.85rem;
     }

MidrandBookshop/Components/Pages/Profile.razor

@@ -1,198 +1,209 @@
 @page "/profile"
+@using Microsoft.AspNetCore.Components.Authorization
+@inject NavigationManager Navigation
+@rendermode InteractiveServer
 
-<div class="container py-5">
-    <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
-    <div class="row g-5">
-        <div class="col-md-3">
-            <div class="nav flex-column nav-pills" role="tablist">
-                <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
-                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
-                <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
-                <hr />
-                <button class="nav-link text-danger text-start">Logout</button>
-            </div>
-        </div>
-
-        <div class="col-md-9">
-            <div class="tab-content">
-
-                <div class="tab-pane fade show active" id="orders" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Order History</h5>
+<AuthorizeView>
+    <Authorized>
+        <div class="container py-5">
+            <h2 class="fw-bold mb-5 tracking-tight">My Account</h2>
+            <div class="row g-5">
+                <div class="col-md-3">
+                    <div class="nav flex-column nav-pills" role="tablist">
+                        <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#orders" role="tab">Order History</button>
+                        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#shipping" role="tab">Shipping Address</button>
+                        <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#profile" role="tab">Profile Settings</button>
+                        <hr />
+                        <button class="nav-link text-danger text-start" @onclick="TriggerLogout">Logout</button>
                     </div>
+                </div>
 
-                    <div class="d-flex flex-column gap-3">
-                        @if (orderHistory != null)
-                        {
-                            @foreach (var order in orderHistory)
+                <div class="col-md-9">
+                    <div class="tab-content">
+
+                        <div class="tab-pane fade show active" id="orders" role="tabpanel">
+                            <div class="d-flex justify-content-between align-items-center mb-4">
+                                <h5 class="fw-bold m-0">Order History</h5>
+                            </div>
+
+                            <div class="d-flex flex-column gap-3">
+                                @if (orderHistory != null)
+                                {
+                                    @foreach (var order in orderHistory)
+                                    {
+                                        <div class="card p-4 shadow-sm order-history-card">
+                                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
+
+                                                <div class="flex-grow-1 w-100">
+                                                    <div class="order-meta-track mb-2">
+                                                        <div class="meta-item-id">
+                                                            <span class="fw-bold text-dark">@order.OrderId</span>
+                                                        </div>
+                                                        <div class="meta-item-date">
+                                                            <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
+                                                        </div>
+                                                        <div class="meta-item-status">
+                                                            <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
+                                                                @order.Status
+                                                            </span>
+                                                        </div>
+                                                    </div>
+
+                                                    <h6 class="mb-2">
+                                                        <a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
+                                                            @order.ProductTitle
+                                                        </a>
+                                                    </h6>
+
+                                                    <div class="d-flex align-items-center text-secondary small">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
+                                                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
+                                                        </svg>
+                                                        <span class="text-muted">Shipped to:</span>&nbsp;@order.ShippingAddressName
+                                                    </div>
+                                                </div>
+
+                                                <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
+                                                    <div class="text-sm-end mb-sm-2">
+                                                        <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
+                                                        <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
+                                                    </div>
+
+                                                    <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                            <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
+                                                        </svg>
+                                                    </button>
+                                                </div>
+
+                                            </div>
+                                        </div>
+                                    }
+                                }
+                                else
+                                {
+                                    <div class="card p-4 text-center text-muted">
+                                        Loading order history...
+                                    </div>
+                                }
+                            </div>
+                        </div>
+
+                        <div class="tab-pane fade" id="shipping" role="tabpanel">
+                            <div class="d-flex justify-content-between align-items-center mb-4">
+                                <h5 class="fw-bold m-0">Saved Addresses</h5>
+                                @if (!showAddForm && editingAddress == null)
+                                {
+                                    <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
+                                }
+                            </div>
+
+                            @if (showAddForm)
                             {
-                                <div class="card p-4 shadow-sm order-history-card">
-                                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start gap-3">
-
-                                        <div class="flex-grow-1 w-100">
-                                            <div class="order-meta-track mb-2">
-                                                <div class="meta-item-id">
-                                                    <span class="fw-bold text-dark">@order.OrderId</span>
-                                                </div>
-                                                <div class="meta-item-date">
-                                                    <span class="text-muted small">@order.OrderDate.ToString("MMM dd, yyyy")</span>
-                                                </div>
-                                                <div class="meta-item-status">
-                                                    <span class="badge @(order.Status?.ToLower() == "shipped" ? "status-shipped" : "status-delivered") text-uppercase">
-                                                        @order.Status
-                                                    </span>
-                                                </div>
-                                            </div>
-
-                                            <h6 class="mb-2">
-                                                <a href="/products/@order.ProductId" class="product-link fw-medium" title="@order.ProductTitle">
-                                                    @order.ProductTitle
-                                                </a>
-                                            </h6>
-
-                                            <div class="d-flex align-items-center text-secondary small">
-                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" class="me-1 text-muted flex-shrink-0">
-                                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
-                                                </svg>
-                                                <span class="text-muted">Shipped to:</span>&nbsp;@order.ShippingAddressName
-                                            </div>
-                                        </div>
-
-                                        <div class="d-flex flex-row flex-sm-column align-items-center align-items-sm-end justify-content-between w-100 w-sm-auto pt-2 pt-sm-0 border-top border-sm-top-0 border-light">
-                                            <div class="text-sm-end mb-sm-2">
-                                                <span class="text-muted xx-small d-block text-uppercase font-monospace tracking-wider">Total Paid</span>
-                                                <span class="fw-bold text-dark fs-5">R @order.Total.ToString("N2")</span>
-                                            </div>
-
-                                            <button class="btn btn-link p-0 text-dark action-btn mt-sm-1" title="Download Invoice" @onclick="() => DownloadInvoice(order.OrderId)">
-                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                                    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" />
-                                                </svg>
-                                            </button>
-                                        </div>
-
+                                <div class="card p-4 border shadow-sm mb-4 bg-light">
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <h6 class="fw-bold m-0">New Address</h6>
+                                        <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
+                                    </div>
+                                    <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
+                                    <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="text" class="form-control" placeholder="City" @bind="newCity" />
+                                        <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
+                                    </div>
+                                    <div class="mb-3 d-flex gap-3">
+                                        <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
+                                        <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
+                                    </div>
+                                    <div class="d-flex">
+                                        <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
                                     </div>
                                 </div>
                             }
-                        }
-                        else
-                        {
-                            <div class="card p-4 text-center text-muted">
-                                Loading order history...
-                            </div>
-                        }
-                    </div>
-                </div>
 
-                <div class="tab-pane fade" id="shipping" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Saved Addresses</h5>
-                        @if (!showAddForm && editingAddress == null)
-                        {
-                            <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="OpenAddForm">+ Add New</button>
-                        }
-                    </div>
-
-                    @if (showAddForm)
-                    {
-                        <div class="card p-4 border shadow-sm mb-4 bg-light">
-                            <div class="d-flex justify-content-between align-items-center mb-3">
-                                <h6 class="fw-bold m-0">New Address</h6>
-                                <button type="button" class="btn-close" @onclick="() => showAddForm = false"></button>
-                            </div>
-                            <input type="text" class="form-control mb-2" placeholder="Address Name (e.g. Home, Office)" @bind="newAddressName" />
-                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="newStreetAddress" />
-                            <div class="d-flex gap-2 mb-3">
-                                <input type="text" class="form-control" placeholder="City" @bind="newCity" />
-                                <input type="text" class="form-control" placeholder="Postal Code" @bind="newPostalCode" />
-                            </div>
-                            <div class="mb-3 d-flex gap-3">
-                                <label class="pointer-label"><input type="checkbox" @bind="isBilling" /> Billing</label>
-                                <label class="pointer-label"><input type="checkbox" @bind="isShipping" /> Shipping</label>
-                            </div>
-                            <div class="d-flex">
-                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="SaveAddress">Save Address</button>
-                            </div>
-                        </div>
-                    }
-
-                    @if (editingAddress != null)
-                    {
-                        <div class="card p-4 border shadow-sm mb-4 bg-light">
-                            <div class="d-flex justify-content-between align-items-center mb-3">
-                                <h6 class="fw-bold m-0">Edit Address</h6>
-                                <button type="button" class="btn-close" @onclick="CancelEditing"></button>
-                            </div>
-                            <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
-                            <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
-                            <div class="d-flex gap-2 mb-3">
-                                <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
-                                <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
-                            </div>
-                            <div class="mb-3 d-flex gap-3">
-                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
-                                <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
-                            </div>
-                            <div class="d-flex">
-                                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
-                            </div>
-                        </div>
-                    }
-
-                    @foreach (var addr in savedAddresses)
-                    {
-                        <div class="card p-4 shadow-sm mb-3 address-card">
-                            <div class="d-flex justify-content-between align-items-start">
-                                <div>
-                                    <h6 class="fw-bold mb-1">@addr.Name</h6>
-                                    <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
-                                    <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
-                                        @if (addr.IsBilling)
-                                        {
-                                            <span class="badge badge-tag">[Billing]</span>
-                                        }
-                                        @if (addr.IsShipping)
-                                        {
-                                            <span class="badge badge-tag">[Shipping]</span>
-                                        }
+                            @if (editingAddress != null)
+                            {
+                                <div class="card p-4 border shadow-sm mb-4 bg-light">
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <h6 class="fw-bold m-0">Edit Address</h6>
+                                        <button type="button" class="btn-close" @onclick="CancelEditing"></button>
+                                    </div>
+                                    <input type="text" class="form-control mb-2" placeholder="Address Name" @bind="editingAddress.Name" />
+                                    <input type="text" class="form-control mb-2" placeholder="Street Address" @bind="editingAddress.Street" />
+                                    <div class="d-flex gap-2 mb-3">
+                                        <input type="text" class="form-control" placeholder="City" @bind="editingAddress.City" />
+                                        <input type="text" class="form-control" placeholder="Postal Code" @bind="editingAddress.PostalCode" />
+                                    </div>
+                                    <div class="mb-3 d-flex gap-3">
+                                        <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsBilling" /> Billing</label>
+                                        <label class="pointer-label"><input type="checkbox" @bind="editingAddress.IsShipping" /> Shipping</label>
+                                    </div>
+                                    <div class="d-flex">
+                                        <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="UpdateAddress">Update Address</button>
                                     </div>
                                 </div>
+                            }
 
-                                <div class="d-flex align-items-center gap-2 actions-container">
-                                    <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
-                                        <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
-                                    </label>
+                            @foreach (var addr in savedAddresses)
+                            {
+                                <div class="card p-4 shadow-sm mb-3 address-card">
+                                    <div class="d-flex justify-content-between align-items-start">
+                                        <div>
+                                            <h6 class="fw-bold mb-1">@addr.Name</h6>
+                                            <p class="mb-2 text-muted">@addr.Street, @addr.City, @addr.PostalCode</p>
+                                            <div class="d-flex gap-2 text-uppercase font-monospace text-muted small">
+                                                @if (addr.IsBilling)
+                                                {
+                                                    <span class="badge badge-tag">[Billing]</span>
+                                                }
+                                                @if (addr.IsShipping)
+                                                {
+                                                    <span class="badge badge-tag">[Shipping]</span>
+                                                }
+                                            </div>
+                                        </div>
 
-                                    <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-                                        </svg>
-                                    </button>
+                                        <div class="d-flex align-items-center gap-2 actions-container">
+                                            <label class="small text-muted d-flex align-items-center gap-1 m-0 pointer-label me-2">
+                                                <input type="checkbox" checked="@addr.IsPrimary" @onchange="(e) => SetPrimary(addr, e)" /> Primary
+                                            </label>
 
-                                    <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
-                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-                                        </svg>
-                                    </button>
+                                            <button class="btn btn-link p-0 text-dark action-btn" title="Edit Address" @onclick="() => StartEditing(addr)">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+                                                </svg>
+                                            </button>
+
+                                            <button class="btn btn-link p-0 text-danger action-btn" title="Delete Address" @onclick="() => DeleteAddress(addr)">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="svg-icon">
+                                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
                                 </div>
+                            }
+                        </div>
+
+                        <div class="tab-pane fade" id="profile" role="tabpanel">
+                            <div class="d-flex justify-content-between align-items-center mb-4">
+                                <h5 class="fw-bold m-0">Profile Settings</h5>
+                            </div>
+                            <div class="card p-4 shadow-sm">
+                                <p class="text-muted mb-0">Manage your password and profile data here.</p>
                             </div>
                         </div>
-                    }
-                </div>
 
-                <div class="tab-pane fade" id="profile" role="tabpanel">
-                    <div class="d-flex justify-content-between align-items-center mb-4">
-                        <h5 class="fw-bold m-0">Profile Settings</h5>
-                    </div>
-                    <div class="card p-4 shadow-sm">
-                        <p class="text-muted mb-0">Manage your password and profile data here.</p>
                     </div>
                 </div>
-
             </div>
         </div>
-    </div>
-</div>
+    </Authorized>
+    
+    <NotAuthorized>
+        <RedirectToLogin />
+    </NotAuthorized>
+</AuthorizeView>
 
 @code {
     private bool showAddForm = false;
@@ -216,6 +227,8 @@
         new AddressItem { Id = 3, Name = "Midrand Books Warehouse", Street = "Unit 8, Corporate Park North", City = "Randjespark", PostalCode = "1683", IsBilling = false, IsShipping = true, IsPrimary = false }
     };
 
+    private void TriggerLogout() => Navigation.NavigateTo("/logout", forceLoad: true);
+
     private void DownloadInvoice(string orderId)
     {
         // Handle invoice downloading logic here

MidrandBookshop/Components/RedirectToLogin.razor

@@ -0,0 +1,10 @@
+@inject NavigationManager Navigation
+
+@code {
+    protected override void OnInitialized()
+    {
+        var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
+
+        Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
+    }
+}

MidrandBookshop/Components/Routes.razor

@@ -1,12 +1,20 @@
-@using MidrandBookshop.Components.Pages
-<Router AppAssembly="@typeof(Program).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <NotFound />
-        </LayoutView>
-    </NotFound>
-</Router>
+@using Microsoft.AspNetCore.Components.Authorization
+@using MidrandBookshop.Components.Pages
+
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(Program).Assembly">
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                <NotAuthorized>                    
+                    <RedirectToLogin />
+                </NotAuthorized>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+        <NotFound>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <NotFound />
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingAuthenticationState>

MidrandBookshop/MidrandBookshop.csproj

@@ -18,13 +18,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="LiteCharms.Features" Version="1.56.0" />
+    <PackageReference Include="LiteCharms.Features" Version="1.86.0" />
   </ItemGroup>
 
   <!-- UI -->
   <ItemGroup>
     <PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
-    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.56.0" />
+    <PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.86.0" />
     
     <!-- Global Usings -->
     <Using Include="Blazored.Toast.Services" />

MidrandBookshop/Program.cs

@@ -1,9 +1,12 @@
 using LiteCharms.Features.Extensions;
 using LiteCharms.Features.Mediator;
 using LiteCharms.Features.MidrandBooks.Extensions;
+using Microsoft.AspNetCore.HttpOverrides;
 using MidrandBookshop.Components;
 using static LiteCharms.Features.Extensions.Quartz;
 
+AppContext.SetSwitch("Microsoft.IdentityModel.DisableTelemetry", true);
+
 var builder = WebApplication.CreateBuilder(args);
 
 builder.Services.AddRazorComponents()
@@ -13,6 +16,7 @@ builder.AddMonitoring();
 builder.Services.AddEndpointsApiExplorer();
 
 builder.Services.AddMediator();
+builder.Services.AddAuthentikUiSecurity(builder.Configuration);
 
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
 builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
@@ -22,15 +26,27 @@ builder.Services.AddQuartzSchedulerClient(MidrandShopSchedulerName, builder.Conf
 builder.Services.AddEmailServices(builder.Configuration);
 builder.Services.AddEmailServiceBus();
 
+builder.Services.AddHttpClient();
 builder.Services.AddShopServices();
+builder.Services.AddHashServices(builder.Configuration);
 builder.Services.AddMidrandShopDatabase(builder.Configuration);
 
 builder.Services.AddMidrandShopPostgresHealthCheck();
 builder.Services.AddMidrandShopQuartzHealthCheck();
 builder.Services.AddHealthChecksSupport(builder.Configuration);
+builder.Services.AddCascadingAuthenticationState();
+
+builder.Services.Configure<ForwardedHeadersOptions>(options =>
+{
+    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
+    options.KnownProxies.Clear();
+});
 
 var app = builder.Build();
 
+app.UseForwardedHeaders();
+app.AddSecurityEndpoints();
+
 var schedulerFactory = app.Services.GetRequiredService<ISchedulerFactory>();
 var scheduler = await schedulerFactory.GetScheduler(MidrandShopSchedulerName);
 

MidrandBookshop/appsettings.json

@@ -1,4 +1,12 @@
 {
+  "AuthentikSettings": {
+    "Authority": "https://id.khongisa.co.za/application/o/midrand-books-uat/",
+    "MetadataEndpoint": "https://id.khongisa.co.za/application/o/midrand-books-uat/.well-known/openid-configuration",
+    "RevokationEndpoint": "https://id.khongisa.co.za/application/o/revoke/"
+  },
+  "HasherSettings": {
+    "MinHashLength": 11
+  },
   "BookshopS3Settings": {
     "ServiceUrl": "http://192.168.1.177:30900",
     "Region": "garage",

midrandbooks-uat.yml

@@ -14,6 +14,22 @@ data:
   ASPNETCORE_URLS: "http://0.0.0.0:8080"
   Monitoring__Address: "http://aspire-dashboard-service.aspire.svc.cluster.local:18889"
   Monitoring__ServiceName: "MidrandBooks.Uat"
+  HasherSettings__MinHashLength: "11"
+  BookshopS3Settings__ServiceUrl: "http://garage.garage.svc.cluster.local:3900"
+  BookshopS3Settings__Region: "garage"
+  BookshopS3Settings__BucketName: "bookshop"
+  BookshopS3Settings__CdnBaseUrl: "https://bookshop.cdn.khongisa.co.za"
+  ValidPayfastHosts__0: "www.payfast.co.za"
+  ValidPayfastHosts__1: "sandbox.payfast.co.za"
+  ValidPayfastHosts__2: "w1w.payfast.co.za"
+  ValidPayfastHosts__3: "w2w.payfast.co.za"
+  ValidPayfastHosts__4: "ips.payfast.co.za"
+  ValidPayfastHosts__5: "api.payfast.co.za"
+  ValidPayfastHosts__6: "payment.payfast.io"
+  AuthentikSettings__Authority: "https://id.khongisa.co.za/application/o/midrand-books-api-uat/"
+  AuthentikSettings__MetadataEndpoint: "https://id.khongisa.co.za/application/o/midrand-books-uat/.well-known/openid-configuration"
+  AuthentikSettings__RevokationEndpoint: "https://id.khongisa.co.za/application/o/revoke/"
+  ASPNETCORE_FORWARDEDHEADERS_ENABLED: "true"
 ---
 apiVersion: v1
 kind: Secret
@@ -25,6 +41,12 @@ data:
   connection-string: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPW1pZHJhbmRzaG9wLWRldjtVc2VybmFtZT1taWRyYW5kc2hvcC1kZXYtdXNlcjtQYXNzd29yZD1hUFh5a0tnM3RTOWNtRDtQZXJzaXN0IFNlY3VyaXR5IEluZm89VHJ1ZQ==
   connection-string-quartz: SG9zdD0xOTIuMTY4LjEuMTcwO0RhdGFiYXNlPXNjaGVkdWxlci1kZXY7VXNlcm5hbWU9c2NoZWR1bGVyLWRldi11c2VyO1Bhc3N3b3JkPWtWVm1vV0tKM3h6Z1FYO1BlcnNpc3QgU2VjdXJpdHkgSW5mbz1UcnVl
   aspire-apikey: bWMzRzYzSzJqNVpPRXNpMEFqTW9qTFRYbTFLRVpGY3R6SUlqU3dEaVRHdXQ4cUdTa1B1V3d4R1AxUmJzY0pVbw==
+  hasher-salt: VEdsbmFIUWdRMmhoY20xekxDQk5hV1J5WVc1a1FtOXZhM01nYldGclpTQnNiM1J6SUc5bUlHMXZibVY1SUdGdVpDQmhjbVVnWVNCemRXTmpaWE56Wm5Wc0lIWnBjbUZzSUhOMGIzSjVJR2x1SUZOdmRYUm9JRUZtY21sallRPT0=
+  hasher-payfastpassphrase: OUdBSVIwdFdwaFgwcU8=
+  bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
+  bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
+  authentik-clientid: Nm9oZk1lSndQNWR0YWY1RFMzZU9MY2NNSHF6WXlma1YzRTNGeE5Tbw==
+  authentik-clientsecret: TXV2a0FLQklHR3BkdEsyaFlabVU1dFRaUmNuM2FhRzhoMWhlVE1nazFYOGVwczYyMzNCS0REWGdpNXo0T01RalVzMGZEUEFmakpmVVRNN1h3ZjllMU01MTQyVGlvOXRycUdmZTM1THhPaExEUnp6N2gxSm5jVkNLYXZXUllndmQ=
 ---
 apiVersion: v1
 kind: PersistentVolumeClaim
@@ -77,6 +99,36 @@ spec:
             - configMapRef:
                 name: midrandbooks-config
           env:
+            - name: AuthentikSettings__ClientId
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: authentik-clientid
+            - name: AuthentikSettings__ClientSecret
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: authentik-clientsecret
+            - name: BookshopS3Settings__AccessKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: bookshop-s3-accesskey
+            - name: BookshopS3Settings__SecretKey
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: bookshop-s3-secretkey
+            - name: HasherSettings__Salt
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: hasher-salt
+            - name: HasherSettings__PayfastPassphrase
+              valueFrom:
+                secretKeyRef:
+                  name: midrandbooks-secrets
+                  key: hasher-payfastpassphrase
             - name: ConnectionStrings__PostgresScheduler
               valueFrom:
                 secretKeyRef:
@@ -86,17 +138,7 @@ spec:
               valueFrom:
                 secretKeyRef:
                   name: midrandbooks-secrets
-                  key: connection-string            
-            - name: Monitoring__Address
-              valueFrom:
-                configMapKeyRef:
-                  name: midrandbooks-config
-                  key: Monitoring__Address
-            - name: Monitoring__ServiceName
-              valueFrom:
-                configMapKeyRef:
-                  name: midrandbooks-config
-                  key: Monitoring__ServiceName
+                  key: connection-string
             - name: Monitoring__ApiKey
               valueFrom:
                 secretKeyRef: