add captcha support

dist/index.html

@@ -36,6 +36,15 @@
                 </div>
             </div>
         </div>
+        <div class="modal fade" id="hcaptchaModal" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content bg-dark text-light">
+                    <div class="modal-body">
+                        <div id="captcha-box"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
             <div class="container-fluid">
                 <a class="navbar-brand" href="#">CollabVM</a>
@@ -128,6 +137,7 @@
                 </div>
             </div>
         </div>
+        <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
         <script src="main.js" type="application/javascript"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
     </body>

package.json

@@ -10,6 +10,7 @@
   "author": "Elijah R",
   "license": "GPL-3.0",
   "dependencies": {
+    "@hcaptcha/types": "^1.0.3",
     "nanoevents": "^7.0.1",
     "serve": "^14.2.0",
     "webpack": "^5.75.0",

src/captcha.js

@@ -0,0 +1,13 @@
+export default function doCaptcha(sitekey) {
+    return new Promise((res, rej) => {
+        const modal = new bootstrap.Modal(document.getElementById('hcaptchaModal'));
+        modal.show();
+        hcaptcha.render("captcha-box", {
+            sitekey: sitekey,
+            callback: (c) => {
+                modal.hide();
+                res(c);
+            },
+        });
+    })
+}

src/common.js

@@ -1,14 +1,6 @@
 export const config = {
     serverAddresses: [
-        "wss://computernewb.com/collab-vm/vm0",
+        "ws://127.0.0.1:6004",
-        "wss://computernewb.com/collab-vm/vm1",
-        "wss://computernewb.com/collab-vm/vm2",
-        "wss://computernewb.com/collab-vm/vm3",
-        "wss://computernewb.com/collab-vm/vm4",
-        "wss://computernewb.com/collab-vm/vm5",
-        "wss://computernewb.com/collab-vm/vm6",
-        "wss://computernewb.com/collab-vm/vm7",
-        "wss://computernewb.com/collab-vm/vm8",
     ],
     chatSound: "https://computernewb.com/collab-vm/notify.ogg",
     // What XSS implementation the server uses

src/index.js

@@ -3,6 +3,7 @@ import { config } from "./common";
 import { GetKeysym } from "./keyboard";
 import { createNanoEvents } from "nanoevents";
 import { makeperms } from "./permissions";
+import doCaptcha from "./captcha";
 // None = -1
 // Has turn = 0
 // In queue = <queue position>
@@ -67,10 +68,13 @@ class CollabVMClient {
     socket;
     node;
     #url;
+    #captcha = false;
+    captchaToken;
     constructor(url) {
         this.#url = url;
     }
-    connect() {
+    connect(hcaptchatoken) {
+        this.captchaToken = hcaptchatoken;
         return new Promise((res, rej) => {
             try {
                 this.socket = new WebSocket(this.#url, "guacamole");
@@ -101,9 +105,24 @@ class CollabVMClient {
         return this.#url;
     }
     connectToVM(node) {
-        return new Promise((res, rej) => {
+        return new Promise(async (res, rej) => {
             this.socket.addEventListener('close', () => this.#onClose());
             this.node = node;
+            if (this.captchaToken !== null) {
+                await new Promise((reso, reje) => {
+                    var unbind = this.eventemitter.on('captcha', (result) => {
+                        unbind();
+                        if (result === true) {
+                            reso();
+                            return;
+                        }
+                        else {
+                            reje();
+                        }
+                    });
+                    this.socket.send(guacutils.encode(["captcha", this.captchaToken]));
+                });
+            }
             var savedUsername = window.localStorage.getItem("username");
             if (savedUsername === null)
                 this.socket.send(guacutils.encode(["rename"]));
@@ -139,6 +158,18 @@ class CollabVMClient {
                         break;
                 }
                 break;
+            case "captcha":
+                switch (msgArr[1]) {
+                    case "0":
+                        this.#captcha = msgArr[2];
+                        console.log(this.#captcha);
+                        break;
+                    case "1":
+                        this.eventemitter.emit('captcha', true);
+                        break;
+                    case "2":
+                        this.eventemitter.emit('captcha', false);
+                }
             case "chat":
                 if (!connected) return;
                 for (var i = 1; i < msgArr.length; i += 2) {
@@ -155,6 +186,7 @@ class CollabVMClient {
                         id: msgArr[i],
                         name: msgArr[i+1],
                         thumb: msgArr[i+2],
+                        captcha: this.#captcha,
 
                     });
                 }
@@ -685,9 +717,14 @@ function addUserDropdownItem(ul, text, func) {
 async function openVM(url, node) {
     if (connected) return;
     connected = true;
+    var vm = vms.find(v => v.url === url);
+    var token = null;
+    if (vm.captcha !== false) {
+        token = await doCaptcha(vm.captcha);
+    }
     window.location.href = "#" + node;
     vm = new CollabVMClient(url);
-    await vm.connect();
+    await vm.connect(token);
     await vm.connectToVM(node);
     vmlist.style.display = "none";
     vmview.style.display = "block";