311 lines
8.7 KiB
Plaintext
311 lines
8.7 KiB
Plaintext
@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;
|
|
}
|
|
}
|
|
}
|