added statistics, autofocus field on reload

public/css/index.css

@@ -19,4 +19,14 @@ body {
 #captcha {
     margin-top: 1%;
     margin-bottom: 1%;
+}
+
+.topSolvers {
+    margin-left: auto;
+    margin-right: 5%;
+    max-width: max-content;
+    float:right;
+    display: inline;
+    margin-top:1%;
+    padding-top: 0%;
 }

public/js/index.js

@@ -26,7 +26,6 @@ const get_cookie = (name) => {
       const cookie = cookies[i].trim();
       if (cookie.startsWith(name + '=')) {
         const value = cookie.substring(name.length + 1);
-        console.log(value);
       }
     }
 }
@@ -39,9 +38,27 @@ const blobToBase64 = (blob) => {
     });
   }
 
+const show_stats = async () => {
+    const response = await fetch("/api/user/stats", {
+        method: "GET",
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    const stats = (await response.json()).stats;
+    const statsText = document.getElementById("topSolversText");
+    statsText.innerHTML += '<br/>'
+    stats.top_five.forEach(stat => {
+        statsText.innerHTML += `<b>${stat.username}: ${stat.count}</b><br/>`;
+    });
+    statsText.innerHTML += `You have solved ${stats.my_count} captcha(s)`
+}
+
 window.onload = async () => {
-    console.log("koka: " + get_cookie("JWT"));
+    const inputField = document.getElementById("captcha");
-    console.log("all: " + document.cookie);
+    inputField.focus();
+    // intentionally do not wait for it 
+    show_stats();
     if (!document.cookie.includes('JWT')) {
         document.location.href = "/login";
     }
@@ -51,9 +68,8 @@ window.onload = async () => {
 
     const url = URL.createObjectURL(captcha);
     document.getElementById("captcha_image").src = url;
-    console.log(captcha.type)
     const form = document.getElementById("captchaForm");
-    const inputField = document.getElementById("captcha");
+    
     form.addEventListener('submit', async (e) => {
         e.preventDefault();
         // if (!await check_solution(inputField.value)) {

src/controllers/user.js

@@ -31,8 +31,18 @@ class UserController {
         } catch (e) {
             console.log(e)
             return res.status(500).send({"message": "Unknown server error"});
-        }
+        }   
-        
+    }
+
+    async stats (req, res) {
+        try {
+            const user_id = jwt.decode(req.token).id;
+            const stats = await UserService.get_stats(user_id);
+            return res.status(200).send({"message": "Success", "stats": stats});
+        } catch (e) {
+            console.log(e)
+            return res.status(500).send({"message": "Unknown server error"});
+        } 
     }
 }
 

src/routers/user.js

@@ -7,5 +7,5 @@ const UserRouter = new Router();
 
 UserRouter.post('/user/register', auth.verify_admin_token, UserController.register);
 UserRouter.post('/user/login', UserController.login);
-
+UserRouter.get('/user/stats', auth.verify_user_jwt, UserController.stats);
 export default UserRouter;

src/services/user.js

@@ -8,6 +8,13 @@ class UserService {
     async get_by_username(username) {
         return (await db.query("SELECT *  FROM users WHERE username = $1", [username])).rows[0];
     }
+
+    async get_stats(user_id) {
+        return {
+            my_count: (await db.query("SELECT COUNT(*) FROM captchas WHERE submitter = $1", [user_id])).rows[0].count,
+            top_five: (await db.query("select username, (select count(*) from captchas where submitter = users.id) from users JOIN captchas on submitter = users.id GROUP BY users.id ORDER BY count DESC LIMIT 5")).rows
+        };
+    }
 }
 
 export default new UserService();

views/index.pug

@@ -6,10 +6,14 @@ html
         meta(name="description" content="")
         link(href="css/index.css" rel="stylesheet")
     body
-        div(id="tsparticles")
+        div(id="main")
-            main(class="box")
+            div(class="topSolvers")
-                h2 Captcha Aggregator
+                label(id="topSolversText") Top-5 solvers:
 
+            main(class="box")
+                
+                h2 Captcha Aggregator
+                
                 form(id="captchaForm")
                     div(class="image")
                         img(id="captcha_image" placeholder="captcha is loading")

views/login.pug

@@ -6,10 +6,9 @@ html
         meta(name="description" content="")
         link(href="css/index.css" rel="stylesheet")
     body
-        div(id="tsparticles")
+        div(id="main")
             main(class="box")
                 h2 Captcha Aggregator
-
                 form(id="loginForm")
                     div(class="inputBox")
                         label(for="username") Username