Plataforma de educación online con React.js | 3.8 - Petición para login y registro
Din Cruz@ecruz1010
A continuación el código de:
Login.jsx
1import React from "react"; 2import Axios from "axios"; 3 4const authentication = (e) => { 5 e.preventDefault(); 6 7 const form = e.target; 8 const data = { 9 email: form.email.value, 10 password: form.password.value, 11 }; 12 13 Axios.post(`${process.env.REACT_APP_API_USER}/login`, data) 14 .then((response) => { 15 localStorage.setItem("token", response.data.token); 16 window.location = "/"; 17 }) 18 .catch((error) => console.log(error)); 19}; 20 21const Login = () => { 22 return ( 23 <div className="ed-grid"> 24 <div className="l-block"></div> 25 <div className="m-to-center m-60 lg-30"> 26 <h1 className="center">Iniciar sesión</h1> 27 <form onSubmit={authentication.bind()}> 28 <div className="form__item"> 29 <label htmlFor="email"> 30 Correo electrónico 31 <input 32 type="email" 33 id="email" 34 placeholder="Ingrese su e-mail" 35 required 36 name="email" 37 /> 38 </label> 39 </div> 40 <div className="form__item"> 41 <label htmlFor="password"> 42 Contraseña 43 <input 44 type="password" 45 id="password" 46 placeholder="Ingrese su contraseña" 47 name="password" 48 /> 49 </label> 50 </div> 51 <div className="form_item"> 52 <input 53 type="submit" 54 value="Iniciar sesión" 55 className="button full" 56 required 57 /> 58 </div> 59 </form> 60 </div> 61 </div> 62 ); 63}; 64 65export default Login;
Register.jsx
1import React from "react"; 2import Axios from "axios"; 3 4const registration = (e) => { 5 e.preventDefault(); 6 const form = e.target; 7 8 const data = { 9 email: form.email.value, 10 name: form.fullname.value, 11 password: form.password.value, 12 }; 13 14 Axios.post(`${process.env.REACT_APP_API_USER}/signup`, data) 15 .then(() => { 16 alert("Usuario creado"); 17 window.location = "/login"; 18 }) 19 .catch(() => alert("Error al crear el usuario")); 20}; 21 22const Register = () => { 23 return ( 24 <div className="ed-grid"> 25 <div className="l-block"></div> 26 <div className="m-to-center m-60 lg-30"> 27 <h1 className="center">Crear cuenta</h1> 28 <form onSubmit={registration.bind()}> 29 <div className="form__item"> 30 <label htmlFor="fullname"> 31 Nombre completo 32 <input 33 type="text" 34 id="fullname" 35 placeholder="Ingrese su nombre" 36 required 37 name="fullname" 38 /> 39 </label> 40 </div> 41 <div className="form__item"> 42 <label htmlFor="email"> 43 Correo electrónico 44 <input 45 type="email" 46 id="email" 47 placeholder="Ingrese su e-mail" 48 required 49 name="email" 50 /> 51 </label> 52 </div> 53 <div className="form__item"> 54 <label htmlFor="password"> 55 Contraseña 56 <input 57 type="password" 58 id="password" 59 placeholder="Ingrese su contraseña" 60 name="password" 61 /> 62 </label> 63 </div> 64 <div className="form_item"> 65 <input 66 type="submit" 67 value="Iniciar sesión" 68 className="button full" 69 required 70 /> 71 </div> 72 </form> 73 </div> 74 </div> 75 ); 76}; 77 78export default Register;
REACT_APP_API_URL = http://localhost:3003
REACT_APP_API_USER = https://api-edteam.alejogs4.now.sh
Para que se leída la variable de entorno local, deben parar la ejecución de la app en la terminal y volver a mandarla a producción (con el comando yarn start).
Escribe una respuesta