From 5fd12b34ac871e6e493f2c4d9cd2d5ba36a2fa8b Mon Sep 17 00:00:00 2001 From: Khwezi Mngoma Date: Sat, 16 May 2026 15:29:43 +0200 Subject: [PATCH] Implemented authentication starte components --- ShopAdmin/Components/Layout/MainLayout.razor | 30 +++- ShopAdmin/Components/Pages/Login.razor | 74 ++++++++++ ShopAdmin/Components/Pages/Login.razor.css | 143 +++++++++++++++++++ 3 files changed, 240 insertions(+), 7 deletions(-) create mode 100644 ShopAdmin/Components/Pages/Login.razor create mode 100644 ShopAdmin/Components/Pages/Login.razor.css diff --git a/ShopAdmin/Components/Layout/MainLayout.razor b/ShopAdmin/Components/Layout/MainLayout.razor index 04806f3..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,7 +10,7 @@ - +
LiteCharms Shop Administration & Monitoring @@ -19,13 +20,28 @@
- + + + + + + + -
-
- @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)); + } +}