Fix/views

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>

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>
           )}
 

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/"),
   };
 };

src/components/Navbar/Navbar.jsx

@@ -23,14 +23,15 @@ const Navbar = () => {
     isEmailPage,
     isConfirmPage,
     isForgotPage,
+    isResetPasswordPage
   } = useRouteVariables();
 
   const [open, setOpen] = useState(false);
 
   const toggleMenu = () => {
     setOpen(!open);
   };
-  if (isLoginPage || isSignupPage || isEmailPage || isForgotPage) {
+  if (isLoginPage || isSignupPage || isEmailPage || isForgotPage || isResetPasswordPage) {
     return null;
   }
 

src/components/PostDetailsCard.jsx

@@ -14,10 +14,12 @@ 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 +80,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
@@ -132,6 +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" }}
             required
           />
           <button

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: "",
@@ -48,7 +48,7 @@ const ContactForm = () => {
 
       setFormValues({
         name: "",
-        email: savedEmail, // Restaurar el valor del email guardado
+        email: savedEmail,
         message: "",
       });
     }
@@ -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">

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.");
     }
   };
 

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,11 @@ const ResetPassword = () => {
   }, [location.pathname]);
 
   const handleResetPassword = async () => {
+    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 +66,37 @@ 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">