Código de la clase
A continuación el código de:
Login.jsx
import React from "react";
import Axios from "axios";
const authentication = (e) => {
e.preventDefault();
const form = e.target;
const data = {
email: form.email.value,
password: form.password.value,
};
Axios.post(`${process.env.REACT_APP_API_USER}/login`, data)
.then((response) => {
localStorage.setItem("token", response.data.token);
window.location = "/";
})
.catch((error) => console.log(error));
};
const Login = () => {
return (
<div className="ed-grid">
<div className="l-block"></div>
<div className="m-to-center m-60 lg-30">
<h1 className="center">Iniciar sesión</h1>
<form onSubmit={authentication.bind()}>
<div className="form__item">
<label htmlFor="email">
Correo electrónico
<input
type="email"
id="email"
placeholder="Ingrese su e-mail"
required
name="email"
/>
</label>
</div>
<div className="form__item">
<label htmlFor="password">
Contraseña
<input
type="password"
id="password"
placeholder="Ingrese su contraseña"
name="password"
/>
</label>
</div>
<div className="form_item">
<input
type="submit"
value="Iniciar sesión"
className="button full"
required
/>
</div>
</form>
</div>
</div>
);
};
export default Login;
Register.jsx
import React from "react";
import Axios from "axios";
const registration = (e) => {
e.preventDefault();
const form = e.target;
const data = {
email: form.email.value,
name: form.fullname.value,
password: form.password.value,
};
Axios.post(`${process.env.REACT_APP_API_USER}/signup`, data)
.then(() => {
alert("Usuario creado");
window.location = "/login";
})
.catch(() => alert("Error al crear el usuario"));
};
const Register = () => {
return (
<div className="ed-grid">
<div className="l-block"></div>
<div className="m-to-center m-60 lg-30">
<h1 className="center">Crear cuenta</h1>
<form onSubmit={registration.bind()}>
<div className="form__item">
<label htmlFor="fullname">
Nombre completo
<input
type="text"
id="fullname"
placeholder="Ingrese su nombre"
required
name="fullname"
/>
</label>
</div>
<div className="form__item">
<label htmlFor="email">
Correo electrónico
<input
type="email"
id="email"
placeholder="Ingrese su e-mail"
required
name="email"
/>
</label>
</div>
<div className="form__item">
<label htmlFor="password">
Contraseña
<input
type="password"
id="password"
placeholder="Ingrese su contraseña"
name="password"
/>
</label>
</div>
<div className="form_item">
<input
type="submit"
value="Iniciar sesión"
className="button full"
required
/>
</div>
</form>
</div>
</div>
);
};
export default Register;
# Variables de entorno local
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).