private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dssad
All checks were successful
Deploy / deploy-staging (push) Successful in 24s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-19 00:58:20 +02:00
parent ac5b38d8c9
commit 2c87e7ec95
3 changed files with 362 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
public/assets/apps/user-self-management/app.js
View File

@@ -43,7 +43,7 @@
return `
<button
class="usm-choice${isActive ? ' is-active' : ''}"
class="window-app-choice usm-choice${isActive ? ' is-active' : ''}"
type="button"
data-action="select-skin"
data-skin-id="${escapeHtml(skin.skin_id)}"
@@ -70,7 +70,7 @@
const checked = state.draft.apps.enabled_ids.includes(app.app_id);
return `
<label class="usm-item">
<label class="window-app-item usm-item">
<input
type="checkbox"
data-action="toggle-app"
@@ -78,7 +78,7 @@
${checked ? 'checked' : ''}
${app.required ? 'disabled' : ''}
>
<span class="usm-item-main">
<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>
@@ -91,14 +91,14 @@
const checked = state.draft.widgets.active_ids.includes(widget.widget_id);
return `
<label class="usm-item">
<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="usm-item-main">
<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>
@@ -108,7 +108,7 @@
}).join('');
const renderProfileFields = (state) => `
<div class="usm-grid">
<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')}
@@ -118,18 +118,18 @@
${renderField('city', 'Ort', state.draft.profile.city)}
${renderField('website', 'Website', state.draft.profile.website, 'url')}
</div>
<div class="usm-field">
<label class="usm-label" for="usm-notes">Notizen</label>
<textarea id="usm-notes" class="usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
<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="usm-field">
<label class="usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
<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="usm-input"
class="window-app-input usm-input"
type="${escapeHtml(type)}"
data-field="profile.${escapeHtml(fieldId)}"
value="${escapeHtml(value || '')}"
@@ -140,11 +140,11 @@
const sectionContent = (state) => {
if (state.activeSection === 'desktop') {
return `
<section class="usm-card">
<p class="usm-kicker">Desktop Type</p>
<section class="window-app-card usm-card">
<p class="window-app-kicker usm-kicker">Desktop Type</p>
<h2>Skin-Auswahl</h2>
<p class="usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
<div class="usm-choice-grid">
<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>
@@ -153,10 +153,10 @@
if (state.activeSection === 'profile') {
return `
<section class="usm-card">
<p class="usm-kicker">Benutzerdaten</p>
<section class="window-app-card usm-card">
<p class="window-app-kicker usm-kicker">Benutzerdaten</p>
<h2>Persoenliches Profil</h2>
<p class="usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
<p class="window-app-copy usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
${renderProfileFields(state)}
</section>
`;
@@ -164,11 +164,11 @@
if (state.activeSection === 'apps') {
return `
<section class="usm-card">
<p class="usm-kicker">App-Auswahl</p>
<section class="window-app-card usm-card">
<p class="window-app-kicker usm-kicker">App-Auswahl</p>
<h2>Sichtbare Desktop-Apps</h2>
<p class="usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
<div class="usm-list">
<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>
@@ -176,11 +176,11 @@
}
return `
<section class="usm-card">
<p class="usm-kicker">Infobereich</p>
<section class="window-app-card usm-card">
<p class="window-app-kicker usm-kicker">Infobereich</p>
<h2>Rechter Desktopbereich</h2>
<p class="usm-copy">Diese Inhalte liegen aktuell im rechten Infobereich des Desktops und werden hier benutzerbezogen ein- oder ausgeblendet.</p>
<div class="usm-list">
<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>
@@ -189,59 +189,59 @@
const renderApp = (root, state) => {
if (state.loading) {
root.innerHTML = '<div class="usm-loading"><p class="usm-copy">Einstellungen werden geladen.</p></div>';
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="usm-error-state"><p class="usm-message is-error">${escapeHtml(state.error)}</p></div>`;
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="usm-shell">
<div class="usm-frame">
<aside class="usm-nav">
<div class="usm-brand">
<p class="usm-kicker">Setup</p>
<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>Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
<p class="window-app-copy">Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und den rechten Infobereich.</p>
</div>
<div class="usm-nav-list">
<div class="window-app-nav-list usm-nav-list">
${SECTIONS.map((section) => `
<button
class="usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
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="usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
<span class="window-app-meta usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
</button>
`).join('')}
</div>
</aside>
<main class="usm-main">
<div class="usm-panel">
<section class="usm-hero">
<main class="window-app-main usm-main">
<div class="window-app-panel usm-panel">
<section class="window-app-hero usm-hero">
<div>
<p class="usm-kicker">Desktop Setup</p>
<h2 class="usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
<p class="usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
<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="usm-pill-row">
<span class="usm-pill">LDAP: geplant</span>
<span class="usm-pill">Keycloak: geplant</span>
<span class="usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
<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="usm-actions">
<section class="window-app-actions usm-actions">
<div>
<p class="usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
<p class="usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
<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="usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
<button class="window-app-button usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
${state.saving ? 'Speichert ...' : 'Aenderungen speichern'}
</button>
</section>