fixed captcha more and better errors

.dist/login.js

@@ -175,6 +175,7 @@ async function login(username, password, captcha) {
             console.log(response);
             if (response.captcha_sitekey) {
                 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);
@@ -183,6 +184,11 @@ async function login(username, password, captcha) {
                     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';

.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,6 +31,7 @@ async function registertry(e) {
         e.json().then(e => {
             if (e.captcha_sitekey) {
                 const capt = document.getElementById("h-captcha");
+                if (!capt.children.length) {
                     const capty = document.createElement("div");
                     capty.classList.add("h-captcha");
                     capty.setAttribute("data-sitekey", e.captcha_sitekey);
@@ -38,12 +39,33 @@ async function registertry(e) {
                     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);
+                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';
@@ -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);

webpage/login.ts

@@ -173,7 +173,9 @@ async function login(username:string, password:string, captcha:string){
             console.log(response);
 
             if(response.captcha_sitekey){
+
                 const capt=document.getElementById("h-captcha");
+                if(!capt.children.length){
                     const capty=document.createElement("div");
                     capty.classList.add("h-captcha");
 
@@ -182,6 +184,10 @@ async function login(username:string, password:string, captcha:string){
                     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';

webpage/register.html

@@ -8,33 +8,45 @@
 <div id="logindiv">
 <h1>Create an account</h1><br>
 <form id="register" submit="registertry(e)">
+    <div>
         <label for="instance"><b>Instance:</b></label><br>
         <p id="verify"></p>
-    <input type="text" placeholder="Instance URL" name="instance" value="https://spacebar.chat/" id="instancein" required><br><br>
+        <input type="text" placeholder="Instance URL" name="instance" value="https://spacebar.chat/" id="instancein" required>
-
+    </div>
+    <div>
         <label for="uname"><b>Email:</b></label><br>
-    <input type="text" placeholder="Enter Email" name="email" required><br><br>
+        <input type="text" placeholder="Enter Email" name="email" required>
+    </div>
 
+    <div>
         <label for="uname"><b>Username:</b></label><br>
-    <input type="text" placeholder="Enter Username" name="uname" required><br><br>
+        <input type="text" placeholder="Enter Username" name="uname" required>
-
+    </div>
+    <div>
         <label for="psw"><b>Password:</b></label><br>
-    <input type="password" placeholder="Enter Password" name="psw" required><br><br>
+        <input type="password" placeholder="Enter Password" name="psw" required>
+    </div>
 
+    <div>
         <label for="psw2"><b>Enter password again:</b></label><br>
-    <input type="password" placeholder="Enter Password Again" name="psw2" required><br><br>
+        <input type="password" placeholder="Enter Password Again" name="psw2" required>
+    </div>
 
+    <div>
         <label for="date"><b>Date of birth:</b></label><br>
-    <input type="date" id="start" name="date"/><br><br>
+        <input type="date" id="start" name="date"/>
-
+    </div>
 
+    <div>
         <b id="TOSbox">I agree to the <a href="" id="TOSa">Terms of Service</a>:</b>
-    <input type="checkbox" id="TOS" name="TOS"/><br>
+        <input type="checkbox" id="TOS" name="TOS"/>
-    <p class="wrongred" id="wrong"></p><br>
+    </div>
+
+    <p class="wrongred" id="wrong"></p>
     <div id="h-captcha">
 
     </div>
-    <button type="submit">Create account</button>
+    <button type="submit" class="dontgrow">Create account</button>
 </form>
 <a href="/login.html">Already have an account?</a>
 </div>

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,6 +33,7 @@ async function registertry(e){
         e.json().then(e=>{
             if(e.captcha_sitekey){
                 const capt=document.getElementById("h-captcha");
+                if(!capt.children.length){
                     const capty=document.createElement("div");
                     capty.classList.add("h-captcha");
 
@@ -41,11 +42,26 @@ async function registertry(e){
                     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);
+                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)

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%;
+}

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;