feat: add settings page for credentials

web/src/app/page.tsx

@@ -4,6 +4,7 @@ export default function Home() {
   return (
     <main>
       <h1>Lyra</h1>
+      <p><a href="/settings">Settings</a></p>
       <Queue />
     </main>
   );

web/src/app/settings/page.tsx

@@ -0,0 +1,11 @@
+import { SettingsForm } from "./settings-form";
+
+export default function SettingsPage() {
+  return (
+    <main>
+      <h1>Settings</h1>
+      <SettingsForm />
+      <p><a href="/">← Back to queue</a></p>
+    </main>
+  );
+}

web/src/app/settings/settings-form.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Loaded = { qobuzEmail: string; slskdUrl: string; qobuzPasswordSet: boolean; slskdApiKeySet: boolean };
+
+export function SettingsForm() {
+  const [qobuzEmail, setQobuzEmail] = useState("");
+  const [qobuzPassword, setQobuzPassword] = useState("");
+  const [slskdUrl, setSlskdUrl] = useState("");
+  const [slskdApiKey, setSlskdApiKey] = useState("");
+  const [pwSet, setPwSet] = useState(false);
+  const [keySet, setKeySet] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/config")
+      .then((r) => r.json())
+      .then((c: Loaded) => {
+        setQobuzEmail(c.qobuzEmail);
+        setSlskdUrl(c.slskdUrl);
+        setPwSet(c.qobuzPasswordSet);
+        setKeySet(c.slskdApiKeySet);
+      });
+  }, []);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    await fetch("/api/config", {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ qobuzEmail, qobuzPassword, slskdUrl, slskdApiKey }),
+    });
+    setQobuzPassword("");
+    setSlskdApiKey("");
+    setSaved(true);
+    setPwSet(pwSet || qobuzPassword !== "");
+    setKeySet(keySet || slskdApiKey !== "");
+  }
+
+  return (
+    <form onSubmit={submit}>
+      <label>Qobuz email <input aria-label="qobuz email" value={qobuzEmail} onChange={(e) => setQobuzEmail(e.target.value)} /></label>
+      <label>Qobuz password <input aria-label="qobuz password" type="password" placeholder={pwSet ? "•••• (set)" : ""} value={qobuzPassword} onChange={(e) => setQobuzPassword(e.target.value)} /></label>
+      <label>slskd URL <input aria-label="slskd url" value={slskdUrl} onChange={(e) => setSlskdUrl(e.target.value)} /></label>
+      <label>slskd API key <input aria-label="slskd api key" type="password" placeholder={keySet ? "•••• (set)" : ""} value={slskdApiKey} onChange={(e) => setSlskdApiKey(e.target.value)} /></label>
+      <button type="submit">Save</button>
+      {saved ? <span> Saved.</span> : null}
+    </form>
+  );
+}