feat(auth): QuantEngine 관리자 로그인 페이지 및 세션 인증 체계 구현 (WBS-AUTH)
This commit is contained in:
@@ -0,0 +1,310 @@
|
||||
@page "/login"
|
||||
@attribute [AllowAnonymous]
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject IConfiguration Configuration
|
||||
|
||||
<PageTitle>로그인 - QuantEngine</PageTitle>
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="brand-section">
|
||||
<img src="images/quant_engine_logo.jpg" alt="QuantEngine Logo" class="brand-logo" />
|
||||
<h1 class="brand-title">QuantEngine</h1>
|
||||
<p class="brand-subtitle">은퇴자산포트폴리오 투자 관리 시스템</p>
|
||||
</div>
|
||||
|
||||
<form @onsubmit="HandleLoginAsync" class="auth-form">
|
||||
<div class="form-group">
|
||||
<label for="username">관리자 아이디</label>
|
||||
<input type="text" id="username" class="form-control" @bind="Username" placeholder="아이디를 입력하세요" autocomplete="username" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">비밀번호</label>
|
||||
<input type="password" id="password" class="form-control" @bind="Password" placeholder="비밀번호를 입력하세요" autocomplete="current-password" />
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(ErrorMessage))
|
||||
{
|
||||
<div class="error-message">
|
||||
<svg class="error-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<span>@ErrorMessage</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<button type="submit" class="btn-submit" disabled="@IsSubmitting">
|
||||
@if (IsSubmitting)
|
||||
{
|
||||
<span class="spinner"></span>
|
||||
<span>인증 중...</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>로그인</span>
|
||||
}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.auth-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
background: linear-gradient(135deg, #090a15 0%, #12142d 100%);
|
||||
font-family: 'Roboto', 'Inter', sans-serif;
|
||||
color: #ffffff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ambient background glow */
|
||||
.auth-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0) 70%);
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.auth-container::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0) 70%);
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 20px;
|
||||
padding: 48px;
|
||||
width: 440px;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.brand-section {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(0, 242, 254, 0.3);
|
||||
box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.brand-logo:hover {
|
||||
transform: rotate(5deg) scale(1.05);
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 6px 0 0 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 14px 16px;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: rgba(0, 242, 254, 0.6);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 0 12px rgba(0, 242, 254, 0.15);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
color: #f87171;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
color: #0b0c15;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 242, 254, 0.2);
|
||||
}
|
||||
|
||||
.btn-submit:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 242, 254, 0.35);
|
||||
}
|
||||
|
||||
.btn-submit:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-submit:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(11, 12, 21, 0.25);
|
||||
border-top-color: #0b0c15;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
private string Username { get; set; } = string.Empty;
|
||||
private string Password { get; set; } = string.Empty;
|
||||
private string ErrorMessage { get; set; } = string.Empty;
|
||||
private bool IsSubmitting { get; set; } = false;
|
||||
|
||||
private async Task HandleLoginAsync()
|
||||
{
|
||||
ErrorMessage = string.Empty;
|
||||
if (string.IsNullOrWhiteSpace(Username) || string.IsNullOrWhiteSpace(Password))
|
||||
{
|
||||
ErrorMessage = "아이디와 비밀번호를 모두 입력해 주세요.";
|
||||
return;
|
||||
}
|
||||
|
||||
IsSubmitting = true;
|
||||
|
||||
try
|
||||
{
|
||||
// Verify against configurations in appsettings.json
|
||||
var expectedUser = Configuration["AdminSettings:Username"] ?? "admin";
|
||||
var expectedPass = Configuration["AdminSettings:Password"] ?? "quant123!";
|
||||
|
||||
if (Username == expectedUser && Password == expectedPass)
|
||||
{
|
||||
var customProvider = (CustomAuthenticationStateProvider)AuthStateProvider;
|
||||
await customProvider.MarkUserAsAuthenticatedAsync(Username);
|
||||
|
||||
// Redirect back to home dashboard
|
||||
NavigationManager.NavigateTo("");
|
||||
}
|
||||
else
|
||||
{
|
||||
ErrorMessage = "아이디 또는 비밀번호가 올바르지 않습니다.";
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
ErrorMessage = $"로그인 중 오류가 발생했습니다: {ex.Message}";
|
||||
}
|
||||
finally
|
||||
{
|
||||
IsSubmitting = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user