From 41a9c9d269d402b40f5a06a8c903e4955d7c56fe Mon Sep 17 00:00:00 2001 From: metacryst Date: Fri, 20 Mar 2026 00:36:33 -0500 Subject: [PATCH] adding state() to quill, after-request error handling to login --- src/Home/AuthPage/Login.js | 29 +++++++++++++++++++++++------ src/public/_/code/quill.js | 16 +++++++++++++++- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/Home/AuthPage/Login.js b/src/Home/AuthPage/Login.js index dc41a86..e4c69e0 100644 --- a/src/Home/AuthPage/Login.js +++ b/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") - .display("") - .attr({ errorType }); - + this.$("p").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" }); + } } } } diff --git a/src/public/_/code/quill.js b/src/public/_/code/quill.js index 33cf069..5a05602 100644 --- a/src/public/_/code/quill.js +++ b/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] });