fix: admin login submit without blazor hydration
TaxBaik CI/CD / build-and-deploy (push) Failing after 1m45s
TaxBaik CI/CD / build-and-deploy (push) Failing after 1m45s
This commit is contained in:
@@ -34,7 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="mudTheme" />
|
||||
<Routes />
|
||||
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
|
||||
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
|
||||
<script src="js/admin-session.js"></script>
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
|
||||
@@ -15,22 +15,24 @@
|
||||
<MudPaper Class="pa-8" Elevation="3" Style="width: 100%; max-width: 400px;">
|
||||
<MudText Typo="Typo.h4" Class="mb-6 text-center">관리자 로그인</MudText>
|
||||
|
||||
<form @onsubmit="HandleLogin" @onsubmit:preventDefault>
|
||||
<form id="admin-login-form">
|
||||
<InputText 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"
|
||||
@bind-Value="model.Username" />
|
||||
@bind-Value="model.Username"
|
||||
name="username" />
|
||||
|
||||
<InputText 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"
|
||||
@bind-Value="model.Password" />
|
||||
@bind-Value="model.Password"
|
||||
name="password" />
|
||||
|
||||
<div class="mb-4">
|
||||
<InputCheckbox class="mud-checkbox" @bind-Value="model.RememberMe" />
|
||||
<InputCheckbox class="mud-checkbox" @bind-Value="model.RememberMe" name="rememberMe" />
|
||||
<label style="margin-left: 8px; cursor: pointer;">아이디 저장</label>
|
||||
</div>
|
||||
|
||||
@@ -57,6 +59,63 @@
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const form = document.getElementById('admin-login-form');
|
||||
if (!form || form.dataset.bound === '1') return;
|
||||
form.dataset.bound = '1';
|
||||
form.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const username = form.querySelector('input[placeholder="사용자명"]')?.value?.trim() || '';
|
||||
const password = form.querySelector('input[placeholder="비밀번호"]')?.value || '';
|
||||
const rememberMe = form.querySelector('input[type="checkbox"]')?.checked || false;
|
||||
const errorBox = form.parentElement.querySelector('.mud-alert');
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
|
||||
if (submitButton) submitButton.disabled = true;
|
||||
if (errorBox) errorBox.remove();
|
||||
|
||||
try {
|
||||
const response = await fetch('/taxbaik/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('login failed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (!data?.accessToken || !data?.refreshToken) {
|
||||
throw new Error('invalid response');
|
||||
}
|
||||
|
||||
localStorage.setItem('accessToken', data.accessToken);
|
||||
localStorage.setItem('refreshToken', data.refreshToken);
|
||||
localStorage.setItem('tokenExpiry', String(Date.now() + (data.expiresIn || 3600) * 1000));
|
||||
if (rememberMe) {
|
||||
localStorage.setItem('admin-remembered-username', username);
|
||||
} else {
|
||||
localStorage.removeItem('admin-remembered-username');
|
||||
}
|
||||
|
||||
window.location.href = '/taxbaik/admin/dashboard';
|
||||
} catch {
|
||||
const existing = form.parentElement.querySelector('.login-error-message');
|
||||
if (existing) existing.remove();
|
||||
const div = document.createElement('div');
|
||||
div.className = 'mud-alert mud-alert-filled-error login-error-message mb-4';
|
||||
div.textContent = '로그인 중 오류가 발생했습니다.';
|
||||
form.parentElement.insertBefore(div, form);
|
||||
} finally {
|
||||
if (submitButton) submitButton.disabled = false;
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@code {
|
||||
private bool isLoading = false;
|
||||
private string errorMessage = "";
|
||||
|
||||
Reference in New Issue
Block a user