${grpBadges}
+
@@ -689,10 +712,26 @@ function _userModal(uid) {
+
+
+
${!u ? `
+
+
+
+
+
+
+
+
+ created ${_esc(_fmtDate(u.creationDate))} · uuid ${_esc(u.uuid||'—')}
+
` : ''}
@@ -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
+ ? `}&v=${_avatarBust})
`
+ : `${_esc(_initials(u))}`;
+
+ _modal(`
`;
+ 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 `
Photo — ${_esc(u.displayName||uid)}
+
+
+
+ ${cur}
+
+
+
+ Any image the browser can open. Centre-cropped square, resized to
+ ${VV_AVATAR_PX}px and converted to JPEG — lldap stores nothing else.
+
+
+ ${u.has_avatar ? '' : ''}
+
+
+
`);
+
+ 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 =
+ ``;
+ 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 `
+
${_esc(g.displayName)}
@@ -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();