Login funcionalidad

src/api/routes.py

@@ -83,4 +83,25 @@ def login():
 
 # # ESTE PROCESO DE DONDE SE GUARDA LOS LLEVA EL PERSONAL DE JWT    
     except NoResultFound:
-        return jsonify ({"msg": "Bad password or email"}), 401
+        return jsonify ({"msg": "Bad password or email"}), 401
+
+    # Protect a route with jwt_required, which will kick out requests
+# without a valid JWT present.
+@api.route("/profile", methods=["GET"])
+# esto de abajo seria el portero de la analogia, entre la ruta y el metodo de autenticación 
+@jwt_required()
+# cuando el corrobora el token entra a la funcion y especifica
+def protected():
+    # Access the identity of the current user with get_jwt_identity
+    # verifica la identidad ( de quien es el token ) , lo corrobora
+    current_user = get_jwt_identity()
+
+    # con la identidad anterior nosotros hacemos una busqueda
+
+    # user = db.session.execute(db.select(User).filter_by(email=current_user)).scalar_one()
+
+
+#con la busqueda del señor anterior en la tabla favoritos fijate cuantos tiene y traemelos 
+# user = db.session.execute(db.select(User).filter_by(email=email)).scalar_one()
+    # la entidad verificada se guarda en el espacio de memoria
+    return jsonify(logged_in_as=current_user), 200

src/front/js/pages/loginview.js

@@ -1,34 +1,45 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Context } from "../store/appContext";
 import "../../styles/home.css";
-import { Link } from "react-router-dom";
-import logo from "../store/logo-sin-fondo.jpg"
+import { Link, useNavigate } from "react-router-dom";
+// import logo from "../store/logo-sin-fondo.jpg"
 
 export const Loginview = () => {
-  // const { store, actions } = useContext(Context);
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const { store, actions } = useContext(Context);
+  let navigate = useNavigate();
+  async function handleSubmit(e) {
+    e.preventDefault()
+    //console.log(email, password);
+    let logged = await actions.login(email, password)
+    if (logged === false) {
+      alert("email or password wrong")
+    }else{
+      navigate("/profile")
+    }
+  }
 
+  // const { store, actions } = useContext(Context);
   return (
-
-
     <div className="container-fluid mx-auto d-flex marginlogintop justify-content-center">
       <div className="card border border-0 marginloginright" style={{ width: "18rem" }}>
       <img src={ logo } alt="Logo sin fondo"/>
 
 
       </div>
-
-      <form>
+      <form onSubmit={handleSubmit}>
         <div className="mb-3">
           <div className="d-flex justify-content-center mb-4 fs-1 textcolors">Welcome Back!</div>
           <div className="d-flex justify-content-center mb-4">Login below or&nbsp;<a href="forgot password"> create an account</a>
           </div>
-          <label for="exampleInputEmail1" className="form-label ">Email address</label>
-          <input type="email" className="form-control bordercolor border border-3" id="exampleInputEmail1" aria-describedby="emailHelp" />
+          <label htmlFor="exampleInputEmail1" className="form-label ">Email address</label>
+          <input type="email" className="form-control bordercolor border border-3" id="exampleInputEmail1" aria-describedby="emailHelp" onChange={(e) => setEmail(e.target.value)} value={email} />
           <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
         </div>
         <div className="mb-3">
-          <label for="exampleInputPassword1" className="form-label">Password</label>
-          <input type="password" className="form-control bordercolor border border-3" id="exampleInputPassword1" />
+          <label htmlFor="exampleInputPassword1" className="form-label">Password</label>
+          <input type="password" className="form-control bordercolor border border-3" id="exampleInputPassword1" onChange={(e) => setPassword(e.target.value)} value={password} />
         </div>
         <button type="submit" className="backbutton  w-100 border border rounded p-1 mb-1">Sign in</button>
         <Link to={"/resetpassword/"} className="d-flex justify-content-center mt-2">

src/front/js/store/flux.js

@@ -2,6 +2,8 @@ const getState = ({ getStore, getActions, setStore }) => {
 	return {
 		store: {
 			message: null,
+			token: null,
+			user: null,
 			demo: [
 				{
 					title: "FIRST",
@@ -21,6 +23,36 @@ const getState = ({ getStore, getActions, setStore }) => {
 				getActions().changeColor(0, "green");
 			},
 
+
+					 login: async (email, password) => {
+						//console.log(email, password);
+						const myHeaders = new Headers();
+						myHeaders.append("Content-Type", "application/json");
+						const raw = JSON.stringify({
+							"email": email,
+							"password": password
+						});
+						const requestOptions = {
+							method: "POST",
+							headers: myHeaders,
+							body: raw
+						};
+						try {
+							const response = await fetch("https://glorious-garbanzo-x5vw5j6w55gxhpvqr-3001.app.github.dev/api/login", requestOptions);
+							const result = await response.json();
+							console.log(response);
+							console.log(result)
+							if (response.status !== 200){
+								return false
+							}
+							localStorage.setItem("token", result.access_token)
+							return true
+						} catch (error) {
+							console.error(error);
+						};
+
+			},
+
 			getMessage: async () => {
 				try{
 					// fetching data from the backend