feature(account): user menu backup login

[escapedcat]

Related: #894

What's new

• User menu in nav with login/logout
• Back up account — auto-generated users can view and copy their credentials
• Login page — log in with username + password, or create an account on developer.btcmap.org
• Toast notification when an account is created on first save
• /saved redirects to login when not authenticated

Next steps

• Save button on map drawer — 56% of traffic is on /map
• Set custom password (needs REST endpoint from maintainer)
• Personalized feed — /feed merging activity from saved areas
• Nostr login
• Saved places highlighted on map

Screenshots

• icon has been aligned with the icons used in the android app
  

Logged in with known account

First time opened

After saved is pressed without login first

Backup modal

Login (link to developers.btcmap.org)

Summary by CodeRabbit

• New Features

  • Login page and form with server login and session hydration
  • Account backup modal and backup credentials view with copy/show/hide
  • User menu with account actions, backup trigger, and saved-items access
  • Save auth prompt to create/login during save flows and emit save confirmation

• UI

  • Updated account icon mapping for a specific account style
  • Saved page now redirects unauthenticated users to the Login page

• Localization

  • Added i18n entries for login, backup, account, and save flows

[netlify]

✅ Deploy Preview for btcmap ready!

Name	Link
🔨 Latest commit	c203730
🔍 Latest deploy log	https://app.netlify.com/projects/btcmap/deploys/69dcb659fe190c00084aeb5b
😎 Deploy Preview	https://deploy-preview-900--btcmap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 56 (🔴 down 33 from production) Accessibility: 97 (no change from production) Best Practices: 92 (🔴 down 8 from production) SEO: 96 (no change from production) PWA: 90 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

src/components/auth/BackupModal.svelte (1)

7-8: ⚠️ Potential issue | 🟡 Minor

Show a user-facing error when clipboard copy fails.

copyToClipboard logs failures but gives no feedback to users. This leaves copy actions looking broken when permissions/contexts reject clipboard access.

Suggested patch

-import { successToast } from "$lib/utils";
+import { errToast, successToast } from "$lib/utils";
@@
 async function copyToClipboard(text: string) {
 	try {
 		await navigator.clipboard.writeText(text);
 		successToast($_("backup.copied"));
-	} catch (err) {
-		console.error("Clipboard write failed", err);
+	} catch {
+		errToast($_("backup.copyFailed"));
 	}
 }

Also applies to: 13-19

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/auth/BackupModal.svelte` around lines 7 - 8, The
copyToClipboard call in BackupModal.svelte currently only logs failures and
never notifies the user; update the clipboard handler (where copyToClipboard is
invoked inside the BackupModal component) to catch errors/rejected promises and
show a user-facing toast on failure in addition to the existing successToast on
success. Import or use the existing error/failure toast utility (e.g.,
errorToast from "$lib/utils") or create a visible fallback notification, and
ensure the catch block passes the error message/context to the toast so users
see why the copy failed.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/auth/BackupModal.svelte`:
- Around line 30-34: The modal container in BackupModal.svelte needs proper
dialog semantics so assistive tech treats it as a modal: update the outer modal
div (the element that currently has classes "mx-4 w-full max-w-sm rounded-xl
bg-white p-6 shadow-xl dark:bg-dark") to include role="dialog" and
aria-modal="true", add a unique id to the heading (e.g., id="backup-title" on
the h2 rendered by {$_("backup.title")}), and add aria-labelledby="backup-title"
plus tabindex="-1" on the dialog container so it can receive programmatic focus
when the modal opens; ensure any focus trapping or initial focus logic targets
that container or a focusable child.

---

Duplicate comments:
In `@src/components/auth/BackupModal.svelte`:
- Around line 7-8: The copyToClipboard call in BackupModal.svelte currently only
logs failures and never notifies the user; update the clipboard handler (where
copyToClipboard is invoked inside the BackupModal component) to catch
errors/rejected promises and show a user-facing toast on failure in addition to
the existing successToast on success. Import or use the existing error/failure
toast utility (e.g., errorToast from "$lib/utils") or create a visible fallback
notification, and ensure the catch block passes the error message/context to the
toast so users see why the copy failed.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74710807-7440-4273-88b3-4a218ff93950

📥 Commits

Reviewing files that changed from the base of the PR and between fcd4e93 and 1334b2d.

📒 Files selected for processing (6)

• src/components/Icon.svelte
• src/components/auth/BackupModal.svelte
• src/components/layout/Header.svelte
• src/components/layout/UserMenu.svelte
• src/routes/login/+page.svelte
• src/routes/user/saved/+page.svelte

✅ Files skipped from review due to trivial changes (1)

• src/routes/user/saved/+page.svelte

🚧 Files skipped from review as they are similar to previous changes (2)

• src/components/Icon.svelte
• src/components/layout/Header.svelte

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/lib/savedItems.ts (1)

72-79: Consider validating extracted IDs for defensive robustness.

The .map((p: { id: number }) => p.id) extracts IDs without runtime validation. If the API response contains malformed objects (missing or non-numeric id), this could silently populate the session with undefined or NaN values.

Since these are trusted internal proxy endpoints, this is low risk, but adding a filter would provide extra safety:

🛡️ Optional defensive validation

 if (placeOk) {
-	const ids = placesRes.value.data.map((p: { id: number }) => p.id);
+	const ids = placesRes.value.data
+		.map((p: { id: number }) => p.id)
+		.filter((id): id is number => typeof id === "number");
 	session.setSavedPlaces(ids);
 }
 if (areaOk) {
-	const ids = areasRes.value.data.map((a: { id: number }) => a.id);
+	const ids = areasRes.value.data
+		.map((a: { id: number }) => a.id)
+		.filter((id): id is number => typeof id === "number");
 	session.setSavedAreas(ids);
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/lib/savedItems.ts` around lines 72 - 79, The extraction of IDs from
placesRes and areasRes is not validating values, so update the blocks guarded by
placeOk and areaOk (where you call placesRes.value.data.map(...) and
areasRes.value.data.map(...)) to produce only valid numeric IDs before calling
session.setSavedPlaces and session.setSavedAreas; extract each item's id,
coerce/check it (e.g., Number(id) and Number.isFinite/Number.isInteger) and
filter out undefined/NaN/non-numeric values so the arrays passed to
session.setSavedPlaces and session.setSavedAreas contain only valid numbers.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/auth/BackupCredentials.svelte`:
- Around line 40-45: These icon-only buttons (e.g., the copy button with
on:click={() => copyToClipboard(username)} and the other icon-only action
buttons in BackupCredentials.svelte) rely only on title text which isn't
reliably announced by screen readers; add aria-label attributes to each
icon-only <button> using the same localized strings used for title (e.g.,
$_("backup.copy")), and for the visibility toggle button also add aria-pressed
bound to the visibility state (e.g., aria-pressed={showPassword}) so assistive
tech can discover and convey the control state.

---

Nitpick comments:
In `@src/lib/savedItems.ts`:
- Around line 72-79: The extraction of IDs from placesRes and areasRes is not
validating values, so update the blocks guarded by placeOk and areaOk (where you
call placesRes.value.data.map(...) and areasRes.value.data.map(...)) to produce
only valid numeric IDs before calling session.setSavedPlaces and
session.setSavedAreas; extract each item's id, coerce/check it (e.g., Number(id)
and Number.isFinite/Number.isInteger) and filter out undefined/NaN/non-numeric
values so the arrays passed to session.setSavedPlaces and session.setSavedAreas
contain only valid numbers.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8ec6b35e-acb8-4e79-ace6-dfa7e452a9b8

📥 Commits

Reviewing files that changed from the base of the PR and between 1334b2d and c203730.

📒 Files selected for processing (9)

• src/components/SaveButton.svelte
• src/components/auth/BackupCredentials.svelte
• src/components/auth/BackupModal.svelte
• src/components/auth/LoginForm.svelte
• src/components/auth/SaveAuthPrompt.svelte
• src/components/layout/UserMenu.svelte
• src/lib/i18n/locales/en.json
• src/lib/savedItems.ts
• src/routes/login/+page.svelte

🚧 Files skipped from review as they are similar to previous changes (4)

• src/routes/login/+page.svelte
• src/components/SaveButton.svelte
• src/components/layout/UserMenu.svelte
• src/lib/i18n/locales/en.json

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Add accessible names to icon-only action buttons.

On Line 40, Line 71, and Line 86 button controls are icon-only and currently rely on title. Screen readers may not consistently announce title as the button name. Add aria-label (and aria-pressed for the visibility toggle) to make these controls reliably discoverable.

Suggested patch

 			<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")}
+				aria-label={$_("backup.copy")}
 			>
@@
 			<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")}
+				aria-label={showPassword ? $_("backup.hide") : $_("backup.show")}
+				aria-pressed={showPassword}
 			>
@@
 				<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")}
+					aria-label={$_("backup.copy")}
 				>

Also applies to: 71-76, 86-91

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/auth/BackupCredentials.svelte` around lines 40 - 45, These
icon-only buttons (e.g., the copy button with on:click={() =>
copyToClipboard(username)} and the other icon-only action buttons in
BackupCredentials.svelte) rely only on title text which isn't reliably announced
by screen readers; add aria-label attributes to each icon-only <button> using
the same localized strings used for title (e.g., $_("backup.copy")), and for the
visibility toggle button also add aria-pressed bound to the visibility state
(e.g., aria-pressed={showPassword}) so assistive tech can discover and convey
the control state.