Optional profile password or key, with a credentials file to sign in other devices
Profiles without protection behave as before. Protected profiles store only an argon2id hash; load, save, protection changes and the playlist inbox need the secret (X-Profile-Secret), wrong guesses are throttled per profile and IP. Settings: Protect (password or generated key), change/remove, export and import a credentials file; loading a protected profile prompts for the secret.
This commit is contained in:
Jonathan Sykes
272
frontend/app.js
272
frontend/app.js
@@ -721,6 +721,68 @@ function profilePayload() {
|
||||
};
|
||||
}
|
||||
|
||||
// ---- Optional profile protection ----------------------------------------
|
||||
// The profile's password / key lives only in this device's localStorage (never
|
||||
// in the synced data blob) and rides along as X-Profile-Secret.
|
||||
const ProfileSecret = (() => {
|
||||
const KEY = 'ytpProfileSecret';
|
||||
const read = () => { try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch { return null; } };
|
||||
return {
|
||||
getFor(name) { const j = read(); return j && name && j.name === String(name).toLowerCase() ? j.secret : null; },
|
||||
kindFor(name) { const j = read(); return j && name && j.name === String(name).toLowerCase() ? j.kind : null; },
|
||||
set(name, secret, kind) { try { localStorage.setItem(KEY, JSON.stringify({ name: String(name).toLowerCase(), secret, kind })); } catch { /* blocked */ } },
|
||||
clear() { try { localStorage.removeItem(KEY); } catch { /* blocked */ } },
|
||||
};
|
||||
})();
|
||||
function profileHeaders(name, extra = {}) {
|
||||
const s = ProfileSecret.getFor(name);
|
||||
return s ? { ...extra, 'X-Profile-Secret': s } : extra;
|
||||
}
|
||||
|
||||
// Ask for a protected profile's password or key. Resolves the text or null.
|
||||
function askProfileSecret(name, kind, wrong) {
|
||||
return new Promise((resolve) => {
|
||||
const body = document.createElement('div');
|
||||
const what = kind === 'key' ? 'profile key' : 'password';
|
||||
body.innerHTML = `
|
||||
<p style="margin:0 0 12px;color:var(--text-2);font-size:13px;line-height:1.5">
|
||||
<strong>${escapeHtml(name)}</strong> is protected. ${wrong ? '<strong style="color:#ff6b5f">That was wrong.</strong> ' : ''}
|
||||
Enter its ${what}${kind === 'key' ? ', or import its credentials file' : ''}.
|
||||
</p>
|
||||
<input id="profileSecretInput" type="password" autocomplete="current-password" placeholder="${what}" />`;
|
||||
const done = (v) => { closeModal(); resolve(v); };
|
||||
showModal('🔒 Protected profile', body, [
|
||||
{ label: 'Cancel', onClick: () => done(null) },
|
||||
{ label: 'Import file', onClick: () => { closeModal(); resolve(null); importProfileCredentials(); } },
|
||||
{ label: 'Open', primary: true, onClick: () => { const v = ($('profileSecretInput').value || '').trim(); if (v) done(v); } },
|
||||
]);
|
||||
setTimeout(() => $('profileSecretInput') && $('profileSecretInput').focus(), 50);
|
||||
$('profileSecretInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); const v = e.target.value.trim(); if (v) done(v); } });
|
||||
});
|
||||
}
|
||||
|
||||
// Load a profile, asking for its password/key when it is protected.
|
||||
// Resolves the server reply ({ ok, name, data, … }) or null when cancelled.
|
||||
async function fetchProfile(name, { prompt = true, secret = null } = {}) {
|
||||
let tryWith = secret || ProfileSecret.getFor(name);
|
||||
let wrong = false;
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const headers = tryWith ? { 'X-Profile-Secret': tryWith } : {};
|
||||
const res = await fetch(`/api/profile/load?name=${encodeURIComponent(name)}`, { headers });
|
||||
const j = await res.json().catch(() => null);
|
||||
if (res.status === 401 && j && j.needSecret) {
|
||||
if (!prompt) return j;
|
||||
wrong = !!tryWith;
|
||||
tryWith = await askProfileSecret(name, j.kind, wrong);
|
||||
if (!tryWith) return null;
|
||||
continue;
|
||||
}
|
||||
if (j && j.ok && j.protected && tryWith) ProfileSecret.set(j.name, tryWith, j.kind);
|
||||
return j;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
let profilePushTimer = null;
|
||||
function scheduleProfilePush() {
|
||||
if (!WEB || !data.profile || !data.profile.name) return;
|
||||
@@ -733,10 +795,14 @@ async function pushProfile() {
|
||||
try {
|
||||
const res = await fetch('/api/profile/save', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: profileHeaders(data.profile.name, { 'Content-Type': 'application/json' }),
|
||||
body: JSON.stringify({ name: data.profile.name, data: profilePayload() }),
|
||||
});
|
||||
const j = await res.json().catch(() => null);
|
||||
if (res.status === 401 && j && j.needSecret) {
|
||||
if (!pushProfile._warned) { pushProfile._warned = true; toast('🔒 This profile is protected — enter its password in Settings → Profile to keep syncing', { duration: 6000 }); }
|
||||
return;
|
||||
}
|
||||
if (j && j.ok) {
|
||||
data.profile.syncedAt = j.updatedAt || 0;
|
||||
// Record syncedAt directly — going through persist() would re-schedule
|
||||
@@ -761,7 +827,7 @@ function applyProfileData(name, payload, updatedAt) {
|
||||
if (payload.lyricOffsets && typeof payload.lyricOffsets === 'object') data.lyricOffsets = payload.lyricOffsets;
|
||||
if (payload.stats && typeof payload.stats === 'object') data.stats = payload.stats;
|
||||
if (payload.settings && typeof payload.settings === 'object') data.settings = { ...DEFAULT_SETTINGS, ...payload.settings };
|
||||
data.profile = { name, syncedAt: updatedAt || 0 };
|
||||
data.profile = { name, syncedAt: updatedAt || 0, protected: !!payload.__protected, kind: payload.__kind || null };
|
||||
API.saveData(data).catch(() => {});
|
||||
}
|
||||
|
||||
@@ -808,12 +874,21 @@ function playlistFingerprint() {
|
||||
async function pullProfileIfNewer() {
|
||||
if (!WEB || !data.profile || !data.profile.name) return;
|
||||
try {
|
||||
const res = await fetch(`/api/profile/load?name=${encodeURIComponent(data.profile.name)}`);
|
||||
const res = await fetch(`/api/profile/load?name=${encodeURIComponent(data.profile.name)}`, { headers: profileHeaders(data.profile.name) });
|
||||
if (res.status === 404) return; // profile gone server-side; keep local data
|
||||
const j = await res.json().catch(() => null);
|
||||
if (res.status === 401 && j && j.needSecret) {
|
||||
// Protected since this device last synced (or the password changed):
|
||||
// keep the local copy and say how to get back in.
|
||||
data.profile.protected = true;
|
||||
toast('🔒 Your profile is now protected — enter its password in Settings → Profile to sync', { duration: 6000 });
|
||||
return;
|
||||
}
|
||||
if (!j || !j.ok) return;
|
||||
data.profile.protected = !!j.protected;
|
||||
data.profile.kind = j.kind || null;
|
||||
if ((j.updatedAt || 0) > (data.profile.syncedAt || 0)) {
|
||||
applyProfileData(j.name, j.data, j.updatedAt);
|
||||
applyProfileData(j.name, { ...j.data, __protected: j.protected, __kind: j.kind }, j.updatedAt);
|
||||
} else {
|
||||
scheduleProfilePush();
|
||||
}
|
||||
@@ -872,6 +947,14 @@ function updateProfileStatus() {
|
||||
if (el) el.textContent = (linked && data.profile.name) || 'Not linked';
|
||||
const unlink = document.getElementById('profileUnlinkBtn');
|
||||
if (unlink) unlink.style.display = linked ? '' : 'none';
|
||||
const prot = linked && !!data.profile.protected;
|
||||
const haveSecret = linked && !!ProfileSecret.getFor(data.profile.name);
|
||||
if (el && prot) el.textContent += ' · 🔒 protected';
|
||||
const pb = document.getElementById('profileProtectBtn');
|
||||
if (pb) { pb.style.display = linked ? '' : 'none'; pb.textContent = prot ? '🔑 Protection…' : '🔒 Protect…'; }
|
||||
// The credentials file only exists for a protected profile whose secret this device knows.
|
||||
const eb = document.getElementById('profileExportCredBtn');
|
||||
if (eb) eb.style.display = prot && haveSecret ? '' : 'none';
|
||||
|
||||
// Settings → share-link row (only rendered on the settings view)
|
||||
const linkRow = document.getElementById('profileLinkRow');
|
||||
@@ -1149,7 +1232,7 @@ async function drainPlaylistInbox(me) {
|
||||
|
||||
let items = [];
|
||||
try {
|
||||
const res = await fetch(`/api/playlist/inbox?name=${encodeURIComponent(me)}`);
|
||||
const res = await fetch(`/api/playlist/inbox?name=${encodeURIComponent(me)}`, { headers: profileHeaders(me) });
|
||||
const j = await res.json().catch(() => null);
|
||||
if (!j || !j.ok || !Array.isArray(j.items)) return;
|
||||
items = j.items;
|
||||
@@ -1163,7 +1246,7 @@ async function drainPlaylistInbox(me) {
|
||||
try {
|
||||
await fetch('/api/playlist/inbox/dismiss', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: profileHeaders(me, { 'Content-Type': 'application/json' }),
|
||||
body: JSON.stringify({ name: me, id: item.id }),
|
||||
});
|
||||
} catch { /* leave it queued; a duplicate prompt beats losing the playlist */ }
|
||||
@@ -1208,14 +1291,13 @@ async function adoptProfileFromUrl() {
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/profile/load?name=${encodeURIComponent(name)}`);
|
||||
const j = await res.json().catch(() => null);
|
||||
if (!j || !j.ok) {
|
||||
toast('⚠ ' + ((j && j.error) || 'Profile not found'));
|
||||
const j = await fetchProfile(name);
|
||||
if (!j) return; // cancelled at the password prompt
|
||||
if (!j.ok) {
|
||||
toast('⚠ ' + (j.error || 'Profile not found'));
|
||||
return;
|
||||
}
|
||||
applyProfileData(j.name, j.data, j.updatedAt);
|
||||
toast(`Profile “${j.name}” loaded ✓ — this device now syncs to it`, { duration: 4000 });
|
||||
finishProfileLoad(j);
|
||||
} catch {
|
||||
toast('⚠ Network error — could not open that profile');
|
||||
}
|
||||
@@ -1268,6 +1350,135 @@ async function requestCreateProfile(name) {
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Protect / credentials file ----
|
||||
function randomProfileKey() {
|
||||
const b = new Uint8Array(32);
|
||||
crypto.getRandomValues(b);
|
||||
return btoa(String.fromCharCode(...b)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
||||
}
|
||||
|
||||
async function setProfileSecretOnServer(secret, kind) {
|
||||
const name = data.profile.name;
|
||||
const res = await fetch('/api/profile/secret', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, current: ProfileSecret.getFor(name), secret, kind }),
|
||||
});
|
||||
const j = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !j.ok) throw new Error(j.error || 'could not change protection');
|
||||
if (secret) ProfileSecret.set(name, secret, kind); else ProfileSecret.clear();
|
||||
data.profile.protected = !!secret;
|
||||
data.profile.kind = secret ? kind : null;
|
||||
persist();
|
||||
updateProfileStatus();
|
||||
}
|
||||
|
||||
function protectProfileFlow() {
|
||||
if (!data.profile || !data.profile.name) return;
|
||||
const prot = !!data.profile.protected;
|
||||
if (prot && !ProfileSecret.getFor(data.profile.name)) {
|
||||
toast('🔒 Load this profile with its password or credentials file first');
|
||||
return;
|
||||
}
|
||||
const body = document.createElement('div');
|
||||
body.innerHTML = `
|
||||
<p style="margin:0 0 12px;color:var(--text-2);font-size:13px;line-height:1.5">
|
||||
${prot ? 'Change or remove the protection on' : 'Protect'} <strong>${escapeHtml(data.profile.name)}</strong>.
|
||||
Once protected, the name alone no longer opens it — a device also needs the
|
||||
password, the profile key, or the credentials file. <strong>If you lose all of
|
||||
them the profile can't be opened.</strong>
|
||||
</p>
|
||||
<input id="profilePwInput" type="password" autocomplete="new-password" placeholder="New password (8+ characters)" style="margin-bottom:8px" />
|
||||
<input id="profilePwInput2" type="password" autocomplete="new-password" placeholder="Repeat the password" />`;
|
||||
const actions = [
|
||||
{ label: 'Cancel', onClick: closeModal },
|
||||
{ label: '🔑 Generate key', onClick: async () => {
|
||||
try {
|
||||
await setProfileSecretOnServer(randomProfileKey(), 'key');
|
||||
closeModal();
|
||||
toast('Profile key set ✓ — export the credentials file now so other devices can open it', { duration: 5000 });
|
||||
exportProfileCredentials();
|
||||
} catch (e) { toast('⚠ ' + e.message); }
|
||||
} },
|
||||
{ label: 'Set password', primary: true, onClick: async () => {
|
||||
const a = $('profilePwInput').value, b = $('profilePwInput2').value;
|
||||
if (a.length < 8) { toast('⚠ Use at least 8 characters'); return; }
|
||||
if (a !== b) { toast('⚠ The two passwords differ'); return; }
|
||||
try {
|
||||
await setProfileSecretOnServer(a, 'password');
|
||||
closeModal();
|
||||
toast('Password set ✓ — other devices will ask for it', { duration: 4000 });
|
||||
} catch (e) { toast('⚠ ' + e.message); }
|
||||
} },
|
||||
];
|
||||
if (prot) actions.splice(1, 0, { label: 'Remove', danger: true, onClick: async () => {
|
||||
try { await setProfileSecretOnServer(null, null); closeModal(); toast('Protection removed — the name alone opens this profile again'); }
|
||||
catch (e) { toast('⚠ ' + e.message); }
|
||||
} });
|
||||
showModal(prot ? '🔑 Profile protection' : '🔒 Protect profile', body, actions);
|
||||
setTimeout(() => $('profilePwInput') && $('profilePwInput').focus(), 50);
|
||||
}
|
||||
|
||||
// A small JSON file that signs another device into this profile.
|
||||
async function exportProfileCredentials() {
|
||||
const name = data.profile && data.profile.name;
|
||||
const secret = name && ProfileSecret.getFor(name);
|
||||
if (!secret) { toast('⚠ Protect the profile first — the credentials file needs its password or key'); return; }
|
||||
const cred = { type: 'ytplayer-profile-credentials', version: 1, origin: location.origin, name,
|
||||
kind: ProfileSecret.kindFor(name) || 'password', secret, exportedAt: new Date().toISOString() };
|
||||
const fileName = `ytplayer-${name}.credentials.json`;
|
||||
const blob = new Blob([JSON.stringify(cred, null, 2) + '\n'], { type: 'application/json' });
|
||||
const file = new File([blob], fileName, { type: 'application/json' });
|
||||
if (navigator.canShare && navigator.canShare({ files: [file] }) && /iPad|iPhone|iPod|Android/.test(navigator.userAgent)) {
|
||||
try { await navigator.share({ files: [file], title: fileName }); return; } catch { /* fall back to a download */ }
|
||||
}
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = fileName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 1000);
|
||||
toast('🔑 Credentials file saved — anyone with it can open your profile, keep it private', { duration: 5000 });
|
||||
}
|
||||
|
||||
function importProfileCredentials() {
|
||||
const input = $('profileCredFileInput') || Object.assign(document.createElement('input'), { type: 'file', accept: '.json,application/json' });
|
||||
input.value = '';
|
||||
input.onchange = async () => {
|
||||
const f = input.files && input.files[0];
|
||||
if (!f) return;
|
||||
let cred;
|
||||
try { cred = JSON.parse(await f.text()); } catch { toast('⚠ That is not a credentials file'); return; }
|
||||
if (!cred || cred.type !== 'ytplayer-profile-credentials' || !cred.name || !cred.secret) { toast('⚠ That is not a YT Player credentials file'); return; }
|
||||
if (cred.origin && cred.origin !== location.origin) toast(`Note: this file was made on ${cred.origin}`, { duration: 4000 });
|
||||
try {
|
||||
const j = await fetchProfile(String(cred.name).toLowerCase(), { prompt: false, secret: cred.secret });
|
||||
if (!j || !j.ok) { toast('⚠ ' + ((j && j.error) || 'Could not open that profile')); return; }
|
||||
ProfileSecret.set(j.name, cred.secret, cred.kind || j.kind || 'password');
|
||||
finishProfileLoad(j);
|
||||
} catch { toast('⚠ Network error — try again'); }
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
|
||||
// Adopt a loaded profile on this device and re-apply everything it drives.
|
||||
function finishProfileLoad(j) {
|
||||
applyProfileData(j.name, { ...j.data, __protected: j.protected, __kind: j.kind }, j.updatedAt);
|
||||
applyAppearance();
|
||||
updateLoopRepeatButtons();
|
||||
updateQueueBadge();
|
||||
els.volume.value = String(data.settings.volume ?? 1);
|
||||
els.quality.value = data.settings.quality || 'auto';
|
||||
els.audioOnlyToggle.checked = !!data.settings.audioOnly;
|
||||
renderSidebar();
|
||||
renderSmartSidebar();
|
||||
render();
|
||||
updateProfileStatus();
|
||||
data.playlists.forEach(preloadPlaylist);
|
||||
preloadPinnedPlaylists();
|
||||
toast(`Profile “${j.name}” loaded ✓ — this device now syncs to it`, { duration: 4000 });
|
||||
}
|
||||
|
||||
function loadProfileFlow() {
|
||||
const body = document.createElement('div');
|
||||
body.innerHTML = `
|
||||
@@ -1283,28 +1494,14 @@ function loadProfileFlow() {
|
||||
const name = ($('profileNameInput').value || '').trim();
|
||||
if (!name) return;
|
||||
try {
|
||||
const res = await fetch(`/api/profile/load?name=${encodeURIComponent(name)}`);
|
||||
const j = await res.json().catch(() => null);
|
||||
if (!j || !j.ok) {
|
||||
toast('⚠ ' + ((j && j.error) || 'Profile not found'));
|
||||
return; // keep the modal open
|
||||
}
|
||||
closeModal();
|
||||
applyProfileData(j.name, j.data, j.updatedAt);
|
||||
// Re-apply everything the loaded data drives.
|
||||
applyAppearance();
|
||||
updateLoopRepeatButtons();
|
||||
updateQueueBadge();
|
||||
els.volume.value = String(data.settings.volume ?? 1);
|
||||
els.quality.value = data.settings.quality || 'auto';
|
||||
els.audioOnlyToggle.checked = !!data.settings.audioOnly;
|
||||
renderSidebar();
|
||||
renderSmartSidebar();
|
||||
render();
|
||||
updateProfileStatus();
|
||||
data.playlists.forEach(preloadPlaylist);
|
||||
preloadPinnedPlaylists();
|
||||
toast(`Profile “${j.name}” loaded ✓ — this device now syncs to it`, { duration: 4000 });
|
||||
const j = await fetchProfile(name);
|
||||
if (!j) return; // cancelled at the password prompt
|
||||
if (!j.ok) {
|
||||
toast('⚠ ' + (j.error || 'Profile not found'));
|
||||
return;
|
||||
}
|
||||
finishProfileLoad(j);
|
||||
} catch {
|
||||
toast('⚠ Network error — try again');
|
||||
}
|
||||
@@ -8854,6 +9051,10 @@ async function renderSettings() {
|
||||
<button id="profileCopyLinkBtn" class="btn"${profileShareUrl() ? '' : ' style="display:none"'}>⧉ Copy link</button>
|
||||
<button id="profileShareBtn" class="btn"${profileShareUrl() ? '' : ' style="display:none"'}>↗ Share</button>
|
||||
<button id="profileUnlinkBtn" class="btn danger"${data.profile && data.profile.name ? '' : ' style="display:none"'}>Unlink</button>
|
||||
<button id="profileProtectBtn" class="btn"${data.profile && data.profile.name ? '' : ' style="display:none"'}>🔒 Protect…</button>
|
||||
<button id="profileExportCredBtn" class="btn" style="display:none">⤓ Credentials file</button>
|
||||
<button id="profileImportCredBtn" class="btn">⤒ Import credentials</button>
|
||||
<input id="profileCredFileInput" type="file" accept=".json,application/json" hidden />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9072,12 +9273,17 @@ async function renderSettings() {
|
||||
$('profileLoadBtn').addEventListener('click', loadProfileFlow);
|
||||
$('profileCopyLinkBtn').addEventListener('click', copyProfileLink);
|
||||
$('profileShareBtn').addEventListener('click', shareProfileLink);
|
||||
$('profileProtectBtn').addEventListener('click', protectProfileFlow);
|
||||
$('profileExportCredBtn').addEventListener('click', exportProfileCredentials);
|
||||
$('profileImportCredBtn').addEventListener('click', importProfileCredentials);
|
||||
$('profileUnlinkBtn').addEventListener('click', () => {
|
||||
data.profile = null;
|
||||
ProfileSecret.clear();
|
||||
persist();
|
||||
updateProfileStatus();
|
||||
toast('Profile unlinked — this device stops syncing (server copy is kept)');
|
||||
});
|
||||
updateProfileStatus();
|
||||
|
||||
// ---- About: append server build tag + build time (WEB mode only) ----
|
||||
if (WEB) {
|
||||
|
||||
Reference in New Issue
Block a user