basic&ugly FE

public/js/index.js

@@ -0,0 +1,21 @@
+window.onload = async () => {
+    let id = (await (await fetch("/api/captcha/new", {method: "POST"})).json()).id
+    console.log(id);
+    fetch(`/api/captcha/${id}`).then(response => response.blob())
+        .then(blob => {
+            const url = URL.createObjectURL(blob);
+            document.getElementById("captcha_image").src = url;
+        }
+    );
+    const form = document.getElementById("captchaForm");
+    const inputField = document.getElementById("captcha");
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const response = await fetch(`/api/captcha/${id}`, {method: "PATCH",headers: {'Content-Type': 'application/json'}, body: JSON.stringify({"solution": inputField.value})});
+        if (response.status == 200) {
+            inputField.value = "";
+            window.location.reload();
+        };
+    })
+};

public/views/index.pug

@@ -1,26 +0,0 @@
-html
-    head
-        title Captcha Aggregator
-        meta(charset="utf-8")
-        meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
-        meta(name="description" content="")
-        link(href="css/index.css" rel="stylesheet")
-    body
-        div(id="tsparticles")
-            main(class="box")
-                h2 Вход
-
-                form(id="loginForm" target="hiddenFrame")
-                    div(class="inputBox")
-                        label(for="username") Ник
-                        input(type="text" name="username" id="username" placeholder="ваш ник на сервере" required=true)
-
-                    div(class="inputBox")
-                        label(for="password") Пароль
-                        input(type="password" name="password" id="password" placeholder="ваш пароль" required=true)
-
-                    div
-                        button(type="submit" name="" style="float: left;") Войти
-                        a(class="button" href="register" style="float: left;") Регистрация
-    script(type="text/javascript" src="js/index.js")
-    

views/index.pug

@@ -0,0 +1,22 @@
+html
+    head
+        title Captcha Aggregator
+        meta(charset="utf-8")
+        meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
+        meta(name="description" content="")
+        link(href="css/index.css" rel="stylesheet")
+    body
+        div(id="tsparticles")
+            main(class="box")
+                h2 Captcha Aggregator
+
+                form(id="captchaForm")
+                    div(class="image")
+                        img(id="captcha_image" placeholder="captcha is loading")
+                    div(class="inputBox")
+                        label(for="captcha") Captcha
+                        input(type="text" name="captcha" id="captcha" placeholder="solve a captcha" required=true)
+                    div
+                        button(type="submit" name="" style="float: center;") Send
+    script(type="text/javascript" src="js/index.js")
+