jackc/slop-farmer-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add a logout button and improve logged in ui state handling

Browse Source
This commit is contained in:
Jack Case
2025-11-23 14:04:51 +00:00
parent a29d43f226
commit d3531afa05
3 changed files with 46 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/action_popup.html
View File

@@ -11,7 +11,7 @@
</head> </head>
<body> <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"> <div class="hero-body">
<h1 class="title">Welcome, Slop Farmer!</h1> <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 <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>
</div> </div>
<button id="logout-button" class="button is-small logged-in">Logout</button>
<div class="section"> <div class="section">
<nav class="tabs is-centered"> <nav class="tabs is-centered not-logged-in">
<ul> <ul>
<li id="signup-tab"><a>sign up</a></li> <li id="signup-tab"><a>sign up</a></li>
<li id="login-tab"><a>log in</a></li> <li id="login-tab"><a>log in</a></li>
</ul> </ul>
</nav> </nav>
<div id="signup" style="display:block" class="box"> <div id="signup" style="display:block" class="box">
<h1 class="title">Sign Up</h1> <h1 class="title">Sign Up</h1>
<form id="signup-form"> <form id="signup-form">

36
src/browser-action.ts
View File

@@ -1,3 +1,4 @@
import { getTextOfJSDocComment } from "../node_modules/typescript/lib/typescript.js"
import { API_URL, send_message_to_background } from "./common.js" import { API_URL, send_message_to_background } from "./common.js"
let popup_state: PopupState = null let popup_state: PopupState = null
@@ -10,11 +11,26 @@ class PopupState {
page_elements: Map<string, HTMLElement> 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.logged_in = logged_in
this.page_sections = page_sections this.page_sections = page_sections
this.visible_section = visible_section this.visible_section = visible_section
this.page_elements = page_elements 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) { set_visible_section(section_id: string) {
@@ -32,6 +48,8 @@ class PopupState {
this.page_sections.forEach((element, id) => { this.page_sections.forEach((element, id) => {
element.style.display = id === section_id ? "block" : "none" 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") const status_el = document.getElementById("login-status")
status_el.setAttribute("style", "visibility: visible;") status_el.setAttribute("style", "visibility: visible;")
popup_state.logged_in = true
popup_state.set_visible_section("report") popup_state.set_visible_section("report")
} }
else { 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> { async function check_login(): Promise<boolean> {
const response = await send_message_to_background({type: "islogged"}) const response = await send_message_to_background({type: "islogged"})
return response.logged_in return response.logged_in
@@ -99,6 +125,7 @@ async function initialize_popup() {
const login_button = document.getElementById("login-tab") const login_button = document.getElementById("login-tab")
const report_button = document.getElementById("report-button") as HTMLButtonElement const report_button = document.getElementById("report-button") as HTMLButtonElement
const report_status = report_section.querySelector("h2") const report_status = report_section.querySelector("h2")
const logout_button = document.getElementById("logout-button")
const page_sections = new Map() const page_sections = new Map()
page_sections.set("signup", signup_section) page_sections.set("signup", signup_section)
@@ -115,10 +142,12 @@ async function initialize_popup() {
page_elements.set("signup_button", signup_button) page_elements.set("signup_button", signup_button)
page_elements.set("login_button", login_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() 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") popup_state.set_visible_section(logged_in ? "report" : "signup")
login_form.addEventListener("submit", (event) => { event.preventDefault(); submit_login_form() }) 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" popup_state.page_elements.get("report_status").textContent = "report accepted"
setTimeout(() => { window.close() }, 1000) setTimeout(() => { window.close() }, 1000)
}) })
logout_button.addEventListener("click", async (event) => {
logout()
})
} }
addEventListener("DOMContentLoaded", (event) => { addEventListener("DOMContentLoaded", (event) => {

5
src/report-slop.ts
View File

@@ -225,6 +225,11 @@ function message_listener(message: any, sender: any, send_response: Function): P
return new Promise((resolve, reject) => { resolve(response) }) return new Promise((resolve, reject) => { resolve(response) })
break break
case "logout":
localStorage.removeItem("accessToken")
return new Promise((resolve, reject) => { resolve(true) })
break
case "report": case "report":
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => { browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {