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

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

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-25 00:17:31 +02:00
parent 46111d8988
commit ac2d95fc56
140 changed files with 1168 additions and 1984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
system/apps/user-management/assets/app.css Normal file
View File

@@ -0,0 +1,322 @@
#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;
}
}

270
system/apps/user-management/assets/app.js Normal file
View File

@@ -0,0 +1,270 @@
(() => {
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('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&#39;');
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);
};
})();