allow signup and login in browseraction popup

This commit is contained in:
Jack Case
2025-11-15 20:00:15 +00:00
parent b7965bf71d
commit 9a0ae70c35
2 changed files with 32 additions and 5 deletions

View File

@@ -8,6 +8,18 @@
<title>Slop Farmer</title> <title>Slop Farmer</title>
</head> </head>
<body> <body>
<nav>
<button id="signup-select" type="button">sign up</button>
<button id="login-select" type="button">log in</button>
</nav>
<div id="onboarding" style="visibility: visible;">
<h1>Welcome, Slop Farmer!</h1>
<p>tired of ai-generated slop articles in your search results? Sign up or log in to start reporting slop articles
and have reported slop flagged in your searches!
</p>
</div>
<div id="signup" style="visibility: collapse;"> <div id="signup" style="visibility: collapse;">
<form id="signup-form"> <form id="signup-form">
<label for="email">email</label> <label for="email">email</label>

View File

@@ -1,16 +1,21 @@
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
class PopupState { class PopupState {
logged_in: boolean logged_in: boolean
visible_section: string visible_section: string
page_sections: Map<string, HTMLElement> page_sections: Map<string, HTMLElement>
constructor(logged_in: boolean, page_sections: Map<string, HTMLElement>, visible_section: string) { page_elements: Map<string, HTMLElement>
constructor(logged_in: boolean, page_sections: Map<string, HTMLElement>, visible_section: string, page_elements: Map<string, 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.setVisibleSection(visible_section) this.setVisibleSection(visible_section)
this.page_elements = page_elements
} }
setVisibleSection(section_id: string) { setVisibleSection(section_id: string) {
@@ -28,7 +33,7 @@ async function submit_login_form() {
const request = new Request(login_url, const request = new Request(login_url,
{ {
method: "POST", method: "POST",
body: new FormData(login_form) body: new FormData(popup_state.page_elements.get("login_form") as HTMLFormElement)
}) })
const response = await fetch(request) const response = await fetch(request)
@@ -52,7 +57,7 @@ async function submit_signup_form() {
const request = new Request(signup_url, { const request = new Request(signup_url, {
method: "POST", method: "POST",
body: new FormData(signup_form) body: new FormData(popup_state.page_elements.get("signup_form") as HTMLFormElement)
}) })
const response = await fetch(request) const response = await fetch(request)
@@ -72,16 +77,26 @@ function initialize_popup() {
const login_section = document.getElementById("login") const login_section = document.getElementById("login")
const report_section = document.getElementById("report") const report_section = document.getElementById("report")
const signup_button = document.getElementById("signup-select") as HTMLButtonElement
const login_button = document.getElementById("login-select") as HTMLButtonElement
const page_sections = new Map() const page_sections = new Map()
page_sections.set("signup", signup_section) page_sections.set("signup", signup_section)
page_sections.set("login", login_section) page_sections.set("login", login_section)
page_sections.set("report", report_section) page_sections.set("report", report_section)
const popup_state = new PopupState(false, page_sections, "signup") const page_elements = new Map()
page_elements.set("login_form", login_form as HTMLElement)
page_elements.set("login_status", login_status)
page_elements.set("signup_form", signup_form as HTMLElement)
popup_state = new PopupState(false, page_sections, "signup", page_elements)
login_form.addEventListener("submit", (event) => { event.preventDefault(); submit_login_form() }) login_form.addEventListener("submit", (event) => { event.preventDefault(); submit_login_form() })
signup_form.addEventListener("submit", (event) => { event.preventDefault(); submit_signup_form() }) signup_form.addEventListener("submit", (event) => { event.preventDefault(); submit_signup_form() })
signup_button.addEventListener("click", (event) => {popup_state.setVisibleSection("signup")})
login_button.addEventListener("click", (event) => {popup_state.setVisibleSection("login")})
} }
addEventListener("DOMContentLoaded", (event) => { addEventListener("DOMContentLoaded", (event) => {