pwr: functioning captcha/recaptcha

ts/form.ts

@@ -4,7 +4,7 @@ import { _get, _post, toggleLoader, addLoader, removeLoader, toDateString } from
 import { loadLangSelector } from "./modules/lang.js";
 import { Validator, ValidatorConf, ValidatorRespDTO } from "./modules/validator.js";
 import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
-import { Captcha } from "./modules/captcha.js";
+import { Captcha, GreCAPTCHA } from "./modules/captcha.js";
 
 interface formWindow extends Window {
     invalidPassword: string;
@@ -173,7 +173,7 @@ if (!window.usernameEnabled) { usernameField.parentElement.remove(); usernameFie
 const passwordField = document.getElementById("create-password") as HTMLInputElement;
 const rePasswordField = document.getElementById("create-reenter-password") as HTMLInputElement;
 
-let captcha = new Captcha(window.code, window.captcha, window.reCAPTCHA);
+let captcha = new Captcha(window.code, window.captcha, window.reCAPTCHA, false);
 
 function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: boolean): void {
     if (window.emailRequired) {
@@ -203,20 +203,7 @@ function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: bool
 
 let baseValidator = captcha.baseValidatorWrapper(_baseValidator); 
 
-interface GreCAPTCHA {
-    render: (container: HTMLDivElement, parameters: {
-        sitekey?: string,
-        theme?: string,
-        size?: string,
-        tabindex?: number,
-        "callback"?: () => void,
-        "expired-callback"?: () => void,
-        "error-callback"?: () => void
-    }) => void;
-    getResponse: (opt_widget_id?: HTMLDivElement) => string;
-}
-
-declare var grecaptcha: GreCAPTCHA
+declare var grecaptcha: GreCAPTCHA;
 
 let validatorConf: ValidatorConf = {
     passwordField: passwordField,

ts/modules/captcha.ts

@@ -1,6 +1,7 @@
 import { _get, _post } from "./common.js";
 
 export class Captcha {
+    isPWR = false;
     enabled = true;
     verified = false;
     captchaID = "";
@@ -27,7 +28,7 @@ export class Captcha {
         };
     };
 
-    verify = (callback: () => void) => _post("/captcha/verify/" + this.code + "/" + this.captchaID + "/" + this.input.value, null, (req: XMLHttpRequest) => {
+    verify = (callback: () => void) => _post("/captcha/verify/" + this.code + "/" + this.captchaID + "/" + this.input.value + (this.isPWR ? "?pwr=true" : ""), null, (req: XMLHttpRequest) => {
         if (req.readyState == 4) {
             if (req.status == 204) {
                 this.checkbox.innerHTML = `<i class="ri-check-line"></i>`;
@@ -44,21 +45,37 @@ export class Captcha {
         }
     });
     
-    generate = () => _get("/captcha/gen/"+this.code, null, (req: XMLHttpRequest) => {
+    generate = () => _get("/captcha/gen/"+this.code+(this.isPWR ? "?pwr=true" : ""), null, (req: XMLHttpRequest) => {
         if (req.readyState == 4) {
             if (req.status == 200) {
-                this.captchaID = req.response["id"];
+                this.captchaID = this.isPWR ? this.code : req.response["id"];
+                // the Math.random() appearance below is used for PWRs, since they don't have a unique captchaID. The parameter is ignored by the server, but tells the browser to reload the image.
                 document.getElementById("captcha-img").innerHTML = `
-                <img class="w-100" src="${window.location.toString().substring(0, window.location.toString().lastIndexOf("/invite"))}/captcha/img/${this.code}/${this.captchaID}"></img>
+                <img class="w-100" src="${window.location.toString().substring(0, window.location.toString().lastIndexOf("/invite"))}/captcha/img/${this.code}/${this.isPWR ? Math.random() : this.captchaID}${this.isPWR ? "?pwr=true" : ""}"></img>
                 `;
                 this.input.value = "";
             }
         }
     });
 
-    constructor(code: string, enabled: boolean, reCAPTCHA: boolean) {
+    constructor(code: string, enabled: boolean, reCAPTCHA: boolean, isPWR: boolean) {
         this.code = code;
         this.enabled = enabled;
         this.reCAPTCHA = reCAPTCHA;
+        this.isPWR = isPWR;
     }
 }
+
+export interface GreCAPTCHA {
+    render: (container: HTMLDivElement, parameters: {
+        sitekey?: string,
+        theme?: string,
+        size?: string,
+        tabindex?: number,
+        "callback"?: () => void,
+        "expired-callback"?: () => void,
+        "error-callback"?: () => void
+    }) => void;
+    getResponse: (opt_widget_id?: HTMLDivElement) => string;
+}
+

ts/pwr.ts

@@ -2,6 +2,7 @@ import { Modal } from "./modules/modal.js";
 import { Validator, ValidatorConf } from "./modules/validator.js";
 import { _post, addLoader, removeLoader } from "./modules/common.js";
 import { loadLangSelector } from "./modules/lang.js";
+import { Captcha, GreCAPTCHA } from "./modules/captcha.js";
 
 interface formWindow extends Window {
     invalidPassword: string;
@@ -31,6 +32,7 @@ interface formWindow extends Window {
     captcha: boolean;
     reCAPTCHA: boolean;
     reCAPTCHASiteKey: string;
+    pwrPIN: string;
 }
 
 loadLangSelector("pwr");
@@ -45,11 +47,26 @@ const rePasswordField = document.getElementById("create-reenter-password") as HT
 
 window.successModal = new Modal(document.getElementById("modal-success"), true);
 
+function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: boolean): void {
+    if (window.captcha && !window.reCAPTCHA && !captchaValid) {
+        oncomplete(false);
+        return;
+    }
+    oncomplete(true);
+}
+
+let captcha = new Captcha(window.pwrPIN, window.captcha, window.reCAPTCHA, true);
+
+declare var grecaptcha: GreCAPTCHA;
+
+let baseValidator = captcha.baseValidatorWrapper(_baseValidator);
+
 let validatorConf: ValidatorConf = {
     passwordField: passwordField,
     rePasswordField: rePasswordField,
     submitInput: submitInput,
-    submitButton: submitSpan
+    submitButton: submitSpan,
+    validatorFunc: baseValidator
 };
 
 var validator = new Validator(validatorConf);
@@ -58,6 +75,13 @@ var requirements = validator.requirements;
 interface sendDTO {
     pin: string;
     password: string;
+    captcha_text?: string;
+}
+
+if (window.captcha && !window.reCAPTCHA) {
+    captcha.generate();
+    (document.getElementById("captcha-regen") as HTMLSpanElement).onclick = captcha.generate;
+    captcha.input.onkeyup = validator.validate;
 }
 
 form.onsubmit = (event: Event) => {
@@ -68,12 +92,31 @@ form.onsubmit = (event: Event) => {
         pin: params.get("pin"),
         password: passwordField.value
     };
+    if (window.captcha) {
+        if (window.reCAPTCHA) {
+            send.captcha_text = grecaptcha.getResponse();
+        } else {
+            send.captcha_text = captcha.input.value;
+        }
+    }
     _post("/reset", send, (req: XMLHttpRequest) => {
         if (req.readyState == 4) {
             removeLoader(submitSpan);
             if (req.status == 400) {
-                for (let type in req.response) {
-                    if (requirements[type]) { requirements[type].valid = req.response[type] as boolean; }
+                if (req.response["error"] as string) { // FIXME: Show captcha error
+                    const old = submitSpan.textContent;
+                    submitSpan.textContent = window.messages[req.response["error"]];
+                    submitSpan.classList.add("~critical");
+                    submitSpan.classList.remove("~urge");
+                    setTimeout(() => {
+                        submitSpan.classList.add("~urge");
+                        submitSpan.classList.remove("~critical");
+                        submitSpan.textContent = old;
+                    }, 2000);
+                } else {
+                    for (let type in req.response) {
+                        if (requirements[type]) { requirements[type].valid = req.response[type] as boolean; }
+                    }
                 }
                 return;
             } else if (req.status != 200) {