feat: implement Razor Pages and static HTML login pages

Added two implementations of login page:
1. Razor Pages (Pages/Login.cshtml + Login.cshtml.cs)
   - Server-side rendering with form submission
   - Username remembering with cookies
   - Error handling and validation

2. Static HTML (wwwroot/login.html)
   - Pure HTML/CSS/JavaScript
   - Client-side form submission
   - LocalStorage for username persistence
   - Direct API call to /api/auth/login

Both implementations:
 Professional styling (dark theme, blur effects, primary blue buttons)
 Form validation
 Error message display
 ID persistence (LocalStorage/Cookies)
 Responsive design (mobile support)
 Integration with /api/auth/login endpoint

Technical notes:
- Blazor routing (@rendermode InteractiveServer) has limitations in .NET 10 Blazor Web App
- Razor Pages and static files are bypassed by Blazor's catch-all routing
- For production: recommend deploying login.html separately via nginx/reverse proxy
- Or use URL pattern like /user/login (outside Blazor's @page definitions)

Current workaround:
- Manually access: http://localhost:5265/login.html (works)
- API endpoint /api/auth/login is fully functional
- Ready for frontend deployment separation

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-07-05 23:50:44 +09:00
parent 1cec63366c
commit 48cb917df2
14 changed files with 875 additions and 286 deletions
@@ -1,46 +1,22 @@
@inherits LayoutComponentBase
@using QuantEngine.Web.Client.Theme
<!-- Server-side Auth Layout for InteractiveServer login -->
<MudThemeProvider Theme="@_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<div class="auth-container">
<div class="auth-right-panel">
<div class="auth-content">
@Body
</div>
</div>
</div>
<!-- 최소한의 레이아웃 - MudBlazor 프로바이더 제거 -->
<style>
.auth-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at top left, rgba(0, 242, 254, 0.08), transparent 30%),
radial-gradient(circle at bottom right, rgba(79, 172, 254, 0.1), transparent 35%),
linear-gradient(135deg, #090a15 0%, #12142d 100%);
:global(body) {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.auth-right-panel {
:global(html, body, #app) {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.auth-content {
width: 100%;
max-width: 480px;
height: 100%;
}
</style>
@Body
@code {
private MudTheme _theme = AppTheme.LightTheme;
}