Merge pull request #5 from pi-ati-ort/2-conectar-registro

PR: registro
pi-ati-ort · Dec 16, 2023 · b2db61c · b2db61c
2 parents a5ce623 + 2ec4035
commit b2db61c
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 137 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+BACKEND_API_URL="http://localhost:8080"
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.6.1",
+    "axios": "^1.6.2",
     "cors": "^2.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,22 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import './App.css';
-
-import Header from './components/general/Header';
-//import Footer from './components/general/Footer';
-
-import Home from './components/home/Layout';
-import Login from './components/login/Layout';
-import Register from './components/register/Layout';
+import "./App.css";
 
+import Header from "./components/general/Header";
 
+import Home from "./components/home/Layout";
+// import Login from "./components/login/Layout";
+import Register from "./components/register/Layout";
 
 function App() {
   return (
-    <div className="">
+    <div className="h-screen">
       <header className="">
         <Header />
       </header>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/login" element={<Login />} />
+          {/* <Route path="/login" element={<Login />} /> */}
           <Route path="/register" element={<Register />} />
         </Routes>
       </BrowserRouter>

diff --git a/src/api/apiService.js b/src/api/apiService.js
@@ -1,9 +1,15 @@
 import axios from "axios";
 
-const apiClient = axios.create({
-  baseURL: "http://localhost:8080",
-});
-
-export function retrieveTest() {
-  return apiClient.get("/test-web");
-}
+export const registerUser = async (user) => {
+  try {
+    const response = await axios.post(
+      "http://localhost:8080/auth/register",
+      user
+    );
+    console.log(response);
+    return response.data;
+  } catch (error) {
+    console.error("Error registering user:", error);
+    throw error;
+  }
+};
diff --git a/src/components/home/Layout.js b/src/components/home/Layout.js
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { retrieveTest } from "../../api/apiService";
-
 const Home = () => {
   const LoginHandler = () => {
     window.location.href = "/login";
@@ -11,25 +9,12 @@ const Home = () => {
     window.location.href = "/register";
   };
 
-  const TestHandler = () => {
-    retrieveTest()
-      .then((response) => {
-        console.log(response);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
   return (
     <div>
       <header className="App-header">
-        <p className="text-5xl text-center mt-32 mb-6 text-black font-bold">
+        <p className="text-5xl text-center mt-32 mb-20 text-black font-bold">
           Proyecto Integrador
         </p>
-        <p className="text-2xl text-center mb-20 text-black font-bold">
-          Ampliación de sistema piloto de permisos de construcción
-        </p>
       </header>
       <div className="flex flex-row justify-center mt-10">
         <span className="mx-4">
@@ -48,14 +33,6 @@ const Home = () => {
             Registro
           </button>
         </span>
-        <span className="mx-4">
-          <button
-            className="bg-verde-idem text-white rounded-md py-3 px-9 text-lg font-semibold"
-            onClick={TestHandler}
-          >
-            API test
-          </button>
-        </span>
       </div>
     </div>
   );

diff --git a/src/components/login/Layout.js b/src/components/login/Layout.js
diff --git a/src/components/register/Layout.js b/src/components/register/Layout.js
@@ -1,6 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
+import { registerUser } from "../../api/apiService";
 
 const Register = () => {
+  const [name, setName] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleUsername = (event) => {
+    setUsername(event.target.value);
+  };
+
+  const handlePassword = (event) => {
+    setPassword(event.target.value);
+  };
+
+  const handleName = (event) => {
+    setName(event.target.value);
+  };
+
+  const user = {
+    name: name,
+    username: username,
+    password: password,
+  };
+
+  const registerUserHandler = (event) => {
+    event.preventDefault();
+    registerUser(user)
+      .then((response) => {
+        console.log(response);
+        window.location.href = "/login";
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
   return (
     <div className="">
       <div className="">
@@ -11,10 +46,10 @@ const Register = () => {
         </div>
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-          <form className="space-y-6" action="#" method="POST">
+          <form onSubmit={registerUserHandler} className="space-y-6">
             <div>
               <label
-                htmlFor="name"
+                htmlFor="email"
                 className="block text-sm font-medium leading-6 text-gray-900"
               >
                 Nombre
@@ -26,6 +61,7 @@ const Register = () => {
                   type="name"
                   autoComplete="name"
                   required
+                  onChange={handleName}
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-500 sm:text-sm sm:leading-6"
                 />
               </div>
@@ -44,6 +80,7 @@ const Register = () => {
                   type="email"
                   autoComplete="email"
                   required
+                  onChange={handleUsername}
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-500 sm:text-sm sm:leading-6"
                 />
               </div>
@@ -55,13 +92,8 @@ const Register = () => {
                   htmlFor="password"
                   className="block text-sm font-medium leading-6 text-gray-900"
                 >
-                  Contraseña{" "}
+                  Contraseña
                 </label>
-                <div className="text-sm">
-                  {/*                 <a href="#" className="font-semibold verde-idem">
-                    Recuperar contraseña
-                  </a> */}
-                </div>
               </div>
               <div className="mt-2">
                 <input
@@ -70,6 +102,7 @@ const Register = () => {
                   type="password"
                   autoComplete="current-password"
                   required
+                  onChange={handlePassword}
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-500 sm:text-sm sm:leading-6"
                 />
               </div>