Signup/Login + styling adjustments

- Modified SearchBar styling - Modified TopBar to display blank circle if the user has no networks (previously missing image icon) - Refactored Login into AuthPage.js - AuthPage contains a tab selector for switching between Signup and Login - Both Login/Signup send the request and either receive an auth_token or an error message - If auth_token, user will be logged in as usual, in both cases - Signup validates user input before sending request - Added /signup target in vite config file
2026-03-18 17:36:03 -04:00
parent d1e4814593
commit 2082e0c7bc
8 changed files with 382 additions and 99 deletions
--- a/src/Home/AuthPage/AuthPage.js
+++ b/src/Home/AuthPage/AuthPage.js
@@ -0,0 +1,83 @@
+import { Preferences } from '@capacitor/preferences';
+import util from "../../util.js"
+import "./Login.js";
+import "./Signup.js"
+
+class AuthPage extends Shadow {
+    inputStyles(el) {
+        return el
+            .background("var(--main)")
+            .color("var(--text)")
+            .border("1px solid var(--accent)")
+            .fontSize(0.9, rem)
+            .backgroundColor("var(--searchbackground)")
+            .borderRadius(12, px)
+            .outline("none")
+            .onTouch((start) => {
+                if(start) {
+                    this.style.backgroundColor = "var(--accent)"
+                } else {
+                    this.style.backgroundColor = "var(--searchbackground)"
+                }
+            })
+    }
+
+    selectedPage = 2 // 1 == login, 2 == signup
+
+    render() {
+        VStack(() => {
+            img(window.matchMedia('(prefers-color-scheme: dark)').matches ? "/_/icons/columnwhite.svg" : "/_/icons/logo.svg", window.isMobile() ? "5vmax" : "3vmax")
+                .marginTop(5, em)
+                .marginLeft(2, em)
+                .onClick((done) => {
+                    window.navigateTo("/")
+                })
+
+                HStack(() => {
+                    p("Login")
+                    .fontWeight(this.selectedPage === 1 ? "bold" : "normal")
+                    .padding(0.75, em)
+                    .borderRadius(12, px)
+                    .background(this.selectedPage === 1 ? "var(--darkaccent)" : "transparent")
+                    .onTap(() => {
+                        this.selectedPage = 1;
+                        this.rerender();
+                    })
+
+                    p("Signup")
+                    .fontWeight(this.selectedPage === 2 ? "bold" : "normal")
+                    .padding(0.75, em)
+                    .borderRadius(12, px)
+                    .background(this.selectedPage === 2 ? "var(--darkaccent)" : "transparent")
+                    .onTap(() => {
+                        this.selectedPage = 2;
+                        this.rerender();
+                    })
+                })
+                .padding(0.25, em)
+                .borderRadius(12, px)
+                .background("var(--accent)")
+                .color("var(--text)")
+                .horizontalAlign("center")
+                .margin("auto")
+                .marginTop(1, em)
+                .marginBottom(0, em)
+                .gap(0.5, em)
+
+                switch (this.selectedPage) {
+                    case 1:
+                        Login()
+                        break;
+                    case 2:
+                        Signup()
+                        break;
+                }
+
+        })
+        .width(100, vw)
+        .height(100, vh)
+        .margin(0)
+    }
+}
+
+register(AuthPage)