From f10ea4ac2a38d6d29544a1b3114a4b3099e8d4c3 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Sun, 28 Jul 2024 16:07:21 -0500 Subject: [PATCH] fixed captcha more and better errors --- .dist/login.js | 20 ++++++++++------ .dist/register.js | 55 ++++++++++++++++++++++++++++++++++++------- webpage/login.ts | 22 ++++++++++------- webpage/register.html | 50 ++++++++++++++++++++++++--------------- webpage/register.ts | 48 ++++++++++++++++++++++++++++++------- webpage/style.css | 53 +++++++++++++++++++++++++++++++++++++++++ webpage/themes.css | 1 + 7 files changed, 197 insertions(+), 52 deletions(-) diff --git a/.dist/login.js b/.dist/login.js index 4230c5b..05826b0 100644 --- a/.dist/login.js +++ b/.dist/login.js @@ -175,13 +175,19 @@ async function login(username, password, captcha) { console.log(response); if (response.captcha_sitekey) { const capt = document.getElementById("h-captcha"); - const capty = document.createElement("div"); - capty.classList.add("h-captcha"); - capty.setAttribute("data-sitekey", response.captcha_sitekey); - const script = document.createElement("script"); - script.src = "https://js.hcaptcha.com/1/api.js"; - capt.append(script); - capt.append(capty); + if (!capt.children.length) { + const capty = document.createElement("div"); + capty.classList.add("h-captcha"); + capty.setAttribute("data-sitekey", response.captcha_sitekey); + const script = document.createElement("script"); + script.src = "https://js.hcaptcha.com/1/api.js"; + capt.append(script); + capt.append(capty); + } + else { + eval("hcaptcha.reset()"); + } + return; } else { adduser({ serverurls: JSON.parse(localStorage.getItem("instanceinfo")), email: username, token: response.token }); diff --git a/.dist/register.js b/.dist/register.js index 810cfeb..8a8b181 100644 --- a/.dist/register.js +++ b/.dist/register.js @@ -14,7 +14,7 @@ async function registertry(e) { const password = elements[3].value; const dateofbirth = elements[5].value; const apiurl = new URL(JSON.parse(localStorage.getItem("instanceinfo")).api); - fetch(apiurl + "/auth/register", { + await fetch(apiurl + "/auth/register", { body: JSON.stringify({ date_of_birth: dateofbirth, email: email, @@ -31,18 +31,40 @@ async function registertry(e) { e.json().then(e => { if (e.captcha_sitekey) { const capt = document.getElementById("h-captcha"); - const capty = document.createElement("div"); - capty.classList.add("h-captcha"); - capty.setAttribute("data-sitekey", e.captcha_sitekey); - const script = document.createElement("script"); - script.src = "https://js.hcaptcha.com/1/api.js"; - capt.append(script); - capt.append(capty); + if (!capt.children.length) { + const capty = document.createElement("div"); + capty.classList.add("h-captcha"); + capty.setAttribute("data-sitekey", e.captcha_sitekey); + const script = document.createElement("script"); + script.src = "https://js.hcaptcha.com/1/api.js"; + capt.append(script); + capt.append(capty); + } + else { + eval("hcaptcha.reset()"); + } return; } if (!e.token) { console.log(e); - document.getElementById("wrong").textContent = e.errors[Object.keys(e.errors)[0]]._errors[0].message; + if (e.errors.consent) { + error(elements[6], e.errors.consent._errors[0].message); + } + else if (e.errors.password) { + error(elements[3], e.errors.password._errors[0].message); + } + else if (e.errors.username) { + error(elements[2], e.errors.username._errors[0].message); + } + else if (e.errors.email) { + error(elements[1], e.errors.email._errors[0].message); + } + else if (e.errors.date_of_birth) { + error(elements[5], e.errors.date_of_birth._errors[0].message); + } + else { + document.getElementById("wrong").textContent = e.errors[Object.keys(e.errors)[0]]._errors[0].message; + } } else { localStorage.setItem("token", e.token); @@ -53,6 +75,21 @@ async function registertry(e) { //document.getElementById("wrong").textContent=h; // console.log(h); } +function error(e, message) { + const p = e.parentElement; + let element = p.getElementsByClassName("suberror")[0]; + if (!element) { + const div = document.createElement("div"); + div.classList.add("suberror", "suberrora"); + p.append(div); + element = div; + } + else { + element.classList.remove("suberror"); + setTimeout(_ => { element.classList.add("suberror"); }, 100); + } + element.textContent = message; +} let TOSa = document.getElementById("TOSa"); async function tosLogic() { const apiurl = new URL(JSON.parse(localStorage.getItem("instanceinfo")).api); diff --git a/webpage/login.ts b/webpage/login.ts index 18513ec..1a4881c 100644 --- a/webpage/login.ts +++ b/webpage/login.ts @@ -173,15 +173,21 @@ async function login(username:string, password:string, captcha:string){ console.log(response); if(response.captcha_sitekey){ - const capt=document.getElementById("h-captcha"); - const capty=document.createElement("div"); - capty.classList.add("h-captcha"); - capty.setAttribute("data-sitekey", response.captcha_sitekey); - const script=document.createElement("script"); - script.src="https://js.hcaptcha.com/1/api.js"; - capt.append(script); - capt.append(capty); + const capt=document.getElementById("h-captcha"); + if(!capt.children.length){ + const capty=document.createElement("div"); + capty.classList.add("h-captcha"); + + capty.setAttribute("data-sitekey", response.captcha_sitekey); + const script=document.createElement("script"); + script.src="https://js.hcaptcha.com/1/api.js"; + capt.append(script); + capt.append(capty); + }else{ + eval("hcaptcha.reset()"); + } + return; }else{ adduser({serverurls:JSON.parse(localStorage.getItem("instanceinfo")),email:username,token:response.token}); window.location.href = '/channels/@me'; diff --git a/webpage/register.html b/webpage/register.html index dab8830..528e0ad 100644 --- a/webpage/register.html +++ b/webpage/register.html @@ -8,33 +8,45 @@

Create an account


-
-

-

+
+
+

+ +
+
+
+ +
-
-

+
+
+ +
+
+
+ +
-
-

+
+
+ +
-
-

+
+
+ +
-
-

+
+ I agree to the Terms of Service: + +
-
-

- - - I agree to the Terms of Service: -
-


+

- +
Already have an account?
diff --git a/webpage/register.ts b/webpage/register.ts index e123f1c..5b99b03 100644 --- a/webpage/register.ts +++ b/webpage/register.ts @@ -16,7 +16,7 @@ async function registertry(e){ const dateofbirth=elements[5].value; const apiurl=new URL(JSON.parse(localStorage.getItem("instanceinfo")).api) - fetch(apiurl+"/auth/register",{ + await fetch(apiurl+"/auth/register",{ body:JSON.stringify({ date_of_birth:dateofbirth, email:email, @@ -33,19 +33,35 @@ async function registertry(e){ e.json().then(e=>{ if(e.captcha_sitekey){ const capt=document.getElementById("h-captcha"); - const capty=document.createElement("div"); - capty.classList.add("h-captcha"); + if(!capt.children.length){ + const capty=document.createElement("div"); + capty.classList.add("h-captcha"); - capty.setAttribute("data-sitekey", e.captcha_sitekey); - const script=document.createElement("script"); - script.src="https://js.hcaptcha.com/1/api.js"; - capt.append(script); - capt.append(capty); + capty.setAttribute("data-sitekey", e.captcha_sitekey); + const script=document.createElement("script"); + script.src="https://js.hcaptcha.com/1/api.js"; + capt.append(script); + capt.append(capty); + }else{ + eval("hcaptcha.reset()"); + } return; } if(!e.token){ console.log(e); - document.getElementById("wrong").textContent=e.errors[Object.keys(e.errors)[0]]._errors[0].message; + if(e.errors.consent){ + error(elements[6],e.errors.consent._errors[0].message); + }else if(e.errors.password){ + error(elements[3],e.errors.password._errors[0].message); + }else if(e.errors.username){ + error(elements[2],e.errors.username._errors[0].message); + }else if(e.errors.email){ + error(elements[1],e.errors.email._errors[0].message); + }else if(e.errors.date_of_birth){ + error(elements[5],e.errors.date_of_birth._errors[0].message); + }else{ + document.getElementById("wrong").textContent=e.errors[Object.keys(e.errors)[0]]._errors[0].message; + } }else{ localStorage.setItem("token",e.token); window.location.href = '/channels/@me'; @@ -55,6 +71,20 @@ async function registertry(e){ //document.getElementById("wrong").textContent=h; // console.log(h); } +function error(e:HTMLFormElement,message:string){ + const p=e.parentElement; + let element=p.getElementsByClassName("suberror")[0] as HTMLElement; + if(!element){ + const div=document.createElement("div"); + div.classList.add("suberror","suberrora"); + p.append(div); + element=div; + }else{ + element.classList.remove("suberror"); + setTimeout(_=>{element.classList.add("suberror")},100); + } + element.textContent=message; +} let TOSa=document.getElementById("TOSa"); async function tosLogic(){ const apiurl=new URL(JSON.parse(localStorage.getItem("instanceinfo")).api) diff --git a/webpage/style.css b/webpage/style.css index 274ac46..60d63c1 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -851,6 +851,10 @@ select{ border-style: solid; border-color: var(--login-border); text-align: center; + height: 90%; + display: flex; + flex-direction: column; + justify-content: flex-start; } #logindiv input { @@ -1458,3 +1462,52 @@ span { .scroller{ padding-bottom: .2in; } +.suberror{ + animation: goout 6s forwards; +} +.suberrora{ + background:var(--channel-hover); + border-radius:.1in; + position:absolute; + border:solid var(--primary-text) .02in; + color:color-mix(in hsl,var(--yellow),var(--red)); + font-weight:bold; + opacity:0; + cursor:default; + /* height: .4in; */ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + padding: .075in; +} +@keyframes goout { + 0%{ + opacity:0; + } + 5%{ + opacity:1; + } + 90%{ + opacity:1; + } + 100%{ + opacity:0; + } +} + +#register{ + display:flex; + flex-direction: column; + align-items: center; + flex-grow: 1; + justify-content: space-between; +} +.dontgrow{ + flex-grow:0; + width: 1.6in; + text-align: center; +} +form div{ + width:100%; +} \ No newline at end of file diff --git a/webpage/themes.css b/webpage/themes.css index aaa452f..d4e5e25 100644 --- a/webpage/themes.css +++ b/webpage/themes.css @@ -3,6 +3,7 @@ /* Default value */ --red: red; --green: green; + --yellow:yellow; } .Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/ color-scheme: dark;