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

signup/login tabs are reactive

Browse Source
This commit is contained in:
Jack Case
2025-11-21 14:07:11 +00:00
parent 39fb3320c9
commit e025f3995c
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/action_popup.html
View File

@@ -22,8 +22,8 @@
<div class="section"> <div class="section">
<nav class="tabs is-centered"> <nav class="tabs is-centered">
<ul> <ul>
<li class="is-active"><a>sign up</a></li> <li id="signup-tab"><a>sign up</a></li>
<li><a>log in</a></li> <li id="login-tab"><a>log in</a></li>
</ul> </ul>
</nav> </nav>

20
src/browser-action.ts
View File

@@ -14,14 +14,23 @@ class PopupState {
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.set_visible_section(logged_in ? "report" : "signup")
this.page_elements = page_elements this.page_elements = page_elements
} }
set_visible_section(section_id: string) { set_visible_section(section_id: string) {
this.visible_section = section_id this.visible_section = section_id
switch (section_id) {
case "signup":
this.page_elements.get("signup_button").setAttribute("class", "is-active")
this.page_elements.get("login_button").setAttribute("class", "")
break
case "login":
this.page_elements.get("login_button").setAttribute("class", "is-active")
this.page_elements.get("signup_button").setAttribute("class", "")
break
}
this.page_sections.forEach((element, id) => { this.page_sections.forEach((element, id) => {
element.style.visibility = id === section_id ? "visible" : "collapse" element.style.display = id === section_id ? "block" : "none"
}) })
} }
} }
@@ -85,9 +94,9 @@ async 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 signup_button = document.getElementById("signup-tab")
const signup_status = signup_section.querySelector("h2") const signup_status = signup_section.querySelector("h2")
const login_button = document.getElementById("login-select") as HTMLButtonElement 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")
@@ -103,11 +112,14 @@ async function initialize_popup() {
page_elements.set("signup_status", signup_status) page_elements.set("signup_status", signup_status)
page_elements.set("report_button", report_button) page_elements.set("report_button", report_button)
page_elements.set("report_status", report_status) page_elements.set("report_status", report_status)
page_elements.set("signup_button", signup_button)
page_elements.set("login_button", login_button)
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)
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() })
signup_form.addEventListener("submit", (event) => { event.preventDefault(); submit_signup_form() }) signup_form.addEventListener("submit", (event) => { event.preventDefault(); submit_signup_form() })