king
316e3fe8d1
- 로그인: dbxcorp.co.kr 도메인 화이트리스트만 사용. ALLOWED_EMAILS 게이트 제거 - king@dbxcorp.co.kr 슈퍼관리자 자동 부여 (강등/삭제 불가) - 신규 로그인 사용자는 JSON 저장소에 자동 등록 (기본 모듈 권한 0) - 관리자 페이지(/admin): 역할/모듈별 토글로 직원 권한 수정 - 메인 대시보드를 ERP 시스템(monochromatic shadcn)으로 재설계 · 모듈: CORM, Order, 개인경비(준비중), 휴가(준비중) · 권한 없는 모듈은 '권한 없음' 배지 + 클릭 불가 - DESIGN.md 토큰 기반 styles → app/static/erp.css - docker-compose: dbx-main-data 볼륨 마운트 (DATA_DIR=/data) 으로 권한 JSON 영구 보관 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
233 lines
9.1 KiB
HTML
233 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>사용자/권한 관리 — DBX ERP</title>
|
|
<link rel="stylesheet" href="/static/erp.css" />
|
|
</head>
|
|
<body class="erp-body">
|
|
|
|
<div class="erp-shell">
|
|
|
|
<!-- ── 상단 네비게이션 ── -->
|
|
<nav class="erp-nav">
|
|
<div class="erp-nav-left">
|
|
<a href="/" class="erp-brand">
|
|
<img src="/static/dbx-logo.png" alt="DBX" class="erp-brand-logo" />
|
|
<span class="erp-brand-divider"></span>
|
|
<span class="erp-brand-system">ERP 시스템</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="erp-nav-right">
|
|
<a class="erp-btn erp-btn-ghost" href="/">← 대시보드</a>
|
|
<div class="erp-user-chip">
|
|
{% if user.picture %}
|
|
<img class="erp-user-avatar" src="{{ user.picture }}" alt="{{ user.name }}" />
|
|
{% else %}
|
|
<span class="erp-user-avatar-fallback">{{ user.name[0] | upper }}</span>
|
|
{% endif %}
|
|
<div class="erp-user-info">
|
|
<span class="erp-user-name">{{ user.name }}</span>
|
|
<span class="erp-user-email">{{ user.email }}</span>
|
|
</div>
|
|
</div>
|
|
<a class="erp-btn erp-btn-outline" href="/logout">로그아웃</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="erp-main" style="max-width: 1100px;">
|
|
|
|
<h1 class="erp-greeting">사용자 / 권한 관리</h1>
|
|
<p class="erp-greeting-sub">
|
|
회사 계정으로 로그인한 임직원의 모듈 접근 권한을 관리합니다.
|
|
토글을 변경한 뒤 <strong>저장</strong> 버튼을 누르세요.
|
|
</p>
|
|
|
|
<div class="erp-admin-toolbar">
|
|
<input type="search"
|
|
id="user-search"
|
|
class="erp-input"
|
|
placeholder="이메일 또는 이름으로 검색…" />
|
|
<span class="erp-section-meta" id="user-count">총 {{ users | length }}명</span>
|
|
</div>
|
|
|
|
<div class="erp-table-wrap">
|
|
<table class="erp-table" id="users-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 28%;">사용자</th>
|
|
<th style="width: 11%;">역할</th>
|
|
{% for key in module_keys %}
|
|
<th style="text-align:center; width: 9%;">
|
|
{% if key == 'corm' %}CORM
|
|
{% elif key == 'order' %}Order
|
|
{% elif key == 'expense' %}개인경비
|
|
{% elif key == 'vacation' %}휴가
|
|
{% else %}{{ key }}{% endif %}
|
|
</th>
|
|
{% endfor %}
|
|
<th style="width: 13%;">최근 로그인</th>
|
|
<th style="width: 12%; text-align: right;">동작</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for u in users %}
|
|
<tr data-email="{{ u.email }}" data-dirty="false"
|
|
data-super="{{ 'true' if u.is_super_admin else 'false' }}">
|
|
<td>
|
|
<div class="erp-user-cell">
|
|
{% if u.picture %}
|
|
<img class="erp-user-avatar" src="{{ u.picture }}" alt="{{ u.name }}" />
|
|
{% else %}
|
|
<span class="erp-user-avatar-fallback">{{ (u.name or u.email)[0] | upper }}</span>
|
|
{% endif %}
|
|
<div>
|
|
<div class="erp-user-cell-name">
|
|
{{ u.name or u.email }}
|
|
{% if u.is_super_admin %}
|
|
<span class="erp-badge erp-badge-inverse" style="margin-left:6px;">슈퍼관리자</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="erp-user-cell-email">{{ u.email }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<select class="erp-select" data-field="role"
|
|
{% if u.is_super_admin %}disabled{% endif %}>
|
|
<option value="user" {% if u.role == 'user' %}selected{% endif %}>user</option>
|
|
<option value="admin" {% if u.role == 'admin' %}selected{% endif %}>admin</option>
|
|
</select>
|
|
</td>
|
|
{% for key in module_keys %}
|
|
<td style="text-align:center;">
|
|
<label class="erp-switch">
|
|
<input type="checkbox"
|
|
data-field="module"
|
|
data-module="{{ key }}"
|
|
{% if u.modules[key] %}checked{% endif %}
|
|
{% if u.is_super_admin or u.role == 'admin' %}disabled{% endif %} />
|
|
<span class="erp-switch-slider"></span>
|
|
</label>
|
|
</td>
|
|
{% endfor %}
|
|
<td style="font-size:12px; color: var(--color-midtone-gray);">
|
|
{{ (u.last_login or '')[:16].replace('T', ' ') }}
|
|
</td>
|
|
<td style="text-align: right;">
|
|
<button class="erp-btn erp-btn-primary" data-action="save"
|
|
{% if u.is_super_admin %}disabled{% endif %}>저장</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<p class="erp-section-meta" style="margin-top: var(--sp-16);">
|
|
※ <strong>{{ super_admin_email }}</strong> 은(는) 슈퍼 관리자이므로 권한을 변경할 수 없습니다.
|
|
관리자(admin) 역할로 지정된 사용자에게는 모든 모듈 권한이 자동 부여됩니다.
|
|
</p>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<div id="toast" class="erp-toast" role="status" aria-live="polite"></div>
|
|
|
|
<script>
|
|
const tbody = document.querySelector("#users-table tbody");
|
|
const searchInput = document.getElementById("user-search");
|
|
const userCountEl = document.getElementById("user-count");
|
|
const toastEl = document.getElementById("toast");
|
|
|
|
function markDirty(tr) { tr.setAttribute("data-dirty", "true"); }
|
|
function clearDirty(tr) { tr.setAttribute("data-dirty", "false"); }
|
|
|
|
function showToast(msg, type) {
|
|
toastEl.textContent = msg;
|
|
toastEl.dataset.type = type || "info";
|
|
toastEl.dataset.visible = "true";
|
|
clearTimeout(showToast._t);
|
|
showToast._t = setTimeout(() => {
|
|
toastEl.dataset.visible = "false";
|
|
}, 2400);
|
|
}
|
|
|
|
// 역할 변경시 모듈 토글 활성/비활성 갱신
|
|
function syncModuleSwitches(tr) {
|
|
const isSuper = tr.dataset.super === "true";
|
|
const role = tr.querySelector("select[data-field='role']").value;
|
|
const adminRole = role === "admin";
|
|
tr.querySelectorAll("input[data-field='module']").forEach((cb) => {
|
|
if (isSuper || adminRole) {
|
|
cb.checked = true;
|
|
cb.disabled = true;
|
|
} else {
|
|
cb.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
tbody.addEventListener("change", (e) => {
|
|
const tr = e.target.closest("tr");
|
|
if (!tr) return;
|
|
if (e.target.dataset.field === "role") {
|
|
syncModuleSwitches(tr);
|
|
}
|
|
markDirty(tr);
|
|
});
|
|
|
|
tbody.addEventListener("click", async (e) => {
|
|
const btn = e.target.closest("button[data-action='save']");
|
|
if (!btn) return;
|
|
const tr = btn.closest("tr");
|
|
const email = tr.dataset.email;
|
|
const role = tr.querySelector("select[data-field='role']").value;
|
|
const modules = {};
|
|
tr.querySelectorAll("input[data-field='module']").forEach((cb) => {
|
|
modules[cb.dataset.module] = cb.checked;
|
|
});
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = "저장 중…";
|
|
try {
|
|
const res = await fetch(`/api/users/${encodeURIComponent(email)}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "same-origin",
|
|
body: JSON.stringify({ role, modules }),
|
|
});
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.detail || `HTTP ${res.status}`);
|
|
}
|
|
clearDirty(tr);
|
|
showToast(`${email} 저장 완료`, "info");
|
|
} catch (err) {
|
|
showToast(`저장 실패: ${err.message}`, "error");
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = "저장";
|
|
}
|
|
});
|
|
|
|
// 검색
|
|
searchInput.addEventListener("input", () => {
|
|
const q = searchInput.value.toLowerCase().trim();
|
|
let visible = 0;
|
|
tbody.querySelectorAll("tr").forEach((tr) => {
|
|
const text = tr.textContent.toLowerCase();
|
|
const match = !q || text.includes(q);
|
|
tr.style.display = match ? "" : "none";
|
|
if (match) visible++;
|
|
});
|
|
userCountEl.textContent = q
|
|
? `검색 결과 ${visible}명`
|
|
: `총 ${tbody.querySelectorAll("tr").length}명`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|