Profile + Edit Bio + Logout + styling

- Added handler for editing bio to handlers.js - Added openProfile() and closeProfile() buttons in AppWindowContainer (Profile page is global) - Added Logout and Profile functionality to Sidebar.js - SidebarItem(text).onClick() fires twice, unable to resolve - Adjust Login page styling - Added onLogout() to index.js (removes auth_token) - Added Profile.js, displays user's profile picture (placeholder), name, and bio. User can edit bio. - Added removeAuthToken() to util.js - Added /signout to vite config
2026-03-19 00:14:29 -04:00
parent ede464fb0d
commit 72f0518f9d
9 changed files with 185 additions and 9 deletions
--- a/src/Profile/Profile.js
+++ b/src/Profile/Profile.js
@@ -0,0 +1,120 @@
+import server from "../_/code/bridge/serverFunctions";
+
+css(`
+  profile- textarea::-webkit-scrollbar {
+        display: none;
+        width: 0px;
+        height: 0px;
+    }
+
+    profile- textarea::-webkit-scrollbar-thumb {
+        background: transparent;
+    }
+
+    profile- textarea::-webkit-scrollbar-track {
+        background: transparent;
+    }
+`)
+
+class Profile extends Shadow {
+  constructor() {
+    super()
+    this.profile = global.profile
+    this.bioText = global.profile.bio ?? ""
+  }
+
+  render() {
+    ZStack(() => {
+      p("X")
+      .color("var(--quillred")
+      .fontSize(4, em)
+      .position("absolute")
+      .top(0.5, rem)
+      .right(2, rem)
+      .zIndex(1001)
+      .onClick(() => {
+        $("appwindowcontainer-").closeProfile()
+      })
+
+      form(() => {
+        VStack(() => {
+          HStack(() => { }) // Profile Image placeholder
+            .boxSizing("border-box")
+            .height(10, em)
+            .width(10, em)
+            .paddingHorizontal(0.5, em)
+            .border("1px solid var(--accent)")
+            .borderRadius(100, pct)
+            .background("var(--darkaccent)")
+
+          h1(this.profile.first_name + " " + this.profile.last_name)
+          .color("var(--headertext")
+          .width(70, pct)
+          .textAlign("center")
+
+          h2("Bio")
+          .color("var(--headertext")
+          .margin(0)
+          .paddingVertical(0.9, em)
+          .borderTop("2px solid var(--divider)")
+          .width(70, pct)
+          .textAlign("center")
+
+          textarea(this.bioText ? this.bioText : "Tap to start typing...")
+            .attr({ name: "bioinput" })
+            .padding(1, em)
+            .width(90, pct)
+            .height(15, em)
+            .boxSizing("border-box")
+            .background("var(--searchbackground)")
+            .color("var(--darktext)")
+            .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
+            .borderRadius(12, px)
+            .fontFamily("Arial")
+            .fontSize(1.1, em)
+            .outline("none")
+            .onAppear((e) => {
+              if (this.bioText) {
+                $("profile- textarea").innerText = this.bioText
+              }
+            })
+            .lineHeight(1.2, em)
+
+            button("Save Bio")
+            .padding(1, em)
+            .fontSize(1.1, em)
+            .borderRadius(12, px)
+            .background("var(--searchbackground)")
+            .color("var(--text)")
+            .border("1px solid var(--accent)")  
+            .boxSizing("border-box")
+            .marginVertical(0.75, em)
+        })
+        .horizontalAlign("center")
+        .marginTop(5, em)
+      })
+      .onSubmit(async (e) => {
+        e.preventDefault();
+        const newBio = new FormData(e.target).get("bioinput");
+        if (newBio.trim() !== this.profile.bio.trim()) {
+          const result = await server.editBio(newBio, this.profile.id)
+          const { bio, updated_at } = result.data
+          global.profile.bio = bio
+          global.profile.updated_at = updated_at
+          this.profile = global.profile
+        }
+      })
+    })
+      .backgroundColor("var(--main)")
+      .overflowX("hidden")
+      .height(window.visualViewport.height - 20, px)
+      .boxSizing("border-box")
+      .width(100, pct)
+      .position("fixed")
+      .top(20, px)
+      .zIndex(1000)
+    // })
+  }
+}
+
+register(Profile)