Finetuning Plugin behavior when not logged in

webextension/_locales/de/messages.json

@@ -11,6 +11,8 @@
   "newTagsPlaceholder": {"message": "#neuer-tag, #anderer-tag"},
   "saveLink": {"message": "Link speichern"},
   "settings": {"message": "Einstellungen"},
+  "authRequired": {"message": "Melde dich an, um LinkLog zu verwenden."},
+  "openSettings": {"message": "Einstellungen öffnen"},
   "signOut": {"message": "Abmelden"},
   "backendUrlLabel": {"message": "Backend-URL"},
   "usernameLabel": {"message": "Benutzername"},

webextension/_locales/en-US/messages.json

@@ -35,6 +35,12 @@
   "settings": {
     "message": "Settings"
   },
+  "authRequired": {
+    "message": "Please sign in to use LinkLog."
+  },
+  "openSettings": {
+    "message": "Open settings"
+  },
   "signOut": {
     "message": "Sign out"
   },

webextension/_locales/es/messages.json

@@ -11,6 +11,8 @@
   "newTagsPlaceholder": {"message": "#nueva-etiqueta, #otra-etiqueta"},
   "saveLink": {"message": "Guardar enlace"},
   "settings": {"message": "Configuración"},
+  "authRequired": {"message": "Inicia sesión para usar LinkLog."},
+  "openSettings": {"message": "Abrir configuración"},
   "signOut": {"message": "Cerrar sesión"},
   "backendUrlLabel": {"message": "URL del servidor"},
   "usernameLabel": {"message": "Nombre de usuario"},

webextension/_locales/fr/messages.json

@@ -11,6 +11,8 @@
   "newTagsPlaceholder": {"message": "#nouvelle-étiquette, #autre-étiquette"},
   "saveLink": {"message": "Enregistrer le lien"},
   "settings": {"message": "Paramètres"},
+  "authRequired": {"message": "Connectez-vous pour utiliser LinkLog."},
+  "openSettings": {"message": "Ouvrir les paramètres"},
   "signOut": {"message": "Se déconnecter"},
   "backendUrlLabel": {"message": "URL du serveur"},
   "usernameLabel": {"message": "Nom d’utilisateur"},

webextension/_locales/nl/messages.json

@@ -11,6 +11,8 @@
   "newTagsPlaceholder": {"message": "#nieuwe-tag, #andere-tag"},
   "saveLink": {"message": "Koppeling opslaan"},
   "settings": {"message": "Instellingen"},
+  "authRequired": {"message": "Log in om LinkLog te gebruiken."},
+  "openSettings": {"message": "Instellingen openen"},
   "signOut": {"message": "Uitloggen"},
   "backendUrlLabel": {"message": "Backend-URL"},
   "usernameLabel": {"message": "Gebruikersnaam"},

webextension/popup.css

@@ -149,6 +149,15 @@ button {
   color: #f38ba8;
 }
 
+#auth-warning {
+  display: grid;
+  gap: 8px;
+}
+
+#auth-warning button {
+  width: auto;
+}
+
 .hidden {
   display: none;
 }

webextension/popup.html

@@ -15,8 +15,12 @@
       </header>
 
       <div id="status" class="status hidden" aria-live="polite"></div>
+      <div id="auth-warning" class="status error" 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>
 
-      <form id="link-form">
+      <form id="link-form" class="hidden">
         <label>
           <span data-i18n="titleLabel">Title</span>
           <input id="title" name="title" type="text" />

webextension/popup.js

@@ -10,6 +10,8 @@ const openSettingsButton = document.getElementById('open-settings');
 const existingTags = document.getElementById('existing-tags');
 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 t = window.linklogI18n;
 
@@ -29,6 +31,16 @@ async function getSettings() {
   return result;
 }
 
+function showSignedOutState() {
+  form.classList.add('hidden');
+  authWarning.classList.remove('hidden');
+}
+
+function showSignedInState() {
+  authWarning.classList.add('hidden');
+  form.classList.remove('hidden');
+}
+
 async function updateFeedLink() {
   const settings = await browser.storage.local.get(['backendUrl', 'username', 'accessToken']);
   if (!settings.backendUrl || !settings.username || !settings.accessToken) return;
@@ -44,13 +56,15 @@ async function updateFeedLink() {
 async function loadExistingTags() {
   const settings = await getSettings();
   if (!settings.backendUrl || !settings.accessToken) {
-    existingTags.textContent = t('signInToSelectTags');
+    showSignedOutState();
     return;
   }
+  showSignedInState();
   const response = await fetch(`${settings.backendUrl}/api/tags`, {
     headers: {'Authorization': `Bearer ${settings.accessToken}`},
   });
   if (!response.ok) {
+    if (response.status === 401) showSignedOutState();
     existingTags.textContent = t('loadTagsFailed');
     return;
   }
@@ -127,6 +141,7 @@ async function handleSubmit(event) {
     });
 
     if (response.status === 401) {
+      showSignedOutState();
       setStatus(t('sessionExpired'), true);
       browser.runtime.openOptionsPage();
       return;
@@ -143,6 +158,7 @@ async function handleSubmit(event) {
 }
 
 openSettingsButton.addEventListener('click', () => browser.runtime.openOptionsPage());
+warningSettingsButton.addEventListener('click', () => browser.runtime.openOptionsPage());
 form.addEventListener('submit', handleSubmit);
 populateCurrentTab();
 loadExistingTags();