Working logic to redirect to sessions

webextension/_locales/de/messages.json

@@ -15,6 +15,8 @@
   "openSettings": {"message": "Einstellungen öffnen"},
   "signOut": {"message": "Abmelden"},
   "backendUrlLabel": {"message": "Backend-URL"},
+  "emailLabel": {"message": "E-Mail"},
+  "emailPlaceholder": {"message": "alice@example.com"},
   "usernameLabel": {"message": "Benutzername"},
   "usernamePlaceholder": {"message": "alice"},
   "passwordLabel": {"message": "Passwort"},

webextension/_locales/en-US/messages.json

@@ -47,6 +47,12 @@
   "backendUrlLabel": {
     "message": "Backend URL"
   },
+  "emailLabel": {
+    "message": "Email"
+  },
+  "emailPlaceholder": {
+    "message": "alice@example.com"
+  },
   "usernameLabel": {
     "message": "Username"
   },

webextension/_locales/es/messages.json

@@ -15,6 +15,8 @@
   "openSettings": {"message": "Abrir configuración"},
   "signOut": {"message": "Cerrar sesión"},
   "backendUrlLabel": {"message": "URL del servidor"},
+  "emailLabel": {"message": "Correo electrónico"},
+  "emailPlaceholder": {"message": "alice@example.com"},
   "usernameLabel": {"message": "Nombre de usuario"},
   "usernamePlaceholder": {"message": "alice"},
   "passwordLabel": {"message": "Contraseña"},

webextension/_locales/fr/messages.json

@@ -15,6 +15,8 @@
   "openSettings": {"message": "Ouvrir les paramètres"},
   "signOut": {"message": "Se déconnecter"},
   "backendUrlLabel": {"message": "URL du serveur"},
+  "emailLabel": {"message": "E-mail"},
+  "emailPlaceholder": {"message": "alice@example.com"},
   "usernameLabel": {"message": "Nom d’utilisateur"},
   "usernamePlaceholder": {"message": "alice"},
   "passwordLabel": {"message": "Mot de passe"},

webextension/_locales/nl/messages.json

@@ -15,6 +15,8 @@
   "openSettings": {"message": "Instellingen openen"},
   "signOut": {"message": "Uitloggen"},
   "backendUrlLabel": {"message": "Backend-URL"},
+  "emailLabel": {"message": "E-mail"},
+  "emailPlaceholder": {"message": "alice@example.com"},
   "usernameLabel": {"message": "Gebruikersnaam"},
   "usernamePlaceholder": {"message": "alice"},
   "passwordLabel": {"message": "Wachtwoord"},

webextension/popup.css

@@ -149,6 +149,16 @@ button {
   color: #f38ba8;
 }
 
+.auth-session {
+  margin-bottom: 10px;
+  border: 1px solid #585b70;
+  border-radius: 8px;
+  padding: 8px 10px;
+  color: #94e2d5;
+  font-size: 0.8rem;
+  overflow-wrap: anywhere;
+}
+
 #auth-warning {
   display: grid;
   gap: 8px;
@@ -162,6 +172,11 @@ button {
   display: none;
 }
 
+#auth-session[hidden],
+#auth-warning[hidden] {
+  display: none !important;
+}
+
 .extension-footer {
   margin-top: 16px;
   color: #7f849c;

webextension/popup.html

@@ -15,7 +15,8 @@
       </header>
 
       <div id="status" class="status hidden" aria-live="polite"></div>
-      <div id="auth-warning" class="status error" aria-live="polite">
+      <div id="auth-session" class="auth-session" hidden aria-live="polite"></div>
+      <div id="auth-warning" class="status error" hidden aria-live="polite">
         <span data-i18n="authRequired">Please sign in to use LinkLog.</span>
         <button type="button" id="warning-settings" class="secondary" data-i18n="openSettings">Open settings</button>
       </div>

webextension/popup.js

@@ -12,6 +12,7 @@ const newTagsInput = document.getElementById('new-tags');
 const feedLink = document.getElementById('feed-link');
 const authWarning = document.getElementById('auth-warning');
 const warningSettingsButton = document.getElementById('warning-settings');
+const authSession = document.getElementById('auth-session');
 
 const t = window.linklogI18n;
 
@@ -31,13 +32,36 @@ async function getSettings() {
   return result;
 }
 
+async function validateSession(settings) {
+  if (!settings.backendUrl || !settings.accessToken) return null;
+  try {
+    const response = await fetch(`${settings.backendUrl}/api/auth/me`, {
+      headers: {'Authorization': `Bearer ${settings.accessToken}`},
+    });
+    if (!response.ok) {
+      await browser.storage.local.remove(['accessToken', 'tokenType', 'tokenExpiresAt', 'refreshToken']);
+      return null;
+    }
+    return await response.json();
+  } catch (error) {
+    return null;
+  }
+}
+
 function showSignedOutState() {
   form.classList.add('hidden');
+  authSession.hidden = true;
+  authSession.classList.add('hidden');
+  authWarning.hidden = false;
   authWarning.classList.remove('hidden');
 }
 
-function showSignedInState() {
+function showSignedInState(user, backendUrl) {
+  authWarning.hidden = true;
   authWarning.classList.add('hidden');
+  authSession.textContent = t('loggedInAt', [user.username || user.email, backendUrl]);
+  authSession.hidden = false;
+  authSession.classList.remove('hidden');
   form.classList.remove('hidden');
 }
 
@@ -59,12 +83,20 @@ async function loadExistingTags() {
     showSignedOutState();
     return;
   }
-  showSignedInState();
+  const user = await validateSession(settings);
+  if (!user) {
+    showSignedOutState();
+    return;
+  }
+  showSignedInState(user, settings.backendUrl);
   const response = await fetch(`${settings.backendUrl}/api/tags`, {
     headers: {'Authorization': `Bearer ${settings.accessToken}`},
   });
   if (!response.ok) {
-    if (response.status === 401) showSignedOutState();
+    if (response.status === 401) {
+      showSignedOutState();
+      return;
+    }
     existingTags.textContent = t('loadTagsFailed');
     return;
   }
@@ -124,6 +156,13 @@ async function handleSubmit(event) {
     return;
   }
 
+  if (!await validateSession(settings)) {
+    showSignedOutState();
+    setStatus(t('sessionExpired'), true);
+    browser.runtime.openOptionsPage();
+    return;
+  }
+
   try {
     const response = await fetch(`${backendUrl}/api/links`, {
       method: 'POST',