tinysub / src / js / auth.js

// authorization

const CredentialManager = {
	save: (server, username, token, salt) => {
		const creds = { server, username, token, salt };
		localStorage.setItem("tinysub_credentials", JSON.stringify(creds));
	},
	load: () => {
		const saved = localStorage.getItem("tinysub_credentials");
		return saved
			? JSON.parse(saved)
			: { server: "", username: "", token: "", salt: "" };
	},
	clear: () => {
		localStorage.removeItem("tinysub_credentials");
	},
};

// toggle auth modal
const toggleAuthModal = (show) => {
	const authModal = document.getElementById(DOM_IDS.AUTH_MODAL);
	if (!authModal) return;

	if (show) {
		showModal(authModal, {
			focusSelector: "input",
		});
	} else {
		hideModal(DOM_IDS.AUTH_MODAL);
	}
};

// load library, playlists, and favorites after successful login
async function initializeApp() {
	toggleAuthModal(false);
	await loadQueue().catch(() => {});
	updateQueueDisplay();
	await loadLibrary();
	await loadPlaylists();
	await loadFavorites();
	// restore song display and pause playback on startup
	if (hasValidTrack()) {
		playTrack(state.queue[state.queueIndex]);
		ui.player.pause();
	}
}

// handle login form submission with validation
async function handleLogin() {
	if (handleLogin.isInProgress) return;

	const server = ui.serverInput.value;
	const username = ui.usernameInput.value;
	const password = ui.passwordInput.value;

	ui.authError.textContent = "";

	const urlValidation = validateServerUrl(server);
	if (!urlValidation.valid) {
		ui.authError.textContent = urlValidation.error;
		return;
	}

	const credValidation = validateCredentials(username, password);
	if (!credValidation.valid) {
		ui.authError.textContent = credValidation.error;
		return;
	}

	handleLogin.isInProgress = true;
	const { username: validUsername, password: validPassword } =
		credValidation.value;
	const validServerUrl = urlValidation.value;

	try {
		// Generate salt+token from password
		const salt = Math.random().toString(36).substring(2, 8);
		const token = SparkMD5.hash(validPassword + salt);

		// Test with token mode API
		state.api = new SubsonicAPI(validServerUrl, validUsername, token, salt);
		await state.api.ping();

		// Save credentials for auto-login
		CredentialManager.save(validServerUrl, validUsername, token, salt);

		await initializeApp();
	} catch (error) {
		console.error("[Auth] Login failed:", error);
		ui.authError.textContent = `${STRINGS.CONNECTION_ERROR} ${error.message}`;
		state.api = null;
	} finally {
		handleLogin.isInProgress = false;
	}
}

// clear all storage and reload to logout
async function handleLogout() {
	try {
		if (indexedDB.databases) {
			const dbs = await indexedDB.databases();
			for (const db of dbs) {
				indexedDB.deleteDatabase(db.name);
			}
		}
		CredentialManager.clear();
	} catch (error) {
		console.error("[Auth] Logout cleanup failed:", error);
	}
	location.reload();
}

// attempt auto-login on page load
async function attemptAutoLogin() {
	const creds = CredentialManager.load();

	// security migration in case you were using version <1.8 which stored raw passwords
	const oldCredentials = localStorage.getItem("tinysub_credentials");
	if (oldCredentials) {
		try {
			const parsed = JSON.parse(oldCredentials);
			if (parsed.password) {
				console.warn(
					"[Auth] Old password format detected, clearing storage and logging out for security",
				);
				await handleLogout();
				return;
			}
		} catch {
			// ignore
		}
	}

	// no stored credentials
	if (!creds.server || !creds.username || !creds.token || !creds.salt) {
		toggleAuthModal(true);
		return;
	}

	try {
		// try to authenticate with stored salt+token
		state.api = new SubsonicAPI(
			creds.server,
			creds.username,
			creds.token,
			creds.salt,
		);
		// validate credentials are still valid by calling ping()
		await state.api.ping();
		await initializeApp();
	} catch (error) {
		console.warn(
			"[Auth] Stored credentials invalid, showing login form:",
			error.message,
		);
		state.api = null;
		// pre-populate form with stored server and username for convenience
		ui.serverInput.value = creds.server;
		ui.usernameInput.value = creds.username;
		ui.passwordInput.value = ""; // never prefill password
		toggleAuthModal(true);
	}
}

// run auto-login when scripts are ready
if (document.readyState === "loading") {
	document.addEventListener("DOMContentLoaded", attemptAutoLogin);
} else {
	attemptAutoLogin();
}