From f6077f006337c98f22443a5e04eea1113b8f78eb Mon Sep 17 00:00:00 2001
From: Olaf <github@dacht.net>
Date: Tue, 25 Aug 2026 08:03:44 +0200
Subject: [PATCH] Settings page of pluggin inproved

---
 README.md                 |  2 ++
 VIBE/CHAT_LOG.md          |  6 +++++
 VIBE/PROMPTS.md           |  1 +
 webextension/options.css  | 19 ++++++++++++++
 webextension/options.html |  5 ++++
 webextension/options.js   | 54 ++++++++++++++++++++++++++++++++++++++-
 6 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 111da91..1155777 100644
--- a/README.md
+++ b/README.md
@@ -128,6 +128,8 @@ The manifest includes stable Firefox extension metadata and references the packa
 6. Save the settings and login.
 7. Open a webpage, select the LinkLog toolbar button, review the title and URL, add a comment, and submit it.
 
+When the extension settings page has a valid session, it shows `<username> logged in at <backend URL>` and a **Sign out** button instead of the login form. Signing out revokes the token and returns the form.
+
 Temporary extensions are removed when Firefox restarts. Reload the extension from `about:debugging` after changing its files.
 
 ## Docker
diff --git a/VIBE/CHAT_LOG.md b/VIBE/CHAT_LOG.md
index 02706f2..5b40432 100644
--- a/VIBE/CHAT_LOG.md
+++ b/VIBE/CHAT_LOG.md
@@ -433,3 +433,9 @@ How come when te container starts after docker compose down -v the database is s
 
 ### Assistant outcome
 Inspected the active container and confirmed it uses `/app/backend/data/linklog.db` from the Compose volume `linklog_linklog_data`, containing 230 links. The current Compose project maps logical `linklog_data` to that prefixed volume. `docker compose down` preserves it; only `docker compose down -v` from the same project removes it. A different directory/project, an external volume, or stopping without `-v` can therefore preserve the data.
+
+### User
+Refine the Plugins Settings page. When the user is logged in it shows all "<user> logged in at <url>" and a sign-out button. If the user is not logged in it shows the form as is now.
+
+### Assistant outcome
+Updated the Firefox extension settings page to restore valid stored sessions, show `<username> logged in at <backend URL>` with a sign-out button, and show the original login form when signed out or when token validation fails. Sign-out revokes the token when possible, clears stored credentials, and returns to the form. Extension and backend validation passed.
diff --git a/VIBE/PROMPTS.md b/VIBE/PROMPTS.md
index df64495..4b9b8ef 100644
--- a/VIBE/PROMPTS.md
+++ b/VIBE/PROMPTS.md
@@ -75,6 +75,7 @@
 71. Create a make file that will regenerate the logo and icon files from LinkLog.svg
 72. Make sure the addon conforms to Firefox guidelines
 73. How come when te container starts after docker compose down -v the database is still populated with old links
+74. Refine the Plugins Settings page. When the user is logged in it shows all "<user> logged in at <url>" and a sign-out button. If the user is not logged in it shows the form as is now.
 
 ## Future entries
 
diff --git a/webextension/options.css b/webextension/options.css
index efc4720..8883257 100644
--- a/webextension/options.css
+++ b/webextension/options.css
@@ -75,6 +75,25 @@ button {
   color: #991b1b;
 }
 
+.logged-in {
+  margin-bottom: 16px;
+  padding: 14px;
+  border: 1px solid #45475a;
+  border-radius: 8px;
+  background: #313244;
+  color: #cdd6f4;
+}
+
+.logged-in p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.logged-in button {
+  background: #f38ba8;
+  color: #11111b;
+}
+
 .hidden {
   display: none;
 }
diff --git a/webextension/options.html b/webextension/options.html
index 300750a..c6a77c0 100644
--- a/webextension/options.html
+++ b/webextension/options.html
@@ -12,6 +12,11 @@
 
       <div id="status" class="status hidden" aria-live="polite"></div>
 
+      <section id="logged-in" class="logged-in hidden" aria-live="polite">
+        <p id="session-summary"></p>
+        <button type="button" id="sign-out">Sign out</button>
+      </section>
+
       <form id="settings-form">
         <label>
           Backend URL
diff --git a/webextension/options.js b/webextension/options.js
index 7b73630..9e6be67 100644
--- a/webextension/options.js
+++ b/webextension/options.js
@@ -5,6 +5,9 @@ const form = document.getElementById('settings-form');
 const backendUrlInput = document.getElementById('backend-url');
 const usernameInput = document.getElementById('username');
 const passwordInput = document.getElementById('password');
+const session = document.getElementById('logged-in');
+const sessionSummary = document.getElementById('session-summary');
+const signOutButton = document.getElementById('sign-out');
 
 function setStatus(message, isError = false) {
   statusEl.textContent = message;
@@ -14,9 +17,41 @@ function setStatus(message, isError = false) {
 }
 
 async function loadSettings() {
-  const settings = await browser.storage.local.get(['backendUrl', 'username']);
+  const settings = await browser.storage.local.get(['backendUrl', 'username', 'accessToken']);
   backendUrlInput.value = settings.backendUrl || DEFAULT_BACKEND;
   usernameInput.value = settings.username || '';
+
+  if (settings.accessToken && settings.backendUrl) {
+    try {
+      const response = await fetch(
+        `${settings.backendUrl}/api/auth/me?token=${encodeURIComponent(settings.accessToken)}`
+      );
+      if (response.ok) {
+        const user = await response.json();
+        showLoggedIn(user.username || settings.username, settings.backendUrl);
+        return;
+      }
+    } catch (error) {
+      // Show the login form when the backend cannot validate the stored token.
+    }
+    await clearSession();
+  }
+  showLoggedOut();
+}
+
+function showLoggedIn(username, backendUrl) {
+  sessionSummary.textContent = `${username} logged in at ${backendUrl}`;
+  session.classList.remove('hidden');
+  form.classList.add('hidden');
+}
+
+function showLoggedOut() {
+  session.classList.add('hidden');
+  form.classList.remove('hidden');
+}
+
+async function clearSession() {
+  await browser.storage.local.remove(['accessToken', 'tokenType', 'tokenExpiresAt', 'refreshToken']);
 }
 
 async function saveSettingsAndLogin(event) {
@@ -51,11 +86,28 @@ async function saveSettingsAndLogin(event) {
       refreshToken: data.refresh_token,
     });
 
+    showLoggedIn(data.user?.username || username, backendUrl);
+    passwordInput.value = '';
     setStatus('Logged in successfully');
   } catch (error) {
     setStatus('Unable to log in. Check backend URL and credentials.', true);
   }
 }
 
+async function signOut() {
+  const settings = await browser.storage.local.get(['accessToken']);
+  if (settings.accessToken) {
+    await fetch(`${backendUrlInput.value.trim()}/api/auth/logout`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token: settings.accessToken }),
+    }).catch(() => undefined);
+  }
+  await clearSession();
+  showLoggedOut();
+  setStatus('Signed out');
+}
+
 form.addEventListener('submit', saveSettingsAndLogin);
+signOutButton.addEventListener('click', signOut);
 loadSettings();