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"));
-    console.log("all: " + document.cookie);
+    const inputField = document.getElementById("captcha");
+    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)) {