Merge pull request #54 from FSDSTR0225/dev

Dev

Author: carlosdamota

src/components/home/NumbersSection.jsx

@@ -70,7 +70,7 @@ export const NumbersSection = () => {
           </div>
           <div className="flex flex-col items-center">
             <span className="text-3xl sm:text-4xl md:text-5xl font-bold text-secondary-50 mb-2 block">+{acceptedApplications * 100}</span>
-            <span className="text-neutral-20 text-sm md:text-base block">Applications accepted</span>
+            <span className="text-neutral-20 text-sm md:text-base block">Hired</span>
           </div>
         </div>
       </div>

src/components/home/StackTechnologies.jsx

@@ -14,14 +14,14 @@ export const StackTechnologies = () => {
   ];
 
   const techImages = [
-    'https://cdn.worldvectorlogo.com/logos/mongodb-icon-2.svg',
-    'https://cdn.worldvectorlogo.com/logos/react-2.svg',
-    'https://cdn.worldvectorlogo.com/logos/typescript.svg',
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png',
-    'https://cdn.worldvectorlogo.com/logos/python-5.svg',
-    'https://static.cdnlogo.com/logos/m/88/mysql.svg',
-    'https://raw.githubusercontent.com/devicons/devicon/ca28c779441053191ff11710fe24a9e6c23690d6/icons/nodejs/nodejs-plain-wordmark.svg',
-    'https://cdn.worldvectorlogo.com/logos/postgresql.svg'
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751453660/mongodb-icon_odsgnz.svg',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751453733/react-icon_urbntl.svg',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751453808/typescript-icon_yeafon.svg',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751453935/javascript-icon_emsenf.png',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751454010/python-icon_quwslf.svg',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751454075/mysql-icon_jnh7zm.svg',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751454113/nodejs-icon_zza7u2.svg',
+    'https://res.cloudinary.com/djxyqh8fx/image/upload/v1751454149/postgresql-icon_q0tmkq.svg'
   ];
 
   const techCategories = [

src/components/settings/ChangePasswordModal.jsx

@@ -1,12 +1,10 @@
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form"
-import { updateProfile } from "../../services/profileService";
 
 export default function ChangePasswordModal({ open, setOpen, profileData, onProfileUpdate, onSubmit }) {
   const {
     register,
     handleSubmit,
-    control,
     reset,
     watch,
     formState: { isSubmitting }

src/components/settings/RemoveAccountModal.jsx

@@ -1,60 +1,53 @@
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form"
-import { updateProfile } from "../../services/profileService";
 
-export default function RemoveAccountModal({ open, setOpen, profileData, onProfileUpdate, onSubmit }) {
+export default function RemoveAccountModal({ open, setOpen, profileData, onSubmit }) {
+
   const {
     register,
     handleSubmit,
-    control,
     reset,
-    watch,
-    formState: { isSubmitting }
+    formState: { isSubmitting, errors }
   } = useForm();
 
-  // Observar las contraseñas para validar que coincidan
-  const newPassword = watch("newPassword");
-
   useEffect(() => {
-    if (profileData) {
-      reset({
-        oldPassword: "",
-        newPassword: "",
-        confirmPassword: "",
-      });
-    } else {
+    if (open) {
       reset({
-        oldPassword: "",
-        newPassword: "",
-        confirmPassword: "",
+        email: "",
       });
     }
-  }, [profileData, reset]);
+  }, [open, reset]);
 
   const handleClose = () => {
     reset();
     setOpen(false);
   };
 
-  const handlePassSubmit = async (data) => {
+  const handleDeleteSubmit = async (data) => {
     try {
-      if (data.newPassword !== data.confirmPassword) {
-        alert("Your new passwords don't match");
+      // Debug: ver qué emails estamos comparando
+      console.log("Email ingresado:", data.email);
+      console.log("Email del perfil:", profileData?.email);
+      
+      // Verificar que el email coincida con el del usuario
+      const inputEmail = data.email?.trim().toLowerCase();
+      const profileEmail = profileData?.email?.trim().toLowerCase();
+      
+      if (inputEmail !== profileEmail) {
+        alert(`The email doesn't match your account email. Expected: ${profileData?.email}`);
         return;
       }
 
+      // Llamar a onSubmit (igual que en updatePassword)
       if (onSubmit) {
         await onSubmit(data);
       }
 
-      if (onProfileUpdate) {
-        onProfileUpdate({ password: data.newPassword });
-      }
-
       handleClose();
-
+      
     } catch (error) {
-      console.error("Error when you tried change the password: ",error);
+      console.error("Error when trying to delete account:", error);
+      alert("Error deleting account. Please try again.");
     }
   }
 
@@ -63,60 +56,46 @@ export default function RemoveAccountModal({ open, setOpen, profileData, onProfi
   return (
     <div className="modal modal-open fixed inset-0 flex justify-center items-center z-50">
       <div className="modal-box max-w-3xl bg-neutral-80 border border-neutral-70 rounded-lg p-6 relative">
-        <form onSubmit={handleSubmit(handlePassSubmit)} className="flex flex-col gap-4">
-          <h2 className="text-2xl font-bold text-center">Remove your account</h2>
-
-
-
-
-          {/*Email*/}
-          <div className="form-control">
-            <label className="block text-sm text-neutral-20 mb-1">
-              <span className="label-text font-semibold">Email</span>
-            </label>
-            <input 
-              type="password"
-              {...register("newPassword", {
-                required: "Your email is requiered"
-              })} 
-              placeholder="Enter your email" 
-              className="input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic" 
-            />
+        <form onSubmit={handleSubmit(handleDeleteSubmit)} className="flex flex-col gap-4">
+          <h2 className="text-2xl font-bold text-center text-red-500">Remove your account</h2>
+          
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+            <strong>Warning:</strong> This action cannot be undone. Your account and all associated data will be permanently deleted.
           </div>
-
-          {/* Password*/}
+              
+          {/* Email */}
           <div className="form-control">
             <label className="block text-sm text-neutral-20 mb-1">
-              <span className="label-text font-semibold">Password</span>
+              <span className="label-text font-semibold">Confirm your email</span>
             </label>
             <input 
-              type="password"
-              {...register("Password", {
-                required: "Your password is requiered",
-                validate: value => value === newPassword
+              type="email"
+              {...register("email", {
+                required: "Your email is required"
               })} 
-              placeholder="Enter your password" 
-              className="input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic" 
+              placeholder="Enter your email to confirm"
+              className="input input-bordered bg-neutral-90 text-neutral-0 border-neutral-60 w-full placeholder-neutral-40 placeholder:italic"
             />
+            {errors.email && (
+              <span className="text-red-500 text-sm mt-1">{errors.email.message}</span>
+            )}
           </div>
-
-          
-
+                     
           {/* Buttons */}
           <div className="flex justify-end gap-4 pt-4">
             <button 
-              type="submit" 
-              disabled={isSubmitting} 
-              className="btn bg-red-600 text-neutral-0 hover:bg-red-500 border "
+              type="button"
+              onClick={handleClose}
+              className="btn bg-neutral-90 border border-neutral-70 text-neutral-0 hover:text-primary-40"
             >
-              {isSubmitting ? "Changing..." : "Remove your account"}
+              Cancel
             </button>
             <button 
-              type="button" 
-              onClick={handleClose} 
-              className="btn bg-neutral-90 border border-neutral-70 text-neutral-0 hover:text-primary-40"
+              type="submit"
+              disabled={isSubmitting}
+              className="btn bg-red-600 text-neutral-0 hover:bg-red-700 border"
             >
-              Cancel
+              {isSubmitting ? "Deleting..." : "Delete Account Permanently"}
             </button>
           </div>
         </form>

src/features/auth/ForgotPasswordModal.jsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { forgotPassword } from "../../services/authService";
+
+export const ForgotPasswordModal = ({ open, setOpen }) => {
+  
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClose = () => {
+    setEmail("");
+    setMessage("");
+    setOpen(false);
+  };
+
+  const handleSendEmail = async () => {
+    if (!email.trim()) {
+      setMessage("Please, add your email");
+      return;
+    }
+
+    setIsLoading(true);
+    setMessage("");
+
+    try {
+      console.log(email)
+      const res = await forgotPassword(email);
+      setMessage(res.message || "Mail Send. Check your inbox.");
+      setTimeout(() => {
+        handleClose();
+      }, 2000);
+    } catch (error) {
+      console.error("Error sending email", error?.message);
+      setMessage(error?.message || "Error sending email");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="modal modal-open fixed inset-0 flex justify-center items-center z-50 ">
+      <div className="modal-box max-w-md bg-neutral-80 p-6 relative">
+        <h2 className="text-2xl font-bold text-center">Recover password</h2>
+
+        <div className="form-control">
+          <label className="block text-sm font-semibold">Email</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Enter your email"
+            className="input input-bordered w-full bg-neutral-60"
+            required
+          />
+        </div>
+
+        {message && (
+          <p className="text-sm text-start text-secondary-60">{message}</p>
+        )}
+
+        <div className="flex justify-end gap-4 pt-4">
+          <button
+            onClick={handleSendEmail}
+            className="btn bg-primary-60 text-neutral-10 hover:bg-primary-70 w-full md:w-auto"
+            disabled={isLoading}
+          >
+            {isLoading ? "Sending..." : "Send link"}
+          </button>
+          <button
+            type="button"
+            onClick={handleClose}
+            className="btn bg-neutral-70 text-neutral-10 hover:bg-neutral-60 border border-neutral-60 w-full md:w-auto"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/features/auth/ResetPassword.jsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router";
+import { resetPassword } from "../../services/authService";
+
+export const ResetPassword = () => {
+
+const { token } = useParams();
+const navigate = useNavigate();
+
+const [password, setPassword] = useState("");
+const [message, setMessage] = useState("");
+const [isSubmitting, setIsSubmitting] = useState(false);
+
+const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setMessage("");
+
+    try {
+        const res = await resetPassword(token, password);
+        setMessage(res.msg || "Password updated successfully.");
+        setTimeout(() => navigate("/login"), 2000);
+    } catch (err) {
+        setMessage(err.message);
+    } finally {
+        setIsSubmitting(false);
+    }
+};
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-neutral-60 px-4">
+      <div className="bg-neutral-80 shadow-lg rounded-lg p-8 max-w-md w-full">
+        <h2 className="text-2xl font-bold text-center mb-4">
+          Reset your Password
+        </h2>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <input
+            type="password"
+            placeholder="New password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            className="input input-bordered w-full bg-neutral-90"
+          />
+
+          <button
+            type="submit"
+            className="btn bg-primary-60 text-neutral-10 hover:bg-primary-70 w-full"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? "Saving..." : "Change password"}
+          </button>
+        </form>
+
+        {message && (
+          <p className="mt-4 text-center text-sm text-primary-60">{message}</p>
+        )}
+      </div>
+    </div>
+  );
+}