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/Login.js
+++ b/src/Home/AuthPage/Login.js
@@ -0,0 +1,87 @@
+import { Preferences } from '@capacitor/preferences';
+import util from "../../util.js"
+
+class Login 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)"
+                }
+            })
+    }
+
+    render() {
+        form(() => {
+            VStack(() => {
+                input("Email", "70vw")
+                    .attr({ name: "email", type: "email" })
+                    .margin("auto")
+                    .marginVertical(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                input("Password", "70vw")
+                    .attr({ name: "password", type: "password" })
+                    .margin("auto")
+                    .marginVertical(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                HStack(() => {
+                    button("==>")
+                        .padding(1, em)
+                        .fontSize(0.9, rem)
+                        .borderRadius(12, px)
+                        .background("var(--searchbackground)")
+                        .color("var(--text)")
+                        .border("1px solid var(--accent)")  
+                        .boxSizing("border-box")
+                })
+                .width(70, vw)
+                .margin("auto")
+                .fontSize(0.9, rem)
+                .paddingLeft(0, em)
+                .paddingRight(2, em)
+                .marginVertical(1, em)
+                .border("1px solid transparent")  
+            })
+        })
+        .height(100, pct)
+        .onSubmit(async (e) => {
+            e.preventDefault();
+            const data = new FormData(e.target);
+            await this.requestLogin(data);
+        })
+    }
+
+    async requestLogin(data) {
+        const res = await fetch(`${util.HOST}/login`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "X-Client": "mobile" },
+            body: JSON.stringify({
+                email: data.get("email"),
+                password: data.get("password")
+            })
+        });
+
+        if (res.ok) {
+            const { token } = await res.json();
+            await Preferences.set({ key: 'auth_token', value: token });
+            global.onLogin();
+        } else {
+            const { error } = await res.json();
+            this.errorMessage = error;
+            console.error(error)
+        }
+    }
+}
+
+register(Login)