fix login and show tasks

Lab01/app/templates/_base.tmpl

@@ -95,8 +95,11 @@
     <script>
         const button_logout = document.getElementById("button-logout");
         const username = getCookie("username");
-        const myHeaders = new Headers();
+        const axiosConfig = {
-        myHeaders.append('username', username);
+            headers: {
+                username: username,
+            }
+        };
 
         const errorToastEl = document.getElementById('errorToast');
         const errorToastContent = document.getElementById('errorToastContent');
@@ -142,14 +145,13 @@
         }
 
         async function userLoggedIn() {
-            const response = await fetch("/auth/user", {method: 'GET', headers: myHeaders});
+            const response = await axios.get("/auth/user", axiosConfig);
-            const json = await response.json();
+            if (response.data.logged_in === true) {
-            if (json.logged_in === true) {
                 document.getElementById("button-login").hidden = true;
                 button_logout.hidden = false;
                 document.getElementById("button-tasks").hidden = false;
             }
-            return json.logged_in
+            return response.data.logged_in
         }
 
         async function logout() {

Lab01/app/templates/tasks.tmpl

@@ -11,18 +11,30 @@
 <div class="position-absolute top-50 start-50 translate-middle">
     <div class="fs-3">{{ .title }}</div>
     <hr>
+    <div id="tasks"></div>
 </div>
 
 {{template "scripts" .}}
 <script>
     userLoggedIn().then((loggedIn) => !loggedIn ? redirect("/view/login") : getAllTasks());
+    const tasksEl = document.getElementById("tasks");
 
-    async function getAllTasks() {
+    function getAllTasks() {
-        const response = await fetch("/tasks", {method: 'GET', headers: myHeaders});
+        axios.get("/tasks", axiosConfig).then((response) => {
-        const json = await response.json();
+            const tasks = response.data.tasks;
-        console.log(json);
+            [...tasks]
+                .forEach((task) => {
+                    const newTask = document.createElement('div');
+                    newTask.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
+                    newTask.innerHTML = `
+                        <div class="col-2 overflow-ellipsis text-end pe-4">${task.ID}</div>
+                        <div class="col-6 overflow-ellipsis">${task.Description}</div>
+                        <div class="col-2 overflow-ellipsis text-end">${task.Done}</div>
+                    `;
+                    tasksEl.appendChild(newTask);
+                });
+        });
     }
-
 </script>
 </body>
 </html>