58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
// /js/login.js
|
|
|
|
import { login } from './api-helper.js';
|
|
import { saveAuthData, clearAuthData } from './auth.js';
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const errorDiv = document.getElementById('error');
|
|
|
|
const submitBtn = e.target.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
// 로딩 상태 시작
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = '로그인 중...';
|
|
errorDiv.style.display = 'none';
|
|
|
|
try {
|
|
// API 헬퍼를 통해 로그인 요청
|
|
const result = await login(username, password);
|
|
|
|
if (result.success && result.token) {
|
|
// 인증 정보 저장
|
|
saveAuthData(result.token, result.user);
|
|
|
|
// 백엔드가 지정한 URL로 리디렉션
|
|
const redirectUrl = result.redirectUrl || '/pages/dashboard/user.html'; // 혹시 모를 예외처리
|
|
|
|
// 부드러운 화면 전환 효과
|
|
document.body.style.transition = 'opacity 0.3s ease-out';
|
|
document.body.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
window.location.href = redirectUrl;
|
|
}, 300);
|
|
|
|
} else {
|
|
// 이 케이스는 api-helper에서 throw new Error()로 처리되어 catch 블록으로 바로 이동합니다.
|
|
// 하지만, 만약의 경우를 대비해 방어 코드를 남겨둡니다.
|
|
clearAuthData();
|
|
errorDiv.textContent = result.error || '로그인에 실패했습니다.';
|
|
errorDiv.style.display = 'block';
|
|
}
|
|
} catch (err) {
|
|
console.error('로그인 오류:', err);
|
|
clearAuthData();
|
|
// api-helper에서 보낸 에러 메시지를 표시
|
|
errorDiv.textContent = err.message || '서버 연결에 실패했습니다.';
|
|
errorDiv.style.display = 'block';
|
|
} finally {
|
|
// 로딩 상태 해제
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
}
|
|
}); |