This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<TopBarAuthstateView IsAuthenticated="false" />
|
||||
<TopBarAuthstateView />
|
||||
</header>
|
||||
|
||||
<CascadingAuthenticationState>
|
||||
|
||||
@@ -60,22 +60,24 @@
|
||||
<span>Notifications</span>
|
||||
</NavLink>
|
||||
|
||||
<div class="shelf-divider"></div>
|
||||
<div class="shelf-divider"></div>
|
||||
|
||||
<NavLink class="shelf-link" href="settings" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
<span>Settings</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shelf-link" href="policies" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
||||
<span>Policies</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shelf-link" href="profile" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<NavLink class="shelf-link" href="@ProfileUrl" target="_blank" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>Profile</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink class="shelf-link" href="auth/logout" ForceLoad="true" @onclick="CloseShelf">
|
||||
<svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
<span>Logout</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -83,6 +85,24 @@
|
||||
[Parameter] public bool IsOpen { get; set; } = false;
|
||||
[Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
|
||||
|
||||
[Inject] private IConfiguration? Configuration { get; set; }
|
||||
|
||||
private string? ProfileUrl { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (Configuration is null) return;
|
||||
|
||||
var authority = Configuration["IdKongisa:Authority"];
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(authority))
|
||||
{
|
||||
var uri = new Uri(authority);
|
||||
|
||||
ProfileUrl = $"{uri.Scheme}://{uri.Host}/if/user/#/settings";
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ToggleShelf()
|
||||
{
|
||||
IsOpen = !IsOpen;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* --- 1. The Flyout Side Panel --- */
|
||||
.nav-shelf-panel {
|
||||
position: fixed;
|
||||
top: var(--header-height); /* Drops clean below your top-bar */
|
||||
right: -300px; /* Hidden by default */
|
||||
top: var(--header-height);
|
||||
right: -300px;
|
||||
width: 300px;
|
||||
height: calc(100vh - var(--header-height));
|
||||
background-color: var(--shelf-bg);
|
||||
@@ -10,7 +10,8 @@
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 1.5rem;
|
||||
/* MODIFIED: Reduce padding-bottom so items don't clip raw against the bottom line window frame */
|
||||
padding: 2rem 1.5rem 1rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
|
||||
@@ -68,6 +69,7 @@
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(144, 224, 239, 0.1);
|
||||
flex-shrink: 0; /* CRITICAL: Prevents the header text from squishing up on small screens */
|
||||
}
|
||||
|
||||
.shelf-header h3 {
|
||||
@@ -92,6 +94,14 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
/* NEW RULES: Absorb all available viewport height and isolate scrolling bounds */
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* Optional: Adds smooth mobile elastic touch responses on iOS devices */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* Clean up spacing so bottom-most links have breathing room when fully scrolled down */
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Deep selection matching Blazor's active class matching system */
|
||||
|
||||
@@ -1,37 +1,67 @@
|
||||
<div class="auth-state-container">
|
||||
@if (!IsAuthenticated)
|
||||
{
|
||||
<div class="auth-indicator unauthenticated">
|
||||
<svg class="security-lock-vector" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="amber-cyber-glow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="3.5" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<g class="lock-chassis" filter="url(#amber-cyber-glow)">
|
||||
<path d="M 32,45 V 24 L 38,18 H 62 L 68,24 V 45" stroke="#ffd166" stroke-width="3.5" fill="none" stroke-linecap="square" stroke-linejoin="miter" />
|
||||
|
||||
<rect x="20" y="45" width="60" height="32" fill="#03090b" stroke="#ffd166" stroke-width="3.5" stroke-linejoin="miter" />
|
||||
|
||||
<polygon points="47,54 53,54 55,60 45,60" fill="#ffd166" />
|
||||
<rect x="48.5" y="60" width="3" height="10" fill="#ffd166" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="auth-indicator authenticated">
|
||||
<div class="user-meta-stack">
|
||||
<span class="meta-row-primary">ADMIN_OPERATOR</span>
|
||||
<span class="meta-row-secondary">ID: 409-CLUSTER</span>
|
||||
@using Microsoft.AspNetCore.Components.Authorization
|
||||
<div class="auth-state-container">
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<div class="auth-indicator authenticated">
|
||||
<div class="user-meta-stack">
|
||||
<span class="meta-row-primary">@Name</span>
|
||||
<span class="meta-row-secondary">@Email</span>
|
||||
<span class="meta-row-secondary">@LoginTime</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<div class="auth-indicator unauthenticated">
|
||||
<svg class="security-lock-vector" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="amber-cyber-glow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="3.5" result="blur" />
|
||||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<g class="lock-chassis" filter="url(#amber-cyber-glow)">
|
||||
<path d="M 32,45 V 24 L 38,18 H 62 L 68,24 V 45" stroke="#ffd166" stroke-width="3.5" fill="none" stroke-linecap="square" stroke-linejoin="miter" />
|
||||
|
||||
<rect x="20" y="45" width="60" height="32" fill="#03090b" stroke="#ffd166" stroke-width="3.5" stroke-linejoin="miter" />
|
||||
|
||||
<polygon points="47,54 53,54 55,60 45,60" fill="#ffd166" />
|
||||
<rect x="48.5" y="60" width="3" height="10" fill="#ffd166" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public bool IsAuthenticated { get; set; } = false;
|
||||
[CascadingParameter]
|
||||
private Task<AuthenticationState>? AuthStateTask { get; set; }
|
||||
|
||||
private System.Security.Claims.ClaimsPrincipal? UserPrincipal;
|
||||
|
||||
private string? Name { get; set; }
|
||||
private string? Email { get; set; }
|
||||
private DateTime? LoginTime { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
if (AuthStateTask != null)
|
||||
{
|
||||
var authState = await AuthStateTask;
|
||||
|
||||
UserPrincipal = authState.User;
|
||||
|
||||
Name = UserPrincipal?.Identity?.Name;
|
||||
Email = UserPrincipal?.FindFirst(System.Security.Claims.ClaimTypes.Email)?.Value;
|
||||
|
||||
var authTimeClaim = UserPrincipal?.FindFirst("auth_time")?.Value;
|
||||
|
||||
if (!string.IsNullOrEmpty(authTimeClaim) && long.TryParse(authTimeClaim, out long unixSeconds))
|
||||
{
|
||||
var dateTimeOffset = DateTimeOffset.FromUnixTimeSeconds(unixSeconds);
|
||||
LoginTime = dateTimeOffset.LocalDateTime;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user