Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 khwezi
|
bbcf64aa65 | ||
 Khwezi Mngoma
|
a66a84af75 | ||
|
khwezi
|
a688bc816a | ||
|
Khwezi Mngoma
|
895d99a2e5 | ||
|
khwezi
|
4fe801583e | ||
|
Khwezi Mngoma
|
de714d2271 | ||
|
khwezi
|
af3d40531b | ||
|
Khwezi Mngoma
|
64b46865cf | ||
|
khwezi
|
bc2b9f81e0 | ||
|
Khwezi Mngoma
|
db74ffbebe | ||
|
khwezi
|
49279c0cec | ||
|
Khwezi Mngoma
|
8f68d8c60e | ||
|
khwezi
|
edabe266e5 | ||
|
Khwezi Mngoma
|
58dc67e680 | ||
|
khwezi
|
248dd32b1b | ||
|
Khwezi Mngoma
|
5123a4d3ac | ||
|
khwezi
|
1645b6bbae | ||
|
Khwezi Mngoma
|
ae51a3a864 |
@@ -162,22 +162,67 @@
|
||||
}
|
||||
</button>
|
||||
|
||||
<a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-none d-md-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<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>
|
||||
Account
|
||||
</a>
|
||||
<div class="dropdown header-account-dropdown">
|
||||
<button class="btn btn-sm d-flex align-items-center gap-1.5 p-1 text-dark border-0 dropdown-toggle no-caret"
|
||||
type="button"
|
||||
id="accountDropdownMenu"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<span class="d-none d-md-inline font-monospace text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.05em;">Account</span>
|
||||
</button>
|
||||
|
||||
<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"
|
||||
style="width: 32px; height: 32px;"
|
||||
aria-label="Log In">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<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>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end brand-dropdown-pane p-0 m-0" aria-labelledby="accountDropdownMenu">
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<li class="dropdown-header-identity p-3 border-bottom bg-light">
|
||||
<span class="d-block text-muted text-uppercase font-monospace xx-small" style="font-size: 0.6rem; letter-spacing: 0.1em;">Active Identity</span>
|
||||
<span class="fw-bold text-dark text-truncate d-block" style="font-size: 0.85rem;">@(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/account">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
My Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" target="_blank">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
Security Center
|
||||
</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider m-0" /></li>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-danger d-flex align-items-center gap-2" href="/logout">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16 17 21 12 16 7"></polyline>
|
||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
||||
</svg>
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-dark d-flex align-items-center gap-2" href="/login">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
|
||||
Sign In
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item p-2.5 font-monospace text-uppercase text-muted d-flex align-items-center gap-2" href="/account">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
Order Status
|
||||
</a>
|
||||
</li>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -18,6 +18,12 @@ public partial class MainLayout : IDisposable
|
||||
new CartItem { Id = 3, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Quantity = 1 }
|
||||
};
|
||||
|
||||
private void TriggerHeaderLogout()
|
||||
{
|
||||
// Force tear-down of the active client websocket pipeline safely
|
||||
Navigation.NavigateTo("/logout", forceLoad: true);
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Navigation.LocationChanged += OnLocationChanged;
|
||||
|
||||
@@ -191,3 +191,35 @@
|
||||
.scroll-container {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.no-caret::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane {
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
|
||||
min-width: 190px;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane .dropdown-item {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.02em;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane .dropdown-item:hover {
|
||||
background-color: #1A1A1A !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.brand-dropdown-pane .dropdown-item.text-danger:hover {
|
||||
background-color: #DC3545 !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.dropdown-header-identity {
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
@page "/account"
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@inject NavigationManager Navigation
|
||||
@rendermode InteractiveServer
|
||||
@attribute [Authorize]
|
||||
|
||||
<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="col-md-9">
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="profile-hero-banner mb-5 d-flex align-items-center justify-content-between p-4 border border-light bg-white">
|
||||
<div class="hero-text-content">
|
||||
<div class="meta-tag font-monospace text-uppercase text-muted mb-1">Customer Profile // Active Session</div>
|
||||
<h4 class="fw-bold mb-1 brand-greeting">Welcome back, @(context.User.FindFirst("given_name")?.Value ?? context.User.Identity?.Name ?? "Reader")!</h4>
|
||||
<p class="text-muted small mb-0 font-monospace">@context.User.FindFirst("email")?.Value</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-crest-svg d-none d-sm-block">
|
||||
<svg viewBox="0 0 100 100" width="70" height="70" stroke="#1A1A1A" stroke-width="1.5" fill="none">
|
||||
<circle cx="50" cy="50" r="40" stroke-dasharray="2 2" stroke="#DDD" />
|
||||
<circle cx="50" cy="50" r="30" />
|
||||
<polygon points="50,20 76,65 24,65" stroke="#1A1A1A" />
|
||||
<line x1="50" y1="20" x2="50" y2="80" stroke-width="1" stroke="#1A1A1A" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Authorized>
|
||||
</AuthorizeView>
|
||||
|
||||
<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 text-uppercase tracking-wider fs-6 text-muted">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 status-badge-base status-@order.Status?.ToLower() text-uppercase">
|
||||
@order.Status
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="mb-2">
|
||||
<a href="/products/@order.ProductId" class="product-link fw-medium text-dark text-decoration-none" 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 text-uppercase tracking-wider font-monospace" style="font-size: 0.7rem;">Shipping to:</span> <span class="text-dark fw-medium">@order.ShippingAddressName</span>
|
||||
</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" style="font-size: 0.6rem;">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" width="16" height="16" fill="currentColor" 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 text-uppercase tracking-wider fs-6 text-muted">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 bg-light text-dark border">[Billing]</span>
|
||||
}
|
||||
@if (addr.IsShipping)
|
||||
{
|
||||
<span class="badge bg-light text-dark border">[Shipping]</span>
|
||||
}
|
||||
</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>
|
||||
|
||||
<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" width="14" height="14" fill="currentColor">
|
||||
<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" width="14" height="14" fill="currentColor">
|
||||
<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 text-uppercase tracking-wider fs-6 text-muted">Profile Settings</h5>
|
||||
</div>
|
||||
<div class="card p-5 text-center bg-white border">
|
||||
<div class="mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#1A1A1A" stroke-width="1.5">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-2">Centralized Identity Management</h5>
|
||||
<p class="text-muted small mx-auto mb-4" style="max-width: 480px;">
|
||||
For your protection, password modifications, recovery settings, authentication methods, and core credentials are managed through our secure Identity Node.
|
||||
</p>
|
||||
<a href="https://sts.security.khongisa.co.za/Manage/Index?returnUrl=https://midrandbooks.co.za/account" class="btn btn-dark rounded-pill px-5 py-2.5 btn-sm font-monospace text-uppercase tracking-wider">
|
||||
Access Security Center
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool showAddForm = false;
|
||||
private AddressItem? editingAddress = null;
|
||||
private string newAddressName = "";
|
||||
private string newStreetAddress = "";
|
||||
private string newCity = "";
|
||||
private string newPostalCode = "";
|
||||
private bool isBilling, isShipping;
|
||||
|
||||
private List<OrderItem> orderHistory = new()
|
||||
{
|
||||
new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
|
||||
new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
|
||||
};
|
||||
|
||||
private List<AddressItem> savedAddresses = new()
|
||||
{
|
||||
new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
|
||||
new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
|
||||
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 download sequence here */ }
|
||||
private void OpenAddForm() { editingAddress = null; showAddForm = true; }
|
||||
|
||||
private void SaveAddress()
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
|
||||
{
|
||||
var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
|
||||
savedAddresses.Add(new AddressItem
|
||||
{
|
||||
Id = nextId,
|
||||
Name = newAddressName,
|
||||
Street = newStreetAddress,
|
||||
City = newCity,
|
||||
PostalCode = newPostalCode,
|
||||
IsBilling = isBilling,
|
||||
IsShipping = isShipping,
|
||||
IsPrimary = !savedAddresses.Any()
|
||||
});
|
||||
ResetAddForm();
|
||||
}
|
||||
}
|
||||
|
||||
private void ResetAddForm() { newAddressName = ""; newStreetAddress = ""; newCity = ""; newPostalCode = ""; isBilling = isShipping = showAddForm = false; }
|
||||
private void StartEditing(AddressItem addr) { showAddForm = false; editingAddress = new AddressItem { Id = addr.Id, Name = addr.Name, Street = addr.Street, City = addr.City, PostalCode = addr.PostalCode, IsBilling = addr.IsBilling, IsShipping = addr.IsShipping, IsPrimary = addr.IsPrimary }; }
|
||||
private void CancelEditing() => editingAddress = null;
|
||||
|
||||
private void UpdateAddress()
|
||||
{
|
||||
if (editingAddress != null)
|
||||
{
|
||||
var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
|
||||
if (target != null) { target.Name = editingAddress.Name; target.Street = editingAddress.Street; target.City = editingAddress.City; target.PostalCode = editingAddress.PostalCode; target.IsBilling = editingAddress.IsBilling; target.IsShipping = editingAddress.IsShipping; }
|
||||
editingAddress = null;
|
||||
}
|
||||
}
|
||||
|
||||
private void DeleteAddress(AddressItem addr) { if (editingAddress?.Id == addr.Id) editingAddress = null; savedAddresses.Remove(addr); if (addr.IsPrimary && savedAddresses.Any()) savedAddresses.First().IsPrimary = true; }
|
||||
|
||||
private void SetPrimary(AddressItem target, ChangeEventArgs e)
|
||||
{
|
||||
var isChecked = (bool)(e.Value ?? false);
|
||||
if (isChecked) { foreach (var addr in savedAddresses) addr.IsPrimary = (addr.Id == target.Id); }
|
||||
else target.IsPrimary = false;
|
||||
}
|
||||
|
||||
public class AddressItem { public int Id { get; set; } public string Name { get; set; } = ""; public string Street { get; set; } = ""; public string City { get; set; } = ""; public string PostalCode { get; set; } = ""; public bool IsBilling { get; set; } public bool IsShipping { get; set; } public bool IsPrimary { get; set; } }
|
||||
public class OrderItem { public string OrderId { get; set; } = ""; public string ProductId { get; set; } = ""; public string ProductTitle { get; set; } = ""; public DateTime OrderDate { get; set; } public string ShippingAddressName { get; set; } = ""; public string Status { get; set; } = ""; public double Total { get; set; } }
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
::deep .container {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
/* Navigation Layout Overrides - Black & White Architectural Style */
|
||||
.nav-pills .nav-link {
|
||||
color: #6c757d;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 500;
|
||||
font-family: var(--bs-body-font-family);
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 1px solid transparent;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Active State - Solid Black Fill with stark white text */
|
||||
.nav-pills .nav-link.active {
|
||||
background-color: #1A1A1A !important;
|
||||
color: #FFFFFF !important;
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Hover State for Unselected Buttons */
|
||||
.nav-pills .nav-link:hover:not(.active) {
|
||||
color: #1A1A1A;
|
||||
background-color: #F8F8F8 !important;
|
||||
}
|
||||
|
||||
/* Logout Button Link Alignment rules */
|
||||
.nav-pills .nav-link.text-danger {
|
||||
color: #DC3545 !important;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.text-danger:hover {
|
||||
background-color: #FFF5F5 !important;
|
||||
color: #A94442 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Profile Banner Design Definitions */
|
||||
.profile-hero-banner {
|
||||
border-color: rgba(0, 0, 0, 0.05) !important;
|
||||
background-color: #FAFAFA !important;
|
||||
}
|
||||
|
||||
.brand-greeting {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.hero-crest-svg svg {
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.profile-hero-banner:hover .hero-crest-svg svg {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
/* Cards Layout Rules */
|
||||
.card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.address-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* Order Meta Tracks & Status Badges Setup */
|
||||
.order-meta-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.status-badge-base {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 0.68rem !important;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0.35rem 0.65rem !important;
|
||||
border-radius: 0px !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-delivered {
|
||||
background-color: #E2F0D9 !important;
|
||||
color: #385723 !important;
|
||||
}
|
||||
|
||||
.status-shipped {
|
||||
background-color: #FFF2CC !important;
|
||||
color: #7F6000 !important;
|
||||
}
|
||||
|
||||
.status-processing, .status-pending {
|
||||
background-color: #F2F2F2 !important;
|
||||
color: #595959 !important;
|
||||
border: 1px dashed #D9D9D9;
|
||||
}
|
||||
|
||||
/* Restored Action Button Interactive Properties */
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #1A1A1A;
|
||||
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.pointer-label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tab-pane #profile .card {
|
||||
border: 1px dashed rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
@@ -1,377 +0,0 @@
|
||||
@page "/profile"
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
@inject NavigationManager Navigation
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<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="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> @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 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>
|
||||
}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</Authorized>
|
||||
|
||||
<NotAuthorized>
|
||||
<RedirectToLogin />
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@code {
|
||||
private bool showAddForm = false;
|
||||
private AddressItem? editingAddress = null;
|
||||
private string newAddressName = "";
|
||||
private string newStreetAddress = "";
|
||||
private string newCity = "";
|
||||
private string newPostalCode = "";
|
||||
private bool isBilling, isShipping;
|
||||
|
||||
private List<OrderItem> orderHistory = new()
|
||||
{
|
||||
new OrderItem { OrderId = "#MB-2026-9481", ProductId = "introduction-to-blazor", ProductTitle = "Introduction to Blazor WebAssembly Framework Development", OrderDate = new DateTime(2026, 5, 20), ShippingAddressName = "Home Address", Status = "Shipped", Total = 720.00 },
|
||||
new OrderItem { OrderId = "#MB-2026-8712", ProductId = "mastering-css-isolation", ProductTitle = "Mastering CSS Isolation in Modern .NET Web Applications Architecture", OrderDate = new DateTime(2026, 4, 14), ShippingAddressName = "Midrand Books Warehouse", Status = "Delivered", Total = 890.00 }
|
||||
};
|
||||
|
||||
private List<AddressItem> savedAddresses = new()
|
||||
{
|
||||
new AddressItem { Id = 1, Name = "Home Address", Street = "12 Main Road", City = "Midrand", PostalCode = "1685", IsBilling = true, IsShipping = true, IsPrimary = true },
|
||||
new AddressItem { Id = 2, Name = "Corporate Office", Street = "45 Challink Street", City = "Halfway House", PostalCode = "1682", IsBilling = true, IsShipping = false, IsPrimary = false },
|
||||
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
|
||||
}
|
||||
|
||||
private void OpenAddForm()
|
||||
{
|
||||
editingAddress = null;
|
||||
showAddForm = true;
|
||||
}
|
||||
|
||||
private void SaveAddress()
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(newAddressName) && !string.IsNullOrWhiteSpace(newStreetAddress))
|
||||
{
|
||||
var nextId = savedAddresses.Any() ? savedAddresses.Max(a => a.Id) + 1 : 1;
|
||||
var newItem = new AddressItem
|
||||
{
|
||||
Id = nextId,
|
||||
Name = newAddressName,
|
||||
Street = newStreetAddress,
|
||||
City = newCity,
|
||||
PostalCode = newPostalCode,
|
||||
IsBilling = isBilling,
|
||||
IsShipping = isShipping,
|
||||
IsPrimary = !savedAddresses.Any()
|
||||
};
|
||||
savedAddresses.Add(newItem);
|
||||
ResetAddForm();
|
||||
}
|
||||
}
|
||||
|
||||
private void ResetAddForm()
|
||||
{
|
||||
newAddressName = "";
|
||||
newStreetAddress = "";
|
||||
newCity = "";
|
||||
newPostalCode = "";
|
||||
isBilling = false;
|
||||
isShipping = false;
|
||||
showAddForm = false;
|
||||
}
|
||||
|
||||
private void StartEditing(AddressItem addr)
|
||||
{
|
||||
showAddForm = false;
|
||||
editingAddress = new AddressItem
|
||||
{
|
||||
Id = addr.Id,
|
||||
Name = addr.Name,
|
||||
Street = addr.Street,
|
||||
City = addr.City,
|
||||
PostalCode = addr.PostalCode,
|
||||
IsBilling = addr.IsBilling,
|
||||
IsShipping = addr.IsShipping,
|
||||
IsPrimary = addr.IsPrimary
|
||||
};
|
||||
}
|
||||
|
||||
private void UpdateAddress()
|
||||
{
|
||||
if (editingAddress != null)
|
||||
{
|
||||
var target = savedAddresses.FirstOrDefault(a => a.Id == editingAddress.Id);
|
||||
if (target != null)
|
||||
{
|
||||
target.Name = editingAddress.Name;
|
||||
target.Street = editingAddress.Street;
|
||||
target.City = editingAddress.City;
|
||||
target.PostalCode = editingAddress.PostalCode;
|
||||
target.IsBilling = editingAddress.IsBilling;
|
||||
target.IsShipping = editingAddress.IsShipping;
|
||||
}
|
||||
editingAddress = null;
|
||||
}
|
||||
}
|
||||
|
||||
private void CancelEditing()
|
||||
{
|
||||
editingAddress = null;
|
||||
}
|
||||
|
||||
private void DeleteAddress(AddressItem addr)
|
||||
{
|
||||
if (editingAddress?.Id == addr.Id)
|
||||
{
|
||||
editingAddress = null;
|
||||
}
|
||||
savedAddresses.Remove(addr);
|
||||
if (addr.IsPrimary && savedAddresses.Any())
|
||||
{
|
||||
savedAddresses.First().IsPrimary = true;
|
||||
}
|
||||
}
|
||||
|
||||
private void SetPrimary(AddressItem target, ChangeEventArgs e)
|
||||
{
|
||||
var isChecked = (bool)(e.Value ?? false);
|
||||
if (isChecked)
|
||||
{
|
||||
foreach (var addr in savedAddresses)
|
||||
{
|
||||
addr.IsPrimary = (addr.Id == target.Id);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
target.IsPrimary = false;
|
||||
}
|
||||
}
|
||||
|
||||
public class AddressItem
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Name { get; set; } = "";
|
||||
public string Street { get; set; } = "";
|
||||
public string City { get; set; } = "";
|
||||
public string PostalCode { get; set; } = "";
|
||||
public bool IsBilling { get; set; }
|
||||
public bool IsShipping { get; set; }
|
||||
public bool IsPrimary { get; set; }
|
||||
}
|
||||
|
||||
public class OrderItem
|
||||
{
|
||||
public string OrderId { get; set; } = "";
|
||||
public string ProductId { get; set; } = "";
|
||||
public string ProductTitle { get; set; } = "";
|
||||
public DateTime OrderDate { get; set; }
|
||||
public string ShippingAddressName { get; set; } = "";
|
||||
public string Status { get; set; } = "";
|
||||
public double Total { get; set; }
|
||||
|
||||
public string DisplayTitle
|
||||
{
|
||||
get
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(ProductTitle)) return "";
|
||||
const int maxLength = 21; // Shifted slightly down from 25 to protect bounds against lower resolutions
|
||||
return ProductTitle.Length <= maxLength
|
||||
? ProductTitle
|
||||
: $"{ProductTitle.Substring(0, maxLength)}...";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,204 +0,0 @@
|
||||
::deep .container {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
/* Navigation Layout overrides */
|
||||
.nav-pills .nav-link {
|
||||
color: #6c757d;
|
||||
border-radius: 0;
|
||||
padding: 0.75rem 0;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
background-color: transparent !important;
|
||||
color: #1A1A1A;
|
||||
border-bottom: 2px solid #1A1A1A;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link:hover:not(.active) {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Cards layout rules */
|
||||
.card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.address-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* Container Wrapper to Suppress the Scrollbar completely */
|
||||
.table-container-fixed {
|
||||
width: 100%;
|
||||
overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
|
||||
}
|
||||
|
||||
/* Global Table Typography - Reduced uniformly to keep items on a single line */
|
||||
.profile-table {
|
||||
font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
|
||||
width: 100%;
|
||||
table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
|
||||
}
|
||||
|
||||
.profile-table tbody td {
|
||||
padding-top: 0.85rem;
|
||||
padding-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.profile-table thead th {
|
||||
background-color: #F9F9F9;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.04rem;
|
||||
}
|
||||
|
||||
/* Compact Column Proportions */
|
||||
.col-order-id {
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
.col-date {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.col-total {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.col-status {
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
.col-invoice {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
width: auto; /* Takes shared residual space smoothly */
|
||||
}
|
||||
|
||||
.col-address {
|
||||
width: auto; /* Takes shared residual space smoothly */
|
||||
}
|
||||
|
||||
/* Product link handling */
|
||||
.product-link {
|
||||
color: #1A1A1A;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-link:hover {
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Base Badge Settings */
|
||||
.badge {
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Status Badge Palette Colors */
|
||||
.status-shipped {
|
||||
background-color: #e3f2fd !important;
|
||||
color: #0d6efd !important;
|
||||
border: 1px solid rgba(13, 110, 253, 0.15);
|
||||
}
|
||||
|
||||
.status-delivered {
|
||||
background-color: #e8f5e9 !important;
|
||||
color: #198754 !important;
|
||||
border: 1px solid rgba(25, 135, 84, 0.15);
|
||||
}
|
||||
|
||||
.badge-tag {
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #4a4a4a !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btn-outline-dark {
|
||||
border-radius: 50px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
/* Action button configurations */
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-btn.text-danger:hover {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Compact SVG Icons sizing */
|
||||
.svg-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pointer-label {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Shared Card Styling Unification Rules */
|
||||
.order-history-card {
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: 0; /* Matches your address card configuration */
|
||||
}
|
||||
|
||||
.order-history-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* Micro Typography Alignment */
|
||||
.xx-small {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments across layout break-points */
|
||||
@media (max-width: 575.98px) {
|
||||
.border-sm-top-0 {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,42 @@
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<div class="artistic-redirect-container">
|
||||
<div class="container h-100">
|
||||
<div class="row align-items-center justify-content-center min-vh-70 py-5">
|
||||
<div class="col-12 col-md-5 d-flex flex-column align-items-center text-center">
|
||||
|
||||
<div class="artistic-svg-wrapper mb-4">
|
||||
<svg viewBox="0 0 400 400" width="280" height="280" stroke="#1A1A1A" stroke-width="2" fill="none">
|
||||
<path d="M60 300 L340 300" stroke-dasharray="4 4" />
|
||||
|
||||
<path d="M120 300 L120 160 Q120 100 200 100 Q280 100 280 160 L280 300" />
|
||||
|
||||
<path d="M170 170 L230 170 L220 230 L200 250 L180 230 Z" fill="#F8F8F8" />
|
||||
<circle cx="200" cy="195" r="8" fill="#1A1A1A" />
|
||||
<line x1="200" y1="203" x2="200" y2="218" stroke-width="3" />
|
||||
|
||||
<circle class="animated-pulse-ring" cx="200" cy="180" r="60" stroke="#DDD" stroke-width="1" />
|
||||
<circle class="animated-pulse-ring-delayed" cx="200" cy="180" r="45" stroke="#EEE" stroke-width="1" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="editorial-spinner mb-4"></div>
|
||||
|
||||
<div class="meta-tag font-monospace text-uppercase text-muted mb-2">Secure Connection // Identity Node</div>
|
||||
<h2 class="fw-bold text-dark mb-3 editorial-subheadline">Verifying Session</h2>
|
||||
<p class="text-muted body-manifesto-text-center">
|
||||
Redirecting you safely to the identity gateway to authorize your access permissions...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);
|
||||
|
||||
Navigation.NavigateTo($"/login?redirectUri={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
|
||||
Navigation.NavigateTo($"/login?returnUrl={Uri.EscapeDataString(returnUrl)}", forceLoad: true);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
.artistic-redirect-container {
|
||||
background-color: #ffffff;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.artistic-svg-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editorial-subheadline {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.body-manifesto-text-center {
|
||||
font-size: 1rem;
|
||||
max-width: 360px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
/* Custom Minimalist Spinner Concept */
|
||||
.editorial-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #F0F0F0;
|
||||
border-top: 2px solid #1A1A1A; /* High contrast matching the SVG path line color */
|
||||
border-radius: 50%;
|
||||
animation: spin-editorial 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
/* Subtle background ring pulse paths */
|
||||
.animated-pulse-ring {
|
||||
transform-origin: 200px 180px;
|
||||
animation: gate-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animated-pulse-ring-delayed {
|
||||
transform-origin: 200px 180px;
|
||||
animation: gate-pulse 3s ease-in-out infinite;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes spin-editorial {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gate-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
@@ -9,3 +9,4 @@
|
||||
@using MidrandBookshop
|
||||
@using MidrandBookshop.Components
|
||||
@using MidrandBookshop.Components.Layout
|
||||
@using Microsoft.AspNetCore.Authorization;@using Microsoft.AspNetCore.Components.Authorization
|
||||
@@ -18,13 +18,13 @@
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="LiteCharms.Features" Version="1.82.0" />
|
||||
<PackageReference Include="LiteCharms.Features" Version="1.98.0" />
|
||||
</ItemGroup>
|
||||
|
||||
<!-- UI -->
|
||||
<ItemGroup>
|
||||
<PackageReference Include="ANM.Blazored.Toast" Version="0.1.1" />
|
||||
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.82.0" />
|
||||
<PackageReference Include="LiteCharms.Features.MidrandBooks" Version="1.98.0" />
|
||||
|
||||
<!-- Global Usings -->
|
||||
<Using Include="Blazored.Toast.Services" />
|
||||
|
||||
@@ -5,8 +5,6 @@ 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()
|
||||
@@ -16,7 +14,7 @@ builder.AddMonitoring();
|
||||
builder.Services.AddEndpointsApiExplorer();
|
||||
|
||||
builder.Services.AddMediator();
|
||||
builder.Services.AddAuthentikUiSecurity(builder.Configuration);
|
||||
builder.Services.AddLiteCharmsWebSecurity(builder.Configuration);
|
||||
|
||||
builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(TelemetryPipelineBehavior<,>));
|
||||
builder.Services.AddScoped(typeof(IPipelineBehavior<,>), typeof(LoggingPipelineBehavior<,>));
|
||||
@@ -34,7 +32,6 @@ builder.Services.AddMidrandShopDatabase(builder.Configuration);
|
||||
builder.Services.AddMidrandShopPostgresHealthCheck();
|
||||
builder.Services.AddMidrandShopQuartzHealthCheck();
|
||||
builder.Services.AddHealthChecksSupport(builder.Configuration);
|
||||
builder.Services.AddCascadingAuthenticationState();
|
||||
|
||||
builder.Services.Configure<ForwardedHeadersOptions>(options =>
|
||||
{
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"https": {
|
||||
"commandName": "Project",
|
||||
"dotnetRunMessages": true,
|
||||
"launchBrowser": true,
|
||||
"launchBrowser": false,
|
||||
"applicationUrl": "https://localhost:7021;http://localhost:5053",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
{
|
||||
"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/"
|
||||
"LiteCharmsSettings": {
|
||||
"Authority": "https://sts.security.khongisa.co.za"
|
||||
},
|
||||
"HasherSettings": {
|
||||
"MinHashLength": 11
|
||||
|
||||
@@ -26,9 +26,9 @@ data:
|
||||
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/"
|
||||
LiteCharmsSettings__Authority: "https://sts.security.khongisa.co.za"
|
||||
LiteCharmsSettings__Audience: "midrandbooks-api"
|
||||
ASPNETCORE_FORWARDEDHEADERS_ENABLED: "true"
|
||||
---
|
||||
apiVersion: v1
|
||||
kind: Secret
|
||||
@@ -44,8 +44,8 @@ data:
|
||||
hasher-payfastpassphrase: OUdBSVIwdFdwaFgwcU8=
|
||||
bookshop-s3-accesskey: R0s1MTRkMmNlOGRjNjkyMzdhMDVjMDFlZWY=
|
||||
bookshop-s3-secretkey: ZWFhZmVkYTFhZWQ0MDllY2ZlNjA3MTRlY2RhNTQ5YjgyYmRmNWEzZGFmOWYxOGRkNjFmNjZiNDk3M2E2NDgyZQ==
|
||||
authentik-clientid: Nm9oZk1lSndQNWR0YWY1RFMzZU9MY2NNSHF6WXlma1YzRTNGeE5Tbw==
|
||||
authentik-clientsecret: TXV2a0FLQklHR3BkdEsyaFlabVU1dFRaUmNuM2FhRzhoMWhlVE1nazFYOGVwczYyMzNCS0REWGdpNXo0T01RalVzMGZEUEFmakpmVVRNN1h3ZjllMU01MTQyVGlvOXRycUdmZTM1THhPaExEUnp6N2gxSm5jVkNLYXZXUllndmQ=
|
||||
litecharms-clientid: bWlkcmFuZGJvb2tzLXVhdA==
|
||||
litecharms-clientsecret: c2VjcmV0Xzc3OGJkODM3NWFjNGE3Mzg2N2QxZDdhNjcwODJlZTJjNGU4NmUwODYwYmI0Y2ZlZWI5NDExOTQ5OTk2ZThhOGU=
|
||||
---
|
||||
apiVersion: v1
|
||||
kind: PersistentVolumeClaim
|
||||
@@ -98,16 +98,16 @@ spec:
|
||||
- configMapRef:
|
||||
name: midrandbooks-config
|
||||
env:
|
||||
- name: AuthentikSettings__ClientId
|
||||
- name: LiteCharmsSettings__ClientId
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooksapi-secrets
|
||||
key: authentik-clientid
|
||||
- name: AuthentikSettings__ClientSecret
|
||||
key: litecharms-clientid
|
||||
- name: LiteCharmsSettings__ClientSecret
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: midrandbooksapi-secrets
|
||||
key: authentik-clientsecret
|
||||
key: litecharms-clientsecret
|
||||
- name: BookshopS3Settings__AccessKey
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
|
||||
Reference in New Issue
Block a user