fix #492: add token context selection

src/main/resources/static/js/app.js

@@ -441,6 +441,51 @@ function setWizardPreview(wizard, name, value) {
   });
 }
 
+function setTokenPreview(preview, name, value) {
+  preview.querySelectorAll(`[data-token-preview="${name}"]`).forEach((target) => {
+    target.textContent = value;
+  });
+}
+
+function updateTokenContextPreview(select) {
+  const form = select.closest('form');
+  const preview = form?.querySelector('[data-token-context-preview]');
+  if (!preview) {
+    return;
+  }
+  const option = selectedOption(select);
+  if (!option || !option.value) {
+    setTokenPreview(preview, 'status', '미선택');
+    setTokenPreview(preview, 'username', '원문 직접 입력');
+    setTokenPreview(preview, 'prefix', '-');
+    setTokenPreview(preview, 'expiresAt', '-');
+    setTokenPreview(preview, 'directRoles', '-');
+    setTokenPreview(preview, 'groups', '-');
+    setTokenPreview(preview, 'inheritedRoles', '-');
+    setTokenPreview(preview, 'description', '토큰을 선택하면 등록된 사용자/역할 컨텍스트를 먼저 확인할 수 있습니다.');
+    return;
+  }
+
+  const directRoles = splitList(option.dataset.directRoles || '');
+  const groups = splitList(option.dataset.groups || '');
+  const inheritedRoles = splitList(option.dataset.inheritedRoles || '');
+  setTokenPreview(preview, 'status', option.dataset.status || '-');
+  setTokenPreview(preview, 'username', option.dataset.username || '-');
+  setTokenPreview(preview, 'prefix', option.dataset.prefix || '****');
+  setTokenPreview(preview, 'expiresAt', option.dataset.expiresAt || '-');
+  setTokenPreview(preview, 'directRoles', formatList(directRoles, '직접 역할 없음'));
+  setTokenPreview(preview, 'groups', formatList(groups, '소속 그룹 없음'));
+  setTokenPreview(preview, 'inheritedRoles', formatList(inheritedRoles, '그룹 상속 역할 없음'));
+  setTokenPreview(preview, 'description', option.dataset.description || '설명 없음');
+}
+
+function initTokenContextPreviews() {
+  document.querySelectorAll('[data-token-context-select]').forEach((select) => {
+    select.addEventListener('change', () => updateTokenContextPreview(select));
+    updateTokenContextPreview(select);
+  });
+}
+
 function sqlLiteral(value) {
   return `'${String(value || '').replaceAll("'", "''")}'`;
 }
@@ -745,6 +790,7 @@ document.addEventListener('DOMContentLoaded', () => {
     select.addEventListener('change', () => filterGroupDetail(select.id));
     filterGroupDetail(select.id);
   });
+  initTokenContextPreviews();
   const objectSelect = document.querySelector('select[name="objectRef"]');
   if (objectSelect) {
     objectSelect.addEventListener('change', () => {