add ajax

api/templates/index.html

@@ -30,7 +30,7 @@
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Home</a>
+                        <a class="nav-link active" aria-current="page" href="/index">Home</a>
                     </li>
                 </ul>
                 
@@ -67,7 +67,14 @@
         {% endblock %}
     </footer>
     <!-- ================================================================= -->
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
 
+    <script src="templates/script_index.js"></script>
 </body>
 
 </html>

api/templates/login.html

@@ -38,7 +38,7 @@
         </ul>
         <div class="tab-content" id="myTabContent">
             <div class="tab-pane fade p-lg-3 show active" id="login" role="tabpanel" aria-labelledby="login-tab">
-                <form method="post" action="login">
+                
                     <div class="form-floating mb-3">
                         <input type="text" class="form-control" id="username" name="username" placeholder="User name">
                         <label for="username">User name</label>
@@ -48,9 +48,9 @@
                         <label for="password">Password</label>
                     </div>
                     <div class="d-flex justify-content-center">
-                        <button type="submit" class="btn btn-primary align-items-center">Login</button>
+                        <button id="go_login" class="btn btn-primary align-items-center">Login</button>
                     </div>
-                </form>
+         
 
             </div>
             <div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">

api/templates/script_index.js

@@ -0,0 +1,22 @@
+
+$("#go_login").click(function () {
+
+  var url = "http://127.0.0.1:8000/login";
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", url);
+
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      console.log(xhr.status);
+      console.log(xhr.responseText);
+      window.location.replace( "/index" )
+    }
+  };
+  var data = "grant_type=&username="+$('#username').val()+"&password=qwe&scope=&client_id=&client_secret=";
+  xhr.send(data);
+
+});