diff --git a/ShopAdmin/Components/Layout/MainLayout.razor b/ShopAdmin/Components/Layout/MainLayout.razor index 0bf99b1..80c2494 100644 --- a/ShopAdmin/Components/Layout/MainLayout.razor +++ b/ShopAdmin/Components/Layout/MainLayout.razor @@ -1,5 +1,6 @@ @inherits LayoutComponentBase @using Blazored.Toast +@using Microsoft.AspNetCore.Components.Authorization
@@ -9,21 +10,38 @@ - +
LiteCharms Shop Administration & Monitoring
+ +
- + + + + + + + -
-
- @Body -
-
+ +
+ + +
+ @Body +
+ + + + + +
+ diff --git a/ShopAdmin/Components/Pages/Login.razor b/ShopAdmin/Components/Pages/Login.razor new file mode 100644 index 0000000..3673380 --- /dev/null +++ b/ShopAdmin/Components/Pages/Login.razor @@ -0,0 +1,74 @@ +@page "/login" +@using Microsoft.AspNetCore.Components.Authorization + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +@code { + [CascadingParameter] + private Task? AuthState { get; set; } + + private void HandleLogin() + { + // Wire up your OAuth / OpenID Connect Redirect or Auth trigger state here + } +} \ No newline at end of file diff --git a/ShopAdmin/Components/Pages/Login.razor.css b/ShopAdmin/Components/Pages/Login.razor.css new file mode 100644 index 0000000..350f3a3 --- /dev/null +++ b/ShopAdmin/Components/Pages/Login.razor.css @@ -0,0 +1,143 @@ +/* Login.razor.css */ + +.auth-workspace-canvas { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + min-height: calc(100vh - var(--header-height, 92px)); + background-color: #010405; /* Matches your core console background depth */ + overflow: hidden; + box-sizing: border-box; + padding: 24px; +} + +/* BOUNDLESS TECH BACKGROUND ANIMATION & MAPPING */ +.tech-background-matrix { + position: absolute; + top: 50%; + left: 50%; + width: 140%; + height: 140%; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 1; +} + +.bg-vector-mesh { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Subtle technological pulse across background circuit networks */ +.tech-circuit-left, .tech-circuit-right { + animation: background-circuit-glow 6s ease-in-out infinite alternate; +} + +.tech-circuit-right { + animation-delay: 3s; +} + +/* THE CONTAINER PAYLOAD */ +.login-action-container { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + max-width: 520px; + padding: 40px; + box-sizing: border-box; +} + +.login-header { + margin-bottom: 36px; +} + +.security-status-tag { + font-family: monospace; + font-size: 11px; + font-weight: 700; + color: #ffd166; /* Matches your top bar warning lock indicator token */ + background: rgba(255, 209, 102, 0.07); + border: 1px solid rgba(255, 209, 102, 0.25); + padding: 4px 10px; + border-radius: 2px; + letter-spacing: 1px; + text-transform: uppercase; +} + +.login-title { + font-size: 26px; + font-weight: 700; + color: #ffffff; + margin: 20px 0 10px 0; + letter-spacing: -0.5px; +} + +.login-subtitle { + font-size: 14px; + font-weight: 400; + color: #8fa3ad; + line-height: 1.5; +} + +/* THE INVITING LARGE CALL TO ACTION BUTTON */ +.login-cta-button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 12px; + width: 100%; + max-width: 320px; + height: 54px; + background: #0087f5; /* Core premium brand interaction blue */ + color: #ffffff; + border: none; + border-radius: 4px; + font-size: 14px; + font-weight: 700; + letter-spacing: 0.5px; + cursor: pointer; + overflow: hidden; + box-shadow: 0 4px 20px rgba(0, 135, 245, 0.3); + transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); +} + + .login-cta-button:hover { + background: #0091ff; + transform: translateY(-2px); + box-shadow: 0 0 24px rgba(0, 145, 255, 0.6); + } + + .login-cta-button:active { + transform: translateY(0); + } + +.btn-arrow-icon { + width: 16px; + height: 16px; + transition: transform 0.25s ease; +} + +.login-cta-button:hover .btn-arrow-icon { + transform: translateX(4px); +} + +/* KEYFRAMES */ +@keyframes background-circuit-glow { + 0% { + opacity: 0.25; + filter: drop-shadow(0 0 1px rgba(0, 145, 255, 0)); + } + + 100% { + opacity: 0.55; + filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.4)); + } +} diff --git a/ShopAdmin/Components/TopBarAuthstateView.razor b/ShopAdmin/Components/TopBarAuthstateView.razor new file mode 100644 index 0000000..e50b75c --- /dev/null +++ b/ShopAdmin/Components/TopBarAuthstateView.razor @@ -0,0 +1,37 @@ +
+ @if (!IsAuthenticated) + { +
+ + + + + + + + + + + + + + + + + +
+ } + else + { +
+
+ ADMIN_OPERATOR + ID: 409-CLUSTER +
+
+ } +
+ +@code { + [Parameter] public bool IsAuthenticated { get; set; } = false; +} \ No newline at end of file diff --git a/ShopAdmin/Components/TopBarAuthstateView.razor.css b/ShopAdmin/Components/TopBarAuthstateView.razor.css new file mode 100644 index 0000000..a45d0ac --- /dev/null +++ b/ShopAdmin/Components/TopBarAuthstateView.razor.css @@ -0,0 +1,87 @@ +/* TopBarAuthstateView.razor.css */ + +.auth-state-container { + display: flex; + align-items: center; + justify-content: flex-end; + /* REMOVED min-width: 160px; -> Let the box collapse to exactly the icon's width */ + width: auto; + height: 100%; + /* Sliced down to a tight, crisp margin from the right browser edge */ + padding-right: 6px; + box-sizing: border-box; + /* Keeps it anchored to the far right side of your header layout layout */ + margin-left: auto; +} + +.auth-indicator { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + height: 100%; + width: auto; /* Collapses container layout tight */ +} + +/* Pristine yellow security lock vector */ +.security-lock-vector { + width: auto; + height: 48px; /* Preserved your ideal visual size */ + overflow: visible; +} + +/* Subtle hardware-accelerated technological power-hum pulse */ +.unauthenticated .lock-chassis { + animation: clean-cyber-pulse 4s ease-in-out infinite; +} + +/* PRE-STRUCTURED TEXT STACKS: Active right-aligned layout framework */ +.user-meta-stack { + display: flex; + flex-direction: column; + justify-content: center; + text-align: right; + font-family: inherit; + gap: 4px; +} + +.meta-row-primary { + font-size: 14px; + font-weight: 700; + color: #ffffff; + letter-spacing: 0.5px; +} + +.meta-row-secondary { + font-size: 11px; + font-weight: 400; + color: #4dabff; + opacity: 0.8; +} + +/* Mixed weighting classes pre-staged for detailed user metadata strings */ +.meta-row-large-bold { + font-size: 15px; + font-weight: 700; + color: #ffffff; + line-height: 1.2; + letter-spacing: 0.25px; +} + +.meta-row-small-regular { + font-size: 11px; + font-weight: 400; + color: #4dabff; + opacity: 0.85; + line-height: 1; +} + +@keyframes clean-cyber-pulse { + 0%, 100% { + filter: drop-shadow(0px 0px 4px rgba(255, 209, 102, 0.35)); + } + + 50% { + filter: drop-shadow(0px 0px 14px rgba(255, 209, 102, 0.65)); + } +}