BARON-SSO 로그인 UI 수정
This commit is contained in:
68
src/main.ts
68
src/main.ts
@@ -268,12 +268,9 @@ function initializeAppDirectly() {
|
||||
function showLoginScreen(errorMessage?: string) {
|
||||
const loginContainer = document.getElementById('login-container');
|
||||
const appLayout = document.getElementById('app-layout');
|
||||
const loginError = document.getElementById('login-error');
|
||||
const phoneLoginError = document.getElementById('phone-login-error');
|
||||
const phoneLoginStatus = document.getElementById('phone-login-status');
|
||||
const loginForm = document.getElementById('login-form') as HTMLFormElement | null;
|
||||
const phoneLoginForm = document.getElementById('phone-login-form') as HTMLFormElement | null;
|
||||
const loginModeTabs = document.querySelectorAll<HTMLButtonElement>('.login-mode-tab');
|
||||
|
||||
if (appLayout) appLayout.style.display = 'none';
|
||||
if (loginContainer) loginContainer.style.display = 'flex';
|
||||
@@ -289,24 +286,10 @@ function showLoginScreen(errorMessage?: string) {
|
||||
}
|
||||
};
|
||||
|
||||
setMessage(loginError, errorMessage);
|
||||
setMessage(phoneLoginError, undefined);
|
||||
setMessage(phoneLoginStatus, undefined);
|
||||
|
||||
const switchLoginMode = (mode: 'password' | 'phone') => {
|
||||
if (loginForm) loginForm.hidden = mode !== 'password';
|
||||
if (phoneLoginForm) phoneLoginForm.hidden = mode !== 'phone';
|
||||
loginModeTabs.forEach((tab) => tab.classList.toggle('active', tab.dataset.mode === mode));
|
||||
setMessage(loginError, mode === 'password' ? errorMessage : undefined);
|
||||
setMessage(phoneLoginError, mode === 'phone' ? errorMessage : undefined);
|
||||
};
|
||||
|
||||
loginModeTabs.forEach((tab) => {
|
||||
if (!tab.dataset.bound) {
|
||||
tab.dataset.bound = 'true';
|
||||
tab.addEventListener('click', () => switchLoginMode((tab.dataset.mode as 'password' | 'phone') || 'password'));
|
||||
}
|
||||
});
|
||||
setMessage(phoneLoginError, errorMessage);
|
||||
|
||||
const clearPhonePollTimer = () => {
|
||||
if (phoneLoginPollTimer) {
|
||||
@@ -353,53 +336,6 @@ function showLoginScreen(errorMessage?: string) {
|
||||
}, intervalMs);
|
||||
};
|
||||
|
||||
if (loginForm && !loginForm.dataset.bound) {
|
||||
loginForm.dataset.bound = 'true';
|
||||
loginForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const submitButton = document.getElementById('login-submit') as HTMLButtonElement | null;
|
||||
const loginId = (document.getElementById('login-id') as HTMLInputElement | null)?.value.trim() || '';
|
||||
const password = (document.getElementById('login-password') as HTMLInputElement | null)?.value || '';
|
||||
|
||||
if (!loginId || !password) {
|
||||
showLoginScreen('사번과 비밀번호를 입력하세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = '로그인 중...';
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/headless/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ loginId, password })
|
||||
});
|
||||
const payload = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
const message = payload.redirectTo
|
||||
? '접근 권한이 없는 테넌트입니다. 관리자에게 문의하세요.'
|
||||
: (payload.error || '로그인에 실패했습니다.');
|
||||
showLoginScreen(message);
|
||||
return;
|
||||
}
|
||||
|
||||
initializeAppDirectly();
|
||||
} catch (error) {
|
||||
console.error('SSO login failed:', error);
|
||||
showLoginScreen('로그인 요청 처리 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
if (submitButton) {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = '로그인';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (phoneLoginForm && !phoneLoginForm.dataset.bound) {
|
||||
phoneLoginForm.dataset.bound = 'true';
|
||||
phoneLoginForm.addEventListener('submit', async (event) => {
|
||||
@@ -449,8 +385,6 @@ function showLoginScreen(errorMessage?: string) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
switchLoginMode('password');
|
||||
}
|
||||
|
||||
async function bootstrapApp() {
|
||||
|
||||
Reference in New Issue
Block a user