User login with secure JWT cookie return

MySQL_conf_pbx/test1/reactcezenpbx/src/components/login-logout/logIn.jsx

@@ -1,8 +1,21 @@
+import { userLogin } from "../../http_routs/userHttp";
+
 export default function LogIn() {
+  function logInFunction(event) {
+    event.preventDefault();
+
+    console.log("Log In");
+    const formData = new FormData(event.target);
+    const data = Object.fromEntries(formData.entries());
+
+    console.log(data);
+    userLogin(data.user_name, data.password);
+  }
+
   return (
     <div className="LHS">
       <h2>Log In</h2>
-      <form>
+      <form onSubmit={logInFunction}>
         <div className="form-elements">
           <div>
             <label>user name</label>

MySQL_conf_pbx/test1/reactcezenpbx/src/http_routs/userHttp.js

@@ -26,8 +26,27 @@ export async function createUserNewAdmin(signUpObject = {}) {
 }
 
 /**
- * this method is used to log-in
+ * this function is used to log-in
  * it uses the basic auth log-in technique
  * if successful a JWT token will be returned from the backend
  * use the JWT token for every subsequent request
  */
+
+//user login data
+export async function userLogin(username, password) {
+  //make an http get request for userLogin login
+
+  const loginResp = await fetch(`${socket}/open/login`, {
+    method: `GET`,
+    headers: basicAuthCredentialsBuilder(username, password),
+    credentials: "include", // <-- VERY IMPORTANT
+  });
+}
+
+//common basic auth header builder
+function basicAuthCredentialsBuilder(username, password) {
+  //builds the appropriate format for basic auth
+  return {
+    Authorization: "Basic " + window.btoa(username + ":" + password),
+  };
+}