recuperar contraseña

requirements.txt

@@ -9,6 +9,8 @@ flask-cors==3.0.10
 flask-migrate==2.6.0
 flask-sqlalchemy==2.4.4
 flask-swagger==0.2.14
+
+
 gunicorn==20.0.4
 itsdangerous==1.1.0; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'
 jinja2==2.11.3; python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4'

src/api/routes/user.py

@@ -1,23 +1,50 @@
-from flask import Flask, request, jsonify, url_for, Blueprint # type: ignore
+from flask import Flask, request, jsonify, url_for, Blueprint  # type: ignore
 from api.models.User import User
 from api.database.db import db
-import bcrypt # type: ignore
-from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity # type: ignore
+import bcrypt  # type: ignore
+from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity  # type: ignore
+from datetime import datetime, timedelta
+
+import secrets;
+
+
+
+
 
 
 
 api = Blueprint("api/user", __name__)
 
-#  MOSTRAR TODOS LOS USUARIOS
-# @api.route("/users", methods = ["GET"])
-# def get_all_users():
-#     users = User.query.all()
-#     if users is None:
-#         return jsonify("Error, no hemos encontrado ningun usuario"),404
-#     users = list(map(lambda x : x.serialize(),users))
-#     return jsonify({"all_users": users}),200
+
+
+
+# ENVIAR EMAIL RESET PASSWORD
+@api.route("/resetPassword", methods=["POST"])
+def forget_password(user):
+    body = request.get_json()
+    user = User.query.filter_by(email=body["email"]).first()
+
+    if user is None:
+        return jsonify("La cuenta no existe"), 404
+
+
+
+    token = secrets.token_urlsafe(75)
+    user.reset_token = token
+    user.reset_token_expires = datetime.utcnow() + timedelta(minutes=30) 
+    reset_url_password = f"https://jubilant-spork-7v5jg5r9r9p73xpqq-3001.app.github.dev/api/user/reset-password?token={token}"
+    db.session.commit()
+
+
+
+    return jsonify("¡Correo electrónico enviado exitosamente!")
+
+
+
 
 # REGISTRO DE UN NUEVO USER
+
+
 @api.route('/register', methods=["POST"])
 def register_user():
     body = request.get_json()
@@ -30,7 +57,7 @@ def register_user():
         return jsonify("Error, debes introducir los campos obligatorios"), 404
 
     new_user = User()
-   
+
     new_user.username = body["username"]
     new_user.email = body["email"]
     new_user.password = new_password.decode()
@@ -39,9 +66,11 @@ def register_user():
     db.session.add(new_user)
     db.session.commit()
 
-    return jsonify("Usuario creado"),200
+    return jsonify("Usuario creado"), 200
 
 # REALIZAR UN LOGIN DE UN USUARIO
+
+
 @api.route("/login", methods=["POST"])
 def user_login():
     body = request.get_json()
@@ -59,15 +88,16 @@ def user_login():
 
     return jsonify("contraseña no valida"), 400
 
-@api.route("/", methods = ["GET"])
+
+@api.route("/", methods=["GET"])
 @jwt_required()
 def get_user():
     current_user = get_jwt_identity()
 
     user = User.query.get(current_user)
     if user is None:
-        return jsonify("El usuario no valido"),404
-    
+        return jsonify("El usuario no valido"), 404
+
     return jsonify({"User": user.serialize()})
 
 
@@ -82,6 +112,3 @@ def get_user():
 #     db.session.commit()
 
 #     return jsonify("El usuario ha sido eliminado correctamente"),200
-
-
-

src/front/pages/login/Login.jsx

@@ -95,13 +95,18 @@ export const Login = () => {
                     <div className="text-center">
 
                         <Link to="/Register">
-                            <p className="text-sm text-gray-600">¿No tienes cuenta? Registrate ya
+                            <p className="text-sm text-gray-600  hover:text-blue-500">¿No tienes cuenta? Registrate ya
 
 
 
                             </p>
 
                         </Link>
+                        <Link to ="/RecPassword">
+                            <p className="text-sm text-gray-600 hover:text-blue-500">Has olvidado tu contraseña?Pincha aqui</p>
+
+
+                        </Link>
 
 
                     </div>

src/front/pages/recPassword/RecPassword.jsx

@@ -0,0 +1,66 @@
+import useGlobalReducer from "../../hooks/useGlobalReducer";
+
+
+
+export const RecPassword = () =>{
+
+
+
+
+
+
+
+
+
+
+    return(
+         <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Recuperar contraseña</h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          Ingresa tu email y te enviaremos un enlace para restablecer tu contraseña
+        </p>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <form className="space-y-6" action="#" method="POST">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Correo electrónico
+              </label>
+              <div className="mt-1">
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+                  placeholder="[email protected]"
+                />
+              </div>
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+              >
+                Enviar enlace de recuperación
+              </button>
+            </div>
+
+            <div className="text-center">
+              <a href="#" className="text-sm text-blue-600 hover:text-blue-500 transition-colors duration-200">
+                ← Volver al inicio de sesión
+              </a>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+
+    )
+}

src/front/pages/resetPassword/ResetPassword.jsx

@@ -0,0 +1,21 @@
+export const ResetPassword = () =>{
+    return(
+        <div class="max-w-md mx-auto p-4 md:p-6 mt-20 mb-20 bg-white rounded shadow-md">
+  <h2 class="text-2xl font-bold mb-4">Nueva contraseña</h2>
+  <form>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Nueva contraseña
+      </label>
+      <input class="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Ingrese su nueva contraseña"/>
+    </div>
+    <div class="flex items-center justify-between">
+      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
+        Guardar nueva contraseña
+      </button>
+    </div>
+  </form>
+</div>
+
+    )
+}

src/front/routes.jsx

@@ -18,10 +18,16 @@ import { Addgame } from "./pages/addgame/Addgame.jsx";
 import { DetailsGames } from "./pages/detailsGames/DetailsGames.jsx";
 import { Carro } from "./pages/carro/Carro.jsx";
 import { Historial } from "./pages/historial/Historial.jsx";
+
+import { RecPassword } from "./pages/recPassword/RecPassword.jsx";
+import { ResetPassword } from "./pages/resetPassword/ResetPassword.jsx";
+
+
 import { EditGames } from "./pages/editgames/EditGames.jsx";
 
 
 
+
 export const router = createBrowserRouter(
     createRoutesFromElements(
     // CreateRoutesFromElements function allows you to build route elements declaratively.
@@ -46,10 +52,17 @@ export const router = createBrowserRouter(
         <Route path="/detailsgames/:id" element={<DetailsGames />} /> {/* PAGINA DETALLES GAMES*/}
         <Route path="/carro" element={<Carro />} /> {/* PAGINA Carrito*/}
         <Route path="/historial" element={<Historial />} />
+
+        <Route path="/recPassword" element={<RecPassword />} />
+        <Route path="/resetPassword" element={<ResetPassword />} />
+
+
+
         <Route path="/editgames/:id" element={<EditGames />} /> {/* PAGINA DETALLES GAMES*/}
 
 
 
+
 
       </Route>
     )

src/front/store.js

@@ -4,6 +4,7 @@ export const initialStore = () => {
     user: null,
     all_games: [],
     carro: [], // <- añadido
+
   };
 };
 
@@ -24,6 +25,7 @@ export default function storeReducer(store, action = {}) {
           todo.id === id ? { ...todo, background: color } : todo
         ),
       };
+
 
     case "setGames":
       return {