From 98735b53534ca360679fb70ecdbcb19e03594115 Mon Sep 17 00:00:00 2001
From: Jonathan <claude.cs@jger.nl>
Date: Mon, 13 Jul 2026 00:30:35 +0200
Subject: [PATCH] feat(web): clear-credential buttons on Settings

---
 web/src/app/settings/settings-form.tsx | 37 +++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/web/src/app/settings/settings-form.tsx b/web/src/app/settings/settings-form.tsx
index e648207..9309b78 100644
--- a/web/src/app/settings/settings-form.tsx
+++ b/web/src/app/settings/settings-form.tsx
@@ -147,6 +147,13 @@ export function SettingsForm() {
 
   const secretHint = (set: boolean) => (set ? <span className="set"> · set</span> : null);
 
+  async function clearField(field: "qobuzPassword" | "qobuzToken" | "slskdApiKey") {
+    await fetch(`/api/config?field=${field}`, { method: "DELETE" });
+    if (field === "qobuzPassword") { setPwSet(false); setQobuzPassword(""); }
+    if (field === "qobuzToken") { setTokenSet(false); setQobuzToken(""); }
+    if (field === "slskdApiKey") { setKeySet(false); setSlskdApiKey(""); }
+  }
+
   return (
     <div>
       <PageHead title="Settings" eyebrow="Credentials · library · discovery" />
@@ -168,7 +175,15 @@ export function SettingsForm() {
               <input aria-label="qobuz email" value={qobuzEmail} onChange={(e) => setQobuzEmail(e.target.value)} />
             </label>
             <label className="field">
-              <span>Qobuz password{secretHint(pwSet)}</span>
+              <span>
+                Qobuz password{secretHint(pwSet)}
+                {pwSet ? (
+                  <button type="button" className="btn ghost sm" style={{ marginLeft: 8 }}
+                    aria-label="clear qobuz password" onClick={() => clearField("qobuzPassword")}>
+                    Clear
+                  </button>
+                ) : null}
+              </span>
               <input aria-label="qobuz password" type="password" placeholder={pwSet ? "•••• stored" : ""} value={qobuzPassword} onChange={(e) => setQobuzPassword(e.target.value)} />
             </label>
           </div>
@@ -179,7 +194,15 @@ export function SettingsForm() {
               <input aria-label="qobuz user id" value={qobuzUserId} onChange={(e) => setQobuzUserId(e.target.value)} />
             </label>
             <label className="field">
-              <span>Qobuz auth token{secretHint(tokenSet)}</span>
+              <span>
+                Qobuz auth token{secretHint(tokenSet)}
+                {tokenSet ? (
+                  <button type="button" className="btn ghost sm" style={{ marginLeft: 8 }}
+                    aria-label="clear qobuz auth token" onClick={() => clearField("qobuzToken")}>
+                    Clear
+                  </button>
+                ) : null}
+              </span>
               <input aria-label="qobuz auth token" type="password" placeholder={tokenSet ? "•••• stored" : ""} value={qobuzToken} onChange={(e) => setQobuzToken(e.target.value)} />
             </label>
           </div>
@@ -199,7 +222,15 @@ export function SettingsForm() {
               <input aria-label="slskd url" value={slskdUrl} onChange={(e) => setSlskdUrl(e.target.value)} />
             </label>
             <label className="field">
-              <span>slskd API key{secretHint(keySet)}</span>
+              <span>
+                slskd API key{secretHint(keySet)}
+                {keySet ? (
+                  <button type="button" className="btn ghost sm" style={{ marginLeft: 8 }}
+                    aria-label="clear slskd api key" onClick={() => clearField("slskdApiKey")}>
+                    Clear
+                  </button>
+                ) : null}
+              </span>
               <input aria-label="slskd api key" type="password" placeholder={keySet ? "•••• stored" : ""} value={slskdApiKey} onChange={(e) => setSlskdApiKey(e.target.value)} />
             </label>
           </div>