From 08d2b03790ddb41947e80475b9e0b8efe981d2df Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 23 Jan 2024 10:35:40 -0400
Subject: [PATCH 1/4] Style: change of sizes and design -Change the style of
 the comment box and apply a min-height and max-height. -Hidden the token's
 recovery password. -Modify password recovery with 2 verifications.

---
 src/components/Comments.jsx        |  4 +--
 src/components/Navbar/Dropdown.jsx | 13 +++++++---
 src/components/Navbar/Location.jsx |  3 ++-
 src/components/Navbar/Navbar.jsx   |  3 ++-
 src/components/PostDetailsCard.jsx |  1 +
 src/pages/Contact.js               |  2 +-
 src/pages/ResetPassword.js         | 40 +++++++++++++++++++-----------
 7 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
index a222f29..476b272 100644
--- a/src/components/Comments.jsx
+++ b/src/components/Comments.jsx
@@ -50,7 +50,7 @@ export const Comment = ({ comment, onDelete, onEdit }) => {
     comment?.commentator?.trim() === Cookies.get("username")?.trim()
 
   return (
-    <div className="comentario mb-3">
+    <div className=" mflex-1 border rounded-lg px-4 py-2 sm:px-6 sm:py-4 leading-relaxed my-2">
       <div className="comentario-info">
         <strong className="text-base font-semibold text-gray-900">
           {comment.commentator}
@@ -104,7 +104,7 @@ export const Comment = ({ comment, onDelete, onEdit }) => {
         <textarea
           value={editedText}
           onChange={(e) => setEditedText(e.target.value)}
-          className="text-sm text-gray-600 border p-1 mt-2"
+          className="text-sm text-gray-600 border p-1 mt-2 w-full"
         />
       ) : (
         <div className="text-sm text-gray-600">{comment.text}</div>
diff --git a/src/components/Navbar/Dropdown.jsx b/src/components/Navbar/Dropdown.jsx
index e8b7c2c..d6c5926 100644
--- a/src/components/Navbar/Dropdown.jsx
+++ b/src/components/Navbar/Dropdown.jsx
@@ -4,7 +4,12 @@ import { useRouteVariables } from "./Location";
 import useAuth from "../../hooks/useAuth";
 import Cookies from "js-cookie";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSignOutAlt,faUserTie, faBell, faHeadset } from "@fortawesome/free-solid-svg-icons";
+import {
+  faSignOutAlt,
+  faUserTie,
+  faBell,
+  faHeadset,
+} from "@fortawesome/free-solid-svg-icons";
 
 const Dropdown = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -63,7 +68,7 @@ const Dropdown = () => {
         onClick={toggleMenu}
       >
         <span className="mx-1 text-sm font-semibold ">
-        <FontAwesomeIcon icon={faUserTie} bounce/> {Cookies.get("username")}
+          <FontAwesomeIcon icon={faUserTie} /> {Cookies.get("username")}
         </span>
         <svg
           className="w-5 h-5 mx-1"
@@ -90,7 +95,7 @@ const Dropdown = () => {
         >
           <div className="mx-1">
             <h1 className="text-sm font-semibold text-gray-700 dark:text-gray-200">
-            <FontAwesomeIcon icon={faUserTie} /> {Cookies.get("username")}
+              <FontAwesomeIcon icon={faUserTie} /> {Cookies.get("username")}
             </h1>
             <p className="text-sm text-gray-500 dark:text-gray-400">
               {Cookies.get("email")}
@@ -111,7 +116,7 @@ const Dropdown = () => {
               onClick={handleMenuItemClick}
               className="block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
             >
-              Subscribe <FontAwesomeIcon icon={faBell} shake/>
+              Subscribe <FontAwesomeIcon icon={faBell} />
             </Link>
           )}
 
diff --git a/src/components/Navbar/Location.jsx b/src/components/Navbar/Location.jsx
index 157b07f..a45f805 100644
--- a/src/components/Navbar/Location.jsx
+++ b/src/components/Navbar/Location.jsx
@@ -16,6 +16,7 @@ export const useRouteVariables = () => {
     hideHomeLink: location.pathname.startsWith("/posts/"),
     isEmailPage: location.pathname==="/email",
     isConfirmPage: location.pathname==="/confirm-unsubscribe",
-    isForgotPage: location.pathname ==="/forgot-password"
+    isForgotPage: location.pathname ==="/forgot-password",
+    isResetPasswordPage: location.pathname.startsWith("/reset-password/"),
   };
 };
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index c4e5c1a..c3206ec 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -23,6 +23,7 @@ const Navbar = () => {
     isEmailPage,
     isConfirmPage,
     isForgotPage,
+    isResetPasswordPage
   } = useRouteVariables();
 
   const [open, setOpen] = useState(false);
@@ -30,7 +31,7 @@ const Navbar = () => {
   const toggleMenu = () => {
     setOpen(!open);
   };
-  if (isLoginPage || isSignupPage || isEmailPage || isForgotPage) {
+  if (isLoginPage || isSignupPage || isEmailPage || isForgotPage || isResetPasswordPage) {
     return null;
   }
 
diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 7e764e4..6d6b4ce 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -132,6 +132,7 @@ export function PostDetailsCard() {
             placeholder="Type your comment..."
             className="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
             focus:outline-none focus:ring-1 bg-gray-50 focus:ring-blue-600 focus:border-blue-600 text-sm"
+            style={{ minHeight: "100px", maxHeight: "200px"}}
             required
           />
           <button
diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index 2acad72..8048206 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -48,7 +48,7 @@ const ContactForm = () => {
 
       setFormValues({
         name: "",
-        email: savedEmail, // Restaurar el valor del email guardado
+        email: savedEmail,
         message: "",
       });
     }
diff --git a/src/pages/ResetPassword.js b/src/pages/ResetPassword.js
index 49cd1f2..7ae950d 100644
--- a/src/pages/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -6,6 +6,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 const ResetPassword = () => {
   const [token, setToken] = useState("");
   const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -15,6 +16,12 @@ const ResetPassword = () => {
   }, [location.pathname]);
 
   const handleResetPassword = async () => {
+    // Validar que las contraseñas coincidan
+    if (newPassword !== confirmPassword) {
+      toast.error("Passwords do not match");
+      return;
+    }
+
     try {
       const response = await axios.post(
         "http://localhost:4000/api/auth/reset-password",
@@ -60,36 +67,41 @@ const ResetPassword = () => {
               </p>
             </div>
             <form className="px-8 pt-6 pb-8 mb-4 bg-white rounded">
+              <input
+                type="hidden"
+                id="token"
+                value={token}
+              />
               <div className="mb-4">
                 <label
                   className="block mb-2 text-sm font-bold text-gray-700"
-                  htmlFor="token"
+                  htmlFor="newPassword"
                 >
-                  Token
+                  New Password
                 </label>
                 <input
-                  className=" cursor-not-allowed w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline bg-gray-100"
-                  id="token"
-                  type="text"
-                  placeholder="Token"
-                  value={token}
-                  disabled
+                  className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
+                  id="newPassword"
+                  type="password"
+                  placeholder="Enter New Password..."
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
                 />
               </div>
               <div className="mb-4">
                 <label
                   className="block mb-2 text-sm font-bold text-gray-700"
-                  htmlFor="newPassword"
+                  htmlFor="confirmPassword"
                 >
-                  New Password
+                  Confirm Password
                 </label>
                 <input
                   className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
-                  id="newPassword"
+                  id="confirmPassword"
                   type="password"
-                  placeholder="Enter New Password..."
-                  value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
+                  placeholder="Confirm Password..."
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
                 />
               </div>
               <div className="mb-6 text-center">

From 840486a3ccfc3665653a9bcc5475245fc7ddc49f Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 23 Jan 2024 11:08:55 -0400
Subject: [PATCH 2/4] Fix: bug when logging in

---
 src/components/PostDetailsCard.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 6d6b4ce..1b97db3 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -14,10 +14,10 @@ import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export function PostDetailsCard() {
   const { state } = useLocation();
-  const relativeDate = moment(state.post.createdAt).fromNow();
+  const relativeDate = state?.post ? moment(state.post.createdAt).fromNow() : '';
   const [commentText, setCommentText] = useState("");
   const { getPost } = usePosts();
-  const [postData, setPostData] = useState(state.post);
+  const [postData, setPostData] = useState(state?.post || {});
 
   const handleCommentSubmit = async (e) => {
     e.preventDefault();
@@ -78,7 +78,7 @@ export function PostDetailsCard() {
     window.history.back();
   };
   return (
-    <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
+    <article className="container mx-auto max-w-2xl bg-white rounded shadow-lg  hover:shadow-2xl transform transition-all duration-500 m-10">
       <header className="flex items-center justify-between px-4">
         <div className="flex justify-between items-center py-4">
           <button

From 666908d8b4e71ee82695a6f989864536f850fabc Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 23 Jan 2024 11:13:11 -0400
Subject: [PATCH 3/4] Refactor: format document

---
 src/components/PostDetailsCard.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/PostDetailsCard.jsx b/src/components/PostDetailsCard.jsx
index 1b97db3..a08dd4f 100644
--- a/src/components/PostDetailsCard.jsx
+++ b/src/components/PostDetailsCard.jsx
@@ -14,7 +14,9 @@ import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export function PostDetailsCard() {
   const { state } = useLocation();
-  const relativeDate = state?.post ? moment(state.post.createdAt).fromNow() : '';
+  const relativeDate = state?.post
+    ? moment(state.post.createdAt).fromNow()
+    : "";
   const [commentText, setCommentText] = useState("");
   const { getPost } = usePosts();
   const [postData, setPostData] = useState(state?.post || {});
@@ -132,7 +134,7 @@ export function PostDetailsCard() {
             placeholder="Type your comment..."
             className="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
             focus:outline-none focus:ring-1 bg-gray-50 focus:ring-blue-600 focus:border-blue-600 text-sm"
-            style={{ minHeight: "100px", maxHeight: "200px"}}
+            style={{ minHeight: "100px", maxHeight: "200px" }}
             required
           />
           <button

From 90d7f41606ec47ac795f402db01b77eedf4bfab3 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 23 Jan 2024 14:39:43 -0400
Subject: [PATCH 4/4] Feat: implementation .env in contact and styles
 ResetPassword and ForgotPassword page

---
 src/pages/Contact.js        | 6 +++---
 src/pages/ForgotPassword.js | 6 +++---
 src/pages/ResetPassword.js  | 7 +------
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index 8048206..487cf28 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -4,9 +4,9 @@ import { faHeadset } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Cookies from "js-cookie";
 const apiWeb = process.env.REACT_APP_API_CONTACT;
-
+const apiEmail =process.env.REACT_APP_EMAIL_KEY
 const ContactForm = () => {
-  const savedEmail = Cookies.get("email") ;
+  const savedEmail = Cookies.get("email");
 
   const [formValues, setFormValues] = useState({
     name: "",
@@ -68,7 +68,7 @@ const ContactForm = () => {
           <input
             type="hidden"
             name="access_key"
-            value="22ce114e-b91e-4bf5-b88e-d54b1a19a69c"
+            value={apiEmail}
           />
           <div className="grid gap-6 sm:grid-cols-2">
             <div className="relative z-0">
diff --git a/src/pages/ForgotPassword.js b/src/pages/ForgotPassword.js
index 6c34af6..9ba1fc4 100644
--- a/src/pages/ForgotPassword.js
+++ b/src/pages/ForgotPassword.js
@@ -19,15 +19,15 @@ const ForgotPassword = () => {
       if (response.status === 200) {
         navigate("/email");
       } else if (response.status === 204) {
-        toast.error("Tu correo electrónico no está registrado con nosotros");
+        toast.error("Your email is not registered with us");
       } else {
         toast.error(
           response.data.message ||
-            "Error al enviar el correo de restablecimiento."
+            "Error sending reset email."
         );
       }
     } catch (error) {
-      toast.error("Error al enviar el correo de restablecimiento.");
+      toast.error("Error sending reset email.");
     }
   };
 
diff --git a/src/pages/ResetPassword.js b/src/pages/ResetPassword.js
index 7ae950d..ccac6d7 100644
--- a/src/pages/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -16,7 +16,6 @@ const ResetPassword = () => {
   }, [location.pathname]);
 
   const handleResetPassword = async () => {
-    // Validar que las contraseñas coincidan
     if (newPassword !== confirmPassword) {
       toast.error("Passwords do not match");
       return;
@@ -67,11 +66,7 @@ const ResetPassword = () => {
               </p>
             </div>
             <form className="px-8 pt-6 pb-8 mb-4 bg-white rounded">
-              <input
-                type="hidden"
-                id="token"
-                value={token}
-              />
+              <input type="hidden" id="token" value={token} />
               <div className="mb-4">
                 <label
                   className="block mb-2 text-sm font-bold text-gray-700"