Sign-up in UI to Back-end

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

@@ -1,3 +1,5 @@
+import { createUserNewAdmin } from "../../http_routs/userHttp";
+
 export default function SignUp() {
   function onSubmitLoginForm(event) {
     event.preventDefault();
@@ -6,6 +8,17 @@ export default function SignUp() {
     const data = Object.fromEntries(formData.entries());
 
     console.log(data);
+    const responseData = createUserNewAdmin(data);
+
+    responseData.then((data) => {
+      console.log("Thenable");
+      console.log(data);
+
+      // if the return status is false then update the ui accordingly
+      if (!data?.status) {
+        console.log("Error");
+      }
+    });
 
     // event.target.reset();
   }
@@ -17,10 +30,10 @@ export default function SignUp() {
         <div className="form-elements">
           <div>
             <label>user name</label>
-            <input name="user_name" />
+            <input name="userName" />
           </div>
           <div>
-            <label>email</label>
+            <label>Recovery Email</label>
             <input name="email" />
           </div>
           <div>
@@ -29,7 +42,7 @@ export default function SignUp() {
           </div>
           <div>
             <label>confirm password</label>
-            <input name="confirm_password" />
+            <input name="confirmPassword" />
           </div>
         </div>
         <button>Sign Up</button>

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

@@ -0,0 +1,7 @@
+"use strict";
+
+const protocol = "http";
+const domainNameOrIp = "127.0.0.1";
+const portNumber = "8081";
+
+export default `${protocol}://${domainNameOrIp}:${portNumber}`;

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

@@ -0,0 +1,33 @@
+import socket from "./httpDomainName";
+
+/**
+ * this is used to send the data collected from
+ * the signup form to the backend
+ * in turn it creates the user
+ * returns a return status with true if created
+ * false if there was an error if any kind
+ */
+export async function createUserNewAdmin(signUpObject = {}) {
+  // returns a promise we use await to get the response body using JSON()
+  const response = await fetch(`${socket}/open/signup`, {
+    method: "POST",
+    body: JSON.stringify(signUpObject),
+    headers: {
+      "content-type": "application/json",
+    },
+  });
+
+  const resData = await response.json();
+
+  //   console.log("response data");
+  //   console.log(resData);
+
+  return resData;
+}
+
+/**
+ * this method 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
+ */

MySQL_conf_pbx/test1/springCezenPBX/src/main/java/com/example/cezenPBX/config/CezenLoginSecurityChain.java

@@ -51,8 +51,8 @@ public class CezenLoginSecurityChain {
                     public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
                         //check CORs and CSRF in Previous commits
                         CorsConfiguration config = new CorsConfiguration();
-//                        config.setAllowedOrigins(Collections.singletonList("http://localhost:4200"));
-                        config.setAllowedOrigins(Collections.singletonList("*"));
+                        config.setAllowedOrigins(Collections.singletonList("http://localhost:5173"));
+                        //config.setAllowedOrigins(Collections.singletonList("*"));
                         config.setAllowedMethods(Collections.singletonList("*"));
                         config.setAllowCredentials(true);
                         config.setAllowedHeaders(Collections.singletonList("*"));