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

213
public/assets/apps/user-self-management/app.css
View File

@@ -9,25 +9,6 @@
box-sizing: border-box;
}
#user-self-management-app .usm-shell {
min-height: 100%;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98)),
radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%);
}
#user-self-management-app .usm-frame {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
min-height: 100%;
}
#user-self-management-app .usm-nav {
padding: 22px 16px;
border-right: 1px solid rgba(148, 163, 184, 0.25);
background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
}
#user-self-management-app .usm-brand {
margin-bottom: 18px;
}
@@ -49,55 +30,8 @@
color: #475569;
}
#user-self-management-app .usm-nav-list {
display: grid;
gap: 8px;
}
#user-self-management-app .usm-nav-button {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
color: inherit;
text-align: left;
font: inherit;
cursor: pointer;
}
#user-self-management-app .usm-nav-button.is-active {
background: #0f172a;
color: #f8fafc;
border-color: #0f172a;
}
#user-self-management-app .usm-main {
padding: 24px;
}
#user-self-management-app .usm-panel {
display: grid;
gap: 18px;
max-width: 1080px;
margin: 0 auto;
}
#user-self-management-app .usm-hero,
#user-self-management-app .usm-card,
#user-self-management-app .usm-actions {
padding: 22px;
border-radius: 20px;
border: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}
#user-self-management-app .usm-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
color: #0f172a;
}
#user-self-management-app .usm-kicker {
@@ -115,83 +49,6 @@
line-height: 1.1;
}
#user-self-management-app .usm-pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#user-self-management-app .usm-pill {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: #e2e8f0;
font-size: 12px;
font-weight: 700;
color: #334155;
}
#user-self-management-app .usm-grid,
#user-self-management-app .usm-choice-grid,
#user-self-management-app .usm-list {
display: grid;
gap: 16px;
}
#user-self-management-app .usm-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#user-self-management-app .usm-choice-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#user-self-management-app .usm-field {
display: grid;
gap: 8px;
}
#user-self-management-app .usm-label {
font-size: 13px;
font-weight: 700;
color: #334155;
}
#user-self-management-app .usm-input,
#user-self-management-app .usm-textarea {
width: 100%;
min-height: 42px;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background: #fff;
color: inherit;
font: inherit;
}
#user-self-management-app .usm-textarea {
min-height: 112px;
resize: vertical;
}
#user-self-management-app .usm-input:focus,
#user-self-management-app .usm-textarea:focus {
outline: 2px solid rgba(37, 99, 235, 0.18);
border-color: #3b82f6;
}
#user-self-management-app .usm-choice {
display: grid;
gap: 8px;
padding: 16px;
border: 1px solid #cbd5e1;
border-radius: 16px;
background: #fff;
cursor: pointer;
}
#user-self-management-app .usm-choice.is-active {
border-color: #2563eb;
box-shadow: inset 0 0 0 1px #2563eb;
@@ -212,17 +69,6 @@
color: #475569;
}
#user-self-management-app .usm-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px 16px;
border: 1px solid #dbe2ea;
border-radius: 16px;
background: #fff;
}
#user-self-management-app .usm-item input {
margin-top: 4px;
}
@@ -238,33 +84,6 @@
color: #1d4ed8;
}
#user-self-management-app .usm-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
#user-self-management-app .usm-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: #2563eb;
color: #f8fafc;
font: inherit;
font-weight: 700;
cursor: pointer;
}
#user-self-management-app .usm-button:disabled {
cursor: default;
opacity: 0.6;
}
#user-self-management-app .usm-message {
font-size: 13px;
color: #334155;
@@ -277,33 +96,3 @@
#user-self-management-app .usm-message.is-success {
color: #047857;
}
#user-self-management-app .usm-loading,
#user-self-management-app .usm-error-state {
display: grid;
place-items: center;
min-height: 320px;
padding: 24px;
}
@media (max-width: 900px) {
#user-self-management-app .usm-frame {
grid-template-columns: 1fr;
}
#user-self-management-app .usm-nav {
border-right: 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
#user-self-management-app .usm-grid,
#user-self-management-app .usm-choice-grid {
grid-template-columns: 1fr;
}
#user-self-management-app .usm-hero,
#user-self-management-app .usm-actions {
grid-template-columns: 1fr;
display: grid;
}
}

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>