Reach the rest of what lldap exposes — photos, real names, group rename
lldap lets you edit five things about a user and one about a group; the page reached two of them, so correcting a surname or a group's name still meant opening the container's own WebUI.
This commit is contained in:
Gmer4Lfe
@@ -96,7 +96,18 @@ require_once dirname(__DIR__) . '/include/ai_chat.php';
|
||||
.vv-au-user-row { padding:8px 12px;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
|
||||
.vv-au-user-row:last-child { border-bottom:none; }
|
||||
.vv-au-user-row:hover { background:#141414; }
|
||||
.vv-au-user-name { font-size:12px;color:#bbb;font-weight:bold;min-width:80px; }
|
||||
.vv-au-user-name { font-size:12px;color:#bbb;font-weight:bold;min-width:80px;display:flex;flex-direction:column;gap:1px; }
|
||||
/* The real name under the display name, only when the two differ. */
|
||||
.vv-au-user-real { font-size:9px;color:#4a4a4a;font-weight:normal; }
|
||||
|
||||
/* ── Avatars ─────────────────────────────────────────────────────────────── */
|
||||
/* Fixed square with a flex-shrink guard: the rows are a flex layout and an image left to its own
|
||||
intrinsic size drags every name on the page out of alignment while it loads. */
|
||||
.vv-au-av { width:22px;height:22px;border-radius:3px;object-fit:cover;flex-shrink:0;
|
||||
background:#111;border:1px solid #222;display:inline-block; }
|
||||
.vv-au-av.none { font-size:9px;color:#4a4a4a;text-align:center;line-height:22px;font-weight:bold;
|
||||
letter-spacing:.02em; }
|
||||
.vv-au-av.big { width:88px;height:88px;border-radius:5px;line-height:88px;font-size:26px; }
|
||||
.vv-au-user-email{ font-size:10px;color:#444;flex:1; }
|
||||
.vv-au-user-acts { display:flex;gap:4px;margin-left:auto;flex-shrink:0; }
|
||||
|
||||
@@ -658,12 +669,24 @@ function _loadUsers() {
|
||||
if (!_users.length) { empty.style.display = 'block'; return; }
|
||||
list.innerHTML = _users.map(u => {
|
||||
const grpBadges = (u.groups||[]).map(g => `<span class="vv-au-badge grp" title="Click to remove" data-rm-from-group="${_esc(u.id)}" data-gid="${g.id}">${_esc(g.displayName)}</span>`).join('');
|
||||
// Only fetched for the users who have one — has_avatar comes from the attribute names, so
|
||||
// the list costs nothing for the 27 people here without a photo. _avatarBust changes after
|
||||
// an upload so the browser reloads rather than showing the cached previous face.
|
||||
const av = u.has_avatar
|
||||
? `<img class="vv-au-av" src="${API}?action=lldap_avatar&uid=${encodeURIComponent(u.id)}&v=${_avatarBust}" alt="">`
|
||||
: `<span class="vv-au-av none">${_esc(_initials(u))}</span>`;
|
||||
// The real name, when it differs from the display name. 31 of 33 users here have first and
|
||||
// last set and none of it was on the page.
|
||||
const real = [u.firstName, u.lastName].filter(Boolean).join(' ');
|
||||
const sub = (real && real !== (u.displayName||'')) ? real : '';
|
||||
return `<div class="vv-au-user-row">
|
||||
<span class="vv-au-user-name">${_esc(u.displayName||u.id)}</span>
|
||||
${av}
|
||||
<span class="vv-au-user-name">${_esc(u.displayName||u.id)}${sub ? `<span class="vv-au-user-real">${_esc(sub)}</span>` : ''}</span>
|
||||
<span class="vv-au-user-email">${_esc(u.email||'')}</span>
|
||||
<div style="display:flex;gap:3px;align-items:center;flex-wrap:wrap">${grpBadges}</div>
|
||||
<div class="vv-au-user-acts">
|
||||
<button class="vv-au-icon-btn" data-user-grp="${_esc(u.id)}" title="Add to group">+grp</button>
|
||||
<button class="vv-au-icon-btn" data-user-photo="${_esc(u.id)}" title="Set or remove photo">🖼</button>
|
||||
<button class="vv-au-icon-btn" data-user-pass="${_esc(u.id)}" title="Change password">🔑</button>
|
||||
<button class="vv-au-icon-btn" data-user-edit="${_esc(u.id)}" title="Edit">✎</button>
|
||||
<button class="vv-au-icon-btn del" data-user-del="${_esc(u.id)}" title="Delete">✕</button>
|
||||
@@ -689,10 +712,26 @@ function _userModal(uid) {
|
||||
<label class="vv-au-label">Email</label>
|
||||
<input class="vv-au-input" id="um-email" type="email" value="${_esc(u?.email||'')}" placeholder="john@example.com">
|
||||
</div>
|
||||
<!-- lldap's full editable set for a user is display_name, mail, first_name, last_name and
|
||||
avatar. These two were the ones with nowhere to go, so the only way to correct a name was
|
||||
to open lldap's own WebUI. -->
|
||||
<div style="display:flex;gap:8px">
|
||||
<div class="vv-au-field" style="flex:1">
|
||||
<label class="vv-au-label">First Name</label>
|
||||
<input class="vv-au-input" id="um-first" value="${_esc(u?.firstName||'')}" placeholder="John">
|
||||
</div>
|
||||
<div class="vv-au-field" style="flex:1">
|
||||
<label class="vv-au-label">Last Name</label>
|
||||
<input class="vv-au-input" id="um-last" value="${_esc(u?.lastName||'')}" placeholder="Doe">
|
||||
</div>
|
||||
</div>
|
||||
${!u ? `<div class="vv-au-field">
|
||||
<label class="vv-au-label">Password</label>
|
||||
<input class="vv-au-input" id="um-pass" type="password" placeholder="Initial password">
|
||||
</div>` : ''}
|
||||
${u ? `<div class="vv-au-hint" style="margin-bottom:10px">
|
||||
created ${_esc(_fmtDate(u.creationDate))} · uuid <span style="font-family:monospace">${_esc(u.uuid||'—')}</span>
|
||||
</div>` : ''}
|
||||
<div class="vv-au-err" id="um-err"></div>
|
||||
<div class="vv-au-modal-acts">
|
||||
<button class="vv-au-btn" id="um-cancel">Cancel</button>
|
||||
@@ -704,6 +743,8 @@ function _userModal(uid) {
|
||||
const id = (document.getElementById('um-uid').value||'').trim();
|
||||
const name = (document.getElementById('um-name').value||'').trim();
|
||||
const email= (document.getElementById('um-email').value||'').trim();
|
||||
const first= (document.getElementById('um-first').value||'').trim();
|
||||
const last = (document.getElementById('um-last').value||'').trim();
|
||||
const pass = document.getElementById('um-pass')?.value || '';
|
||||
if (!id) { _showModalErr('um-err','Username required'); return; }
|
||||
if (!email){ _showModalErr('um-err','Email required'); return; }
|
||||
@@ -715,8 +756,129 @@ function _userModal(uid) {
|
||||
if (!r.ok) { _showModalErr('um-err', r.error||'Save failed'); btn.disabled=false; btn.textContent=u?'Save':'Create'; return; }
|
||||
_closeModal(); _loadUsers();
|
||||
};
|
||||
if (u) _post({ action:'lldap_update_user', uid:id, email, display_name:name }, done);
|
||||
else _post({ action:'lldap_create_user', uid:id, email, display_name:name, password:pass }, done);
|
||||
// first_name/last_name are always sent from this form, including empty, because the form does
|
||||
// offer them — an empty box here means "clear it", which the endpoint turns into a proper
|
||||
// attribute removal rather than an empty string.
|
||||
if (u) _post({ action:'lldap_update_user', uid:id, email, display_name:name, first_name:first, last_name:last }, done);
|
||||
else _post({ action:'lldap_create_user', uid:id, email, display_name:name, password:pass, first_name:first, last_name:last }, done);
|
||||
};
|
||||
}
|
||||
|
||||
// ── Photo ─────────────────────────────────────────────────────────────────────
|
||||
// Bumped after every upload or removal. The avatar endpoint is a plain GET the browser caches, so
|
||||
// without a changing parameter the row would keep drawing the previous face after a change.
|
||||
let _avatarBust = Date.now();
|
||||
|
||||
function _initials(u) {
|
||||
const s = ((u.firstName||'') + ' ' + (u.lastName||'')).trim() || u.displayName || u.id || '';
|
||||
return s.split(/\s+/).filter(Boolean).slice(0,2).map(w => w[0].toUpperCase()).join('') || '?';
|
||||
}
|
||||
|
||||
function _fmtDate(iso) {
|
||||
if (!iso) return '—';
|
||||
const d = new Date(iso);
|
||||
return isNaN(d) ? String(iso).slice(0,10) : d.toISOString().slice(0,10);
|
||||
}
|
||||
|
||||
// lldap types the avatar attribute JPEG_PHOTO and refuses anything else, so a PNG or a HEIC out of
|
||||
// a phone would be rejected on arrival. Everything is drawn to a canvas and re-encoded as JPEG
|
||||
// here instead, which means any format the browser can open is a valid import — and the same pass
|
||||
// bounds the size. The originals on this directory run to 273 KB for a picture shown at 22px;
|
||||
// 256px at q0.85 lands around 15 KB, and this value is read back on every user query forever.
|
||||
const VV_AVATAR_PX = 256, VV_AVATAR_Q = 0.85;
|
||||
|
||||
function _toJpegBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const fr = new FileReader();
|
||||
fr.onerror = () => reject(new Error('Could not read that file'));
|
||||
fr.onload = () => {
|
||||
const img = new Image();
|
||||
img.onerror = () => reject(new Error('That file is not an image the browser can open'));
|
||||
img.onload = () => {
|
||||
// Square, centre-cropped. An avatar is drawn in a square slot everywhere it appears, and
|
||||
// letterboxing it here would bake the padding into the stored image.
|
||||
const side = Math.min(img.width, img.height);
|
||||
const sx = (img.width - side) / 2, sy = (img.height - side) / 2;
|
||||
const px = Math.min(VV_AVATAR_PX, side);
|
||||
const cv = document.createElement('canvas');
|
||||
cv.width = cv.height = px;
|
||||
const cx = cv.getContext('2d');
|
||||
// White rather than transparent: JPEG has no alpha, and a transparent PNG flattened onto
|
||||
// the default black reads as a photo of nothing.
|
||||
cx.fillStyle = '#fff'; cx.fillRect(0, 0, px, px);
|
||||
cx.drawImage(img, sx, sy, side, side, 0, 0, px, px);
|
||||
resolve(cv.toDataURL('image/jpeg', VV_AVATAR_Q).replace(/^data:image\/jpeg;base64,/, ''));
|
||||
};
|
||||
img.src = fr.result;
|
||||
};
|
||||
fr.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function _photoModal(uid) {
|
||||
const u = _users.find(x => x.id === uid);
|
||||
if (!u) return;
|
||||
const cur = u.has_avatar
|
||||
? `<img class="vv-au-av big" src="${API}?action=lldap_avatar&uid=${encodeURIComponent(uid)}&v=${_avatarBust}" alt="">`
|
||||
: `<span class="vv-au-av big none">${_esc(_initials(u))}</span>`;
|
||||
|
||||
_modal(`<h3>Photo — ${_esc(u.displayName||uid)}</h3>
|
||||
<div style="display:flex;gap:14px;align-items:center;margin-bottom:12px">
|
||||
<div id="ph-preview">${cur}</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<input class="vv-au-input" type="file" id="ph-file" accept="image/*">
|
||||
<div class="vv-au-hint">Any image the browser can open. Centre-cropped square, resized to
|
||||
${VV_AVATAR_PX}px and converted to JPEG — lldap stores nothing else.</div>
|
||||
<div class="vv-au-hint" id="ph-size"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vv-au-err" id="ph-err"></div>
|
||||
<div class="vv-au-modal-acts">
|
||||
${u.has_avatar ? '<button class="vv-au-btn danger" id="ph-remove" style="margin-right:auto">Remove photo</button>' : ''}
|
||||
<button class="vv-au-btn" id="ph-cancel">Cancel</button>
|
||||
<button class="vv-au-btn prim" id="ph-save" disabled>Save</button>
|
||||
</div>`);
|
||||
|
||||
let pending = null;
|
||||
document.getElementById('ph-file').addEventListener('change', async e => {
|
||||
const f = e.target.files && e.target.files[0];
|
||||
if (!f) return;
|
||||
try {
|
||||
pending = await _toJpegBase64(f);
|
||||
// Rounded from the base64 length, which is the payload that actually travels and gets stored.
|
||||
const kb = Math.round(pending.length * 3 / 4 / 1024);
|
||||
document.getElementById('ph-size').textContent = `${f.name} → ${kb} KB JPEG`;
|
||||
document.getElementById('ph-preview').innerHTML =
|
||||
`<img class="vv-au-av big" src="data:image/jpeg;base64,${pending}" alt="">`;
|
||||
document.getElementById('ph-save').disabled = false;
|
||||
_showModalErr('ph-err', '');
|
||||
} catch (err) {
|
||||
pending = null;
|
||||
document.getElementById('ph-save').disabled = true;
|
||||
_showModalErr('ph-err', err.message || 'Could not read that image');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('ph-cancel').onclick = _closeModal;
|
||||
const rm = document.getElementById('ph-remove');
|
||||
if (rm) rm.onclick = async () => {
|
||||
if (!await vvConfirm('Remove this photo?')) return;
|
||||
rm.disabled = true;
|
||||
_post({ action:'lldap_remove_avatar', uid }, r => {
|
||||
if (!r.ok) { _showModalErr('ph-err', r.error||'Removal failed'); rm.disabled = false; return; }
|
||||
_avatarBust = Date.now(); _closeModal(); _loadUsers();
|
||||
});
|
||||
};
|
||||
document.getElementById('ph-save').onclick = () => {
|
||||
if (!pending) return;
|
||||
const btn = document.getElementById('ph-save');
|
||||
btn.disabled = true; btn.textContent = 'Saving…';
|
||||
// Through _post, so URLSearchParams and never FormData — a multipart POST to this plugin's
|
||||
// endpoints hangs with no status ever returned, which is exactly the shape an upload invites.
|
||||
_post({ action:'lldap_set_avatar', uid, avatar: pending }, r => {
|
||||
if (!r.ok) { _showModalErr('ph-err', r.error||'Upload failed'); btn.disabled=false; btn.textContent='Save'; return; }
|
||||
_avatarBust = Date.now(); _closeModal(); _loadUsers();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
@@ -790,6 +952,9 @@ document.getElementById('vv-au-panel-users').addEventListener('click', async e =
|
||||
const passBtn = e.target.closest('[data-user-pass]');
|
||||
if (passBtn) { _passModal(passBtn.dataset.userPass); return; }
|
||||
|
||||
const photoBtn = e.target.closest('[data-user-photo]');
|
||||
if (photoBtn) { _photoModal(photoBtn.dataset.userPhoto); return; }
|
||||
|
||||
const grpBtn = e.target.closest('[data-user-grp]');
|
||||
if (grpBtn) { _addToGroupModal(grpBtn.dataset.userGrp); return; }
|
||||
|
||||
@@ -835,6 +1000,7 @@ function _loadGroups() {
|
||||
).join('');
|
||||
return `<div class="vv-au-grp-row" data-grp="${g.id}">
|
||||
<div class="vv-au-grp-acts">
|
||||
<button class="vv-au-icon-btn" data-group-ren="${g.id}" title="Rename group">✎</button>
|
||||
<button class="vv-au-icon-btn del" data-group-del="${g.id}" title="Delete group">✕</button>
|
||||
</div>
|
||||
<div class="vv-au-grp-name">${_esc(g.displayName)}</div>
|
||||
@@ -881,6 +1047,37 @@ document.getElementById('vv-au-panel-users').addEventListener('click', async e =
|
||||
return;
|
||||
}
|
||||
|
||||
const renGrp = e.target.closest('[data-group-ren]');
|
||||
if (renGrp) {
|
||||
e.stopPropagation();
|
||||
const id = parseInt(renGrp.dataset.groupRen);
|
||||
const grp = _groups.find(g => g.id === id);
|
||||
const name = await vvPrompt('Rename group', grp?.displayName || '');
|
||||
if (name === null) return;
|
||||
const trimmed = String(name).trim();
|
||||
if (!trimmed || trimmed === grp?.displayName) return;
|
||||
// Worth stopping on: the Access Control rules match groups by name, so a rename that the rules
|
||||
// do not follow leaves every rule naming a group nobody is in — which fails closed, silently,
|
||||
// for whoever was in it.
|
||||
//
|
||||
// Fetched rather than read from _rules, because _rules is only populated once the Access
|
||||
// Control tab has been opened. Renaming a group from a fresh page load would otherwise find an
|
||||
// empty list and report no rules affected, which is the reassuring answer and the wrong one.
|
||||
const rules = _rules.length ? _rules : await new Promise(res =>
|
||||
_get('authelia_rules', r => res((r && r.ok && r.rules) ? r.rules : [])));
|
||||
const used = rules.filter(r => _normList(r.subject).some(s =>
|
||||
_normList(s).some(v => String(v) === 'group:' + grp?.displayName)));
|
||||
if (used.length && !await vvConfirm(
|
||||
`"${grp.displayName}" is named by ${used.length} access-control rule${used.length>1?'s':''}. ` +
|
||||
`Renaming it here does not update ${used.length>1?'them':'it'} — you will need to edit ` +
|
||||
`${used.length>1?'those rules':'that rule'} on the Access Control tab too. Continue?`)) return;
|
||||
_post({ action:'lldap_rename_group', id, name: trimmed }, r => {
|
||||
if (!r.ok) { vvAlert('Rename failed: ' + (r.error||'unknown error')); return; }
|
||||
_loadGroups(); _loadUsers();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const delGrp = e.target.closest('[data-group-del]');
|
||||
if (delGrp) {
|
||||
e.stopPropagation();
|
||||
|
||||
Reference in New Issue
Block a user