From 5a56dfa051fefcfaeb6935b7a5733666474c254e Mon Sep 17 00:00:00 2001 From: metacryst Date: Thu, 19 Mar 2026 07:41:18 -0500 Subject: [PATCH] improving styling, fixing bugs with profile, login error handling --- capacitor.config.json | 4 ++ src/Home/AuthPage/AuthPage.js | 7 ++-- src/Home/AuthPage/Login.js | 63 +++++++++++++++++++++++----- src/Profile/Profile.js | 11 ++--- src/_/code/shared.css | 5 ++- src/apps/Jobs/Jobs.js | 1 - src/components/AppWindowContainer.js | 12 +++--- src/components/Sidebar.js | 29 ++++++------- src/public/_/code/quill.js | 20 +++++++++ 9 files changed, 107 insertions(+), 45 deletions(-) diff --git a/capacitor.config.json b/capacitor.config.json index 532b34f..14befbe 100644 --- a/capacitor.config.json +++ b/capacitor.config.json @@ -5,6 +5,10 @@ "ios": { "allowsBackForwardNavigationGestures": true }, + "server": { + "url": "http://sam.local:5173", + "cleartext": true + }, "plugins": { "SplashScreen": { "launchAutoHide": true diff --git a/src/Home/AuthPage/AuthPage.js b/src/Home/AuthPage/AuthPage.js index a269c2c..bc082a5 100644 --- a/src/Home/AuthPage/AuthPage.js +++ b/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) { diff --git a/src/Home/AuthPage/Login.js b/src/Home/AuthPage/Login.js index 57738a0..dc41a86 100644 --- a/src/Home/AuthPage/Login.js +++ b/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"] }) }); diff --git a/src/Profile/Profile.js b/src/Profile/Profile.js index 4cb91db..bd06c5a 100644 --- a/src/Profile/Profile.js +++ b/src/Profile/Profile.js @@ -25,12 +25,13 @@ class Profile extends Shadow { render() { ZStack(() => { - p("X") - .color("var(--quillred") - .fontSize(4, em) + p("< Back") + .color("var(--darkred)") + .fontSize(1.5, em) .position("absolute") - .top(0.5, rem) - .right(2, rem) + .fontFamily("Arial") + .top(2, rem) + .left(2, rem) .zIndex(1001) .onClick(() => { $("appwindowcontainer-").closeProfile() diff --git a/src/_/code/shared.css b/src/_/code/shared.css index 227cdc0..0d262b3 100644 --- a/src/_/code/shared.css +++ b/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 { diff --git a/src/apps/Jobs/Jobs.js b/src/apps/Jobs/Jobs.js index bcb8ca1..76362cc 100644 --- a/src/apps/Jobs/Jobs.js +++ b/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])); diff --git a/src/components/AppWindowContainer.js b/src/components/AppWindowContainer.js index 9a7e533..70ecee3 100644 --- a/src/components/AppWindowContainer.js +++ b/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.rerender() + this.$("profile-").display("") } closeProfile() { - this.isProfileOpen = false - this.rerender() + this.$("profile-").display("none") } } diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 87ff8f2..90fdb9a 100644 --- a/src/components/Sidebar.js +++ b/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 () { // BUG -- Fires twice every time - if(this.innerText === "Home") { - window.navigateTo("/") - return - } else if (this.innerText === "Logout") { - $("sidebar-").close() - global.onLogout() - return - } else if (this.innerText === "Profile") { - $("appwindowcontainer-").openProfile() - $("sidebar-").close() - return + .onClick(function (done) { + if(done) { + if (this.innerText === "Logout") { + $("sidebar-").close() + global.onLogout() + return + } else if (this.innerText === "Profile") { + $("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) diff --git a/src/public/_/code/quill.js b/src/public/_/code/quill.js index bb5a14a..33cf069 100644 --- a/src/public/_/code/quill.js +++ b/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; };