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>
|
||||||
</div>
|
</div>
|
||||||
<MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="mudTheme" />
|
<MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="mudTheme" />
|
||||||
<Routes />
|
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
|
||||||
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
|
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
|
||||||
<script src="js/admin-session.js"></script>
|
<script src="js/admin-session.js"></script>
|
||||||
<script src="_framework/blazor.web.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;">
|
<MudPaper Class="pa-8" Elevation="3" Style="width: 100%; max-width: 400px;">
|
||||||
<MudText Typo="Typo.h4" Class="mb-6 text-center">관리자 로그인</MudText>
|
<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"
|
<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;"
|
style="width: 100%; min-height: 56px; padding: 16px 14px;"
|
||||||
placeholder="사용자명"
|
placeholder="사용자명"
|
||||||
autocomplete="username"
|
autocomplete="username"
|
||||||
@bind-Value="model.Username" />
|
@bind-Value="model.Username"
|
||||||
|
name="username" />
|
||||||
|
|
||||||
<InputText type="password"
|
<InputText type="password"
|
||||||
class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
|
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;"
|
style="width: 100%; min-height: 56px; padding: 16px 14px;"
|
||||||
placeholder="비밀번호"
|
placeholder="비밀번호"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
@bind-Value="model.Password" />
|
@bind-Value="model.Password"
|
||||||
|
name="password" />
|
||||||
|
|
||||||
<div class="mb-4">
|
<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>
|
<label style="margin-left: 8px; cursor: pointer;">아이디 저장</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -57,6 +59,63 @@
|
|||||||
</MudPaper>
|
</MudPaper>
|
||||||
</MudContainer>
|
</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 {
|
@code {
|
||||||
private bool isLoading = false;
|
private bool isLoading = false;
|
||||||
private string errorMessage = "";
|
private string errorMessage = "";
|
||||||
|
|||||||
Reference in New Issue
Block a user