css/base.css

@@ -181,18 +181,6 @@ span.sm:not(.heading) {
     flex-direction: column;
 }
 
-.flex-form {
-    display: flex;
-    flex-direction: column;
-}
-
-@media screen and (min-width: 768px) {
-    .flex-form {
-        flex: 1;
-        margin: 0.5rem;
-    }
-}
-
 @media screen and (max-width: 400px) {
     .row {
         flex-direction: column;
@@ -320,7 +308,7 @@ sup.\~critical, .text-critical {
     padding-left: 0px;
 }
 
-.block {
+.block { 
     display: block;
 }
 

html/form.html

@@ -81,19 +81,19 @@
                     </div>
                 </div>
             </span>
-        </div>
+        </div>    
         <div id="notification-box"></div>
         <div class="page-container">
             <div class="card dark:~d_neutral @low">
                 <div class="row baseline">
-                    <span class="flex-form heading mr-5">
+                    <span class="col heading">
                         {{ if .passwordReset }}
                         {{ .strings.passwordReset }}
                         {{ else }}
                         {{ .strings.createAccountHeader }}
                         {{ end }}
                     </span>
-                    <span class="flex-form subheading">
+                    <span class="col subheading"> 
                         {{ if .passwordReset }}
                         {{ .strings.enterYourPassword }}
                         {{ else }}
@@ -102,7 +102,7 @@
                     </span>
                 </div>
                 <div class="row">
-                    <div class="flex-form">
+                    <div class="col">
                         {{ if .userExpiry }}
                         <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
                         {{ end }}
@@ -112,35 +112,35 @@
                                 {{ .strings.username }}
                                 <input type="text" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}">
                             </label>
-
+                            
                             <label class="label supra" for="create-email">{{ .strings.emailAddress }}</label>
                             <input type="email" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}">
                             {{ if .telegramEnabled }}
-                            <span class="button ~info @low full-width center mb-4" id="link-telegram">{{ .strings.linkTelegram }} {{ if .telegramRequired }}({{ .strings.required }}){{ end }}</span>
+                            <span class="button ~info @low full-width center mb-4" id="link-telegram">{{ .strings.linkTelegram }}</span>
                             {{ end }}
                             {{ if .discordEnabled }}
-                            <span class="button ~info @low full-width center mb-4" id="link-discord">{{ .strings.linkDiscord }} {{ if .discordRequired }}({{ .strings.required }}){{ end }}</span>
+                            <span class="button ~info @low full-width center mb-4" id="link-discord">{{ .strings.linkDiscord }}</span>
                             {{ end }}
                             {{ if .matrixEnabled }}
-                            <span class="button ~info @low full-width center mb-4" id="link-matrix">{{ .strings.linkMatrix }} {{ if .matrixRequired }}({{ .strings.required }}){{ end }}</span>
+                            <span class="button ~info @low full-width center mb-4" id="link-matrix">{{ .strings.linkMatrix }}</span>
                             {{ end }}
                             {{ if or (.telegramEnabled) (or .discordEnabled .matrixEnabled) }}
                             <div id="contact-via" class="unfocused">
-                                <label class="row switch pb-4 unfocused">
-                                    <input type="radio" name="contact-via" value="email" id="contact-via-email" class="mr-2"><span>Contact through Email</span>
+                                <label class="row switch pb-4">
+                                    <input type="radio" name="contact-via" value="email" class="mr-2"><span>Contact through Email</span>
                                 </label>
                                 {{ if .telegramEnabled }}
-                                <label class="row switch pb-4 unfocused">
+                                <label class="row switch pb-4">
                                     <input type="radio" name="contact-via" value="telegram" id="contact-via-telegram" class="mr-2"><span>Contact through Telegram</span>
                                 </label>
                                 {{ end }}
                                 {{ if .discordEnabled }}
-                                <label class="row switch pb-4 unfocused">
+                                <label class="row switch pb-4">
                                     <input type="radio" name="contact-via" value="discord" id="contact-via-discord" class="mr-2"><span>Contact through Discord</span>
                                 </label>
                                 {{ end }}
                                 {{ if .matrixEnabled }}
-                                <label class="row switch pb-4 unfocused">
+                                <label class="row switch pb-4">
                                     <input type="radio" name="contact-via" value="matrix" id="contact-via-matrix" class="mr-2"><span>Contact through Matrix</span>
                                 </label>
                                 {{ end }}
@@ -149,7 +149,7 @@
                             {{ end }}
                             <label class="label supra" for="create-password">{{ .strings.password }}</label>
                             <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}">
-
+                            
                             <label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label>
                             <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}">
                             <label>

lang/common/en-us.json

@@ -23,7 +23,6 @@
         "linkMatrix": "Link Matrix",
         "contactDiscord": "Contact through Discord",
         "theme": "Theme",
-        "refresh": "Refresh",
-        "required": "Required"
+        "refresh": "Refresh"
     }
 }

lang/form/en-us.json

@@ -31,8 +31,6 @@
         "errorUnknown": "Unknown error.",
         "errorNoEmail": "Email required.",
         "errorCaptcha": "Captcha incorrect.",
-        "errorPassword": "Check password requirements.",
-        "errorNoMatch": "Passwords don't match.",
         "verified": "Account verified."
     },
     "validationStrings": {

ts/form.ts

@@ -70,11 +70,8 @@ if (window.telegramEnabled) {
                         setTimeout(window.telegramModal.close, 2000);
                         telegramButton.classList.add("unfocused");
                         document.getElementById("contact-via").classList.remove("unfocused");
-                        document.getElementById("contact-via-email").parentElement.classList.remove("unfocused");
                         const radio = document.getElementById("contact-via-telegram") as HTMLInputElement;
-                        radio.parentElement.classList.remove("unfocused");
                         radio.checked = true;
-                        validatorFunc();
                     } else if (!modalClosed) {
                         setTimeout(checkVerified, 1500);
                     }
@@ -133,11 +130,8 @@ if (window.discordEnabled) {
                         setTimeout(window.discordModal.close, 2000);
                         discordButton.classList.add("unfocused");
                         document.getElementById("contact-via").classList.remove("unfocused");
-                        document.getElementById("contact-via-email").parentElement.classList.remove("unfocused");
                         const radio = document.getElementById("contact-via-discord") as HTMLInputElement;
-                        radio.parentElement.classList.remove("unfocused")
                         radio.checked = true;
-                        validatorFunc();
                     } else if (!modalClosed) {
                         setTimeout(checkVerified, 1500);
                     }
@@ -194,11 +188,8 @@ if (window.matrixEnabled) {
                         matrixPIN = input.value;
                         matrixButton.classList.add("unfocused");
                         document.getElementById("contact-via").classList.remove("unfocused");
-                        document.getElementById("contact-via-email").parentElement.classList.remove("unfocused");
-                        const radio = document.getElementById("contact-via-matrix") as HTMLInputElement;
-                        radio.parentElement.classList.remove("unfocused");
+                        const radio = document.getElementById("contact-via-discord") as HTMLInputElement;
                         radio.checked = true;
-                        validatorFunc();
                     } else {
                         window.notifications.customError("errorInvalidPIN", window.messages["errorInvalidPIN"]);
                         submitButton.classList.add("~critical");
@@ -236,86 +227,26 @@ if (window.userExpiryEnabled) {
 const form = document.getElementById("form-create") as HTMLFormElement;
 const submitButton = form.querySelector("input[type=submit]") as HTMLInputElement;
 const submitSpan = form.querySelector("span.submit") as HTMLSpanElement;
-const submitText = submitSpan.textContent;
 let usernameField = document.getElementById("create-username") as HTMLInputElement;
 const emailField = document.getElementById("create-email") as HTMLInputElement;
 if (!window.usernameEnabled) { usernameField.parentElement.remove(); usernameField = emailField; }
 const passwordField = document.getElementById("create-password") as HTMLInputElement;
 const rePasswordField = document.getElementById("create-reenter-password") as HTMLInputElement;
 
-let captchaVerified = false;
-let captchaID = "";
-let captchaInput = document.getElementById("captcha-input") as HTMLInputElement;
-const captchaCheckbox = document.getElementById("captcha-success") as HTMLSpanElement;
-let prevCaptcha = "";
-
-function baseValidator(oncomplete: (valid: boolean) => void): void {
-    let captchaChecked = false;
-    let captchaChange = false;
-    if (window.captcha) {
-        captchaChange = captchaInput.value != prevCaptcha;
-        if (captchaChange) {
-            prevCaptcha = captchaInput.value;
-            _post("/captcha/verify/" + window.code + "/" + captchaID + "/" + captchaInput.value, null, (req: XMLHttpRequest) => {
-                if (req.readyState == 4) {
-                    if (req.status == 204) {
-                        captchaCheckbox.innerHTML = `<i class="ri-check-line"></i>`;
-                        captchaCheckbox.classList.add("~positive");
-                        captchaCheckbox.classList.remove("~critical");
-                        captchaVerified = true;
-                        captchaChecked = true;
-                    } else {
-                        captchaCheckbox.innerHTML = `<i class="ri-close-line"></i>`;
-                        captchaCheckbox.classList.add("~critical");
-                        captchaCheckbox.classList.remove("~positive");
-                        captchaVerified = false;
-                        captchaChecked = true;
-                        return;
-                    }
-                }
-            });
-        }
-    }
-    if (window.emailRequired) {
-        if (!emailField.value.includes("@")) {
-            oncomplete(false);
-            return;
-        }
-    }
-    if (window.discordEnabled && window.discordRequired && !discordVerified) {
-        oncomplete(false);
-        return;
-    }
-    if (window.telegramEnabled && window.telegramRequired && !telegramVerified) {
-        oncomplete(false);
-        return;
-    }
-    if (window.matrixEnabled && window.matrixRequired && !matrixVerified) {
-        oncomplete(false);
-        return;
-    }
-    if (window.captcha) {
-        if (!captchaChange) {
-            oncomplete(captchaVerified);
-            return;
-        }
-        while (!captchaChecked) {
-            continue;
-        }
-        oncomplete(captchaVerified);
-    } else {
-        oncomplete(true);
-    }
-}
-
-let r = initValidator(passwordField, rePasswordField, submitButton, submitSpan, baseValidator);
-var requirements = r[0];
-var validatorFunc = r[1] as () => void;
-
 if (window.emailRequired) {
-    emailField.addEventListener("keyup", validatorFunc)
+    emailField.addEventListener("keyup", () => {
+        if (emailField.value.includes("@")) {
+            submitButton.disabled = false;
+            submitSpan.removeAttribute("disabled");
+        } else {
+            submitButton.disabled = true;
+            submitSpan.setAttribute("disabled", "");
+        }
+    });
 }
 
+var requirements = initValidator(passwordField, rePasswordField, submitButton, submitSpan)
+
 interface respDTO {
     response: boolean;
     error: string;
@@ -336,6 +267,10 @@ interface sendDTO {
     captcha_text?: string;
 }
 
+let captchaVerified = false;
+let captchaID = "";
+let captchaInput = document.getElementById("captcha-input") as HTMLInputElement;
+
 const genCaptcha = () => {
     _get("/captcha/gen/"+window.code, null, (req: XMLHttpRequest) => {
         if (req.readyState == 4) {
@@ -353,7 +288,27 @@ const genCaptcha = () => {
 if (window.captcha) {
     genCaptcha();
     (document.getElementById("captcha-regen") as HTMLSpanElement).onclick = genCaptcha;
-    captchaInput.onkeyup = validatorFunc;
+    const input = document.querySelector("input[type=submit]") as HTMLInputElement;
+    const checkbox = document.getElementById("captcha-success") as HTMLSpanElement;
+    captchaInput.onkeyup = () => _post("/captcha/verify/" + window.code + "/" + captchaID + "/" + captchaInput.value, null, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            if (req.status == 204) {
+                input.disabled = false;
+                input.nextElementSibling.removeAttribute("disabled");
+                checkbox.innerHTML = `<i class="ri-check-line"></i>`;
+                checkbox.classList.add("~positive");
+                checkbox.classList.remove("~critical");
+            } else {
+                input.disabled = true;
+                input.nextElementSibling.setAttribute("disabled", "true");
+                checkbox.innerHTML = `<i class="ri-close-line"></i>`;
+                checkbox.classList.add("~critical");
+                checkbox.classList.remove("~positive");
+            }
+        }
+    }, );
+    input.disabled = true;
+    input.nextElementSibling.setAttribute("disabled", "true");
 }
 
 const create = (event: SubmitEvent) => {
@@ -406,15 +361,9 @@ const create = (event: SubmitEvent) => {
             } else {
                 submitSpan.classList.add("~critical");
                 submitSpan.classList.remove("~urge");
-                if (req.response["error"] as string) {
-                    submitSpan.textContent = window.messages[req.response["error"]];
-                } else {
-                    submitSpan.textContent = window.messages["errorPassword"];
-                }
                 setTimeout(() => {
                     submitSpan.classList.add("~urge");
                     submitSpan.classList.remove("~critical");
-                    submitSpan.textContent = submitText;
                 }, 1000);
             }
         }
@@ -427,18 +376,17 @@ const create = (event: SubmitEvent) => {
                         window.confirmationModal.show();
                         return;
                     }
+                    const old = submitSpan.textContent;
                     if (req.response["error"] in window.messages) {
                         submitSpan.textContent = window.messages[req.response["error"]];
                     } else {
                         submitSpan.textContent = req.response["error"];
                     }
-                    setTimeout(() => { submitSpan.textContent = submitText; }, 1000);
+                    setTimeout(() => { submitSpan.textContent = old; }, 1000);
                 }
             }
         }
     });
 };
 
-validatorFunc();
-
 form.onsubmit = create;

ts/modules/validator.ts

@@ -1,7 +1,6 @@
 interface valWindow extends Window {
     validationStrings: pwValStrings;
     invalidPassword: string;
-    messages: { [key: string]: string };
 }
 
 interface pwValString {
@@ -60,7 +59,7 @@ class Requirement {
     validate = (count: number) => { this.valid = (count >= this._minCount); }
 }
 
-export function initValidator(passwordField: HTMLInputElement, rePasswordField: HTMLInputElement, submitButton: HTMLInputElement, submitSpan: HTMLSpanElement, validatorFunc?: (oncomplete: (valid: boolean) => void) => void):  ({ [category: string]: Requirement }|(() => void))[] {
+export function initValidator(passwordField: HTMLInputElement, rePasswordField: HTMLInputElement, submitButton: HTMLInputElement, submitSpan: HTMLSpanElement):  { [category: string]: Requirement } {
     var defaultPwValStrings: pwValStrings = {
         length: {
             singular: "Must have at least {n} character",
@@ -85,30 +84,18 @@ export function initValidator(passwordField: HTMLInputElement, rePasswordField:
     }
 
     const checkPasswords = () => {
-        return passwordField.value == rePasswordField.value;
-    }
-
-    const checkValidity = () => {
-        const pw = checkPasswords();
-        validatorFunc((valid: boolean) => {
-            if (pw && valid) {
-                rePasswordField.setCustomValidity("");
-                submitButton.disabled = false;
-                submitSpan.removeAttribute("disabled");
-            } else if (!pw) {
-                rePasswordField.setCustomValidity(window.invalidPassword);
-                submitButton.disabled = true;
-                submitSpan.setAttribute("disabled", "");
-            } else {
-                rePasswordField.setCustomValidity("");
-                submitButton.disabled = true;
-                submitSpan.setAttribute("disabled", "");
-            }
-        });
+        if (passwordField.value != rePasswordField.value) {
+            rePasswordField.setCustomValidity(window.invalidPassword);
+            submitButton.disabled = true;
+            submitSpan.setAttribute("disabled", "");
+        } else {
+            rePasswordField.setCustomValidity("");
+            submitButton.disabled = false;
+            submitSpan.removeAttribute("disabled");
+        }
     };
-
-    rePasswordField.addEventListener("keyup", checkValidity);
-    passwordField.addEventListener("keyup", checkValidity);
+    rePasswordField.addEventListener("keyup", checkPasswords);
+    passwordField.addEventListener("keyup", checkPasswords);
 
 
     // Incredible code right here
@@ -163,5 +150,5 @@ export function initValidator(passwordField: HTMLInputElement, rePasswordField:
             }
         }
     }
-    return [requirements, checkValidity]
+    return requirements
 }

views.go

@@ -316,7 +316,6 @@ func (app *appContext) GenCaptcha(gc *gin.Context) {
 	captchaID := genAuthToken()
 	inv.Captchas[captchaID] = capt
 	app.storage.invites[code] = inv
-	app.storage.storeInvites()
 	gc.JSON(200, genCaptchaDTO{captchaID})
 	return
 }