add integration settings

src/components/BeeminderSettings.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { getMe, updateMe } from '@taskratchet/sdk';
+	import { onMount } from 'svelte';
+	const beeminderAuthUrl =
+		`https://www.beeminder.com/apps/authorize?client_id=${import.meta.env.PUBLIC_BEEMINDER_CLIENT_ID}` +
+		`&redirect_uri=${encodeURIComponent(import.meta.env.PUBLIC_BEEMINDER_REDIRECT_URI)}&response_type=token`;
+
+	let bmUser = '';
+	let bmGoal = '';
+	let error = '';
+
+	onMount(async () => {
+		const me = await getMe();
+		bmUser = me?.integrations?.beeminder?.user || '';
+		bmGoal = me?.integrations?.beeminder?.goal_new_tasks || '';
+	});
+
+	async function onSubmit(event: Event) {
+		event.preventDefault();
+		if (!/^[-\w]*$/.test(bmGoal)) {
+			error = 'Goal names can only contain letters, numbers, underscores, and hyphens.';
+			return;
+		}
+		try {
+			await updateMe({
+				beeminder_goal_new_tasks: bmGoal,
+			});
+			error = '';
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update settings';
+		}
+	}
+</script>
+
+{#if error}
+	<div class="error">{error}</div>
+{/if}
+
+{#if bmUser}
+	<form on:submit={onSubmit}>
+		<p>Beeminder user: {bmUser}</p>
+
+		<label>
+			Post new tasks to goal:
+			<input type="text" bind:value={bmGoal} />
+		</label>
+
+		<button type="submit">Save</button>
+	</form>
+{:else}
+	<a href={beeminderAuthUrl} class="button">Enable Beeminder integration</a>
+{/if}
+
+<style>
+	.error {
+		color: red;
+		margin-bottom: 1rem;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	input {
+		background: var(--background);
+		color: var(--color);
+		border: 1px solid var(--color);
+		padding: 0.5rem;
+		border-radius: 4px;
+	}
+
+	button, .button {
+		align-self: flex-start;
+		background: var(--background);
+		color: var(--color);
+		border: 1px solid var(--color);
+		padding: 0.5rem 1rem;
+		border-radius: 4px;
+		cursor: pointer;
+		text-decoration: none;
+	}
+
+	button:hover, .button:hover {
+		background: var(--primary);
+		border-color: var(--primary);
+		color: white;
+	}
+</style>

src/env.d.ts

@@ -3,6 +3,8 @@
 interface ImportMetaEnv {
 	readonly PUBLIC_WEB3FORMS_ACCESS_KEY: string;
 	readonly PUBLIC_STRIPE_KEY: string;
+	readonly PUBLIC_BEEMINDER_CLIENT_ID: string;
+	readonly PUBLIC_BEEMINDER_REDIRECT_URI: string;
 }
 
 interface ImportMeta {

src/pages/account.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import PasswordSettings from '../components/PasswordSettings.svelte';
 import PaymentSettings from '../components/PaymentSettings.svelte';
 import ApiSettings from '../components/ApiSettings.svelte';
+import BeeminderSettings from '../components/BeeminderSettings.svelte';
 import GeneralSettings from '../components/GeneralSettings.svelte';
 ---
 
@@ -14,6 +15,7 @@ import GeneralSettings from '../components/GeneralSettings.svelte';
 			<button class="tab active" data-tab="general">General</button>
 			<button class="tab" data-tab="password">Password</button>
 			<button class="tab" data-tab="payment">Payment</button>
+			<button class="tab" data-tab="integrations">Integrations</button>
 			<button class="tab" data-tab="api">API</button>
 		</div>
 
@@ -29,6 +31,10 @@ import GeneralSettings from '../components/GeneralSettings.svelte';
 		<div class="tab-content" id="api" style="display: none;">
 			<ApiSettings client:load />
 		</div>
+		<div class="tab-content" id="integrations" style="display: none;">
+			<h2>Beeminder Integration</h2>
+			<BeeminderSettings client:load />
+		</div>
 	</div>
 </Layout>
 
@@ -71,17 +77,16 @@ import GeneralSettings from '../components/GeneralSettings.svelte';
 	const tabs = document.querySelectorAll('.tab');
 	const contents = document.querySelectorAll('.tab-content');
 
-	tabs.forEach(tab => {
+	tabs.forEach((tab) => {
 		tab.addEventListener('click', () => {
 			const target = tab.getAttribute('data-tab');
-			
-			tabs.forEach(t => t.classList.remove('active'));
+
+			tabs.forEach((t) => t.classList.remove('active'));
 			tab.classList.add('active');
 
-			contents.forEach(content => {
+			contents.forEach((content) => {
 				content.style.display = content.id === target ? 'block' : 'none';
 			});
 		});
 	});
 </script>
-</Layout>