JS class refactor for user login

MySQL_conf_pbx/test1/docker-compose.yml

@@ -54,7 +54,7 @@ services:
 
 
   react_app:
-    image: mathewfrancisv/cezen_react:v1.0.0
+    image: mathewfrancisv/cezen_react:v2.0.0
     container_name: react_cezenpbx
     restart: always
     working_dir: /app

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

@@ -1,4 +1,4 @@
-import { userLogin } from "../../http_routs/userHttp";
+import { userLoginAndResp } from "../../http_routs/userHttp";
 
 export default function LogIn() {
   function logInFunction(event) {
@@ -9,7 +9,7 @@ export default function LogIn() {
     const data = Object.fromEntries(formData.entries());
 
     console.log(data);
-    userLogin(data.user_name, data.password);
+    userLoginAndResp(data.user_name, data.password);
   }
 
   return (

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

@@ -33,20 +33,69 @@ export async function createUserNewAdmin(signUpObject = {}) {
  */
 
 //user login data
-export async function userLogin(username, password) {
+// 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 to get the JWT cookie from the backend
+//   });
+
+//   const resData = await loginResp.json();
+
+//   console.log("response data");
+//   console.log(resData);
+
+//   return loginResp;
+// }
+
+// //common basic auth header builder
+// function basicAuthCredentialsBuilder(username, password) {
+//   //builds the appropriate format for basic auth
+//   return {
+//     Authorization: "Basic " + window.btoa(username + ":" + password),
+//   };
+// }
+
+export async function userLoginAndResp(username, password) {
   //make an http get request for userLogin login
 
-  const loginResp = await fetch(`${socket}/open/login`, {
+  const auth = new authenticationBuilder(socket);
-    method: `GET`,
+
-    headers: basicAuthCredentialsBuilder(username, password),
+  return auth.userLogin(username, password);
-    credentials: "include", // <-- VERY IMPORTANT
-  });
 }
 
-//common basic auth header builder
+/**
-function basicAuthCredentialsBuilder(username, password) {
+ * This class helps the user login
-  //builds the appropriate format for basic auth
+ */
-  return {
+class authenticationBuilder {
-    Authorization: "Basic " + window.btoa(username + ":" + password),
+  #socketURL = "";
-  };
+
+  constructor(socketURL) {
+    this.#socketURL = socketURL;
+  }
+
+  async userLogin(username, password) {
+    //make an http get request for userLogin login
+    const loginResp = await fetch(`${this.#socketURL}/open/login`, {
+      method: `GET`,
+      headers: this.#basicAuthCredentialsBuilder(username, password),
+      credentials: "include", // <-- VERY IMPORTANT to get the JWT cookie from the backend
+    });
+
+    const resData = await loginResp.json();
+
+    console.log("response data");
+    console.log(resData);
+
+    return loginResp;
+  }
+
+  #basicAuthCredentialsBuilder(username, password) {
+    //builds the appropriate format for basic auth
+    return {
+      Authorization: "Basic " + window.btoa(username + ":" + password),
+    };
+  }
 }