adding state() to quill, after-request error handling to login

src/Home/AuthPage/Login.js

@@ -63,7 +63,22 @@ class Login extends Shadow {
                     .border("1px solid transparent")
 
                 p("")
-                    .dynamicText("errortype", "Please enter a valid {{}}.")
+                    .state("errortype", function (type) {
+                        const messages = {
+                            email:         "Please enter a valid email.",
+                            password:      "Please enter a valid password.",
+                            emailwrong:    "Could not find an account with this email.",
+                            passwordwrong: "Incorrect password.",
+                        };
+
+                        if(messages[type]) {
+                            this.display("")
+                            this.innerText = messages[type]
+                        } else {
+                            this.display("none")
+                            this.innerText = ""
+                        }
+                    })
                     .margin("auto")
                     .marginTop(1, em)
                     .color("var(--text)")
@@ -97,13 +112,10 @@ class Login extends Shadow {
             console.log("invalid", emailValid)
             const errorType = !emailValid ? 'email' : 'password';
             
-            this.$("p")
+            this.$("p").attr({ errorType });
-            .display("")
-            .attr({ errorType });
-            
             return;
         } else {
-            this.$("p").style.display = "none"
+            this.$("p").attr({ errorType: "" });
         }
 
         const res = await fetch(`${util.HOST}/login`, {
@@ -123,6 +135,11 @@ class Login extends Shadow {
             const { error } = await res.json();
             this.errorMessage = error;
             console.error(error)
+            if(error.includes("email")) {
+                this.$("p").attr({ errorType: "emailwrong" });
+            } else {
+                this.$("p").attr({ errorType: "passwordwrong" });
+            }
         }
     }
 }

src/public/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    2.20.26 - Adding state()
     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()
@@ -692,6 +693,20 @@ HTMLElement.prototype.horizontalAlign = function (value) {
 
 /* Elements */
 
+HTMLElement.prototype.state = function(attr, cb) {
+    if (attr !== attr.toLowerCase()) {
+        throw new Error(`quill: dynamicText() attr "${attr}" must be lowercase`);
+    }
+
+    new MutationObserver(() => {
+        const value = this.getAttribute(attr);
+        cb.call(this, value)
+    })
+    .observe(this, { attributes: true, attributeFilter: [attr] });
+
+    return this
+}
+
 HTMLElement.prototype.dynamicText = function(attr, template) {
     // Set initial text if attr already has a value
     if (attr !== attr.toLowerCase()) {
@@ -702,7 +717,6 @@ HTMLElement.prototype.dynamicText = function(attr, template) {
     }
 
     new MutationObserver(() => {
-        console.log("mutateing")
         const value = this.getAttribute(attr);
         this.innerText = template.replace('{{}}', value ?? '');
     }).observe(this, { attributes: true, attributeFilter: [attr] });