improving styling, fixing bugs with profile, login error handling

capacitor.config.json

@@ -5,6 +5,10 @@
   "ios": {
     "allowsBackForwardNavigationGestures": true
   },
+  "server": {
+    "url": "http://sam.local:5173",
+    "cleartext": true
+  },
   "plugins": {
     "SplashScreen": {
       "launchAutoHide": true

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)
+                    .width(70, vw)
-                .margin("auto")
+                    .margin("auto")
-                .fontSize(0.9, rem)
+                    .fontSize(0.9, rem)
-                .paddingLeft(0, em)
+                    .paddingLeft(0, em)
-                .paddingRight(2, em)
+                    .paddingRight(2, em)
-                .marginVertical(1, em)
+                    .marginVertical(1, em)
-                .border("1px solid transparent")  
+                    .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"),
+                email: data["email"],
-                password: data.get("password")
+                password: data["password"]
             })
         });
 

src/Profile/Profile.js

@@ -25,12 +25,13 @@ class Profile extends Shadow {
 
   render() {
     ZStack(() => {
-      p("X")
+      p("< Back")
-      .color("var(--quillred")
+      .color("var(--darkred)")
-      .fontSize(4, em)
+      .fontSize(1.5, em)
       .position("absolute")
-      .top(0.5, rem)
+      .fontFamily("Arial")
-      .right(2, rem)
+      .top(2, rem)
+      .left(2, rem)
       .zIndex(1001)
       .onClick(() => {
         $("appwindowcontainer-").closeProfile()

src/_/code/shared.css

@@ -80,13 +80,14 @@
 }
 
 input::placeholder {
-        font-family: Arial;
+    font-family: Arial;
-    }
+}
 
 html,
 body {
   padding: 0;
   margin: 0;
+  font-family: Arial;
 }
 
 body {

src/apps/Jobs/Jobs.js

@@ -118,7 +118,6 @@ class Jobs extends Shadow {
     }
     
     checkForUpdates(currentJobs, fetchedJobs) {
-        console.log(currentJobs, fetchedJobs)
         if (currentJobs.length !== fetchedJobs.length) return true;
     
         const currentMap = new Map(currentJobs.map(job => [job.id, job]));

src/components/AppWindowContainer.js

@@ -15,9 +15,9 @@ class AppWindowContainer extends Shadow {
             .width(100, pct)
             .gap(0)
 
-            if (this.isProfileOpen) {
+            Profile()
-                Profile()
+                .display("none")
-            }
+                .zIndex(3)
         })
         .height(100, pct)
         .overflowY("hidden")
@@ -26,13 +26,11 @@ class AppWindowContainer extends Shadow {
     }
 
     openProfile() {
-        this.isProfileOpen = true
+        this.$("profile-").display("")
-        this.rerender()
     }
 
     closeProfile() {
-        this.isProfileOpen = false
+        this.$("profile-").display("none")
-        this.rerender()
     }
 }
 

src/components/Sidebar.js

@@ -6,31 +6,26 @@ class Sidebar extends Shadow {
         return p(text)
             .fontSize(1.5, em)
             .fontWeight("bold")
-            .fontFamily("Sedan SC")
+            .fontFamily("Arial")
             .marginLeft(2, em)
-            .fontStyle("italic")
+            .onClick(function (done) {
-            .onClick(function () { // BUG -- Fires twice every time
+                if(done) {
-                if(this.innerText === "Home") {
+                    if (this.innerText === "Logout") {
-                    window.navigateTo("/")
+                        $("sidebar-").close()
-                    return
+                        global.onLogout()
-                } else if (this.innerText === "Logout") {
+                        return
-                    $("sidebar-").close()
+                    } else if (this.innerText === "Profile") {
-                    global.onLogout()
+                        $("appwindowcontainer-").openProfile()
-                    return
+                        $("sidebar-").close()
-                } else if (this.innerText === "Profile") {
+                        return
-                    $("appwindowcontainer-").openProfile()
+                    }
-                    $("sidebar-").close()
-                    return
                 }
-                window.navigateTo(this.innerText.toLowerCase().replace(/\s+/g, ""))
             })
     }
 
     render() {
         VStack(() => {
             this.SidebarItem("Profile")
-            this.SidebarItem("Home")
-            this.SidebarItem("Map")
             this.SidebarItem("Logout")
         })
         .gap(2, em)

src/public/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    2.19.26 - Adding dynamicText()
     2.16.26 - Adding event objects to the onTouch callbacks
     1.16.26 - Moving nav event dispatch out of pushState, adding null feature to attr()
     1.5.26 - Switching verticalAlign and horizontalAlign names, adding borderVertical and Horizontal
@@ -691,6 +692,24 @@ HTMLElement.prototype.horizontalAlign = function (value) {
 
 /* Elements */
 
+HTMLElement.prototype.dynamicText = function(attr, template) {
+    // Set initial text if attr already has a value
+    if (attr !== attr.toLowerCase()) {
+        throw new Error(`quill: dynamicText() attr "${attr}" must be lowercase`);
+    }
+    if (this.getAttribute(attr)) {
+        this.innerText = template.replace('{{}}', this.getAttribute(attr));
+    }
+
+    new MutationObserver(() => {
+        console.log("mutateing")
+        const value = this.getAttribute(attr);
+        this.innerText = template.replace('{{}}', value ?? '');
+    }).observe(this, { attributes: true, attributeFilter: [attr] });
+
+    return this
+};
+
 quill.setChildren = function(el, innerContent) {
     if(typeof innerContent === "string") {
         el.innerText = innerContent
@@ -1204,5 +1223,6 @@ HTMLElement.prototype.attr = function(attributes) {
             this.setAttribute(key, value);
         }
     }
+
     return this;
 };