feature(account): user menu backup login

src/components/Icon.svelte

@@ -20,7 +20,8 @@ const materialExceptions: Record<string, string> = {
 	currency_bitcoin: "material-symbols:currency-bitcoin",
 	close_round: "ic:round-close",
 	my_location: "material-symbols:my-location-rounded",
-	bookmark_filled: "ic:baseline-bookmark",
+	bookmark_filled: "ic:baseline-bookmark-added",
+	account_circle_filled: "ic:baseline-account-circle",
 };
 
 const faBrandIcons = ["x-twitter", "instagram", "facebook", "twitter"];

src/components/SaveButton.svelte

@@ -1,95 +1,56 @@
 <script lang="ts">
+import SaveAuthPrompt from "$components/auth/SaveAuthPrompt.svelte";
 import Icon from "$components/Icon.svelte";
-import api from "$lib/axios";
 import { _ } from "$lib/i18n";
+import type { SavedItemType } from "$lib/savedItems";
+import {
+	getSavedList,
+	putSavedList,
+	setSavedList,
+	toggleSavedLocal,
+} from "$lib/savedItems";
 import { session } from "$lib/session";
 import { errToast } from "$lib/utils";
 
 // The numeric ID of the item to save/unsave.
 export let id: number;
 
 // Whether this saves a place or an area.
-export let type: "place" | "area" = "place";
+export let type: SavedItemType = "place";
 
 // Optional className passthrough for layout-specific styling.
 let className: string | undefined = undefined;
 
 export { className as class };
 
 let pending = false;
+let showPrompt = false;
 
-$: savedList =
-	type === "place"
-		? ($session?.savedPlaces ?? [])
-		: ($session?.savedAreas ?? []);
+$: savedList = getSavedList($session, type);
 $: saved = savedList.includes(id);
 
-// SvelteKit server routes that proxy to the btcmap API (avoids CORS preflight).
-const PROXY_ENDPOINTS = {
-	place: "/api/session/saved-places",
-	area: "/api/session/saved-areas",
-} as const;
-
-async function putSaved(token: string, ids: number[]): Promise<number[]> {
-	const res = await api.put<number[]>(PROXY_ENDPOINTS[type], ids, {
-		headers: { Authorization: `Bearer ${token}` },
-	});
-	if (!Array.isArray(res.data)) {
-		throw new Error(
-			`PUT ${PROXY_ENDPOINTS[type]} returned an unexpected response`,
-		);
-	}
-	return res.data;
-}
-
 async function toggle() {
 	if (pending) return;
-	pending = true;
 
-	const previousSession = $session;
-	const previousSaved =
-		type === "place"
-			? (previousSession?.savedPlaces ?? [])
-			: (previousSession?.savedAreas ?? []);
+	// No session — open the auth prompt instead of silently creating an account.
+	// The modal handles signup/login and performs the save itself.
+	if (!$session) {
+		showPrompt = true;
+		return;
+	}
 
+	pending = true;
+	const previousSaved = [...savedList];
 	try {
-		let current = previousSession;
-		if (!current) {
-			current = await session.signUp();
-		}
-
-		const nextSaved =
-			type === "place"
-				? session.toggleSavedPlace(id)
-				: session.toggleSavedArea(id);
+		const nextSaved = toggleSavedLocal(type, id);
 		if (!nextSaved) throw new Error("toggle returned null (no session)");
 
 		// Write the server's canonical list back to the store so the client
 		// stays in sync even if the server deduplicates or rejects IDs.
-		const serverList = await putSaved(current.token, nextSaved);
-		if (type === "place") {
-			session.setSavedPlaces(serverList);
-		} else {
-			session.setSavedAreas(serverList);
-		}
+		const serverList = await putSavedList(type, $session.token, nextSaved);
+		setSavedList(type, serverList);
 	} catch (err) {
-		if (previousSession) {
-			if (type === "place") {
-				session.setSavedPlaces(previousSaved);
-			} else {
-				session.setSavedAreas(previousSaved);
-			}
-		} else {
-			// signUp() succeeded but the PUT failed. Don't clear the session —
-			// the account and token are valid. Just rollback the saved list to
-			// empty so the next click retries with the same account instead of
-			// creating another orphan.
-			if (type === "place") {
-				session.setSavedPlaces([]);
-			} else {
-				session.setSavedAreas([]);
-			}
-		}
+		setSavedList(type, previousSaved);
 		errToast($_(`merchant.saveFailed`));
 		console.error("SaveButton.toggle failed", err);
 	} finally {
@@ -130,3 +91,5 @@ async function toggle() {
 		>
 	</span>
 </button>
+
+<SaveAuthPrompt bind:open={showPrompt} {id} {type} />

src/components/auth/BackupCredentials.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+import Icon from "$components/Icon.svelte";
+import { _ } from "$lib/i18n";
+import { errToast, successToast } from "$lib/utils";
+
+export let username: string;
+export let password: string | null;
+// idPrefix avoids element-id collisions if two instances ever mount at once.
+export let idPrefix = "backup";
+
+let showPassword = false;
+
+async function copyToClipboard(text: string) {
+	try {
+		await navigator.clipboard.writeText(text);
+		successToast($_("backup.copied"));
+	} catch (err) {
+		errToast($_("backup.copyFailed"));
+		console.error("Clipboard write failed", err);
+	}
+}
+</script>
+
+<div class="space-y-3">
+	<div>
+		<label
+			for="{idPrefix}-username"
+			class="mb-1 block text-xs font-semibold text-body dark:text-white/70"
+		>
+			{$_("backup.username")}
+		</label>
+		<div class="flex items-center gap-2">
+			<input
+				id="{idPrefix}-username"
+				type="text"
+				readonly
+				value={username}
+				class="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-primary dark:border-white/20 dark:bg-white/5 dark:text-white"
+			/>
+			<button
+				type="button"
+				on:click={() => copyToClipboard(username)}
+				class="shrink-0 rounded-lg border border-gray-300 p-2 transition-colors hover:bg-gray-100 dark:border-white/20 dark:hover:bg-white/10"
+				title={$_("backup.copy")}
+			>
+				<Icon
+					type="material"
+					icon="content_copy"
+					w="16"
+					h="16"
+					class="text-primary dark:text-white"
+				/>
+			</button>
+		</div>
+	</div>
+	<div>
+		<label
+			for="{idPrefix}-password"
+			class="mb-1 block text-xs font-semibold text-body dark:text-white/70"
+		>
+			{$_("backup.password")}
+		</label>
+		<div class="flex items-center gap-2">
+			<input
+				id="{idPrefix}-password"
+				type={showPassword ? "text" : "password"}
+				readonly
+				value={password || $_("backup.unavailable")}
+				class="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-primary dark:border-white/20 dark:bg-white/5 dark:text-white"
+			/>
+			<button
+				type="button"
+				on:click={() => (showPassword = !showPassword)}
+				class="shrink-0 rounded-lg border border-gray-300 p-2 transition-colors hover:bg-gray-100 dark:border-white/20 dark:hover:bg-white/10"
+				title={showPassword ? $_("backup.hide") : $_("backup.show")}
+			>
+				<Icon
+					type="material"
+					icon={showPassword ? "visibility_off" : "visibility"}
+					w="16"
+					h="16"
+					class="text-primary dark:text-white"
+				/>
+			</button>
+			{#if password}
+				<button
+					type="button"
+					on:click={() => copyToClipboard(password ?? "")}
+					class="shrink-0 rounded-lg border border-gray-300 p-2 transition-colors hover:bg-gray-100 dark:border-white/20 dark:hover:bg-white/10"
+					title={$_("backup.copy")}
+				>
+					<Icon
+						type="material"
+						icon="content_copy"
+						w="16"
+						h="16"
+						class="text-primary dark:text-white"
+					/>
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>
+<p class="mt-4 text-xs text-body dark:text-white/50">
+	{$_("backup.warning")}
+</p>

src/components/auth/BackupModal.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import BackupCredentials from "$components/auth/BackupCredentials.svelte";
+import Modal from "$components/Modal.svelte";
+import { _ } from "$lib/i18n";
+import { session } from "$lib/session";
+
+export let open = false;
+</script>
+
+<Modal bind:open title={$_("backup.title")} titleId="backup-modal-title">
+	<p class="mb-4 text-sm text-body dark:text-white/70">
+		{$_("backup.description")}
+	</p>
+
+	{#if $session}
+		<BackupCredentials
+			username={$session.username}
+			password={$session.password}
+		/>
+	{/if}
+</Modal>

src/components/auth/LoginForm.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+import { get } from "svelte/store";
+
+import api from "$lib/axios";
+import { _ } from "$lib/i18n";
+import type { Session } from "$lib/session";
+import { session } from "$lib/session";
+import { errToast } from "$lib/utils";
+
+// Caller receives the new session after a successful login. This keeps the
+// form reusable: /login navigates, the save-flow modal completes a pending
+// save, both without baking navigation/save logic into the form.
+export let onSuccess: (session: Session) => void | Promise<void>;
+
+// When true, render without the "Don't have an account?" link (e.g. inside
+// a modal that already frames the login choice).
+export let compact = false;
+
+let username = "";
+let password = "";
+let loading = false;
+
+async function handleSubmit() {
+	if (!username.trim() || !password) return;
+	loading = true;
+
+	try {
+		const res = await api.post("/api/session/login", {
+			username: username.trim(),
+			password,
+		});
+
+		const token = res.data?.token;
+		if (typeof token !== "string") {
+			throw new Error("Login did not return a token");
+		}
+
+		// Don't store the password — the user already knows their own credentials.
+		session.login(username.trim(), "", token);
+
+		// Pull the new session value so callers get a concrete Session object
+		// instead of having to subscribe.
+		const current = get(session);
+		if (!current) throw new Error("session.login did not populate the store");
+
+		await onSuccess(current);
+	} catch (err) {
+		const status = (err as { response?: { status?: number } })?.response
+			?.status;
+		errToast(status === 401 ? $_("login.failed") : $_("login.error"));
+		console.error("Login failed:", status ?? "unknown");
+	} finally {
+		loading = false;
+	}
+}
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="space-y-4">
+	<div>
+		<label
+			for="login-username"
+			class="mb-1 block text-sm font-semibold text-primary dark:text-white"
+		>
+			{$_("login.username")}
+		</label>
+		<input
+			id="login-username"
+			type="text"
+			bind:value={username}
+			autocomplete="username"
+			maxlength="100"
+			class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-primary dark:border-white/20 dark:bg-dark dark:text-white"
+		/>
+	</div>
+
+	<div>
+		<label
+			for="login-password"
+			class="mb-1 block text-sm font-semibold text-primary dark:text-white"
+		>
+			{$_("login.password")}
+		</label>
+		<input
+			id="login-password"
+			type="password"
+			bind:value={password}
+			autocomplete="current-password"
+			maxlength="200"
+			class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-primary dark:border-white/20 dark:bg-dark dark:text-white"
+		/>
+	</div>
+
+	<button
+		type="submit"
+		disabled={loading || !username.trim() || !password}
+		class="w-full rounded-lg bg-link px-4 py-2 font-semibold text-white transition-colors hover:bg-hover disabled:opacity-50"
+	>
+		{loading ? $_("login.loggingIn") : $_("login.submit")}
+	</button>
+</form>
+
+{#if !compact}
+	<p class="mt-4 text-center text-sm text-body dark:text-white/70">
+		{$_("login.noAccount")}
+		<a
+			href="https://developer.btcmap.org"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="text-link transition-colors hover:text-hover"
+		>
+			{$_("login.createAccount")}
+		</a>
+	</p>
+{/if}