improving styling, fixing bugs with profile, login error handling

src/Home/AuthPage/AuthPage.js

@@ -33,7 +33,7 @@ class AuthPage extends Shadow {
                     window.navigateTo("/")
                 })
 
-                HStack(() => {
+            HStack(() => {
                     p("Login")
                     .fontWeight(this.selectedPage === 1 ? "bold" : "normal")
                     .padding(0.75, em)
@@ -44,7 +44,7 @@ class AuthPage extends Shadow {
                         this.rerender();
                     })
 
-                    p("Signup")
+                    p("Sign Up")
                     .fontWeight(this.selectedPage === 2 ? "bold" : "normal")
                     .padding(0.75, em)
                     .borderRadius(12, px)
@@ -54,6 +54,7 @@ class AuthPage extends Shadow {
                         this.rerender();
                     })
                 })
+                .fontFamily("Arial")
                 .padding(0.25, em)
                 .borderRadius(12, px)
                 .background("var(--accent)")
@@ -61,7 +62,7 @@ class AuthPage extends Shadow {
                 .horizontalAlign("center")
                 .margin("auto")
                 .marginTop(7.5, em)
-                .marginBottom(0, em)
+                .marginBottom(2, em)
                 .gap(0.5, em)
 
                 switch (this.selectedPage) {

src/Home/AuthPage/Login.js

@@ -29,12 +29,14 @@ class Login extends Shadow {
                     .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)
@@ -44,31 +46,72 @@ class Login extends Shadow {
                         .color("var(--text)")
                         .border("1px solid var(--accent)")  
                         .boxSizing("border-box")
+                        .onTouch(function (start) {
+                            if (start) {
+                                this.style.backgroundColor = "var(--accent)"
+                            } else {
+                                this.style.backgroundColor = "var(--searchbackground)"
+                            }
+                        })
                 })
-                .width(70, vw)
-                .margin("auto")
-                .fontSize(0.9, rem)
-                .paddingLeft(0, em)
-                .paddingRight(2, em)
-                .marginVertical(1, em)
-                .border("1px solid transparent")  
+                    .width(70, vw)
+                    .margin("auto")
+                    .fontSize(0.9, rem)
+                    .paddingLeft(0, em)
+                    .paddingRight(2, em)
+                    .marginVertical(1, em)
+                    .border("1px solid transparent")
+
+                p("")
+                    .dynamicText("errortype", "Please enter a valid {{}}.")
+                    .margin("auto")
+                    .marginTop(1, em)
+                    .color("var(--text)")
+                    .fontFamily("Arial")
+                    .opacity(.7)
+                    .padding(0.5, em)
+                    .backgroundColor("var(--darkred)")
+                    .display("none")
+
             })
         })
         .height(100, pct)
         .onSubmit(async (e) => {
             e.preventDefault();
-            const data = new FormData(e.target);
+            const data = {
+                email: e.target.$('[name="email"]').value,
+                password: e.target.$('[name="password"]').value,
+            };
             await this.requestLogin(data);
         })
     }
 
+    isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    isValidPassword = (password) => password.length >= 7;
+
     async requestLogin(data) {
+        const emailValid = this.isValidEmail(data.email.trim() || "");
+        const passValid = this.isValidPassword(data.password.trim() || "");
+
+        if (!emailValid || !passValid) {
+            console.log("invalid", emailValid)
+            const errorType = !emailValid ? 'email' : 'password';
+            
+            this.$("p")
+            .display("")
+            .attr({ errorType });
+            
+            return;
+        } else {
+            this.$("p").style.display = "none"
+        }
+
         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")
+                email: data["email"],
+                password: data["password"]
             })
         });