Merge pull request #793 from christianlouis/copilot/add-sharing-and-rights-management
feat(sharing): File sharing and role-based access control for multi-user mode
This commit is contained in:
Christian Krakau-Louis
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* sharing.js – File sharing management UI.
|
||||
*
|
||||
* Renders the current shares for a document and lets the file owner
|
||||
* add new shares, change roles, or revoke access.
|
||||
*
|
||||
* Usage:
|
||||
* initSharing(fileId, i18n)
|
||||
*
|
||||
* The i18n object is expected to contain all keys used below.
|
||||
*/
|
||||
|
||||
/* global fetch */
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var _fileId = null;
|
||||
var _i18n = {};
|
||||
|
||||
// ── DOM helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
function _el(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function _esc(str) {
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function _t(key) {
|
||||
return _i18n[key] || key;
|
||||
}
|
||||
|
||||
// ── API helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
function _apiUrl(suffix) {
|
||||
return '/api/files/' + _fileId + suffix;
|
||||
}
|
||||
|
||||
function _fetchShares() {
|
||||
return fetch(_apiUrl('/shares'), { credentials: 'same-origin' })
|
||||
.then(function (r) { return r.json(); });
|
||||
}
|
||||
|
||||
function _addShare(userId, role) {
|
||||
return fetch(_apiUrl('/shares'), {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ shared_with_user_id: userId, role: role }),
|
||||
}).then(function (r) {
|
||||
return r.json().then(function (body) {
|
||||
if (!r.ok) throw new Error((body && body.detail) || r.statusText);
|
||||
return body;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _updateRole(shareId, role) {
|
||||
return fetch(_apiUrl('/shares/' + shareId), {
|
||||
method: 'PUT',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ role: role }),
|
||||
}).then(function (r) {
|
||||
return r.json().then(function (body) {
|
||||
if (!r.ok) throw new Error((body && body.detail) || r.statusText);
|
||||
return body;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _revokeShare(shareId) {
|
||||
return fetch(_apiUrl('/shares/' + shareId), {
|
||||
method: 'DELETE',
|
||||
credentials: 'same-origin',
|
||||
}).then(function (r) {
|
||||
return r.json().then(function (body) {
|
||||
if (!r.ok) throw new Error((body && body.detail) || r.statusText);
|
||||
return body;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ── Render ───────────────────────────────────────────────────────────────
|
||||
|
||||
function _renderShares(shares) {
|
||||
var list = _el('sharing-list');
|
||||
if (!list) return;
|
||||
|
||||
if (!shares || shares.length === 0) {
|
||||
list.innerHTML = '<p style="color:#64748b;font-size:0.875rem;">' + _esc(_t('no_shares')) + '</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var rows = shares.map(function (s) {
|
||||
var roleLabel = s.role === 'editor' ? _t('role_editor') : _t('role_viewer');
|
||||
return (
|
||||
'<div style="display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.5rem 0;border-bottom:1px solid #f1f5f9;">' +
|
||||
'<span style="font-size:0.875rem;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;" ' +
|
||||
'aria-label="' + _esc(_t('user_id_label') + ': ' + (s.display_name || s.user_id)) + '" ' +
|
||||
'title="' + _esc(s.user_id) + '">' +
|
||||
_esc(s.display_name || s.user_id) +
|
||||
'</span>' +
|
||||
'<select' +
|
||||
' data-share-id="' + _esc(s.share_id) + '"' +
|
||||
' class="sharing-role-select"' +
|
||||
' aria-label="' + _esc(_t('change_role')) + '"' +
|
||||
' style="padding:0.25rem 0.5rem;border:1px solid #cbd5e1;border-radius:0.25rem;font-size:0.8rem;background:#fff;"' +
|
||||
'>' +
|
||||
'<option value="viewer"' + (s.role === 'viewer' ? ' selected' : '') + '>' + _esc(_t('role_viewer')) + '</option>' +
|
||||
'<option value="editor"' + (s.role === 'editor' ? ' selected' : '') + '>' + _esc(_t('role_editor')) + '</option>' +
|
||||
'</select>' +
|
||||
'<button' +
|
||||
' data-share-id="' + _esc(s.share_id) + '"' +
|
||||
' class="sharing-revoke-btn"' +
|
||||
' aria-label="' + _esc(_t('revoke')) + '"' +
|
||||
' title="' + _esc(_t('revoke')) + '"' +
|
||||
' style="padding:0.25rem 0.5rem;background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;border-radius:0.25rem;font-size:0.8rem;cursor:pointer;"' +
|
||||
'>' +
|
||||
'<i class="fas fa-user-minus" aria-hidden="true"></i>' +
|
||||
'</button>' +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
|
||||
list.innerHTML = rows.join('');
|
||||
|
||||
// Role change handlers
|
||||
list.querySelectorAll('.sharing-role-select').forEach(function (sel) {
|
||||
sel.addEventListener('change', function () {
|
||||
var shareId = sel.getAttribute('data-share-id');
|
||||
var newRole = sel.value;
|
||||
_updateRole(shareId, newRole)
|
||||
.then(function () { _loadAndRender(); })
|
||||
.catch(function (err) { _showError(err.message); });
|
||||
});
|
||||
});
|
||||
|
||||
// Revoke handlers
|
||||
list.querySelectorAll('.sharing-revoke-btn').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
if (!window.confirm(_t('revoke_confirm'))) return;
|
||||
var shareId = btn.getAttribute('data-share-id');
|
||||
_revokeShare(shareId)
|
||||
.then(function () { _loadAndRender(); })
|
||||
.catch(function (err) { _showError(err.message); });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _loadAndRender() {
|
||||
var list = _el('sharing-list');
|
||||
if (!list) return;
|
||||
list.innerHTML = '<p style="color:#64748b;font-size:0.875rem;">' + _esc(_t('loading')) + '</p>';
|
||||
_fetchShares()
|
||||
.then(function (data) {
|
||||
// GET /files/{id}/shares returns an array; /files/{id}/shared-with also returns array
|
||||
var shares = Array.isArray(data) ? data : (data.shares || []);
|
||||
// Normalise keys: shares list uses share_id, but the shares endpoint returns id
|
||||
shares = shares.map(function (s) {
|
||||
return {
|
||||
share_id: s.share_id || s.id,
|
||||
user_id: s.user_id || s.shared_with_user_id,
|
||||
display_name: s.display_name || s.shared_with_user_id || s.user_id,
|
||||
role: s.role,
|
||||
};
|
||||
});
|
||||
_renderShares(shares);
|
||||
})
|
||||
.catch(function (err) {
|
||||
if (list) list.innerHTML = '<p style="color:#ef4444;font-size:0.875rem;">' + _esc(err.message) + '</p>';
|
||||
});
|
||||
}
|
||||
|
||||
function _showError(msg) {
|
||||
var el = _el('sharing-form-error');
|
||||
if (!el) return;
|
||||
el.textContent = msg;
|
||||
el.style.display = 'block';
|
||||
setTimeout(function () { el.style.display = 'none'; }, 5000);
|
||||
}
|
||||
|
||||
// ── Init ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function initSharing(fileId, i18n) {
|
||||
_fileId = fileId;
|
||||
_i18n = i18n || {};
|
||||
|
||||
_loadAndRender();
|
||||
|
||||
var form = _el('sharing-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var userInput = _el('share-user-input');
|
||||
var roleInput = _el('share-role-input');
|
||||
var userId = userInput ? userInput.value.trim() : '';
|
||||
var role = roleInput ? roleInput.value : 'viewer';
|
||||
|
||||
if (!userId) {
|
||||
_showError(_t('error_empty_user'));
|
||||
return;
|
||||
}
|
||||
|
||||
_addShare(userId, role)
|
||||
.then(function () {
|
||||
if (userInput) userInput.value = '';
|
||||
_loadAndRender();
|
||||
})
|
||||
.catch(function (err) { _showError(err.message); });
|
||||
});
|
||||
}
|
||||
|
||||
// Expose
|
||||
window.initSharing = initSharing;
|
||||
})();
|
||||
@@ -660,6 +660,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Sharing & Permissions ──────────────────────────────────────────── -->
|
||||
{% if current_user_role == 'owner' %}
|
||||
<div class="collab-card" id="sharing-panel" style="margin-top:1.5rem;">
|
||||
<div class="panel-header" style="padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:0.5rem;">
|
||||
<h3 style="font-size:1rem;font-weight:600;color:#1e293b;margin:0;">
|
||||
<i class="fas fa-share-alt" aria-hidden="true" style="color:#3b82f6;"></i>
|
||||
{{ _("sharing.heading") }}
|
||||
</h3>
|
||||
</div>
|
||||
<div style="padding:1rem 1.25rem;">
|
||||
<!-- Current shares list -->
|
||||
<div id="sharing-list" aria-live="polite" style="margin-bottom:1rem;">
|
||||
<p style="color:#64748b;font-size:0.875rem;">{{ _("sharing.loading") }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Add share form -->
|
||||
<form id="sharing-form" aria-label="{{ _('sharing.add_share') }}" style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:flex-end;">
|
||||
<div style="flex:1;min-width:180px;">
|
||||
<label for="share-user-input" style="display:block;font-size:0.8rem;color:#475569;margin-bottom:0.25rem;">
|
||||
{{ _("sharing.user_id_label") }}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="share-user-input"
|
||||
placeholder="{{ _('sharing.user_id_placeholder') }}"
|
||||
style="width:100%;padding:0.5rem 0.75rem;border:1px solid #cbd5e1;border-radius:0.375rem;font-size:0.875rem;"
|
||||
/>
|
||||
</div>
|
||||
<div style="min-width:120px;">
|
||||
<label for="share-role-input" style="display:block;font-size:0.8rem;color:#475569;margin-bottom:0.25rem;">
|
||||
{{ _("sharing.role_label") }}
|
||||
</label>
|
||||
<select
|
||||
id="share-role-input"
|
||||
style="width:100%;padding:0.5rem 0.75rem;border:1px solid #cbd5e1;border-radius:0.375rem;font-size:0.875rem;background:#fff;"
|
||||
>
|
||||
<option value="viewer">{{ _("sharing.role_viewer") }}</option>
|
||||
<option value="editor">{{ _("sharing.role_editor") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" style="padding:0.5rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:0.375rem;font-size:0.875rem;font-weight:600;cursor:pointer;min-height:2.25rem;" aria-label="{{ _('sharing.add_share') }}">
|
||||
<i class="fas fa-user-plus" aria-hidden="true"></i> {{ _("sharing.add_share") }}
|
||||
</button>
|
||||
</form>
|
||||
<p id="sharing-form-error" style="color:#ef4444;font-size:0.8rem;margin-top:0.5rem;display:none;" role="alert"></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<!-- file is None without error -->
|
||||
<div class="error-box">Document not found.</div>
|
||||
@@ -713,6 +762,25 @@
|
||||
if (typeof initAnnotations === 'function') {
|
||||
initAnnotations(fileId, userId, annotationsI18n);
|
||||
}
|
||||
{% if current_user_role == 'owner' %}
|
||||
if (typeof initSharing === 'function') {
|
||||
initSharing(fileId, {
|
||||
heading: {{ _("sharing.heading") | tojson }},
|
||||
loading: {{ _("sharing.loading") | tojson }},
|
||||
no_shares: {{ _("sharing.no_shares") | tojson }},
|
||||
add_share: {{ _("sharing.add_share") | tojson }},
|
||||
role_viewer: {{ _("sharing.role_viewer") | tojson }},
|
||||
role_editor: {{ _("sharing.role_editor") | tojson }},
|
||||
revoke: {{ _("sharing.revoke") | tojson }},
|
||||
revoke_confirm: {{ _("sharing.revoke_confirm") | tojson }},
|
||||
user_id_label: {{ _("sharing.user_id_label") | tojson }},
|
||||
user_id_placeholder: {{ _("sharing.user_id_placeholder") | tojson }},
|
||||
role_label: {{ _("sharing.role_label") | tojson }},
|
||||
error_empty_user: {{ _("sharing.error_empty_user") | tojson }},
|
||||
change_role: {{ _("sharing.change_role") | tojson }},
|
||||
});
|
||||
}
|
||||
{% endif %}
|
||||
})
|
||||
.catch(function () {
|
||||
// Auth disabled — initialise with empty user
|
||||
@@ -722,6 +790,10 @@
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
<!-- Sharing JS -->
|
||||
{% if current_user_role == 'owner' %}
|
||||
<script src="{{ url_for('static', path='js/sharing.js') }}" defer></script>
|
||||
{% endif %}
|
||||
<!-- ── EmbedPDF Viewer init ── -->
|
||||
{% if file and is_pdf and (processed_file_exists or original_file_exists) %}
|
||||
<script async type="module">
|
||||
|
||||
@@ -1743,6 +1743,19 @@
|
||||
"shared.table_aria": "Shared links",
|
||||
"shared.unlimited_placeholder": "Unlimited",
|
||||
"shared.your_links": "Your Shared Links",
|
||||
"sharing.add_share": "Share",
|
||||
"sharing.change_role": "Change role",
|
||||
"sharing.error_empty_user": "Please enter a user ID to share with.",
|
||||
"sharing.heading": "Share with Users",
|
||||
"sharing.loading": "Loading shares…",
|
||||
"sharing.no_shares": "Not shared with anyone yet.",
|
||||
"sharing.revoke": "Revoke access",
|
||||
"sharing.revoke_confirm": "Remove this user's access to the file?",
|
||||
"sharing.role_editor": "Editor",
|
||||
"sharing.role_label": "Role",
|
||||
"sharing.role_viewer": "Viewer",
|
||||
"sharing.user_id_label": "User ID or email",
|
||||
"sharing.user_id_placeholder": "e.g. alice@example.com",
|
||||
"similarity.backfill_auto": "The background task will compute them automatically every 5 minutes, or you can",
|
||||
"similarity.files_missing_text": "file(s) have OCR text but no embedding yet.",
|
||||
"similarity.find_pairs_btn": "Find Pairs",
|
||||
|
||||
Reference in New Issue
Block a user