110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Home - Headless Login Demo</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="app-shell dashboard-shell">
|
|
<header class="system-header">
|
|
<span class="sub-title">총괄기획실</span>
|
|
<h2 class="main-title">기술기획팀 PM Login Demo</h2>
|
|
</header>
|
|
|
|
<article class="login-panel dashboard-panel">
|
|
<div class="welcome-msg">
|
|
<h2>안녕하세요, <span id="welcomeName">사용자</span>님!</h2>
|
|
<p>안전한 업무 시스템 접속을 환영합니다. 성공적으로 인증되었습니다.</p>
|
|
</div>
|
|
|
|
<div class="dashboard-content">
|
|
<div class="info-grid">
|
|
<div class="info-card">
|
|
<h3 class="card-title">🛡️ 계정 정보</h3>
|
|
<div id="userInfoContent">
|
|
<p style="color: #5a7369; text-align: center;">정보를 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<h3 class="card-title">🔐 시스템 상태</h3>
|
|
<ul class="info-list">
|
|
<li class="info-item">
|
|
<span class="info-label">SSO 연결 상태</span>
|
|
<span class="info-value" style="color: #2d8a63;">● 정상 (안전함)</span>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-label">인증 제공자</span>
|
|
<span class="info-value">Headless Auth Gateway</span>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-label">세션 유효성</span>
|
|
<span class="info-value">현재 활성 상태</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-actions">
|
|
<button id="logoutBtn" class="secondary-button">로그아웃</button>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<script>
|
|
async function fetchUserInfo() {
|
|
try {
|
|
const response = await fetch('/api/me');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const user = data.user;
|
|
|
|
document.getElementById('welcomeName').textContent = user.name;
|
|
|
|
document.getElementById('userInfoContent').innerHTML = `
|
|
<ul class="info-list">
|
|
<li class="info-item">
|
|
<span class="info-label">사용자 식별자 (ID)</span>
|
|
<span class="info-value">${user.id || '-'}</span>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-label">표시 이름</span>
|
|
<span class="info-value">${user.name || '-'}</span>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-label">로그인 시간</span>
|
|
<span class="info-value">${user.loginTime || '-'}</span>
|
|
</li>
|
|
<li class="info-item">
|
|
<span class="info-label">사용된 인증 방식</span>
|
|
<div style="margin-top: 4px;">
|
|
<span class="badge">${user.method || '알 수 없음'}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
`;
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch user info:', err);
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
|
|
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
|
try {
|
|
await fetch('/api/logout', { method: 'POST' });
|
|
} finally {
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
|
|
fetchUserInfo();
|
|
</script>
|
|
</body>
|
|
</html>
|