Fix refresh logout+ add trash (undo deleted)
This commit is contained in:
@@ -9,23 +9,116 @@ let lockMin = parseInt(localStorage.getItem('autoLockMinutes') || '5');
|
||||
let order = JSON.parse(localStorage.getItem('entryOrder') || '[]');
|
||||
let selectedFolder = localStorage.getItem('selectedFolder') || 'All';
|
||||
let entries = [];
|
||||
let folders = ['All']; // Will be populated from server
|
||||
let folders = ['All'];
|
||||
let genPwdVal = '';
|
||||
let cryptoKey = null;
|
||||
let idleT, warnT, countT;
|
||||
let draggedId = null;
|
||||
let showTrash = false;
|
||||
// ==================== SOUND ====================
|
||||
let soundEnabled = localStorage.getItem('soundEnabled') !== 'false';
|
||||
let audioCtx = null;
|
||||
|
||||
function getAudioContext() {
|
||||
if (!audioCtx) {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
return audioCtx;
|
||||
}
|
||||
|
||||
function playTone(freq, duration, type = 'sine', volume = 0.08) {
|
||||
if (!soundEnabled) return;
|
||||
try {
|
||||
const ctx = getAudioContext();
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
osc.type = type;
|
||||
osc.frequency.setValueAtTime(freq, ctx.currentTime);
|
||||
gain.gain.setValueAtTime(volume, ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(ctx.currentTime);
|
||||
osc.stop(ctx.currentTime + duration);
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
function playSound(type) {
|
||||
if (!soundEnabled) return;
|
||||
switch (type) {
|
||||
case 'click':
|
||||
playTone(800, 0.08, 'sine', 0.06);
|
||||
break;
|
||||
case 'success':
|
||||
playTone(523, 0.1, 'sine', 0.1);
|
||||
setTimeout(() => playTone(659, 0.1, 'sine', 0.1), 100);
|
||||
setTimeout(() => playTone(784, 0.15, 'sine', 0.1), 200);
|
||||
break;
|
||||
case 'error':
|
||||
playTone(200, 0.2, 'square', 0.06);
|
||||
setTimeout(() => playTone(150, 0.3, 'square', 0.06), 150);
|
||||
break;
|
||||
case 'delete':
|
||||
playTone(150, 0.15, 'triangle', 0.08);
|
||||
break;
|
||||
case 'copy':
|
||||
playTone(1200, 0.05, 'sine', 0.07);
|
||||
break;
|
||||
case 'generate':
|
||||
playTone(440, 0.05, 'sine', 0.05);
|
||||
setTimeout(() => playTone(554, 0.05, 'sine', 0.05), 60);
|
||||
setTimeout(() => playTone(659, 0.05, 'sine', 0.05), 120);
|
||||
setTimeout(() => playTone(880, 0.1, 'sine', 0.07), 180);
|
||||
break;
|
||||
case 'open':
|
||||
playTone(600, 0.12, 'sine', 0.06);
|
||||
setTimeout(() => playTone(800, 0.1, 'sine', 0.06), 80);
|
||||
break;
|
||||
case 'close':
|
||||
playTone(800, 0.08, 'sine', 0.05);
|
||||
setTimeout(() => playTone(600, 0.1, 'sine', 0.05), 80);
|
||||
break;
|
||||
case 'login':
|
||||
playTone(523, 0.1, 'sine', 0.08);
|
||||
setTimeout(() => playTone(659, 0.1, 'sine', 0.08), 100);
|
||||
setTimeout(() => playTone(784, 0.2, 'sine', 0.1), 200);
|
||||
break;
|
||||
case 'register':
|
||||
playTone(440, 0.1, 'sine', 0.08);
|
||||
setTimeout(() => playTone(554, 0.1, 'sine', 0.08), 100);
|
||||
setTimeout(() => playTone(659, 0.15, 'sine', 0.1), 200);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSound() {
|
||||
soundEnabled = !soundEnabled;
|
||||
localStorage.setItem('soundEnabled', soundEnabled);
|
||||
const btn = document.getElementById('soundToggle');
|
||||
if (btn) {
|
||||
btn.textContent = soundEnabled ? '🔊' : '🔇';
|
||||
}
|
||||
if (soundEnabled) playTone(440, 0.05, 'sine', 0.05); // confirmation beep
|
||||
}
|
||||
|
||||
// Update the button on startup
|
||||
function updateSoundButton() {
|
||||
const btn = document.getElementById('soundToggle');
|
||||
if (btn) {
|
||||
btn.textContent = soundEnabled ? '🔊' : '🔇';
|
||||
}
|
||||
}
|
||||
// ==================== TOAST ====================
|
||||
function toast(m, t) { t = t || 'success'; const c = document.getElementById('toastContainer'); const d = document.createElement('div'); d.className = 'toast ' + t; d.textContent = m; c.appendChild(d); setTimeout(() => d.remove(), 3000); }
|
||||
function showZigzagToast(element, message, type) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast-zigzag ' + (type || 'success');
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
const rect = element.getBoundingClientRect();
|
||||
toast.style.left = rect.left + 'px';
|
||||
toast.style.top = rect.top + 'px';
|
||||
setTimeout(() => toast.remove(), 1500);
|
||||
function showZigzagToast(elem, msg, type) {
|
||||
const t = document.createElement('div');
|
||||
t.className = 'toast-zigzag ' + (type || 'success');
|
||||
t.textContent = msg;
|
||||
document.body.appendChild(t);
|
||||
const r = elem.getBoundingClientRect();
|
||||
t.style.left = r.left + 'px';
|
||||
t.style.top = r.top + 'px';
|
||||
setTimeout(() => t.remove(), 1500);
|
||||
}
|
||||
|
||||
// ==================== THEME ====================
|
||||
@@ -46,13 +139,19 @@ function resetIdle() { clearTimeout(idleT); clearTimeout(warnT); clearInterval(c
|
||||
function saveUsername() { const f = document.getElementById('usernameInput'); if (f && f.value.trim()) localStorage.setItem('savedUsername', f.value.trim()); }
|
||||
function loadUsername() { const s = localStorage.getItem('savedUsername'); const f = document.getElementById('usernameInput'); if (s && f) f.value = s; }
|
||||
|
||||
// ==================== FOLDERS (server-backed) ====================
|
||||
// ==================== FOLDERS ====================
|
||||
async function loadFolders() {
|
||||
if (!token) return;
|
||||
try {
|
||||
const r = await fetch(API + '/folders', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (r.ok) {
|
||||
folders = await r.json();
|
||||
if (!folders.includes('All')) folders.unshift('All');
|
||||
const data = await r.json();
|
||||
if (Array.isArray(data)) {
|
||||
folders = data.filter(f => typeof f === 'string');
|
||||
if (!folders.includes('All')) folders.unshift('All');
|
||||
} else {
|
||||
folders = ['All'];
|
||||
}
|
||||
} else {
|
||||
folders = ['All'];
|
||||
}
|
||||
@@ -68,14 +167,10 @@ async function addFolderToServer(name) {
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
if (r.ok) {
|
||||
await loadFolders();
|
||||
return true;
|
||||
} else {
|
||||
const d = await r.json();
|
||||
toast('❌ ' + (d.error || 'Error'), 'error');
|
||||
return false;
|
||||
}
|
||||
if (r.ok) { await loadFolders(); return true; }
|
||||
const d = await r.json();
|
||||
toast('❌ ' + (d.error || 'Error'), 'error');
|
||||
return false;
|
||||
} catch (e) { toast('⚠️ Connection error', 'error'); return false; }
|
||||
}
|
||||
|
||||
@@ -87,36 +182,24 @@ async function deleteFolderFromServer(name) {
|
||||
});
|
||||
if (r.ok) {
|
||||
await loadFolders();
|
||||
if (selectedFolder === name) {
|
||||
selectedFolder = 'All';
|
||||
localStorage.setItem('selectedFolder', 'All');
|
||||
}
|
||||
if (selectedFolder === name) { selectedFolder = 'All'; localStorage.setItem('selectedFolder', 'All'); }
|
||||
return true;
|
||||
} else {
|
||||
const d = await r.json();
|
||||
toast('❌ ' + (d.error || 'Error'), 'error');
|
||||
return false;
|
||||
}
|
||||
const d = await r.json();
|
||||
toast('❌ ' + (d.error || 'Error'), 'error');
|
||||
return false;
|
||||
} catch (e) { toast('⚠️ Connection error', 'error'); return false; }
|
||||
}
|
||||
|
||||
function renderFolders() {
|
||||
const bar = document.getElementById('foldersBar');
|
||||
if (!bar) return;
|
||||
|
||||
// Ensure every entry has a string folder
|
||||
entries.forEach(e => {
|
||||
if (!e.folder || typeof e.folder !== 'string') e.folder = 'All';
|
||||
});
|
||||
|
||||
entries.forEach(e => { if (!e.folder || typeof e.folder !== 'string') e.folder = 'All'; });
|
||||
const counts = {};
|
||||
entries.forEach(e => {
|
||||
const f = e.folder;
|
||||
counts[f] = (counts[f] || 0) + 1;
|
||||
});
|
||||
|
||||
entries.forEach(e => { const f = e.folder; counts[f] = (counts[f] || 0) + 1; });
|
||||
let html = '';
|
||||
folders.forEach(f => {
|
||||
if (!f) return;
|
||||
const count = counts[f] || 0;
|
||||
html += `<span class="folder-chip${selectedFolder === f ? ' active' : ''}" onclick="selectFolder('${esc(f)}')">📁 ${esc(f)}<span class="folder-count">${count}</span>${f !== 'All' ? `<button class="folder-delete-btn" onclick="event.stopPropagation();showDeleteFolderConfirm('${esc(f)}')">✕</button>` : ''}</span>`;
|
||||
});
|
||||
@@ -129,6 +212,7 @@ function populateAddFolderSelect() {
|
||||
if (!select) return;
|
||||
select.innerHTML = '';
|
||||
folders.forEach(f => {
|
||||
if (!f) return;
|
||||
const option = document.createElement('option');
|
||||
option.value = f;
|
||||
option.textContent = '📁 ' + f;
|
||||
@@ -148,27 +232,14 @@ function selectFolder(f) {
|
||||
function showAddFolderModal() {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'custom-modal-overlay show';
|
||||
overlay.innerHTML = `
|
||||
<div class="custom-modal">
|
||||
<h3>📁 New Folder</h3>
|
||||
<input type="text" id="newFolderName" placeholder="Folder name">
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-outline btn-sm" id="cancelAddFolder">Cancel</button>
|
||||
<button class="btn btn-sm" id="confirmAddFolder">Create</button>
|
||||
</div>
|
||||
</div>`;
|
||||
overlay.innerHTML = `<div class="custom-modal"><h3>📁 New Folder</h3><input type="text" id="newFolderName" placeholder="Folder name"><div class="modal-actions"><button class="btn btn-outline btn-sm" id="cancelAddFolder">Cancel</button><button class="btn btn-sm" id="confirmAddFolder">Create</button></div></div>`;
|
||||
document.body.appendChild(overlay);
|
||||
document.getElementById('cancelAddFolder').onclick = () => overlay.remove();
|
||||
document.getElementById('confirmAddFolder').onclick = async () => {
|
||||
const name = document.getElementById('newFolderName').value.trim();
|
||||
if (!name) { toast('Enter a name', 'error'); return; }
|
||||
const success = await addFolderToServer(name);
|
||||
if (success) {
|
||||
renderFolders();
|
||||
populateAddFolderSelect();
|
||||
overlay.remove();
|
||||
toast('📁 Folder created!');
|
||||
}
|
||||
const ok = await addFolderToServer(name);
|
||||
if (ok) { renderFolders(); populateAddFolderSelect(); overlay.remove(); toast('📁 Folder created!'); }
|
||||
};
|
||||
overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
|
||||
}
|
||||
@@ -176,30 +247,43 @@ function showAddFolderModal() {
|
||||
function showDeleteFolderConfirm(folderName) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'custom-modal-overlay show';
|
||||
overlay.innerHTML = `
|
||||
<div class="custom-modal">
|
||||
<h3>🗑️ Delete Folder</h3>
|
||||
<p style="color:var(--text2);margin-bottom:1rem;">Delete "${folderName}"? Entries will move to "All".</p>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-outline btn-sm" id="cancelDeleteFolder">Cancel</button>
|
||||
<button class="btn btn-sm btn-danger" id="confirmDeleteFolder">Delete</button>
|
||||
</div>
|
||||
</div>`;
|
||||
overlay.innerHTML = `<div class="custom-modal"><h3>🗑️ Delete Folder</h3><p style="color:var(--text2);margin-bottom:1rem;">Delete "${folderName}"? Entries move to "All".</p><div class="modal-actions"><button class="btn btn-outline btn-sm" id="cancelDeleteFolder">Cancel</button><button class="btn btn-sm btn-danger" id="confirmDeleteFolder">Delete</button></div></div>`;
|
||||
document.body.appendChild(overlay);
|
||||
document.getElementById('cancelDeleteFolder').onclick = () => overlay.remove();
|
||||
document.getElementById('confirmDeleteFolder').onclick = async () => {
|
||||
const success = await deleteFolderFromServer(folderName);
|
||||
if (success) {
|
||||
renderFolders();
|
||||
populateAddFolderSelect();
|
||||
render();
|
||||
overlay.remove();
|
||||
toast('📁 Folder deleted');
|
||||
}
|
||||
const ok = await deleteFolderFromServer(folderName);
|
||||
if (ok) { renderFolders(); populateAddFolderSelect(); render(); overlay.remove(); toast('📁 Folder deleted'); }
|
||||
};
|
||||
overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
|
||||
}
|
||||
|
||||
// ==================== TRASH ====================
|
||||
function toggleTrash() {
|
||||
showTrash = !showTrash;
|
||||
const btn = document.getElementById('trashBtn');
|
||||
const actions = document.getElementById('trashActions');
|
||||
if (btn) { btn.textContent = showTrash ? '📋 Active' : '🗑️ Trash'; btn.classList.toggle('btn-danger', showTrash); }
|
||||
if (actions) actions.classList.toggle('hidden', !showTrash);
|
||||
loadEntries();
|
||||
}
|
||||
async function restoreEntry(id) {
|
||||
try { const r = await fetch(API + '/entries/' + id + '/restore', { method: 'POST', headers: { 'Authorization': 'Bearer ' + token } }); if (r.ok) { toast('✅ Restored!'); playSound('success'); loadEntries(); } } catch (e) { toast('⚠️ Error', 'error'); }
|
||||
}
|
||||
async function permanentDelete(id) {
|
||||
if (!confirm('Permanently delete?')) return;
|
||||
try { const r = await fetch(API + '/entries/' + id + '?permanent=1', { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } }); if (r.ok) { toast('🗑️ Permanently deleted'); playSound('error'); loadEntries(); } } catch (e) { toast('⚠️ Error', 'error'); }
|
||||
}
|
||||
async function emptyTrash() {
|
||||
if (!confirm('Delete ALL trashed entries?')) return;
|
||||
try { const r = await fetch(API + '/entries/trash/empty', { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } }); if (r.ok) { toast('🗑️ Trash emptied'); playSound('error'); loadEntries(); } } catch (e) { toast('⚠️ Error', 'error'); }
|
||||
}
|
||||
function timeAgo(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const now = new Date(); const d = new Date(dateStr + 'Z');
|
||||
const days = 30 - Math.floor((now - d) / (1000 * 60 * 60 * 24));
|
||||
return days <= 0 ? 'Expiring' : days + 'd left';
|
||||
}
|
||||
|
||||
// ==================== INIT ====================
|
||||
function init() {
|
||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.toggle('active', b.dataset.view === view));
|
||||
@@ -220,8 +304,8 @@ function init() {
|
||||
render();
|
||||
}
|
||||
});
|
||||
updateSoundButton();
|
||||
}
|
||||
|
||||
function toggleViewBtn() { showView = !showView; localStorage.setItem('showViewBtn', showView); document.getElementById('showViewBtnToggle').classList.toggle('active', showView); render(); }
|
||||
function toggleShowEmail() { showMail = !showMail; localStorage.setItem('showEmail', showMail); document.getElementById('showEmailToggle').classList.toggle('active', showMail); document.getElementById('usernameInput').style.display = showMail ? '' : 'none'; render(); }
|
||||
|
||||
@@ -245,10 +329,16 @@ async function login() {
|
||||
const r = await fetch(API + '/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: u, masterPassword: p }) });
|
||||
const d = await r.json();
|
||||
if (r.ok) {
|
||||
token = d.token; curUser = u; cryptoKey = await deriveKey(p, d.salt);
|
||||
sessionStorage.setItem('authToken', token); sessionStorage.setItem('currentUsername', u);
|
||||
token = d.token; curUser = u;
|
||||
sessionStorage.setItem('masterPassword', p);
|
||||
sessionStorage.setItem('salt', d.salt);
|
||||
cryptoKey = await deriveKey(p, d.salt);
|
||||
sessionStorage.setItem('authToken', token);
|
||||
sessionStorage.setItem('currentUsername', u);
|
||||
await loadFolders();
|
||||
toast('✅ Login!'); showVault(); loadEntries();
|
||||
toast('✅ Login!');
|
||||
showVault();
|
||||
loadEntries();
|
||||
} else { toast('❌ ' + (d.error || 'Invalid'), 'error'); document.getElementById('loginPassword').value = ''; }
|
||||
} catch (e) { toast('⚠️ Connection error', 'error'); }
|
||||
finally { document.getElementById('loginBtn').disabled = false; }
|
||||
@@ -264,10 +354,16 @@ async function register() {
|
||||
const r = await fetch(API + '/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: u, masterPassword: p }) });
|
||||
const d = await r.json();
|
||||
if (r.ok) {
|
||||
token = d.token; curUser = u; cryptoKey = await deriveKey(p, d.salt);
|
||||
sessionStorage.setItem('authToken', token); sessionStorage.setItem('currentUsername', u);
|
||||
token = d.token; curUser = u;
|
||||
sessionStorage.setItem('masterPassword', p);
|
||||
sessionStorage.setItem('salt', d.salt);
|
||||
cryptoKey = await deriveKey(p, d.salt);
|
||||
sessionStorage.setItem('authToken', token);
|
||||
sessionStorage.setItem('currentUsername', u);
|
||||
await loadFolders();
|
||||
toast('✅ Created!'); showVault(); loadEntries();
|
||||
toast('✅ Created!');
|
||||
showVault();
|
||||
loadEntries();
|
||||
} else { toast('❌ ' + (d.error || 'Failed'), 'error'); }
|
||||
} catch (e) { toast('⚠️ Connection error', 'error'); }
|
||||
finally { document.getElementById('registerBtn').disabled = false; }
|
||||
@@ -277,7 +373,7 @@ function doLogout() {
|
||||
saveUsername();
|
||||
clearTimeout(idleT); clearTimeout(warnT); clearInterval(countT);
|
||||
document.getElementById('idleWarning').classList.remove('show');
|
||||
token = null; curUser = null; entries = []; cryptoKey = null; folders = ['All'];
|
||||
token = null; curUser = null; entries = []; cryptoKey = null; folders = ['All']; showTrash = false;
|
||||
sessionStorage.clear();
|
||||
document.getElementById('authSection').classList.remove('hidden');
|
||||
document.getElementById('vaultSection').classList.add('hidden');
|
||||
@@ -302,8 +398,8 @@ function applyOrder(list) { if (!list || !list.length) return []; if (!order ||
|
||||
|
||||
async function loadEntries(q) {
|
||||
try {
|
||||
let url = API + '/entries';
|
||||
if (q) url += '?search=' + encodeURIComponent(q);
|
||||
let url = API + '/entries?deleted=' + (showTrash ? '1' : '0');
|
||||
if (q) url += '&search=' + encodeURIComponent(q);
|
||||
const r = await fetch(url, { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (r.ok) {
|
||||
const raw = await r.json();
|
||||
@@ -311,9 +407,9 @@ async function loadEntries(q) {
|
||||
for (const e of raw) {
|
||||
if (e.encryption_method === 'client') {
|
||||
const pw = await decryptPwd(e.encrypted_password, e.iv);
|
||||
entries.push({ id: e.id, site: e.site, username: e.username, password: pw, folder: e.folder || 'All' });
|
||||
entries.push({ id: e.id, site: e.site, username: e.username, password: pw, folder: e.folder || 'All', deleted_at: e.deleted_at });
|
||||
} else {
|
||||
entries.push({ id: e.id, site: e.site, username: e.username, password: e.password || '', folder: e.folder || 'All' });
|
||||
entries.push({ id: e.id, site: e.site, username: e.username, password: e.password || '', folder: e.folder || 'All', deleted_at: e.deleted_at });
|
||||
}
|
||||
}
|
||||
entries = applyOrder(entries);
|
||||
@@ -327,44 +423,68 @@ async function loadEntries(q) {
|
||||
}
|
||||
|
||||
function getFilteredEntries() {
|
||||
if (showTrash) return entries;
|
||||
if (selectedFolder === 'All') return entries;
|
||||
return entries.filter(e => (e.folder || 'All') === selectedFolder);
|
||||
}
|
||||
|
||||
// ==================== RENDER ====================
|
||||
function render() {
|
||||
const c = document.getElementById('entriesContainer');
|
||||
c.className = '';
|
||||
if (showTrash) c.classList.add('trash-view');
|
||||
c.classList.add(view + '-view');
|
||||
const filtered = getFilteredEntries();
|
||||
if (!filtered.length) { c.innerHTML = '<div style="text-align:center;color:var(--text2);padding:2rem;grid-column:1/-1">📭 No entries</div>'; return; }
|
||||
if (!filtered.length) { c.innerHTML = '<div style="text-align:center;color:var(--text2);padding:2rem;grid-column:1/-1">' + (showTrash ? '📭 Trash empty' : '📭 No entries') + '</div>'; return; }
|
||||
if (view === 'table') {
|
||||
let h = '<table><thead><tr><th>Site</th>' +
|
||||
(showMail ? '<th>User</th>' : '') +
|
||||
'<th>Password</th><th>Folder</th><th>Actions</th></tr></thead><tbody>';
|
||||
filtered.forEach(e => {
|
||||
h += '<tr class="table-row-drag" draggable="true" data-id="' + e.id + '">' +
|
||||
'<td>🌐 ' + esc(e.site) + '</td>' +
|
||||
(showMail ? '<td>👤 ' + esc(e.username) + '</td>' : '') +
|
||||
'<td class="password-cell"><span id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span></td>' +
|
||||
'<td><span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span></td>' +
|
||||
'<td class="actions-cell">' +
|
||||
(showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button> ' : '') +
|
||||
'<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button> ' +
|
||||
'<button class="edit-btn" data-id="' + e.id + '" style="position:static;display:inline-flex;vertical-align:middle;">✏️</button> ' +
|
||||
'<button class="delete-btn" data-id="' + e.id + '" style="position:static;display:inline-flex;vertical-align:middle;">✕</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
});
|
||||
h += '</tbody></table>';
|
||||
c.innerHTML = h;
|
||||
}else { c.innerHTML = filtered.map(e => (view === 'grid' ? gridC(e) : view === 'compact' ? compC(e) : listC(e))).join(''); }
|
||||
let h = '<table><thead><tr><th>Site</th>' + (showMail ? '<th>User</th>' : '') + '<th>Password</th>' + (!showTrash ? '<th>Folder</th>' : '<th>Deleted</th>') + '<th>Actions</th></tr></thead><tbody>';
|
||||
filtered.forEach(e => {
|
||||
h += '<tr class="table-row-drag" draggable="true" data-id="' + e.id + '">' +
|
||||
'<td>🌐 ' + esc(e.site) + '</td>' +
|
||||
(showMail ? '<td>👤 ' + esc(e.username) + '</td>' : '') +
|
||||
'<td class="password-cell"><span id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span></td>';
|
||||
if (!showTrash) {
|
||||
h += '<td><span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span></td>' +
|
||||
'<td class="actions-cell">' +
|
||||
(showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button> ' : '') +
|
||||
'<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button> ' +
|
||||
'<button class="edit-btn" data-id="' + e.id + '" style="position:static;display:inline-flex;vertical-align:middle;">✏️</button> ' +
|
||||
'<button class="delete-btn" data-id="' + e.id + '" style="position:static;display:inline-flex;vertical-align:middle;">✕</button>' +
|
||||
'</td>';
|
||||
} else {
|
||||
h += '<td><span class="trash-badge">🗑️ ' + timeAgo(e.deleted_at) + '</span></td>' +
|
||||
'<td class="actions-cell">' +
|
||||
'<button class="restore-btn" onclick="restoreEntry(' + e.id + ')">↩️ Restore</button> ' +
|
||||
'<button class="delete-btn" data-id="' + e.id + '" style="position:static;display:inline-flex;vertical-align:middle;">✕</button>' +
|
||||
'</td>';
|
||||
}
|
||||
h += '</tr>';
|
||||
});
|
||||
h += '</tbody></table>';
|
||||
c.innerHTML = h;
|
||||
} else {
|
||||
c.innerHTML = filtered.map(e => {
|
||||
if (view === 'grid') return gridC(e);
|
||||
if (view === 'compact') return compC(e);
|
||||
return listC(e);
|
||||
}).join('');
|
||||
}
|
||||
attachEvents();
|
||||
setupDrag();
|
||||
}
|
||||
|
||||
function gridC(e) { return '<div class="entry-card" draggable="true" data-id="' + e.id + '"><div class="action-btns"><button class="edit-btn" data-id="' + e.id + '">✏️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><div class="card-site">🌐 ' + esc(e.site) + '</div>' + (showMail ? '<div class="card-user">👤 ' + esc(e.username) + '</div>' : '') + '<div class="card-folder">📁 ' + esc(e.folder || 'All') + '</div><div class="card-password"><span id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span><div>' + (showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button>' : '') + '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div></div></div>'; }
|
||||
function listC(e) { return '<div class="entry-row" draggable="true" data-id="' + e.id + '"><div class="action-btns"><button class="edit-btn" data-id="' + e.id + '">✏️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><div class="entry-info"><span class="entry-site">🌐 ' + esc(e.site) + '</span>' + (showMail ? '<span class="entry-user">👤 ' + esc(e.username) + '</span>' : '') + '<span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span><div class="password-field"><span class="password-text" id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span>' + (showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button>' : '') + '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div></div></div>'; }
|
||||
function compC(e) { return '<div class="entry-compact" draggable="true" data-id="' + e.id + '"><div class="action-btns"><button class="edit-btn" data-id="' + e.id + '">✏️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><span>🌐 ' + esc(e.site) + '</span>' + (showMail ? '<span>👤 ' + esc(e.username) + '</span>' : '') + '<span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span><span id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span>' + (showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button>' : '') + '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div>'; }
|
||||
function gridC(e) {
|
||||
if (showTrash) return '<div class="entry-card" data-id="' + e.id + '"><div class="action-btns"><button class="restore-btn" onclick="restoreEntry(' + e.id + ')">↩️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><div class="card-site">🌐 ' + esc(e.site) + '</div>' + (showMail ? '<div class="card-user">👤 ' + esc(e.username) + '</div>' : '') + '<div class="trash-info">🗑️ ' + timeAgo(e.deleted_at) + '</div></div>';
|
||||
return '<div class="entry-card" draggable="true" data-id="' + e.id + '"><div class="action-btns"><button class="edit-btn" data-id="' + e.id + '">✏️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><div class="card-site">🌐 ' + esc(e.site) + '</div>' + (showMail ? '<div class="card-user">👤 ' + esc(e.username) + '</div>' : '') + '<div class="card-folder">📁 ' + esc(e.folder || 'All') + '</div><div class="card-password"><span id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span><div>' + (showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button>' : '') + '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div></div></div>';
|
||||
}
|
||||
function listC(e) {
|
||||
if (showTrash) return '<div class="entry-row" data-id="' + e.id + '"><div class="action-btns"><button class="restore-btn" onclick="restoreEntry(' + e.id + ')">↩️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><div class="entry-info"><span class="entry-site">🌐 ' + esc(e.site) + '</span>' + (showMail ? '<span class="entry-user">👤 ' + esc(e.username) + '</span>' : '') + '<span class="trash-badge">🗑️ ' + timeAgo(e.deleted_at) + '</span></div></div>';
|
||||
return '<div class="entry-row" draggable="true" data-id="' + e.id + '"><div class="action-btns"><button class="edit-btn" data-id="' + e.id + '">✏️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><div class="entry-info"><span class="entry-site">🌐 ' + esc(e.site) + '</span>' + (showMail ? '<span class="entry-user">👤 ' + esc(e.username) + '</span>' : '') + '<span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span><div class="password-field"><span class="password-text" id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span>' + (showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button>' : '') + '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div></div></div>';
|
||||
}
|
||||
function compC(e) {
|
||||
if (showTrash) return '<div class="entry-compact" data-id="' + e.id + '"><div class="action-btns"><button class="restore-btn" onclick="restoreEntry(' + e.id + ')">↩️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><span class="compact-site">🌐 ' + esc(e.site) + '</span>' + (showMail ? '<span class="compact-user">👤 ' + esc(e.username) + '</span>' : '') + '<span class="trash-badge">🗑️ ' + timeAgo(e.deleted_at) + '</span></div>';
|
||||
return '<div class="entry-compact" draggable="true" data-id="' + e.id + '"><div class="action-btns"><button class="edit-btn" data-id="' + e.id + '">✏️</button><button class="delete-btn" data-id="' + e.id + '">✕</button></div><span>🌐 ' + esc(e.site) + '</span>' + (showMail ? '<span>👤 ' + esc(e.username) + '</span>' : '') + '<span class="entry-folder">📁 ' + esc(e.folder || 'All') + '</span><span id="p-' + e.id + '" data-pw="' + esc(e.password) + '">••••••••</span>' + (showView ? '<button class="icon-btn toggle-p" data-id="' + e.id + '">👁️</button>' : '') + '<button class="icon-btn copy-p" data-id="' + e.id + '">📋</button></div>';
|
||||
}
|
||||
|
||||
// ==================== EVENTS ====================
|
||||
function showConfirm(btn, message, callback) {
|
||||
@@ -384,14 +504,12 @@ function showConfirm(btn, message, callback) {
|
||||
confirm.querySelector('.confirm-no').onclick = () => confirm.remove();
|
||||
setTimeout(() => { document.addEventListener('click', function closeConfirm(e) { if (!confirm.contains(e.target) && e.target !== btn) { confirm.remove(); document.removeEventListener('click', closeConfirm); } }); }, 10);
|
||||
}
|
||||
|
||||
function attachEvents() {
|
||||
document.querySelectorAll('.delete-btn').forEach(b => b.onclick = function(ev) { ev.stopPropagation(); showConfirm(this, 'Delete this entry?', id => delEntry(id)); });
|
||||
document.querySelectorAll('.delete-btn').forEach(b => b.onclick = function(ev) { ev.stopPropagation(); if (showTrash) { permanentDelete(this.dataset.id); } else { showConfirm(this, 'Delete this entry?', id => delEntry(id)); } });
|
||||
document.querySelectorAll('.edit-btn').forEach(b => b.onclick = function(ev) { ev.stopPropagation(); openEdit(this.dataset.id); });
|
||||
document.querySelectorAll('.toggle-p').forEach(b => b.onclick = function(ev) { ev.stopPropagation(); const el = document.getElementById('p-' + this.dataset.id); el.textContent = el.textContent === '••••••••' ? el.dataset.pw : '••••••••'; });
|
||||
document.querySelectorAll('.copy-p').forEach(b => b.onclick = async function(ev) { ev.stopPropagation(); const el = document.getElementById('p-' + this.dataset.id); try { await navigator.clipboard.writeText(el.dataset.pw); this.textContent = '✓'; const btn = this; setTimeout(() => { btn.textContent = '📋'; }, 1000); showZigzagToast(this, '📋 Copied!', 'success'); } catch (e) { showZigzagToast(this, 'Failed', 'error'); } });
|
||||
}
|
||||
|
||||
function setupDrag() {
|
||||
const c = document.getElementById('entriesContainer'); if (!c) return;
|
||||
c.querySelectorAll('[draggable="true"]').forEach(el => {
|
||||
@@ -411,6 +529,7 @@ function openEdit(id) {
|
||||
const folderSelect = document.getElementById('editFolder');
|
||||
folderSelect.innerHTML = '';
|
||||
folders.forEach(f => {
|
||||
if (!f) return;
|
||||
const option = document.createElement('option');
|
||||
option.value = f;
|
||||
option.textContent = '📁 ' + f;
|
||||
@@ -426,7 +545,6 @@ function openEdit(id) {
|
||||
}
|
||||
function closeEdit() { document.getElementById('editModal').classList.remove('show'); }
|
||||
function toggleEditPassword() { const f = document.getElementById('editPassword'); f.type = f.type === 'password' ? 'text' : 'password'; }
|
||||
|
||||
async function saveEdit() {
|
||||
const id = document.getElementById('editId').value;
|
||||
const site = document.getElementById('editSite').value.trim();
|
||||
@@ -437,7 +555,7 @@ async function saveEdit() {
|
||||
try {
|
||||
const enc = await encryptPwd(password);
|
||||
const r = await fetch(API + '/entries/' + id, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token }, body: JSON.stringify({ site, username, encrypted_password: enc.encrypted, iv: enc.iv, folder }) });
|
||||
if (r.ok) { toast('✅ Updated!'); closeEdit(); loadEntries(); }
|
||||
if (r.ok) { toast('✅ Updated!'); playSound('success'); closeEdit(); loadEntries(); }
|
||||
else { const d = await r.json(); toast('❌ ' + (d.error || 'Failed'), 'error'); }
|
||||
} catch (e) { toast('⚠️ Error', 'error'); }
|
||||
}
|
||||
@@ -454,31 +572,49 @@ async function addEntry() {
|
||||
const enc = await encryptPwd(pass);
|
||||
const folder = document.getElementById('addFolderSelect').value;
|
||||
const r = await fetch(API + '/entries', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token }, body: JSON.stringify({ site, username: user, encrypted_password: enc.encrypted, iv: enc.iv, encryption_method: 'client', folder }) });
|
||||
if (r.ok) { document.getElementById('siteInput').value = ''; document.getElementById('passwordInput').value = ''; document.getElementById('strengthBar').className = 'strength-bar s0'; toast('✅ Saved!'); loadEntries(); }
|
||||
if (r.ok) { document.getElementById('siteInput').value = ''; document.getElementById('passwordInput').value = ''; document.getElementById('strengthBar').className = 'strength-bar s0'; toast('✅ Saved!'); playSound('success');loadEntries(); }
|
||||
else { const d = await r.json(); toast('❌ ' + (d.error || 'Failed'), 'error'); }
|
||||
} catch (e) { toast('⚠️ Error', 'error'); }
|
||||
finally { document.getElementById('addBtn').disabled = false; }
|
||||
}
|
||||
|
||||
async function delEntry(id) { try { const r = await fetch(API + '/entries/' + id, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } }); if (r.ok) { order = order.filter(x => x != id); localStorage.setItem('entryOrder', JSON.stringify(order)); toast('🗑️ Deleted!'); loadEntries(); } } catch (e) { toast('Error', 'error'); } }
|
||||
async function delEntry(id) {
|
||||
try {
|
||||
const r = await fetch(API + '/entries/' + id, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } });
|
||||
if (r.ok) { order = order.filter(x => x != id); localStorage.setItem('entryOrder', JSON.stringify(order)); toast('📦 Moved to trash'); playSound('delete'); loadEntries(); }
|
||||
} catch (e) { toast('Error', 'error'); }
|
||||
}
|
||||
|
||||
// ==================== UTILS ====================
|
||||
function searchEntries() { loadEntries(document.getElementById('searchInput').value); }
|
||||
function exportPasswords() { if (!confirm('Export plain text?')) return; const b = new Blob([JSON.stringify(entries, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'vault-' + new Date().toISOString().slice(0, 10) + '.json'; a.click(); URL.revokeObjectURL(a.href); toast('Exported!'); }
|
||||
function esc(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
|
||||
|
||||
// ==================== STARTUP ====================
|
||||
// ==================== STARTUP – session persistence ====================
|
||||
init();
|
||||
applyTheme();
|
||||
|
||||
if (token && curUser) {
|
||||
// Re-derive key from session? Can't without password, so we need to re-authenticate.
|
||||
// For now, just show vault if token exists but warn user they must log in again.
|
||||
sessionStorage.clear();
|
||||
token = null;
|
||||
curUser = null;
|
||||
document.getElementById('authSection').classList.remove('hidden');
|
||||
document.getElementById('vaultSection').classList.add('hidden');
|
||||
const savedPassword = sessionStorage.getItem('masterPassword');
|
||||
const savedSalt = sessionStorage.getItem('salt');
|
||||
if (savedPassword && savedSalt) {
|
||||
deriveKey(savedPassword, savedSalt).then(key => {
|
||||
cryptoKey = key;
|
||||
loadFolders().then(() => {
|
||||
showVault();
|
||||
loadEntries();
|
||||
});
|
||||
}).catch(() => {
|
||||
sessionStorage.clear();
|
||||
token = null;
|
||||
curUser = null;
|
||||
});
|
||||
} else {
|
||||
sessionStorage.clear();
|
||||
token = null;
|
||||
curUser = null;
|
||||
}
|
||||
}
|
||||
|
||||
['click', 'keypress', 'scroll', 'mousemove'].forEach(e => document.addEventListener(e, () => { if (token) resetIdle(); }));
|
||||
document.addEventListener('keypress', e => { if (e.key === 'Enter') { if (document.getElementById('passwordInput') === document.activeElement) addEntry(); else if (document.getElementById('loginPassword') === document.activeElement) login(); else if (document.getElementById('regPassword') === document.activeElement) register(); } });
|
||||
document.getElementById('genModal').addEventListener('click', e => { if (e.target === e.currentTarget) closeGen(); });
|
||||
|
||||
Reference in New Issue
Block a user