feat: Introduce a comprehensive authentication system, including user management, JWT handling, and initial frontend components with Docker support.
This commit is contained in:
+502
-13
@@ -779,12 +779,35 @@
|
||||
async function api(path, opts) {
|
||||
var res;
|
||||
try {
|
||||
res = await fetch(path, opts || {});
|
||||
// Inject auth header if authenticated
|
||||
const authHeaders = AuthManager.getAuthHeaders();
|
||||
const mergedOpts = opts || {};
|
||||
if (authHeaders) {
|
||||
mergedOpts.headers = { ...mergedOpts.headers, ...authHeaders };
|
||||
}
|
||||
mergedOpts.credentials = 'include';
|
||||
res = await fetch(path, mergedOpts);
|
||||
} catch (err) {
|
||||
if (err.name === "AbortError") throw err; // let callers handle abort
|
||||
showToast("Erreur réseau — vérifiez votre connexion");
|
||||
throw err;
|
||||
}
|
||||
if (res.status === 401 && AuthManager._authEnabled) {
|
||||
// Token expired — try refresh
|
||||
try {
|
||||
await AuthManager.refreshAccessToken();
|
||||
// Retry the request with new token
|
||||
const retryHeaders = AuthManager.getAuthHeaders();
|
||||
const retryOpts = opts || {};
|
||||
retryOpts.headers = { ...retryOpts.headers, ...retryHeaders };
|
||||
retryOpts.credentials = 'include';
|
||||
res = await fetch(path, retryOpts);
|
||||
} catch (refreshErr) {
|
||||
AuthManager.clearSession();
|
||||
AuthManager.showLoginScreen();
|
||||
throw new Error('Session expirée');
|
||||
}
|
||||
}
|
||||
if (!res.ok) {
|
||||
var detail = "";
|
||||
try { var body = await res.json(); detail = body.detail || ""; } catch (_) { /* no json body */ }
|
||||
@@ -794,6 +817,451 @@
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// AuthManager — Authentication state & token management
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const AuthManager = {
|
||||
ACCESS_TOKEN_KEY: 'obsigate_access_token',
|
||||
TOKEN_EXPIRY_KEY: 'obsigate_token_expiry',
|
||||
USER_KEY: 'obsigate_user',
|
||||
_authEnabled: false,
|
||||
|
||||
// ── Token storage (sessionStorage) ─────────────────────────────
|
||||
|
||||
saveToken(tokenData) {
|
||||
const expiresAt = Date.now() + (tokenData.expires_in * 1000);
|
||||
sessionStorage.setItem(this.ACCESS_TOKEN_KEY, tokenData.access_token);
|
||||
sessionStorage.setItem(this.TOKEN_EXPIRY_KEY, expiresAt.toString());
|
||||
if (tokenData.user) {
|
||||
sessionStorage.setItem(this.USER_KEY, JSON.stringify(tokenData.user));
|
||||
}
|
||||
},
|
||||
|
||||
getToken() {
|
||||
return sessionStorage.getItem(this.ACCESS_TOKEN_KEY);
|
||||
},
|
||||
|
||||
getUser() {
|
||||
const raw = sessionStorage.getItem(this.USER_KEY);
|
||||
return raw ? JSON.parse(raw) : null;
|
||||
},
|
||||
|
||||
isTokenExpired() {
|
||||
const expiry = sessionStorage.getItem(this.TOKEN_EXPIRY_KEY);
|
||||
if (!expiry) return true;
|
||||
// Renew 60s before expiration
|
||||
return Date.now() > (parseInt(expiry) - 60000);
|
||||
},
|
||||
|
||||
clearSession() {
|
||||
sessionStorage.removeItem(this.ACCESS_TOKEN_KEY);
|
||||
sessionStorage.removeItem(this.TOKEN_EXPIRY_KEY);
|
||||
sessionStorage.removeItem(this.USER_KEY);
|
||||
},
|
||||
|
||||
getAuthHeaders() {
|
||||
const token = this.getToken();
|
||||
if (!token || !this._authEnabled) return null;
|
||||
return { 'Authorization': 'Bearer ' + token };
|
||||
},
|
||||
|
||||
// ── API calls ──────────────────────────────────────────────────
|
||||
|
||||
async login(username, password, rememberMe) {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ username, password, remember_me: rememberMe || false }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const err = await response.json();
|
||||
throw new Error(err.detail || 'Erreur de connexion');
|
||||
}
|
||||
const data = await response.json();
|
||||
this.saveToken(data);
|
||||
return data.user;
|
||||
},
|
||||
|
||||
async logout() {
|
||||
try {
|
||||
const token = this.getToken();
|
||||
await fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
headers: token ? { 'Authorization': 'Bearer ' + token } : {},
|
||||
credentials: 'include',
|
||||
});
|
||||
} catch (e) { /* continue even if API fails */ }
|
||||
this.clearSession();
|
||||
this.showLoginScreen();
|
||||
},
|
||||
|
||||
async refreshAccessToken() {
|
||||
const response = await fetch('/api/auth/refresh', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!response.ok) {
|
||||
this.clearSession();
|
||||
throw new Error('Session expirée');
|
||||
}
|
||||
const data = await response.json();
|
||||
const expiry = Date.now() + (data.expires_in * 1000);
|
||||
sessionStorage.setItem(this.ACCESS_TOKEN_KEY, data.access_token);
|
||||
sessionStorage.setItem(this.TOKEN_EXPIRY_KEY, expiry.toString());
|
||||
return data.access_token;
|
||||
},
|
||||
|
||||
// ── UI controls ────────────────────────────────────────────────
|
||||
|
||||
showLoginScreen() {
|
||||
const app = document.getElementById('app');
|
||||
const login = document.getElementById('login-screen');
|
||||
if (app) app.classList.add('hidden');
|
||||
if (login) {
|
||||
login.classList.remove('hidden');
|
||||
const usernameInput = document.getElementById('login-username');
|
||||
if (usernameInput) usernameInput.focus();
|
||||
}
|
||||
},
|
||||
|
||||
showApp() {
|
||||
const login = document.getElementById('login-screen');
|
||||
const app = document.getElementById('app');
|
||||
if (login) login.classList.add('hidden');
|
||||
if (app) app.classList.remove('hidden');
|
||||
this.renderUserMenu();
|
||||
},
|
||||
|
||||
renderUserMenu() {
|
||||
const user = this.getUser();
|
||||
const userMenu = document.getElementById('user-menu');
|
||||
if (!userMenu) return;
|
||||
if (!user || !this._authEnabled) {
|
||||
userMenu.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
userMenu.innerHTML =
|
||||
'<span class="user-display-name">' + (user.display_name || user.username) + '</span>' +
|
||||
(user.role === 'admin'
|
||||
? '<button class="user-menu-link" id="admin-btn" title="Administration"><i data-lucide="shield" style="width:14px;height:14px"></i></button>'
|
||||
: '') +
|
||||
'<button class="btn-logout" id="logout-btn" title="Déconnexion"><i data-lucide="log-out" style="width:14px;height:14px"></i></button>';
|
||||
safeCreateIcons();
|
||||
|
||||
const logoutBtn = document.getElementById('logout-btn');
|
||||
if (logoutBtn) logoutBtn.addEventListener('click', () => AuthManager.logout());
|
||||
|
||||
const adminBtn = document.getElementById('admin-btn');
|
||||
if (adminBtn) adminBtn.addEventListener('click', () => AdminPanel.show());
|
||||
},
|
||||
|
||||
// ── Initialization ──────────────────────────────────────────────
|
||||
|
||||
async checkAuthStatus() {
|
||||
try {
|
||||
const res = await fetch('/api/auth/status');
|
||||
const data = await res.json();
|
||||
this._authEnabled = data.auth_enabled;
|
||||
return data;
|
||||
} catch (e) {
|
||||
this._authEnabled = false;
|
||||
return { auth_enabled: false };
|
||||
}
|
||||
},
|
||||
|
||||
async initAuth() {
|
||||
const status = await this.checkAuthStatus();
|
||||
if (!status.auth_enabled) {
|
||||
// Auth disabled — show app immediately
|
||||
this.showApp();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Auth enabled — check for existing session
|
||||
if (this.getToken() && !this.isTokenExpired()) {
|
||||
this.showApp();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Try silent refresh
|
||||
try {
|
||||
await this.refreshAccessToken();
|
||||
// Fetch user info
|
||||
const token = this.getToken();
|
||||
const res = await fetch('/api/auth/me', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
credentials: 'include',
|
||||
});
|
||||
if (res.ok) {
|
||||
const user = await res.json();
|
||||
sessionStorage.setItem(this.USER_KEY, JSON.stringify(user));
|
||||
this.showApp();
|
||||
return true;
|
||||
}
|
||||
} catch (e) { /* silent refresh failed */ }
|
||||
|
||||
// No valid session — show login
|
||||
this.showLoginScreen();
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Login form handler
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function initLoginForm() {
|
||||
const form = document.getElementById('login-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('login-username').value;
|
||||
const password = document.getElementById('login-password').value;
|
||||
const rememberMe = document.getElementById('remember-me').checked;
|
||||
const errorEl = document.getElementById('login-error');
|
||||
const btn = document.getElementById('login-btn');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.querySelector('.btn-spinner').classList.remove('hidden');
|
||||
btn.querySelector('.btn-text').textContent = 'Connexion...';
|
||||
errorEl.classList.add('hidden');
|
||||
|
||||
try {
|
||||
await AuthManager.login(username, password, rememberMe);
|
||||
AuthManager.showApp();
|
||||
// Load app data after successful login
|
||||
try {
|
||||
await Promise.all([loadVaults(), loadTags()]);
|
||||
} catch (err) {
|
||||
console.error('Failed to load data after login:', err);
|
||||
}
|
||||
safeCreateIcons();
|
||||
} catch (err) {
|
||||
errorEl.textContent = err.message;
|
||||
errorEl.classList.remove('hidden');
|
||||
document.getElementById('login-password').value = '';
|
||||
document.getElementById('login-password').focus();
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.querySelector('.btn-spinner').classList.add('hidden');
|
||||
btn.querySelector('.btn-text').textContent = 'Se connecter';
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle password visibility
|
||||
const toggleBtn = document.getElementById('toggle-password');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
const input = document.getElementById('login-password');
|
||||
input.type = input.type === 'password' ? 'text' : 'password';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Admin Panel — User management (admin only)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const AdminPanel = {
|
||||
_modal: null,
|
||||
_allVaults: [],
|
||||
|
||||
show() {
|
||||
this._createModal();
|
||||
this._modal.classList.add('active');
|
||||
this._loadUsers();
|
||||
},
|
||||
|
||||
hide() {
|
||||
if (this._modal) this._modal.classList.remove('active');
|
||||
},
|
||||
|
||||
_createModal() {
|
||||
if (this._modal) return;
|
||||
this._modal = document.createElement('div');
|
||||
this._modal.className = 'editor-modal';
|
||||
this._modal.id = 'admin-modal';
|
||||
this._modal.innerHTML = `
|
||||
<div class="editor-container">
|
||||
<div class="editor-header">
|
||||
<div class="editor-title">⚙️ Administration — Utilisateurs</div>
|
||||
<div class="editor-actions">
|
||||
<button class="editor-btn" id="admin-close" title="Fermer">
|
||||
<i data-lucide="x" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-body" id="admin-body">
|
||||
<div class="admin-toolbar">
|
||||
<button class="btn-login" id="admin-add-user" style="font-size:0.85rem;padding:6px 16px;">+ Nouvel utilisateur</button>
|
||||
</div>
|
||||
<div id="admin-users-list" class="admin-users-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(this._modal);
|
||||
safeCreateIcons();
|
||||
|
||||
document.getElementById('admin-close').addEventListener('click', () => this.hide());
|
||||
document.getElementById('admin-add-user').addEventListener('click', () => this._showUserForm(null));
|
||||
},
|
||||
|
||||
async _loadUsers() {
|
||||
try {
|
||||
const users = await api('/api/auth/admin/users');
|
||||
// Also load available vaults
|
||||
try {
|
||||
const vaultsData = await api('/api/vaults');
|
||||
this._allVaults = vaultsData.map(v => v.name);
|
||||
} catch (e) { this._allVaults = []; }
|
||||
this._renderUsers(users);
|
||||
} catch (err) {
|
||||
document.getElementById('admin-users-list').innerHTML =
|
||||
'<p style="color:var(--danger);padding:16px;">Erreur : ' + err.message + '</p>';
|
||||
}
|
||||
},
|
||||
|
||||
_renderUsers(users) {
|
||||
const container = document.getElementById('admin-users-list');
|
||||
if (!users.length) {
|
||||
container.innerHTML = '<p style="padding:16px;color:var(--text-muted);">Aucun utilisateur.</p>';
|
||||
return;
|
||||
}
|
||||
let html = '<table class="admin-table"><thead><tr>' +
|
||||
'<th>Utilisateur</th><th>Rôle</th><th>Vaults</th><th>Statut</th><th>Dernière connexion</th><th>Actions</th>' +
|
||||
'</tr></thead><tbody>';
|
||||
users.forEach(u => {
|
||||
const vaults = u.vaults.includes('*') ? 'Toutes' : (u.vaults.join(', ') || 'Aucune');
|
||||
const status = u.active ? '✅' : '🔴';
|
||||
const lastLogin = u.last_login ? new Date(u.last_login).toLocaleDateString('fr-FR', { day:'numeric',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit' }) : 'Jamais';
|
||||
html += '<tr>' +
|
||||
'<td><strong>' + u.username + '</strong>' + (u.display_name && u.display_name !== u.username ? '<br><small>' + u.display_name + '</small>' : '') + '</td>' +
|
||||
'<td><span class="admin-role-badge admin-role-' + u.role + '">' + u.role + '</span></td>' +
|
||||
'<td><span class="admin-vaults-text">' + vaults + '</span></td>' +
|
||||
'<td>' + status + '</td>' +
|
||||
'<td><small>' + lastLogin + '</small></td>' +
|
||||
'<td class="admin-actions">' +
|
||||
'<button class="admin-action-btn" data-action="edit" data-username="' + u.username + '" title="Modifier">✏️</button>' +
|
||||
'<button class="admin-action-btn danger" data-action="delete" data-username="' + u.username + '" title="Supprimer">🗑️</button>' +
|
||||
'</td></tr>';
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
container.innerHTML = html;
|
||||
|
||||
// Bind action buttons
|
||||
container.querySelectorAll('[data-action="edit"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const user = users.find(u => u.username === btn.dataset.username);
|
||||
if (user) this._showUserForm(user);
|
||||
});
|
||||
});
|
||||
container.querySelectorAll('[data-action="delete"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => this._deleteUser(btn.dataset.username));
|
||||
});
|
||||
},
|
||||
|
||||
_showUserForm(user) {
|
||||
const isEdit = !!user;
|
||||
const title = isEdit ? 'Modifier : ' + user.username : 'Nouvel utilisateur';
|
||||
const vaultCheckboxes = this._allVaults.map(v => {
|
||||
const checked = user && (user.vaults.includes(v) || user.vaults.includes('*')) ? 'checked' : '';
|
||||
return '<label class="checkbox-label"><input type="checkbox" name="vault" value="' + v + '" ' + checked + '><span>' + v + '</span></label>';
|
||||
}).join('');
|
||||
const allVaultsChecked = user && user.vaults.includes('*') ? 'checked' : '';
|
||||
|
||||
// Create form modal overlay
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'admin-form-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="admin-form-card">
|
||||
<h3>${title}</h3>
|
||||
<form id="admin-user-form">
|
||||
${!isEdit ? '<div class="form-group"><label>Nom d\'utilisateur</label><input type="text" name="username" required pattern="[a-zA-Z0-9_-]{2,32}" placeholder="username"></div>' : ''}
|
||||
<div class="form-group"><label>Nom affiché</label><input type="text" name="display_name" value="${isEdit ? (user.display_name || '') : ''}"></div>
|
||||
<div class="form-group"><label>${isEdit ? 'Nouveau mot de passe (vide = inchangé)' : 'Mot de passe'}</label><input type="password" name="password" ${!isEdit ? 'required minlength="8"' : ''} placeholder="${isEdit ? 'Laisser vide pour ne pas changer' : 'Min. 8 caractères'}"></div>
|
||||
<div class="form-group"><label>Rôle</label><select name="role"><option value="user" ${isEdit && user.role === 'user' ? 'selected' : ''}>Utilisateur</option><option value="admin" ${isEdit && user.role === 'admin' ? 'selected' : ''}>Admin</option></select></div>
|
||||
<div class="form-group">
|
||||
<label>Vaults autorisées</label>
|
||||
<div class="admin-vault-list">${vaultCheckboxes}</div>
|
||||
<label class="checkbox-label" style="margin-top:8px;border-top:1px solid var(--border);padding-top:8px;"><input type="checkbox" id="admin-all-vaults" ${allVaultsChecked}><span><strong>Accès total</strong> (toutes les vaults, y compris futures)</span></label>
|
||||
</div>
|
||||
${isEdit ? '<div class="form-group"><label>Compte actif</label><label class="checkbox-label"><input type="checkbox" name="active" ' + (user.active ? 'checked' : '') + '><span>Actif</span></label></div>' : ''}
|
||||
<div class="admin-form-actions">
|
||||
<button type="button" class="config-btn-secondary" id="admin-form-cancel">Annuler</button>
|
||||
<button type="submit" class="btn-login" style="font-size:0.85rem;padding:6px 20px;">Enregistrer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
this._modal.appendChild(overlay);
|
||||
|
||||
document.getElementById('admin-form-cancel').addEventListener('click', () => overlay.remove());
|
||||
|
||||
document.getElementById('admin-user-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const allVaults = document.getElementById('admin-all-vaults').checked;
|
||||
const selectedVaults = allVaults
|
||||
? ['*']
|
||||
: Array.from(form.querySelectorAll('input[name="vault"]:checked')).map(cb => cb.value);
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
const updates = {
|
||||
display_name: form.display_name.value || null,
|
||||
role: form.role.value,
|
||||
vaults: selectedVaults,
|
||||
};
|
||||
if (form.password.value) updates.password = form.password.value;
|
||||
const activeCheckbox = form.querySelector('input[name="active"]');
|
||||
if (activeCheckbox) updates.active = activeCheckbox.checked;
|
||||
await api('/api/auth/admin/users/' + user.username, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updates),
|
||||
});
|
||||
} else {
|
||||
await api('/api/auth/admin/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: form.username.value,
|
||||
password: form.password.value,
|
||||
display_name: form.display_name.value || null,
|
||||
role: form.role.value,
|
||||
vaults: selectedVaults,
|
||||
}),
|
||||
});
|
||||
}
|
||||
overlay.remove();
|
||||
this._loadUsers();
|
||||
showToast(isEdit ? 'Utilisateur modifié' : 'Utilisateur créé', 'success');
|
||||
} catch (err) {
|
||||
showToast(err.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async _deleteUser(username) {
|
||||
const currentUser = AuthManager.getUser();
|
||||
if (currentUser && currentUser.username === username) {
|
||||
showToast('Impossible de supprimer son propre compte');
|
||||
return;
|
||||
}
|
||||
if (!confirm('Supprimer l\'utilisateur "' + username + '" ?')) return;
|
||||
try {
|
||||
await api('/api/auth/admin/users/' + username, { method: 'DELETE' });
|
||||
this._loadUsers();
|
||||
showToast('Utilisateur supprimé', 'success');
|
||||
} catch (err) {
|
||||
showToast(err.message);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sidebar toggle (desktop)
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -1408,9 +1876,9 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
const TagFilterService = {
|
||||
defaultFilters: [
|
||||
{ pattern: "#<% ... %>", regex: "^#<%.*%>$", enabled: true },
|
||||
{ pattern: "#{{ ... }}", regex: "^#\\{\\{.*\\}\\}$", enabled: true },
|
||||
{ pattern: "#{ ... }", regex: "^#\\{.*\\}$", enabled: true }
|
||||
{ pattern: "#<% ... %>", regex: "#<%.*%>", enabled: true },
|
||||
{ pattern: "#{{ ... }}", regex: "#\\{\\{.*\\}\\}", enabled: true },
|
||||
{ pattern: "#{ ... }", regex: "#\\{.*\\}", enabled: true }
|
||||
],
|
||||
|
||||
getConfig() {
|
||||
@@ -1430,20 +1898,35 @@
|
||||
},
|
||||
|
||||
patternToRegex(pattern) {
|
||||
let regex = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
|
||||
regex = regex.replace(/\\\.\\\.\\\./g, '.*');
|
||||
// 1. Escape ALL special regex characters
|
||||
// We use a broader set including * and .
|
||||
let regex = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
|
||||
// 2. Convert escaped '*' to '.*' (wildcard)
|
||||
regex = regex.replace(/\\\*/g, '.*');
|
||||
|
||||
// 3. Convert escaped '...' (or any sequence of 2+ dots like ..) to '.*'
|
||||
// We also handle optional whitespace around it to make it more user-friendly
|
||||
regex = regex.replace(/\s*\\\.{2,}\s*/g, '.*');
|
||||
|
||||
return regex;
|
||||
},
|
||||
|
||||
isTagFiltered(tag) {
|
||||
const config = this.getConfig();
|
||||
const filters = config.tagFilters || this.defaultFilters;
|
||||
const tagWithHash = `#${tag}`;
|
||||
|
||||
for (const filter of filters) {
|
||||
if (!filter.enabled) continue;
|
||||
try {
|
||||
const regex = new RegExp(`^${filter.regex}$`);
|
||||
if (regex.test(`#${tag}`)) {
|
||||
// Robustly handle regex with or without ^/$
|
||||
let patternStr = filter.regex;
|
||||
if (!patternStr.startsWith('^')) patternStr = '^' + patternStr;
|
||||
if (!patternStr.endsWith('$')) patternStr = patternStr + '$';
|
||||
|
||||
const regex = new RegExp(patternStr);
|
||||
if (regex.test(tagWithHash)) {
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -3460,12 +3943,18 @@
|
||||
initSidebarResize();
|
||||
initEditor();
|
||||
initSyncStatus();
|
||||
initLoginForm();
|
||||
|
||||
try {
|
||||
await Promise.all([loadVaults(), loadTags()]);
|
||||
} catch (err) {
|
||||
console.error("Failed to initialize ObsiGate:", err);
|
||||
showToast("Erreur lors de l'initialisation");
|
||||
// Check auth status first
|
||||
const authOk = await AuthManager.initAuth();
|
||||
|
||||
if (authOk) {
|
||||
try {
|
||||
await Promise.all([loadVaults(), loadTags()]);
|
||||
} catch (err) {
|
||||
console.error("Failed to initialize ObsiGate:", err);
|
||||
showToast("Erreur lors de l'initialisation");
|
||||
}
|
||||
}
|
||||
|
||||
safeCreateIcons();
|
||||
|
||||
+42
-1
@@ -72,7 +72,46 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="search-progress-bar" id="search-progress-bar"><div class="search-progress-bar__fill"></div></div>
|
||||
<div class="app-container">
|
||||
|
||||
<!-- Login Screen (hidden by default, shown when auth is required) -->
|
||||
<div id="login-screen" class="login-screen hidden">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">
|
||||
<span class="login-logo-icon">📖</span>
|
||||
<span class="login-logo-text">ObsiGate</span>
|
||||
</div>
|
||||
<p class="login-subtitle">Accès sécurisé à vos vaults</p>
|
||||
</div>
|
||||
<form id="login-form" class="login-form" autocomplete="on">
|
||||
<div class="form-group">
|
||||
<label for="login-username">Nom d'utilisateur</label>
|
||||
<input type="text" id="login-username" name="username" autocomplete="username" placeholder="utilisateur" required autofocus />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="login-password">Mot de passe</label>
|
||||
<div class="password-input-wrapper">
|
||||
<input type="password" id="login-password" name="password" autocomplete="current-password" placeholder="••••••••" required />
|
||||
<button type="button" id="toggle-password" class="password-toggle" aria-label="Afficher le mot de passe">👁</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-group--inline">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="remember-me" name="remember_me" />
|
||||
<span>Se souvenir de moi (30 jours)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="login-error" class="login-error hidden"></div>
|
||||
<button type="submit" id="login-btn" class="btn-login">
|
||||
<span class="btn-text">Se connecter</span>
|
||||
<span class="btn-spinner hidden">⏳</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Application (wrapped for show/hide) -->
|
||||
<div id="app" class="app-container">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
@@ -138,6 +177,8 @@
|
||||
<i data-lucide="database" style="width:14px;height:14px"></i>
|
||||
<span id="vault-context-text">All</span>
|
||||
</div>
|
||||
<!-- User menu (visible when logged in) -->
|
||||
<div class="user-menu" id="user-menu"></div>
|
||||
<div class="header-menu">
|
||||
<button class="header-menu-btn" id="header-menu-btn" title="Options">
|
||||
<i data-lucide="settings" style="width:18px;height:18px"></i>
|
||||
|
||||
@@ -2958,3 +2958,374 @@ body.resizing-v {
|
||||
transform: translateX(18px);
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Utility — hidden class
|
||||
--------------------------------------------------------------------------- */
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Login Screen
|
||||
--------------------------------------------------------------------------- */
|
||||
.login-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
|
||||
}
|
||||
.login-card {
|
||||
width: 380px;
|
||||
max-width: 90vw;
|
||||
background: rgba(30, 30, 46, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 40px 36px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
animation: loginFadeIn 0.4s ease-out;
|
||||
}
|
||||
@keyframes loginFadeIn {
|
||||
from { opacity: 0; transform: translateY(20px) scale(0.97); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.login-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.login-logo-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.login-logo-text {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #a78bfa, #818cf8, #60a5fa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.login-subtitle {
|
||||
font-size: 0.88rem;
|
||||
color: rgba(255,255,255,0.45);
|
||||
margin: 0;
|
||||
}
|
||||
.login-form .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.login-form .form-group label {
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.6);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.login-form input[type="text"],
|
||||
.login-form input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: #e2e8f0;
|
||||
font-size: 0.92rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 200ms, box-shadow 200ms;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-form input:focus {
|
||||
border-color: #818cf8;
|
||||
box-shadow: 0 0 0 3px rgba(129,140,248,0.2);
|
||||
}
|
||||
.login-form input::placeholder {
|
||||
color: rgba(255,255,255,0.25);
|
||||
}
|
||||
.password-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
opacity: 0.5;
|
||||
transition: opacity 150ms;
|
||||
padding: 4px;
|
||||
}
|
||||
.password-toggle:hover { opacity: 0.9; }
|
||||
.form-group--inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.82rem;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
accent-color: #818cf8;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.login-error {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
background: rgba(239,68,68,0.12);
|
||||
border: 1px solid rgba(239,68,68,0.3);
|
||||
color: #fca5a5;
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
padding: 13px 24px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #7c3aed, #6366f1);
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 200ms, transform 100ms;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-login:hover:not(:disabled) {
|
||||
opacity: 0.92;
|
||||
}
|
||||
.btn-login:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.btn-login:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-spinner { font-size: 1rem; }
|
||||
|
||||
/* Light theme login */
|
||||
[data-theme="light"] .login-screen {
|
||||
background: linear-gradient(135deg, #e0e7ff, #f0f5ff, #dbeafe);
|
||||
}
|
||||
[data-theme="light"] .login-card {
|
||||
background: rgba(255,255,255,0.9);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
||||
}
|
||||
[data-theme="light"] .login-subtitle { color: rgba(0,0,0,0.45); }
|
||||
[data-theme="light"] .login-form .form-group label { color: rgba(0,0,0,0.6); }
|
||||
[data-theme="light"] .login-form input[type="text"],
|
||||
[data-theme="light"] .login-form input[type="password"] {
|
||||
background: rgba(0,0,0,0.04);
|
||||
border-color: rgba(0,0,0,0.12);
|
||||
color: #1e293b;
|
||||
}
|
||||
[data-theme="light"] .login-form input::placeholder { color: rgba(0,0,0,0.3); }
|
||||
[data-theme="light"] .checkbox-label { color: rgba(0,0,0,0.5); }
|
||||
[data-theme="light"] .login-error {
|
||||
background: rgba(239,68,68,0.08);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
User Menu (header)
|
||||
--------------------------------------------------------------------------- */
|
||||
.user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.user-display-name {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-menu-link,
|
||||
.btn-logout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: color 150ms, background 150ms;
|
||||
}
|
||||
.user-menu-link:hover,
|
||||
.btn-logout:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
.btn-logout:hover { color: var(--danger); }
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Admin Panel
|
||||
--------------------------------------------------------------------------- */
|
||||
.admin-toolbar {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.admin-users-list {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.admin-table th {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.admin-table td { color: var(--text-primary); }
|
||||
.admin-role-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.admin-role-admin {
|
||||
background: rgba(129,140,248,0.15);
|
||||
color: #818cf8;
|
||||
}
|
||||
.admin-role-user {
|
||||
background: rgba(34,197,94,0.12);
|
||||
color: #22c55e;
|
||||
}
|
||||
.admin-vaults-text {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.admin-actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admin-action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
transition: background 150ms;
|
||||
}
|
||||
.admin-action-btn:hover { background: var(--bg-hover); }
|
||||
.admin-action-btn.danger:hover { background: rgba(239,68,68,0.12); }
|
||||
|
||||
/* Admin form overlay */
|
||||
.admin-form-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.admin-form-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 28px 24px;
|
||||
width: 440px;
|
||||
max-width: 90vw;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
.admin-form-card h3 {
|
||||
margin: 0 0 20px;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.admin-form-card .form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.admin-form-card .form-group label {
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.admin-form-card input[type="text"],
|
||||
.admin-form-card input[type="password"],
|
||||
.admin-form-card select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.88rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 200ms;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.admin-form-card input:focus,
|
||||
.admin-form-card select:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.admin-vault-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.admin-vault-list .checkbox-label {
|
||||
color: var(--text-primary);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.admin-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user