Settings page of pluggin inproved

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;
 }

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

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();