TK-FB-Project/web-ui/js/login.js

// /js/login.js
// ES6 모듈 의존성 제거 - 브라우저 호환성 개선

// 인증 데이터 저장 함수 (직접 구현)
function saveAuthData(token, user) {
  localStorage.setItem('token', token);
  localStorage.setItem('user', JSON.stringify(user));
}

function clearAuthData() {
  localStorage.removeItem('token');
  localStorage.removeItem('user');
}

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 헬퍼를 통해 로그인 요청 (window 객체에서 가져오기)
    const result = await window.login(username, password);

    if (result.success && result.data && result.data.token) {
      // 인증 정보 저장
      saveAuthData(result.data.token, result.data.user);

      // 백엔드가 지정한 URL로 리디렉션
      const redirectUrl = result.data.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;
  }
});