fix: restore HTML login form with prerender: true per spec requirements

Context: Validation script requires Login.razor to use prerender: true for immediate form display before WASM boots (Phase 9 requirement). Solution: Revert to original HTML form + JavaScript approach: - AdminLoginForm: HTML form (statically rendered, works with prerender: true) - admin-session.js: JavaScript login handler - Post-login: 200ms delay before redirect to allow CustomAuthenticationStateProvider to read tokens from localStorage and establish auth state Flow: 1. User submits form (JavaScript handles it) 2. POST /api/auth/login 3. Save tokens to localStorage 4. 200ms delay 5. Redirect to /taxbaik/admin/dashboard 6. Page loads with Blazor bootstrapping + auth state restored Result: Login form displays immediately (prerender: true) while maintaining proper authentication state propagation for [Authorize] pages. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-07-03 13:13:23 +09:00
parent da6058fb61
commit d3b9a6047c
3 changed files with 49 additions and 106 deletions
@@ -1,6 +1,6 @@
@page "/admin/login"
@layout TaxBaik.WasmClient.Components.Admin.Layout.BlankLayout
@attribute [AllowAnonymous]
-@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
+@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: true))
 <PageTitle>로그인</PageTitle>
 <AdminLoginForm />
@@ -1,57 +1,47 @@
-@using System.Text.Json
@inject ILocalStorageService LocalStorageService
-@inject NavigationManager Navigation
-@inject ISnackbar Snackbar
-@inject HttpClient Http
-@inject AuthenticationStateProvider AuthStateProvider
+@inject IJSRuntime Js

 <MudContainer MaxWidth="MaxWidth.Small" Class="admin-login-page d-flex align-center justify-center" Style="min-height: 100vh;">
    <MudPaper Class="pa-8" Elevation="3" Style="width: 100%; max-width: 400px;">
        <MudText Typo="Typo.h4" Class="mb-6 text-center">관리자 로그인</MudText>

-        <MudForm @ref="form" OnSubmit="HandleLogin">
-            <MudTextField @bind-Value="username"
-                Label="사용자명"
-                Placeholder="사용자명"
-                Variant="Variant.Outlined"
-                Class="mb-4"
-                Required="true"
-                Disabled="@isLoggingIn"
-                InputType="InputType.Text"
-                Autocomplete="username" />
+        <form id="admin-login-form">
+            <input class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
+                   style="width: 100%; min-height: 56px; padding: 16px 14px;"
+                   placeholder="사용자명"
+                   autocomplete="username"
+                   name="username"
+                   value="@rememberedUsername" />

-            <MudTextField @bind-Value="password"
-                Label="비밀번호"
-                Placeholder="비밀번호"
-                Variant="Variant.Outlined"
-                Class="mb-4"
-                Required="true"
-                Disabled="@isLoggingIn"
-                InputType="InputType.Password"
-                Autocomplete="current-password" />
+            <input type="password"
+                   class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
+                   style="width: 100%; min-height: 56px; padding: 16px 14px;"
+                   placeholder="비밀번호"
+                   autocomplete="current-password"
+                   name="password" />

            <div class="mb-4">
-                <MudCheckBox @bind-Checked="rememberMe" Label="아이디 저장" Disabled="@isLoggingIn" />
+                <input class="mud-checkbox" type="checkbox" name="rememberMe" />
+                <label style="margin-left: 8px; cursor: pointer;">아이디 저장</label>
            </div>

-            <MudButton ButtonType="ButtonType.Submit"
-                Variant="Variant.Filled"
-                Color="Color.Primary"
-                FullWidth="true"
-                Disabled="@isLoggingIn"
-                Class="mud-elevation-0">
-                @(isLoggingIn ? "로그인 중..." : "로그인")
-            </MudButton>
-        </MudForm>
+            <div class="mud-alert mud-alert-filled-error mb-4 login-error-message" style="display:none;">로그인 중 오류가 발생했습니다.</div>
+
+            <button type="submit"
+                    id="admin-login-submit"
+                    disabled="@(!isReady)"
+                    class="mud-button-root mud-button mud-button-filled mud-button-filled-primary mud-elevation-0"
+                    style="width: 100%; min-height: 52px; border: 0; border-radius: 4px; color: white;">
+                <span>@(isReady ? "로그인" : "준비 중...")</span>
+            </button>
+        </form>
    </MudPaper>
 </MudContainer>

@code {
-    private MudForm? form;
-    private string username = "";
-    private string password = "";
-    private bool rememberMe = false;
-    private bool isLoggingIn = false;
+    private string rememberedUsername = "";
+    private bool isRememberChecked = false;
+    private bool isReady;
    private const string RememberedUsernameKey = "admin-remembered-username";
    private const string RememberedCheckboxKey = "admin-remember-checkbox";

@@ -59,83 +49,35 @@
    {
        try
        {
-            username = await LocalStorageService.GetItemAsStringAsync(RememberedUsernameKey) ?? "";
+            rememberedUsername = await LocalStorageService.GetItemAsStringAsync(RememberedUsernameKey) ?? "";
            var checkboxValue = await LocalStorageService.GetItemAsStringAsync(RememberedCheckboxKey) ?? "false";
-            rememberMe = checkboxValue == "true" && !string.IsNullOrEmpty(username);
+            isRememberChecked = checkboxValue == "true" && !string.IsNullOrEmpty(rememberedUsername);
        }
        catch
        {
-            username = "";
-            rememberMe = false;
+            rememberedUsername = "";
+            isRememberChecked = false;
        }
    }

-    private async Task HandleLogin()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
-        if (form == null || isLoggingIn) return;
-
-        await form.Validate();
-        if (!form.IsValid) return;
-
-        isLoggingIn = true;
-        try
+        if (firstRender)
        {
-            var response = await Http.PostAsJsonAsync("/api/auth/login", new { username, password });
-            if (!response.IsSuccessStatusCode)
+            try
            {
-                Snackbar.Add("로그인 실패: 사용자명 또는 비밀번호가 올바르지 않습니다", Severity.Error);
-                return;
+                await Js.InvokeVoidAsync("taxbaikAdminSession.syncRouteClass");
+                await Js.InvokeVoidAsync("taxbaikAdminSession.bindLoginForm");
            }
-
-            var json = await response.Content.ReadAsStringAsync();
-            var loginResponse = JsonSerializer.Deserialize<LoginResponse>(json);
-            if (loginResponse == null || string.IsNullOrEmpty(loginResponse.AccessToken))
+            catch
            {
-                Snackbar.Add("로그인 실패: 응답 오류", Severity.Error);
-                return;
+                // Login UI must remain visible even if JS binding fails.
            }
-
-            // 로컬 저장소 저장
-            await LocalStorageService.SetItemAsStringAsync("accessToken", loginResponse.AccessToken);
-            await LocalStorageService.SetItemAsStringAsync("refreshToken", loginResponse.RefreshToken ?? "");
-            var expiryTicks = DateTimeOffset.UtcNow.AddSeconds(loginResponse.ExpiresIn).UtcTicks;
-            await LocalStorageService.SetItemAsStringAsync("tokenExpiry", expiryTicks.ToString());
-
-            // 아이디 저장
-            if (rememberMe)
+            finally
            {
-                await LocalStorageService.SetItemAsStringAsync(RememberedUsernameKey, username);
-                await LocalStorageService.SetItemAsStringAsync(RememberedCheckboxKey, "true");
+                isReady = true;
+                StateHasChanged();
            }
-            else
-            {
-                await LocalStorageService.RemoveItemAsync(RememberedUsernameKey);
-                await LocalStorageService.RemoveItemAsync(RememberedCheckboxKey);
-            }
-
-            // Blazor 인증 상태 업데이트
-            if (AuthStateProvider is CustomAuthenticationStateProvider customProvider)
-            {
-                await customProvider.LoginAsync(loginResponse.AccessToken, loginResponse.RefreshToken ?? "", loginResponse.ExpiresIn);
-            }
-
-            // 대시보드로 이동
-            Navigation.NavigateTo("/admin/dashboard", replace: true);
        }
-        catch (Exception ex)
-        {
-            Snackbar.Add($"로그인 중 오류: {ex.Message}", Severity.Error);
-        }
-        finally
-        {
-            isLoggingIn = false;
-        }
-    }
-
-    private class LoginResponse
-    {
-        public string AccessToken { get; set; } = "";
-        public string RefreshToken { get; set; } = "";
-        public int ExpiresIn { get; set; }
    }
 }
@@ -341,10 +341,11 @@ window.taxbaikAdminSession = {
                    localStorage.removeItem('admin-remember-checkbox');
                }

-                // 토큰을 저장한 직후 페이지 리로드
-                // 이렇게 하면 CustomAuthenticationStateProvider의 GetAuthenticationStateAsync()가
-                // localStorage에서 토큰을 복원하고 [Authorize] 페이지가 제대로 렌더링됨
-                window.location.href = '/taxbaik/admin/dashboard';
+                // 토큰 저장 후 약간의 지연을 두고 대시보드로 이동
+                // 이렇게 하면 CustomAuthenticationStateProvider가 localStorage에서 토큰을 복원할 시간이 생김
+                setTimeout(() => {
+                    window.location.href = '/taxbaik/admin/dashboard';
+                }, 200);
            } catch (error) {
                window.taxbaikAdminSession.traceUiState('admin-login', `submit failed: ${error?.message || 'login failed'}`);
                postLog({