asdasd
This commit is contained in:
@@ -1,255 +0,0 @@
|
||||
#cron-management-app {
|
||||
min-height: 100%;
|
||||
color: #0f172a;
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
#cron-management-app,
|
||||
#cron-management-app * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#cron-management-app.is-loading {
|
||||
opacity: 0.72;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-shell,
|
||||
#cron-management-app .cm-frame,
|
||||
#cron-management-app .cm-main,
|
||||
#cron-management-app .cm-panel {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-brand,
|
||||
#cron-management-app .cm-copy {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-kicker {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-card,
|
||||
#cron-management-app .cm-job-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-card {
|
||||
gap: 12px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-side-title,
|
||||
#cron-management-app .cm-section-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-side-metric,
|
||||
#cron-management-app .cm-field,
|
||||
#cron-management-app .cm-token-box {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-side-metric span,
|
||||
#cron-management-app .cm-field span,
|
||||
#cron-management-app .cm-token-box p,
|
||||
#cron-management-app .cm-job-card p,
|
||||
#cron-management-app .cm-message,
|
||||
#cron-management-app .cm-empty {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-form--global {
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-field input,
|
||||
#cron-management-app .cm-token-box,
|
||||
#cron-management-app .cm-status-grid > div {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-token-box code {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-inline-form {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-primary {
|
||||
background: linear-gradient(135deg, #312e81, #4338ca);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-secondary {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-head,
|
||||
#cron-management-app .cm-section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-summary-item,
|
||||
#cron-management-app .cm-job-inline-meta {
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-summary-item {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 12px;
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-summary-item span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-summary-item strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-inline-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-inline-meta span {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-job-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-form--job {
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 14px;
|
||||
background: rgba(248, 250, 252, 0.85);
|
||||
}
|
||||
|
||||
#cron-management-app .cm-form--job[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-form--job .cm-field input {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-status-grid strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-check {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-message {
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-message.is-success {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-message.is-error,
|
||||
#cron-management-app .cm-parse-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #991b1b;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
#cron-management-app .cm-list {
|
||||
margin: 8px 0 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#cron-management-app .cm-form--global,
|
||||
#cron-management-app .cm-status-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
(() => {
|
||||
const normalizeUrl = (url) => {
|
||||
const next = new URL(url, window.location.origin);
|
||||
next.searchParams.set('partial', '1');
|
||||
return next.toString();
|
||||
};
|
||||
|
||||
const renderError = (host, message) => {
|
||||
host.innerHTML = `
|
||||
<div class="window-app-shell cm-shell">
|
||||
<div class="window-app-frame cm-frame">
|
||||
<main class="window-app-main cm-main">
|
||||
<div class="window-app-panel cm-panel">
|
||||
<section class="window-app-card cm-card">
|
||||
<p class="cm-message is-error">${String(message || 'Cron Tool konnte nicht geladen werden.')}</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const bindInteractions = (host, loadRoute) => {
|
||||
host.querySelectorAll('[data-cm-edit-toggle]').forEach((button) => {
|
||||
if (button.dataset.cmBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.dataset.cmBound = '1';
|
||||
button.addEventListener('click', () => {
|
||||
const targetId = String(button.getAttribute('data-cm-edit-toggle') || '');
|
||||
const target = targetId !== '' ? host.querySelector(`[data-cm-edit-target="${CSS.escape(targetId)}"]`) : null;
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
target.hidden = !target.hidden;
|
||||
});
|
||||
});
|
||||
|
||||
host.querySelectorAll('[data-cm-edit-close]').forEach((button) => {
|
||||
if (button.dataset.cmBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
button.dataset.cmBound = '1';
|
||||
button.addEventListener('click', () => {
|
||||
const targetId = String(button.getAttribute('data-cm-edit-close') || '');
|
||||
const target = targetId !== '' ? host.querySelector(`[data-cm-edit-target="${CSS.escape(targetId)}"]`) : null;
|
||||
if (target instanceof HTMLElement) {
|
||||
target.hidden = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
host.querySelectorAll('form[action]').forEach((form) => {
|
||||
if (form.dataset.cmBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
const action = String(form.getAttribute('action') || '');
|
||||
if (!action.startsWith('/admin/cron/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
form.dataset.cmBound = '1';
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
host.classList.add('is-loading');
|
||||
const response = await fetch(normalizeUrl(action), {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
body: new FormData(form),
|
||||
});
|
||||
|
||||
const html = await response.text();
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
host.innerHTML = html;
|
||||
bindInteractions(host, loadRoute);
|
||||
} catch (error) {
|
||||
renderError(host, error?.message || 'Cron Tool konnte nicht geladen werden.');
|
||||
} finally {
|
||||
host.classList.remove('is-loading');
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
window.initCronManagementApp = function initCronManagementApp(host, options = {}) {
|
||||
if (!(host instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (host.dataset.cmAppBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
host.dataset.cmAppBound = '1';
|
||||
|
||||
const entryRoute = String(options.entryRoute || '/admin/cron/');
|
||||
const loadRoute = async (route) => {
|
||||
try {
|
||||
host.classList.add('is-loading');
|
||||
const response = await fetch(normalizeUrl(route), {
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'text/html' },
|
||||
});
|
||||
const html = await response.text();
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
host.innerHTML = html;
|
||||
bindInteractions(host, loadRoute);
|
||||
} catch (error) {
|
||||
renderError(host, error?.message || 'Cron Tool konnte nicht geladen werden.');
|
||||
} finally {
|
||||
host.classList.remove('is-loading');
|
||||
}
|
||||
};
|
||||
|
||||
if (options.standalone) {
|
||||
bindInteractions(host, loadRoute);
|
||||
return;
|
||||
}
|
||||
|
||||
loadRoute(entryRoute);
|
||||
};
|
||||
})();
|
||||
@@ -1,322 +0,0 @@
|
||||
#user-management-app {
|
||||
min-height: 100%;
|
||||
color: #0f172a;
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
#user-management-app,
|
||||
#user-management-app * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#user-management-app.is-loading {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#user-management-app .um-shell,
|
||||
#user-management-app .um-frame,
|
||||
#user-management-app .um-main,
|
||||
#user-management-app .um-panel {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#user-management-app .um-brand,
|
||||
#user-management-app .um-copy,
|
||||
#user-management-app .um-meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#user-management-app .um-kicker {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
#user-management-app .um-nav-button.is-active {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#user-management-app .um-side-card,
|
||||
#user-management-app .um-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
#user-management-app .um-side-title,
|
||||
#user-management-app .um-section-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#user-management-app .um-side-metric,
|
||||
#user-management-app .um-summary-item {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#user-management-app .um-side-metric span,
|
||||
#user-management-app .um-summary-item span,
|
||||
#user-management-app .um-request-card span,
|
||||
#user-management-app .um-field span,
|
||||
#user-management-app .um-meta,
|
||||
#user-management-app .um-empty,
|
||||
#user-management-app .um-message,
|
||||
#user-management-app .um-checkbox-item p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
#user-management-app .um-grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
#user-management-app .um-grid--split {
|
||||
grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr);
|
||||
}
|
||||
|
||||
#user-management-app .um-section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#user-management-app .um-request-list,
|
||||
#user-management-app .um-checkbox-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#user-management-app .um-request-card {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
#user-management-app .um-request-card:hover,
|
||||
#user-management-app .um-request-card.is-active {
|
||||
border-color: rgba(37, 99, 235, 0.4);
|
||||
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#user-management-app .um-request-card strong,
|
||||
#user-management-app .um-checkbox-item strong {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#user-management-app .um-request-status {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
#user-management-app .um-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#user-management-app .um-summary-item {
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
}
|
||||
|
||||
#user-management-app .um-summary-item strong {
|
||||
font-size: 15px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#user-management-app .um-form {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#user-management-app .um-field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#user-management-app .um-field input,
|
||||
#user-management-app .um-field textarea {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #0f172a;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
#user-management-app .um-field textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-list {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-list[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-option {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 14px;
|
||||
background: rgba(248, 250, 252, 0.95);
|
||||
color: #0f172a;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-option:hover {
|
||||
border-color: rgba(37, 99, 235, 0.35);
|
||||
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-option strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-option span,
|
||||
#user-management-app .um-user-picker-empty {
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
#user-management-app .um-user-picker-empty {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
#user-management-app .um-fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#user-management-app .um-fieldset legend {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#user-management-app .um-checkbox-item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#user-management-app .um-checkbox-item input {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#user-management-app .um-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#user-management-app .um-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 10px 16px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#user-management-app .um-secondary,
|
||||
#user-management-app .um-danger {
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
#user-management-app .um-danger {
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
#user-management-app .um-message {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#user-management-app .um-message strong {
|
||||
font-size: 15px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#user-management-app .um-message.is-error {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
#user-management-app .um-message.is-success {
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
#user-management-app .um-list {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
#user-management-app .um-grid--split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#user-management-app .um-section-head,
|
||||
#user-management-app .um-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
@@ -1,270 +0,0 @@
|
||||
(() => {
|
||||
const normalizeUrl = (url) => {
|
||||
const next = new URL(url, window.location.origin);
|
||||
next.searchParams.set('partial', '1');
|
||||
return next.toString();
|
||||
};
|
||||
|
||||
const renderError = (host, message) => {
|
||||
host.innerHTML = `
|
||||
<div class="window-app-shell um-shell">
|
||||
<div class="window-app-frame um-frame">
|
||||
<main class="window-app-main um-main">
|
||||
<div class="window-app-panel um-panel">
|
||||
<section class="window-app-card um-card">
|
||||
<p class="um-message is-error">${String(message || 'User Management konnte nicht geladen werden.')}</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const escapeHtml = (value) => String(value ?? '')
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
|
||||
const bindUserPickers = (host) => {
|
||||
const dataNode = host.querySelector('#um-existing-users-data');
|
||||
if (!(dataNode instanceof HTMLScriptElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let users = [];
|
||||
try {
|
||||
const decoded = JSON.parse(dataNode.textContent || '[]');
|
||||
if (Array.isArray(decoded)) {
|
||||
users = decoded;
|
||||
}
|
||||
} catch (_error) {
|
||||
users = [];
|
||||
}
|
||||
|
||||
const normalizedUsers = users.map((user) => ({
|
||||
username: String(user?.username || ''),
|
||||
display_name: String(user?.display_name || ''),
|
||||
email: String(user?.email || ''),
|
||||
group_dns: Array.isArray(user?.group_dns) ? user.group_dns.map((group) => String(group || '')) : [],
|
||||
search: [
|
||||
String(user?.username || ''),
|
||||
String(user?.display_name || ''),
|
||||
String(user?.email || ''),
|
||||
].join(' ').toLowerCase(),
|
||||
})).filter((user) => user.username !== '');
|
||||
|
||||
const closeAll = () => {
|
||||
host.querySelectorAll('[data-user-picker-list]').forEach((list) => {
|
||||
list.setAttribute('hidden', 'hidden');
|
||||
list.innerHTML = '';
|
||||
});
|
||||
};
|
||||
|
||||
host.querySelectorAll('[data-user-picker]').forEach((picker) => {
|
||||
const input = picker.querySelector('[data-user-picker-input]');
|
||||
const list = picker.querySelector('[data-user-picker-list]');
|
||||
if (!(input instanceof HTMLInputElement) || !(list instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (input.dataset.umPickerBound === '1') {
|
||||
return;
|
||||
}
|
||||
input.dataset.umPickerBound = '1';
|
||||
|
||||
const syncGroupSelection = (username) => {
|
||||
const normalizedUsername = String(username || '').trim().toLowerCase();
|
||||
host.querySelectorAll('input[name="manual_group_dns[]"]').forEach((checkbox) => {
|
||||
if (!(checkbox instanceof HTMLInputElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
checkbox.checked = false;
|
||||
});
|
||||
|
||||
if (normalizedUsername === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
const user = normalizedUsers.find((entry) => entry.username.toLowerCase() === normalizedUsername);
|
||||
if (!user) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedGroups = new Set(user.group_dns);
|
||||
host.querySelectorAll('input[name="manual_group_dns[]"]').forEach((checkbox) => {
|
||||
if (!(checkbox instanceof HTMLInputElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
checkbox.checked = selectedGroups.has(checkbox.value);
|
||||
});
|
||||
};
|
||||
|
||||
const renderMatches = () => {
|
||||
const needle = input.value.trim().toLowerCase();
|
||||
const matches = normalizedUsers
|
||||
.filter((user) => needle === '' || user.search.includes(needle))
|
||||
.slice(0, needle === '' ? 80 : 25);
|
||||
|
||||
list.innerHTML = '';
|
||||
if (matches.length === 0) {
|
||||
list.innerHTML = '<div class="um-user-picker-empty">Keine passenden Benutzer gefunden.</div>';
|
||||
list.hidden = false;
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = matches.map((user) => `
|
||||
<button class="um-user-picker-option" type="button" data-user-picker-value="${escapeHtml(user.username)}">
|
||||
<strong>${escapeHtml(user.username)}</strong>
|
||||
<span>${escapeHtml(user.display_name || 'Ohne Anzeigename')}</span>
|
||||
<span>${escapeHtml(user.email || 'Keine E-Mail')}</span>
|
||||
</button>
|
||||
`).join('');
|
||||
list.hidden = false;
|
||||
};
|
||||
|
||||
input.addEventListener('focus', renderMatches);
|
||||
input.addEventListener('input', renderMatches);
|
||||
|
||||
list.addEventListener('click', (event) => {
|
||||
const option = event.target.closest('[data-user-picker-value]');
|
||||
if (!(option instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
input.value = String(option.dataset.userPickerValue || '');
|
||||
list.hidden = true;
|
||||
list.innerHTML = '';
|
||||
syncGroupSelection(input.value);
|
||||
input.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
|
||||
input.addEventListener('change', () => {
|
||||
syncGroupSelection(input.value);
|
||||
});
|
||||
|
||||
if (input.value.trim() !== '') {
|
||||
syncGroupSelection(input.value);
|
||||
}
|
||||
});
|
||||
|
||||
if (!host.dataset.umPickerOutsideBound) {
|
||||
host.dataset.umPickerOutsideBound = '1';
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!(event.target instanceof Node) || !host.contains(event.target)) {
|
||||
closeAll();
|
||||
return;
|
||||
}
|
||||
|
||||
const insidePicker = event.target instanceof Element && event.target.closest('[data-user-picker]');
|
||||
if (!insidePicker) {
|
||||
closeAll();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const bindInteractions = (host, loadRoute) => {
|
||||
host.querySelectorAll('a[href]').forEach((link) => {
|
||||
if (link.dataset.umBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
const href = String(link.getAttribute('href') || '');
|
||||
if (!href.startsWith('/admin/users/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
link.dataset.umBound = '1';
|
||||
link.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
loadRoute(href);
|
||||
});
|
||||
});
|
||||
|
||||
host.querySelectorAll('form[action]').forEach((form) => {
|
||||
if (form.dataset.umBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
const action = String(form.getAttribute('action') || '');
|
||||
if (!action.startsWith('/admin/users/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
form.dataset.umBound = '1';
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
host.classList.add('is-loading');
|
||||
const response = await fetch(normalizeUrl(action), {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
body: new FormData(form),
|
||||
});
|
||||
|
||||
const html = await response.text();
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
host.innerHTML = html;
|
||||
bindInteractions(host, loadRoute);
|
||||
bindUserPickers(host);
|
||||
} catch (error) {
|
||||
renderError(host, error?.message || 'Formular konnte nicht verarbeitet werden.');
|
||||
} finally {
|
||||
host.classList.remove('is-loading');
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
window.initUserManagementApp = function initUserManagementApp(host, options = {}) {
|
||||
if (!(host instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (host.dataset.umAppBound === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
host.dataset.umAppBound = '1';
|
||||
|
||||
const entryRoute = String(options.entryRoute || '/admin/users/');
|
||||
const loadRoute = async (route) => {
|
||||
try {
|
||||
host.classList.add('is-loading');
|
||||
const response = await fetch(normalizeUrl(route), {
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'text/html' },
|
||||
});
|
||||
const html = await response.text();
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
host.innerHTML = html;
|
||||
bindInteractions(host, loadRoute);
|
||||
bindUserPickers(host);
|
||||
} catch (error) {
|
||||
renderError(host, error?.message || 'User Management konnte nicht geladen werden.');
|
||||
} finally {
|
||||
host.classList.remove('is-loading');
|
||||
}
|
||||
};
|
||||
|
||||
if (options.standalone) {
|
||||
bindInteractions(host, loadRoute);
|
||||
bindUserPickers(host);
|
||||
return;
|
||||
}
|
||||
|
||||
loadRoute(entryRoute);
|
||||
};
|
||||
})();
|
||||
@@ -1,98 +0,0 @@
|
||||
#user-self-management-app {
|
||||
min-height: 100%;
|
||||
color: #0f172a;
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
#user-self-management-app,
|
||||
#user-self-management-app * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-brand {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-brand h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-brand p,
|
||||
#user-self-management-app .usm-copy,
|
||||
#user-self-management-app .usm-meta,
|
||||
#user-self-management-app .usm-note,
|
||||
#user-self-management-app .usm-status {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-nav-button.is-active {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-kicker {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 32px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-choice.is-active {
|
||||
border-color: #2563eb;
|
||||
box-shadow: inset 0 0 0 1px #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-choice strong,
|
||||
#user-self-management-app .usm-item-main strong {
|
||||
display: block;
|
||||
margin: 0 0 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-choice p,
|
||||
#user-self-management-app .usm-item-main p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-item input {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-item-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-item-meta {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-message {
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-message.is-error {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
#user-self-management-app .usm-message.is-success {
|
||||
color: #047857;
|
||||
}
|
||||
@@ -1,474 +0,0 @@
|
||||
(() => {
|
||||
const SECTIONS = [
|
||||
{ id: 'desktop', label: 'Desktop Type' },
|
||||
{ id: 'profile', label: 'Benutzerdaten' },
|
||||
{ id: 'apps', label: 'App-Installation' },
|
||||
{ id: 'widgets', label: 'Infobereich' },
|
||||
];
|
||||
|
||||
const escapeHtml = (value) => String(value)
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
|
||||
const clone = (value) => JSON.parse(JSON.stringify(value));
|
||||
|
||||
const sameSelection = (left, right) => {
|
||||
const nextLeft = [...left].sort();
|
||||
const nextRight = [...right].sort();
|
||||
|
||||
return JSON.stringify(nextLeft) === JSON.stringify(nextRight);
|
||||
};
|
||||
|
||||
const summarizeSection = (sectionId) => {
|
||||
if (sectionId === 'desktop') {
|
||||
return 'Windows-aehnlicher Standard fuer Desktop-Typ und Skin-Auswahl.';
|
||||
}
|
||||
|
||||
if (sectionId === 'profile') {
|
||||
return 'Lokales Profil fuer Name, E-Mail, Telefon und spaetere LDAP-/Keycloak-Synchronisierung.';
|
||||
}
|
||||
|
||||
if (sectionId === 'apps') {
|
||||
return 'Bestimmt, welche Desktop-Apps fuer diesen Benutzer sichtbar bleiben.';
|
||||
}
|
||||
|
||||
return 'Steuert, welche Elemente im rechten Infobereich des Desktops aktiv sind.';
|
||||
};
|
||||
|
||||
const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
|
||||
const isActive = state.draft.desktop.active_skin === skin.skin_id;
|
||||
|
||||
return `
|
||||
<button
|
||||
class="window-app-choice usm-choice${isActive ? ' is-active' : ''}"
|
||||
type="button"
|
||||
data-action="select-skin"
|
||||
data-skin-id="${escapeHtml(skin.skin_id)}"
|
||||
>
|
||||
<strong>${escapeHtml(skin.label)}</strong>
|
||||
<p>${escapeHtml(summarizeSkin(skin.skin_id))}</p>
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
const summarizeSkin = (skinId) => {
|
||||
if (skinId === 'apple') {
|
||||
return 'Top-Bar, rechte Icon-Anordnung und Finder-nahe Fensterelemente.';
|
||||
}
|
||||
|
||||
if (skinId === 'linux') {
|
||||
return 'Klassische Arbeitsflaeche mit neutralem Fensterstil und Linux-Taskbar.';
|
||||
}
|
||||
|
||||
return 'Standardisiertes Control-Panel-Muster mit Windows-naher Einstellungslogik.';
|
||||
};
|
||||
|
||||
const renderAppItems = (state) => state.bootstrap.options.apps.map((app) => {
|
||||
const checked = state.draft.apps.enabled_ids.includes(app.app_id);
|
||||
|
||||
return `
|
||||
<label class="window-app-item usm-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-action="toggle-app"
|
||||
data-app-id="${escapeHtml(app.app_id)}"
|
||||
${checked ? 'checked' : ''}
|
||||
${app.required ? 'disabled' : ''}
|
||||
>
|
||||
<span class="window-app-item-main usm-item-main">
|
||||
<strong>${escapeHtml(app.title)}</strong>
|
||||
<p>${escapeHtml(app.summary || '')}</p>
|
||||
<span class="usm-item-meta">${app.required ? 'Pflicht-App' : 'Optional sichtbar'}</span>
|
||||
</span>
|
||||
</label>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
const renderWidgetItems = (state) => state.bootstrap.options.widgets.map((widget) => {
|
||||
const checked = state.draft.widgets.active_ids.includes(widget.widget_id);
|
||||
|
||||
return `
|
||||
<label class="window-app-item usm-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-action="toggle-widget"
|
||||
data-widget-id="${escapeHtml(widget.widget_id)}"
|
||||
${checked ? 'checked' : ''}
|
||||
>
|
||||
<span class="window-app-item-main usm-item-main">
|
||||
<strong>${escapeHtml(widget.title)}</strong>
|
||||
<p>${escapeHtml(widget.summary || '')}</p>
|
||||
<span class="usm-item-meta">${widget.default_enabled ? 'Standardbereich' : 'Optionaler Bereich'}</span>
|
||||
</span>
|
||||
</label>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
const renderProfileFields = (state) => `
|
||||
<div class="window-app-grid usm-grid">
|
||||
${renderField('name', 'Name', state.draft.profile.name)}
|
||||
${renderField('email', 'E-Mail', state.draft.profile.email, 'email')}
|
||||
${renderField('phone', 'Telefon', state.draft.profile.phone, 'tel')}
|
||||
${renderField('birthdate', 'Geburtsdatum', state.draft.profile.birthdate, 'date')}
|
||||
${renderField('title', 'Titel', state.draft.profile.title)}
|
||||
${renderField('department', 'Abteilung', state.draft.profile.department)}
|
||||
${renderField('city', 'Ort', state.draft.profile.city)}
|
||||
${renderField('website', 'Website', state.draft.profile.website, 'url')}
|
||||
</div>
|
||||
<div class="window-app-field usm-field">
|
||||
<label class="window-app-label usm-label" for="usm-notes">Notizen</label>
|
||||
<textarea id="usm-notes" class="window-app-textarea usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const renderField = (fieldId, label, value, type = 'text') => `
|
||||
<div class="window-app-field usm-field">
|
||||
<label class="window-app-label usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
|
||||
<input
|
||||
id="usm-${escapeHtml(fieldId)}"
|
||||
class="window-app-input usm-input"
|
||||
type="${escapeHtml(type)}"
|
||||
data-field="profile.${escapeHtml(fieldId)}"
|
||||
value="${escapeHtml(value || '')}"
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const sectionContent = (state) => {
|
||||
if (state.activeSection === 'desktop') {
|
||||
return `
|
||||
<section class="window-app-card usm-card">
|
||||
<p class="window-app-kicker usm-kicker">Desktop Type</p>
|
||||
<h2>Skin-Auswahl</h2>
|
||||
<p class="window-app-copy usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
|
||||
<div class="window-app-choice-grid usm-choice-grid">
|
||||
${renderSkinChoices(state)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
if (state.activeSection === 'profile') {
|
||||
return `
|
||||
<section class="window-app-card usm-card">
|
||||
<p class="window-app-kicker usm-kicker">Benutzerdaten</p>
|
||||
<h2>Persoenliches Profil</h2>
|
||||
<p class="window-app-copy usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
|
||||
${renderProfileFields(state)}
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
if (state.activeSection === 'apps') {
|
||||
return `
|
||||
<section class="window-app-card usm-card">
|
||||
<p class="window-app-kicker usm-kicker">App-Auswahl</p>
|
||||
<h2>Sichtbare Desktop-Apps</h2>
|
||||
<p class="window-app-copy usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
|
||||
<div class="window-app-list usm-list">
|
||||
${renderAppItems(state)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<section class="window-app-card usm-card">
|
||||
<p class="window-app-kicker usm-kicker">Infobereich</p>
|
||||
<h2>Rechter Desktopbereich</h2>
|
||||
<p class="window-app-copy usm-copy">Diese Inhalte liegen aktuell im rechten Infobereich des Desktops und werden hier benutzerbezogen ein- oder ausgeblendet.</p>
|
||||
<div class="window-app-list usm-list">
|
||||
${renderWidgetItems(state)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
|
||||
const renderApp = (root, state) => {
|
||||
if (state.loading) {
|
||||
root.innerHTML = '<div class="window-app-loading usm-loading"><p class="window-app-copy usm-copy">Einstellungen werden geladen.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.error && !state.bootstrap) {
|
||||
root.innerHTML = `<div class="window-app-error-state usm-error-state"><p class="window-app-message usm-message is-error">${escapeHtml(state.error)}</p></div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
root.innerHTML = `
|
||||
<div class="window-app-shell usm-shell">
|
||||
<div class="window-app-frame usm-frame">
|
||||
<aside class="window-app-sidebar usm-nav">
|
||||
<div class="window-app-brand usm-brand">
|
||||
<p class="window-app-kicker usm-kicker">Setup</p>
|
||||
<h1>User Self Management</h1>
|
||||
<p class="window-app-copy">Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
|
||||
</div>
|
||||
<div class="window-app-nav-list usm-nav-list">
|
||||
${SECTIONS.map((section) => `
|
||||
<button
|
||||
class="window-app-nav-button usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
|
||||
type="button"
|
||||
data-action="open-section"
|
||||
data-section-id="${escapeHtml(section.id)}"
|
||||
>
|
||||
<strong>${escapeHtml(section.label)}</strong>
|
||||
<span class="window-app-meta usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
</aside>
|
||||
<main class="window-app-main usm-main">
|
||||
<div class="window-app-panel usm-panel">
|
||||
<section class="window-app-hero usm-hero">
|
||||
<div>
|
||||
<p class="window-app-kicker usm-kicker">Desktop Setup</p>
|
||||
<h2 class="window-app-title usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
|
||||
<p class="window-app-copy usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
|
||||
</div>
|
||||
<div class="window-app-pill-row usm-pill-row">
|
||||
<span class="window-app-pill usm-pill">LDAP: geplant</span>
|
||||
<span class="window-app-pill usm-pill">Keycloak: geplant</span>
|
||||
<span class="window-app-pill usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
|
||||
</div>
|
||||
</section>
|
||||
${sectionContent(state)}
|
||||
<section class="window-app-actions usm-actions">
|
||||
<div>
|
||||
<p class="window-app-note usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
|
||||
<p class="window-app-message usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
|
||||
</div>
|
||||
<button class="window-app-button usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
|
||||
${state.saving ? 'Speichert ...' : 'Aenderungen speichern'}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const sectionTitle = (sectionId) => {
|
||||
const current = SECTIONS.find((section) => section.id === sectionId);
|
||||
return current ? current.label : 'Setup';
|
||||
};
|
||||
|
||||
const setDraftValue = (draft, path, value) => {
|
||||
const segments = path.split('.');
|
||||
let cursor = draft;
|
||||
|
||||
segments.slice(0, -1).forEach((segment) => {
|
||||
cursor = cursor[segment];
|
||||
});
|
||||
|
||||
cursor[segments[segments.length - 1]] = value;
|
||||
};
|
||||
|
||||
const toggleSelection = (collection, value) => {
|
||||
const next = new Set(collection);
|
||||
|
||||
if (next.has(value)) {
|
||||
next.delete(value);
|
||||
} else {
|
||||
next.add(value);
|
||||
}
|
||||
|
||||
return Array.from(next);
|
||||
};
|
||||
|
||||
const syncSelectionWithCheckedState = (collection, value, isChecked) => {
|
||||
const next = new Set(collection);
|
||||
|
||||
if (isChecked) {
|
||||
next.add(value);
|
||||
} else {
|
||||
next.delete(value);
|
||||
}
|
||||
|
||||
return Array.from(next);
|
||||
};
|
||||
|
||||
const buildPatch = (state) => ({
|
||||
profile: state.draft.profile,
|
||||
desktop: {
|
||||
active_skin: state.draft.desktop.active_skin,
|
||||
},
|
||||
apps: {
|
||||
enabled_ids: state.draft.apps.enabled_ids,
|
||||
},
|
||||
widgets: {
|
||||
active_ids: state.draft.widgets.active_ids,
|
||||
},
|
||||
});
|
||||
|
||||
const requiresReload = (before, after) => before.desktop.active_skin !== after.desktop.active_skin
|
||||
|| !sameSelection(before.apps.enabled_ids, after.apps.enabled_ids);
|
||||
|
||||
const attachInteractions = (root, state, options) => {
|
||||
root.addEventListener('click', async (event) => {
|
||||
const button = event.target instanceof Element ? event.target.closest('[data-action]') : null;
|
||||
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
const action = button.dataset.action;
|
||||
|
||||
if (action === 'open-section') {
|
||||
state.activeSection = button.dataset.sectionId || 'desktop';
|
||||
renderApp(root, state);
|
||||
return;
|
||||
}
|
||||
|
||||
if (action === 'select-skin') {
|
||||
state.draft.desktop.active_skin = button.dataset.skinId || state.draft.desktop.active_skin;
|
||||
renderApp(root, state);
|
||||
return;
|
||||
}
|
||||
|
||||
if (action === 'save-settings') {
|
||||
if (!options.apiBase || state.saving) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.saving = true;
|
||||
state.error = '';
|
||||
state.success = '';
|
||||
renderApp(root, state);
|
||||
|
||||
try {
|
||||
const before = clone(state.bootstrap.preferences);
|
||||
const response = await window.fetch(options.apiBase, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: JSON.stringify(buildPatch(state)),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`save-failed:${response.status}`);
|
||||
}
|
||||
|
||||
const payload = await response.json();
|
||||
const after = payload.preferences;
|
||||
const ldapSync = payload.meta?.ldap_profile_sync || null;
|
||||
state.bootstrap = payload;
|
||||
state.draft = clone(after);
|
||||
const baseMessage = payload.meta?.requires_reload
|
||||
? 'Gespeichert. Desktop wird fuer Skin- oder App-Aenderungen neu geladen.'
|
||||
: 'Einstellungen wurden gespeichert.';
|
||||
const ldapMessage = ldapSync && ldapSync.attempted
|
||||
? ` LDAP: ${ldapSync.message || (ldapSync.success ? 'Synchronisiert.' : 'Nicht synchronisiert.')}`
|
||||
: '';
|
||||
state.success = `${baseMessage}${ldapMessage}`;
|
||||
state.saving = false;
|
||||
renderApp(root, state);
|
||||
|
||||
if (window.desktopShell?.dispatchUserSettingsUpdate) {
|
||||
window.desktopShell.dispatchUserSettingsUpdate({
|
||||
preferences: after,
|
||||
requiresReload: payload.meta?.requires_reload || requiresReload(before, after),
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
} catch (error) {
|
||||
state.saving = false;
|
||||
state.error = 'Speichern fehlgeschlagen. Die lokalen Einstellungen bleiben unveraendert.';
|
||||
renderApp(root, state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
root.addEventListener('change', (event) => {
|
||||
const target = event.target;
|
||||
|
||||
if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.dataset.field) {
|
||||
setDraftValue(state.draft, target.dataset.field, target.value);
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.dataset.appId) {
|
||||
state.draft.apps.enabled_ids = syncSelectionWithCheckedState(
|
||||
state.draft.apps.enabled_ids,
|
||||
target.dataset.appId,
|
||||
target.checked
|
||||
);
|
||||
renderApp(root, state);
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.dataset.widgetId) {
|
||||
state.draft.widgets.active_ids = syncSelectionWithCheckedState(
|
||||
state.draft.widgets.active_ids,
|
||||
target.dataset.widgetId,
|
||||
target.checked
|
||||
);
|
||||
renderApp(root, state);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.initUserSelfManagementApp = (root, options = {}) => {
|
||||
if (!(root instanceof HTMLElement) || root.dataset.usmInitialized === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
root.dataset.usmInitialized = 'true';
|
||||
|
||||
const state = {
|
||||
loading: true,
|
||||
saving: false,
|
||||
error: '',
|
||||
success: '',
|
||||
activeSection: 'desktop',
|
||||
bootstrap: null,
|
||||
draft: null,
|
||||
};
|
||||
|
||||
attachInteractions(root, state, options);
|
||||
renderApp(root, state);
|
||||
|
||||
if (!options.apiBase) {
|
||||
state.loading = false;
|
||||
state.error = 'Die Setup-API ist nicht konfiguriert.';
|
||||
renderApp(root, state);
|
||||
return;
|
||||
}
|
||||
|
||||
window.fetch(options.apiBase, {
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`load-failed:${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((payload) => {
|
||||
state.loading = false;
|
||||
state.bootstrap = payload;
|
||||
state.draft = clone(payload.preferences);
|
||||
renderApp(root, state);
|
||||
})
|
||||
.catch(() => {
|
||||
state.loading = false;
|
||||
state.error = 'Die Einstellungen konnten nicht geladen werden.';
|
||||
renderApp(root, state);
|
||||
});
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user