feat: add password change and API key management to settings

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/routes/settings.tsx

@@ -1,4 +1,12 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	useApiKeys,
+	useAuth,
+	useChangePassword,
+	useCreateApiKey,
+	useDeleteApiKey,
+} from "../hooks/useAuth";
 import { useCurrency } from "../hooks/useCurrency";
 import { useUpdateSetting } from "../hooks/useSettings";
 import { useWeightUnit } from "../hooks/useWeightUnit";
@@ -18,10 +26,157 @@ export const Route = createFileRoute("/settings")({
 	component: SettingsPage,
 });
 
+function ChangePasswordSection() {
+	const changePassword = useChangePassword();
+	const [currentPassword, setCurrentPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [message, setMessage] = useState<{
+		type: "success" | "error";
+		text: string;
+	} | null>(null);
+
+	async function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setMessage(null);
+		try {
+			await changePassword.mutateAsync({ currentPassword, newPassword });
+			setMessage({ type: "success", text: "Password changed" });
+			setCurrentPassword("");
+			setNewPassword("");
+		} catch (err) {
+			setMessage({ type: "error", text: (err as Error).message });
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-3">
+			<h3 className="text-sm font-medium text-gray-900">Change Password</h3>
+			<input
+				type="password"
+				placeholder="Current password"
+				value={currentPassword}
+				onChange={(e) => setCurrentPassword(e.target.value)}
+				required
+				className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+			/>
+			<input
+				type="password"
+				placeholder="New password"
+				value={newPassword}
+				onChange={(e) => setNewPassword(e.target.value)}
+				required
+				minLength={6}
+				className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+			/>
+			{message && (
+				<p
+					className={`text-sm ${message.type === "success" ? "text-green-600" : "text-red-600"}`}
+				>
+					{message.text}
+				</p>
+			)}
+			<button
+				type="submit"
+				disabled={changePassword.isPending}
+				className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
+			>
+				{changePassword.isPending ? "..." : "Change Password"}
+			</button>
+		</form>
+	);
+}
+
+function ApiKeySection() {
+	const { data: keys } = useApiKeys();
+	const createKey = useCreateApiKey();
+	const deleteKey = useDeleteApiKey();
+	const [name, setName] = useState("");
+	const [newKey, setNewKey] = useState<string | null>(null);
+
+	async function handleCreate(e: React.FormEvent) {
+		e.preventDefault();
+		const result = await createKey.mutateAsync({ name });
+		setNewKey(result.key);
+		setName("");
+	}
+
+	return (
+		<div className="space-y-3">
+			<h3 className="text-sm font-medium text-gray-900">API Keys</h3>
+			<p className="text-xs text-gray-500">
+				API keys allow programmatic access to GearBox (e.g., from Claude Desktop
+				or scripts).
+			</p>
+
+			{newKey && (
+				<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+					<p className="text-xs font-medium text-amber-800 mb-1">
+						Copy this key now — it won't be shown again:
+					</p>
+					<code className="text-xs text-amber-900 break-all select-all">
+						{newKey}
+					</code>
+					<button
+						type="button"
+						onClick={() => setNewKey(null)}
+						className="mt-2 block text-xs text-amber-700 hover:text-amber-900"
+					>
+						Dismiss
+					</button>
+				</div>
+			)}
+
+			<form onSubmit={handleCreate} className="flex gap-2">
+				<input
+					type="text"
+					placeholder="Key name (e.g., claude-desktop)"
+					value={name}
+					onChange={(e) => setName(e.target.value)}
+					required
+					className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+				/>
+				<button
+					type="submit"
+					disabled={createKey.isPending}
+					className="px-4 py-2 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
+				>
+					Create
+				</button>
+			</form>
+
+			{keys && keys.length > 0 && (
+				<div className="space-y-2">
+					{keys.map((key) => (
+						<div
+							key={key.id}
+							className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg"
+						>
+							<div>
+								<span className="text-sm text-gray-900">{key.name}</span>
+								<span className="text-xs text-gray-400 ml-2">
+									{key.keyPrefix}...
+								</span>
+							</div>
+							<button
+								type="button"
+								onClick={() => deleteKey.mutate(key.id)}
+								className="text-xs text-red-500 hover:text-red-700"
+							>
+								Revoke
+							</button>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
 function SettingsPage() {
 	const unit = useWeightUnit();
 	const currency = useCurrency();
 	const updateSetting = useUpdateSetting();
+	const { data: auth } = useAuth();
 
 	return (
 		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -99,6 +254,14 @@ function SettingsPage() {
 					</div>
 				</div>
 			</div>
+
+			{auth?.user && (
+				<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6 mt-4">
+					<ChangePasswordSection />
+					<div className="border-t border-gray-100" />
+					<ApiKeySection />
+				</div>
+			)}
 		</div>
 	);
 }