include axios and show toasts

Lab01/app/.idea/app.iml

@@ -6,5 +6,6 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="bootstrap" level="application" />
+    <orderEntry type="library" name="axios" level="application" />
   </component>
 </module>

Lab01/app/.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{bootstrap}" />
+    <file url="PROJECT" libraries="{axios, bootstrap}" />
   </component>
 </project>

Lab01/app/templates/_base.tmpl

@@ -10,6 +10,31 @@
           integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 {{end}}
 
+{{define "toasts"}}
+    <div class="position-absolute bottom-0 end-0 mb-3 me-3">
+        <div id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert"
+             aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div id="errorToastContent" class="toast-body">
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
+                        aria-label="Close"></button>
+            </div>
+        </div>
+    </div>
+    <div class="position-absolute bottom-0 end-0 mb-3 me-3">
+        <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert"
+             aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div id="successToastContent" class="toast-body">
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
+                        aria-label="Close"></button>
+            </div>
+        </div>
+    </div>
+{{end}}
+
 {{define "navbar"}}
     <nav class="navbar navbar-expand-md navbar-light bg-light">
         <div class="container-fluid">
@@ -63,12 +88,33 @@
 {{end}}
 
 {{define "scripts"}}
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+            crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script>
         const button_logout = document.getElementById("button-logout");
         const username = getCookie("username");
         const myHeaders = new Headers();
         myHeaders.append('username', username);
 
+        const errorToastEl = document.getElementById('errorToast');
+        const errorToastContent = document.getElementById('errorToastContent');
+        const errorToast = new bootstrap.Toast(errorToastEl, {delay: 3000})
+        const successToastEL = document.getElementById('successToast');
+        const successToastContent = document.getElementById('successToastContent');
+        const successToast = new bootstrap.Toast(successToastEL, {delay: 3000});
+
+        function showErrorToast(message) {
+            errorToastContent.innerText = message;
+            errorToast.show();
+        }
+
+        function showSuccessToast(message) {
+            successToastContent.innerText = message;
+            successToast.show();
+        }
+
         function setCookie(cookie_name, cookie_value, cookie_expiry) {
             const d = new Date();
             d.setTime(d.getTime() + (cookie_expiry * 24 * 60 * 60 * 1000));
@@ -126,7 +172,6 @@
                     event.preventDefault();
                     event.stopPropagation();
                 } else {
-                    document.getElementById("button").disabled = true;
                     event.preventDefault();
                     let data = new FormData();
                     let form_element = document.getElementsByClassName('form-control');
@@ -139,4 +184,4 @@
             }, false);
         }
     </script>
-{{end}}
+{{end}}

Lab01/app/templates/login.tmpl

@@ -6,6 +6,7 @@
     {{template "head" .}}
 </head>
 <body>
+{{template "toasts" .}}
 {{template "navbar" .}}
 
 <div class="position-absolute top-50 start-50 translate-middle">
@@ -20,15 +21,15 @@
 <script>
     userLoggedIn().then((loggedIn) => loggedIn && redirect("/"));
 
-    async function submitForm(formData) {
+    function submitForm(formData) {
-        const response = await fetch("/auth/login", {method: 'POST', body: formData, redirect: 'follow'});
+        axios({method: 'POST', url: '/auth/login', data: formData})
-        if (response.ok) {
+            .then((response) => {
-            const json = await response.json();
+                setCookie("username", response.data.username, 1);
-            setCookie("username", json.username, 1);
+                redirect("/");
-            redirect("/");
+            })
-        } else {
+            .catch((response) => {
-            redirect("/view/login");
+                showErrorToast(response.message);
-        }
+            });
     }
 </script>
 </body>

Lab01/app/templates/register.tmpl

@@ -6,6 +6,7 @@
     {{template "head" .}}
 </head>
 <body>
+{{template "toasts" .}}
 {{template "navbar" .}}
 
 <div class="position-absolute top-50 start-50 translate-middle">
@@ -18,13 +19,15 @@
 {{template "scripts" .}}
 {{template "formScripts" .}}
 <script>
-    async function submitForm(formData) {
+    function submitForm(formData) {
-        const response = await fetch("/auth/register", {method: 'POST', body: formData, redirect: 'follow'});
+        axios({method: 'POST', url: '/auth/register', data: formData})
-        if (response.ok) {
+            .then((response) => {
-            redirect("/");
+                showSuccessToast(response.data.message);
-        } else {
+                redirect("/login");
-            redirect("/view/register");
+            })
-        }
+            .catch((err) => {
+                showErrorToast(err.message);
+            });
     }
 </script>
 </body>