allow signup and login in browseraction popup
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user