From d3531afa05f889a85a406799437a7afc60a23dce Mon Sep 17 00:00:00 2001
From: Jack Case <jackacase@gmail.com>
Date: Sun, 23 Nov 2025 14:04:51 +0000
Subject: [PATCH] add a logout button and improve logged in ui state handling

---
 pages/action_popup.html |  8 ++++++--
 src/browser-action.ts   | 38 +++++++++++++++++++++++++++++++++++---
 src/report-slop.ts      |  5 +++++
 3 files changed, 46 insertions(+), 5 deletions(-)
diff --git a/pages/action_popup.html b/pages/action_popup.html
index b0e54e0..e804de1 100644
--- a/pages/action_popup.html
+++ b/pages/action_popup.html
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-    <div id="onboarding" style="visibility: visible;" class="hero is-primary">
+    <div id="onboarding" style="visibility: visible;" class="hero is-primary not-logged-in">
         <div class="hero-body">
             <h1 class="title">Welcome, Slop Farmer!</h1>
             <p>tired of ai-generated slop articles in your search results? Sign up or log in to start reporting slop
@@ -19,14 +19,18 @@
         </div>
     </div>
 
+    <button id="logout-button" class="button is-small logged-in">Logout</button>
+
     <div class="section">
-        <nav class="tabs is-centered">
+        <nav class="tabs is-centered not-logged-in">
             <ul>
                 <li id="signup-tab"><a>sign up</a></li>
                 <li id="login-tab"><a>log in</a></li>
             </ul>
         </nav>
 
+
+
         <div id="signup" style="display:block" class="box">
             <h1 class="title">Sign Up</h1>
             <form id="signup-form">
diff --git a/src/browser-action.ts b/src/browser-action.ts
index 67266af..ab3611a 100644
--- a/src/browser-action.ts
+++ b/src/browser-action.ts
@@ -1,3 +1,4 @@
+import { getTextOfJSDocComment } from "../node_modules/typescript/lib/typescript.js"
 import { API_URL, send_message_to_background } from "./common.js"
 
 let popup_state: PopupState = null
@@ -10,11 +11,26 @@ class PopupState {
 
     page_elements: Map<string, HTMLElement>
 
-    constructor(logged_in: boolean, page_sections: Map<string, HTMLElement>, visible_section: string, page_elements: Map<string, HTMLElement>) {
+    visible_logged_in: Array<HTMLElement>
+    visible_logged_out: Array<HTMLElement>
+
+    constructor(logged_in: boolean, page_sections: Map<string, HTMLElement>, visible_section: string, page_elements: Map<string, HTMLElement>, visible_logged_in: Array<HTMLElement>, visible_logged_out: Array<HTMLElement>) {
         this.logged_in = logged_in
         this.page_sections = page_sections
         this.visible_section = visible_section
         this.page_elements = page_elements
+
+        this.visible_logged_in = visible_logged_in
+        this.visible_logged_out = visible_logged_out
+    }
+
+    update_login_visibility() {
+        this.visible_logged_in.forEach((element) => {
+            element.style.display = this.logged_in ? "block" : "none"
+        })
+        this.visible_logged_out.forEach((element) => {
+            element.style.display = this.logged_in ? "none" : "block"
+        })
     }
 
     set_visible_section(section_id: string) {
@@ -32,6 +48,8 @@ class PopupState {
         this.page_sections.forEach((element, id) => {
             element.style.display = id === section_id ? "block" : "none"
         })
+
+        this.update_login_visibility()
     }
 }
 
@@ -56,6 +74,8 @@ async function submit_login_form() {
         const status_el = document.getElementById("login-status")
         status_el.setAttribute("style", "visibility: visible;")
 
+        popup_state.logged_in = true
+
         popup_state.set_visible_section("report")
     }
     else {
@@ -79,6 +99,12 @@ async function submit_signup_form() {
     }
 }
 
+async function logout() {
+    const response = await send_message_to_background({type: "logout"})
+    popup_state.logged_in = false
+    popup_state.set_visible_section("login")
+}
+
 async function check_login(): Promise<boolean> {
     const response = await send_message_to_background({type: "islogged"})
     return response.logged_in
@@ -99,6 +125,7 @@ async function initialize_popup() {
     const login_button = document.getElementById("login-tab")
     const report_button = document.getElementById("report-button") as HTMLButtonElement
     const report_status = report_section.querySelector("h2")
+    const logout_button = document.getElementById("logout-button")
 
     const page_sections = new Map()
     page_sections.set("signup", signup_section)
@@ -114,11 +141,13 @@ async function initialize_popup() {
     page_elements.set("report_status", report_status)
     page_elements.set("signup_button", signup_button)
     page_elements.set("login_button", login_button)
-    
+
+    const logged_in_items = Array.from(document.querySelectorAll(".logged-in")) as Array<HTMLElement>
+    const logged_out_items = Array.from(document.querySelectorAll(".not-logged-in")) as Array<HTMLElement>
 
     const logged_in = await check_login()
 
-    popup_state = new PopupState(logged_in, page_sections, "signup", page_elements)
+    popup_state = new PopupState(logged_in, page_sections, "signup", page_elements, logged_in_items, logged_out_items)
     popup_state.set_visible_section(logged_in ? "report" : "signup")
 
     login_form.addEventListener("submit", (event) => { event.preventDefault(); submit_login_form() })
@@ -131,6 +160,9 @@ async function initialize_popup() {
         popup_state.page_elements.get("report_status").textContent = "report accepted"
         setTimeout(() => { window.close() }, 1000)
     })
+    logout_button.addEventListener("click", async (event) => {
+        logout()
+    })
 }
 
 addEventListener("DOMContentLoaded", (event) => {
diff --git a/src/report-slop.ts b/src/report-slop.ts
index a4cd8a6..3ea100c 100644
--- a/src/report-slop.ts
+++ b/src/report-slop.ts
@@ -225,6 +225,11 @@ function message_listener(message: any, sender: any, send_response: Function): P
             return new Promise((resolve, reject) => { resolve(response) })
             break
 
+        case "logout":
+            localStorage.removeItem("accessToken")
+            return new Promise((resolve, reject) => { resolve(true) })
+            break
+
         case "report":
             return new Promise((resolve, reject) => {
                 browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
