Merge branch 'main' of https://git.sun.museum/sam/ForumMobile

src/Home/AuthPage/Signup.js

@@ -103,7 +103,6 @@ class Signup extends Shadow {
             e.preventDefault();
             const data = new FormData(e.target);
             if (this.verifyInput(data)) {
-                this.errorMessage = "";
                 await this.requestSignup(data);
             } else {
                 console.log(this.errorMessage)
@@ -111,6 +110,11 @@ class Signup extends Shadow {
         })
     }
 
+    /*
+    *******************************************************************************
+    NO LONGER WORKS - SEE AUTH ENDPOINT IN SERVER
+    *******************************************************************************
+    */
     async requestSignup(data) {
         const networkId = this.attr("networkid");
         const res = await fetch(`${util.HOST}/auth/signup`, {

src/Home/Login.js

@@ -0,0 +1,61 @@
+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(--accentdark)")
+            .borderRadius(12, px)
+            .outline("none")
+            .onTouch((start) => {
+                if(start) {
+                    this.style.backgroundColor = "var(--accent)"
+                } else {
+                    this.style.backgroundColor = "var(--accentdark)"
+                }
+            })
+    }
+
+    render() {
+        ZStack(() => {
+            img(window.matchMedia('(prefers-color-scheme: dark)') ? "/_/icons/columnwhite.svg" : "/_/icons/logo.svg", window.isMobile() ? "5vmax" : "3vmax")
+                .position("absolute")
+                .top(5, em)
+                .left(2, em)
+                .onClick((done) => {
+                    window.navigateTo("/")
+                })
+
+            form(() => {
+                input("Email", "70vw")
+                    .attr({name: "email", type: "email"})
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                input("Password", "70vw")
+                    .attr({name: "password", type: "password"})
+                    .margin(1, em)
+                    .padding(1, em)
+                    .styles(this.inputStyles)
+                button("==>")
+                    .margin(1, em)                    
+                    .padding(1, em)
+                    .fontSize(0.9, rem)
+                    .borderRadius(12, px)
+                    .background("var(--accent)")
+                    .color("var(--text)")
+                    .border("1px solid var(--accent)")
+            })
+            .attr({action: "/login", method: "POST"})
+            .x(50, vw).y(50, vh)
+            .center()
+        })
+        .background("var(--main)")
+        .width(100, vw)
+        .height(100, pct)
+        .margin(0)
+    }
+}
+
+register(Login)

src/_/code/shared.css

@@ -15,6 +15,7 @@
 
     --sidebar: #698b6f;
     --divider: #523636;
+    --lightDivider: #52363681;
     --darkbrown: #3f0808;
     --darkgrey: #5c4646;
 
@@ -55,6 +56,7 @@
 
     --sidebar: #240609;
     --divider: #523636;
+    --lightDivider: #52363680;
     --darktext: #62473E;
     --headertext: #ffd8bb;
     --darkred: #6b2c1d;

src/apps/People/People.js

@@ -0,0 +1,105 @@
+css(`
+    people- {
+        font-family: 'Arial';
+    }
+
+    people- h1 {
+      font-family: 'Bona';
+    }
+
+    people- p {
+        color: var(--accent);
+    }
+
+    people- p b {
+        color: var(--darkbrown);
+    }
+`)
+
+class People extends Shadow {
+    people = "";
+
+    constructor() {
+        super()
+        this.people = global.currentNetwork.data.members;
+    }
+
+    render() {
+        VStack(() => {
+            h1("People")
+                .color("rgb(158 136 105)")
+                .textAlign("center")
+
+            if (this.people == "") {
+                LoadingCircle()
+            } else if (this.people.length > 0) {
+                for (let i = 0; i < this.people.length; i++) {
+                    HStack(() => {
+                        HStack(() => { })
+                            .boxSizing("border-box")
+                            .height(3.5, em)
+                            .width(3.5, em)
+                            .padding(0.5, em)
+                            .border("1px solid var(--accent)")
+                            .borderRadius(100, pct)
+                            .background("black")
+
+                        VStack(() => {
+                            h3(this.people[i].firstName + " " + this.people[i].lastName)
+                                .color("var(--brown)")
+                                .fontSize(1.2, em)
+                                .fontWeight("bold")
+                                .marginVertical(0, em)
+                            p("<b>Member since: </b>" + " " + this.convertDate(this.people[i].created))
+                        })
+                        .verticalAlign("center")
+                        .gap(0.5, em)
+                    })
+                    .height(3.5, em)
+                    .padding(0.75, em)
+                    .gap(1, em)
+                }
+            } else {
+                h2("No Members")
+                    .color("var(--brown)")
+                    .fontWeight("bold")
+                    .marginTop(7.5, em)
+                    .marginBottom(0.5, em)
+                    .textAlign("center")
+                p("Invite people to this network!")
+                    .textAlign("center")
+                    .color("var(--darkbrown)")
+            }
+        })
+        .position("relative")
+        .boxSizing("border-box")
+        .paddingVertical(1, em)
+        .height(100, pct)
+        .width(100, pct)
+    }
+
+    convertDate(rawDate) {
+        const date = rawDate.split("-", 1)[0]; // "01.31.2026
+        const [mm, dd, yyyy] = date.split(".").map(Number);
+
+        const months = [
+            "January", "February", "March", "April", "May", "June",
+            "July", "August", "September", "October", "November", "December"
+        ];
+
+        const ordinal = (n) => {
+            const mod100 = n % 100;
+            if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
+            switch (n % 10) {
+                case 1: return `${n}st`;
+                case 2: return `${n}nd`;
+                case 3: return `${n}rd`;
+                default: return `${n}th`;
+            }
+        };
+
+        return `${months[mm - 1]} ${ordinal(dd)}, ${yyyy}`;
+    }
+}
+
+register(People)

src/components/AppMenu.js

@@ -7,7 +7,7 @@ class AppMenu extends Shadow {
     darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
 
     getImageURL(appName) {
-        let imgUrl = `${util.HOST}/db/apps/${appName}/icons/${appName}`
+        let imgUrl = `${util.HOST}/apps/${appName}/icons/${appName}`
         if(this.darkMode) {
             imgUrl += "light"
         }

src/index.js

@@ -32,14 +32,6 @@ let Global = class {
         window.dispatchEvent(event)
     }
 
-    async fetchAppData() {
-        let personalSpace = this.currentNetwork === this.profile
-        if (personalSpace) { return {} }
-        let appData = await fetch(`${util.HOST}/api/${personalSpace ? "my" : "org"}data/` + this.currentNetwork.id, {method: "GET"})
-        let json = await appData.json()
-        return json
-    }
-
     onNavigate = async () => {
         if(!global.profile) return
         let selectedNetwork = this.networkFromPath()
@@ -72,10 +64,6 @@ let Global = class {
             window.dispatchEvent(event)
         }
 
-        if(!this.currentNetwork?.data) {
-            this.currentNetwork.data = await this.fetchAppData()
-        }
-
         if(appChanged && !networkChanged) {
             const event = new CustomEvent('appchange', {
                 detail: { name: this.currentApp() }

src/public/_/code/quill.js

@@ -1,10 +1,15 @@
 /*
     Sam Russell
     Captured Sun
-    2.24.26 - Allowing state() to watch other elements
-    2.21.26 - Making state() be called on initial definition, fixing fontSize so it works with clamp(), other strings
-    2.20.26 - Adding state()
-    2.19.26 - Adding dynamicText()
+    3.29.26 - Fix attr() bug with empty or null values
+    3.28.26 - Stopping state() from duplicating on rerender()
+    3.27.26 - Adding quill router, removing dynamicText(), removing horizontal and verticalAlign() checks
+    3.24.26 - Allowing state() to watch other elements
+    3.21.26 - Making state() be called on initial definition, fixing fontSize so it works with clamp(), other strings
+    3.20.26 - Adding state()
+    3.19.26 - Adding dynamicText()
+    3.4.26 - Making horizontalAlign() and verticalAlign() methods of checking for stacks more robust
+    2.27.26 - Adding parentShadow() function
     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
@@ -182,6 +187,63 @@ Object.defineProperty(Array.prototype, 'last', {
 window.quill = {
     rendering: [],
     lastState: null,
+    router: null,
+    storedState: new WeakMap(),
+
+    router: class {
+        routes = []
+
+        route(route, cb) {
+            this.routes.push({route: route, cb: cb})
+        }
+
+        async findMatch() {
+            let matched;
+            for (const route of this.routes) {
+                const [match, params] = this.matchPath(route.route, window.location.pathname)
+                if (match) {
+                    await route.cb(params)
+                    return;
+                }
+            }
+            if(!matched) throw new Error("Quill: couldn't match route!")
+            return null
+        }
+
+        matchPath(pattern, pathname) {
+            const patternParts = pattern.split('/').filter(Boolean)
+            const pathParts = pathname.split('/').filter(Boolean)
+
+            if (patternParts.length !== pathParts.length) return [false]
+
+            const params = []
+
+            for (let i = 0; i < patternParts.length; i++) {
+                if (patternParts[i].startsWith(':')) {
+                    params.push(pathParts[i])
+                } else if (patternParts[i] !== pathParts[i]) {
+                    return [false]
+                }
+            }
+
+            return [true, params]
+        }
+    },
+
+    init: async (home, router) => {
+        if(router) {
+            quill.router = router
+            window.addEventListener("navigate", () => {
+                if(quill.router) {
+                    router.findMatch()
+                }
+            })
+            if(quill.router) {
+                await router.findMatch()
+            }
+        }
+        home()
+    },
 
     render: (el) => {
         if(el instanceof Shadow) {
@@ -202,7 +264,19 @@ window.quill = {
         quill.rendering.pop(el)
     },
 
+    removeState: (el) => {
+        let state = quill.storedState.get(el)
+        if(state) {
+            state.forEach(observer => { 
+                observer.disconnect()
+            })
+        }
+        quill.storedState.delete(el)
+    },
+
     rerender: (el) => {
+        quill.removeState(el)
+
         Array.from(el.attributes).forEach(attr => el.removeAttribute(attr.name));
         el.innerHTML = ""
         el.removeAllListeners()
@@ -315,6 +389,17 @@ HTMLElement.prototype.rerender = function() {
     quill.rerender(this)
 }
 
+HTMLElement.prototype.parentShadow = function(selector) {
+    let el = this
+    while(el !== document.body) {
+        el = el.parentElement
+        if(el instanceof Shadow) {
+            return el
+        }
+    }
+    return null
+}
+
 /* Styling */
 
 window.pct = "%"
@@ -672,10 +757,6 @@ HTMLElement.prototype.centerY = function () {
 
 HTMLElement.prototype.verticalAlign = function (value) {
     const direction = getComputedStyle(this).flexDirection;
-    if(!direction) {
-        throw new Error("verticalAlign can be only be used on HStacks or VStacks!")
-    }
-
     if (direction === "column" || direction === "column-reverse") {
         this.style.justifyContent = value;
     } else {
@@ -686,10 +767,6 @@ HTMLElement.prototype.verticalAlign = function (value) {
 
 HTMLElement.prototype.horizontalAlign = function (value) {
     const direction = getComputedStyle(this).flexDirection;
-    if(!direction) {
-        throw new Error("horizontalAlign can be only be used on HStacks or VStacks!")
-    }
-
     if (direction === "column" || direction === "column-reverse") {
         this.style.alignItems = value;
     } else {
@@ -701,54 +778,64 @@ HTMLElement.prototype.horizontalAlign = function (value) {
 
 /* Elements */
 
-HTMLElement.prototype.state = function(arg1, arg2, arg3) {
+/*
+    STATE RULES:
+        reset on rerender()
+        elements not connected to the dom have their state listeners removed
+*/
+
+HTMLElement.prototype.state = function(arg1, arg2, arg3, arg4) {
     let el;
     let attr;
     let cb;
+    let runImmediately;
 
-    if(arg3) {
-        el = arg1
-        attr = arg2
-        cb = arg3
+    // element, attr, callback
+    // element, attr, callback, bool
+    // attr, callback
+    // attr, callback, bool
+
+    if(arg1 instanceof Element) {
+        if(typeof arg4 === 'boolean') {
+            el = arg1; attr = arg2; cb = arg3; runImmediately = arg4;
+        } else {
+            el = arg1; attr = arg2; cb = arg3; runImmediately = true;
+        }
     } else {
-        el = this
-        attr = arg1
-        cb = arg2
+        if(typeof arg3 === 'boolean') {
+            el = this; attr = arg1; cb = arg2; runImmediately = arg3
+        } else {
+            el = this; attr = arg1; cb = arg2; runImmediately = true
+        }
     }
 
     if (attr !== attr.toLowerCase()) {
-        throw new Error(`quill: dynamicText() attr "${attr}" must be lowercase`);
+        throw new Error(`quill: state() attr "${attr}" must be lowercase`);
     }
 
     let handler = () => {
         const value = el.getAttribute(attr);
-        cb.call(this, value)
+        if(!this.isConnected) {
+            quill.removeState(this)
+        } else {
+            cb.call(this, value)
+        }
     }
 
-    new MutationObserver(handler)
-        .observe(el, { attributes: true, attributeFilter: [attr] });
+    let observer = new MutationObserver(handler)
+    observer.observe(el, { attributes: true, attributeFilter: [attr] })
 
-    handler()
+    if(!quill.storedState.get(this)) {
+        quill.storedState.set(this, [])
+    }
+    quill.storedState.get(this).push(observer)
+
+    if(runImmediately) {
+        handler()
+    }
     return this
 }
 
-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(() => {
-        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
@@ -1257,7 +1344,7 @@ HTMLElement.prototype.attr = function(arg1, arg2) {
         }
 
         return this;
-    } else if(typeof arg1 === "string" && arg2) {
+    } else if(typeof arg1 === "string" && (arg2 || arg2 === "" || arg2 === null || arg2 === 0)) {
         this.setAttribute(arg1, arg2)
         return this
     } else if(typeof arg1 === "string") {

vite.config.ts

@@ -35,6 +35,10 @@ export default defineConfig({
       "/auth": {
         target: "http://localhost:10002",
         changeOrigin: true
+      },
+      "/@server": {
+        target: "http://localhost:10002",
+        changeOrigin: true
       }
     },
     host: true,