From 057853d99eebb3f3bbf6b8b8cf601caed3582833 Mon Sep 17 00:00:00 2001
From: Hadj Said Bouras <hadjsaidbouras@hotmail.com>
Date: Thu, 19 Oct 2023 09:53:31 +0100
Subject: [PATCH 1/3] style(index.jsx): add some taildwind css

Add item page #31
---
 src/pages/addItemPage/index.jsx | 161 ++++++++++++++++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 src/pages/addItemPage/index.jsx

diff --git a/src/pages/addItemPage/index.jsx b/src/pages/addItemPage/index.jsx
new file mode 100644
index 0000000..0ac346c
--- /dev/null
+++ b/src/pages/addItemPage/index.jsx
@@ -0,0 +1,161 @@
+import React, { useState, useRef } from "react";
+import { BiSolidDownArrow } from "react-icons/bi";
+
+export default function Index() {
+    const clothes = "whatever";
+    const place = "whatever";
+    const [selectedPhotos, setSelectedPhotos] = useState([]);
+    const [deleteIndices, setDeleteIndices] = useState([]);
+    const fileInputRef = useRef(null);
+
+    const handleFileChange = (e) => {
+        const files = e.target.files;
+        const photoURLs = [...selectedPhotos];
+
+        for (let i = 0; i < files.length; i++) {
+            const photoURL = URL.createObjectURL(files[i]);
+            photoURLs.push(photoURL);
+        }
+
+        setSelectedPhotos(photoURLs);
+    };
+
+    const handleDelete = (index) => {
+        const updatedPhotos = [...selectedPhotos];
+        updatedPhotos.splice(index, 1);
+        setSelectedPhotos(updatedPhotos);
+        setDeleteIndices([...deleteIndices, index]);
+    };
+
+    const handleUploadClick = () => {
+        fileInputRef.current.click();
+    };
+
+    return (
+        <div className='flex justify-center items-center h-screen'>
+            <div className='w-full max-w-md'>
+                <h1 className='text-3xl font-semibold mb-3 text-center'>
+                    Add an Item
+                </h1>
+                <form className='space-y-4'>
+                    <div className='flex flex-col'>
+                        <label htmlFor='title' className='text-sm font-medium'>
+                            Title
+                        </label>
+                        <input
+                            type='text'
+                            id='title'
+                            className='border-current p-2 rounded-md shadow-md text-gray-400'
+                            placeholder='Title'
+                        />
+                    </div>
+
+                    <div className='flex flex-col'>
+                        <label
+                            htmlFor='category'
+                            className='text-sm font-medium'
+                        >
+                            Category <BiSolidDownArrow />
+                        </label>
+                        <select
+                            id='category'
+                            className='border-current p-2 rounded-md shadow-md text-gray-400'
+                        >
+                            <option>{clothes}</option>
+                            <option>{clothes}</option>
+                            <option>{clothes}</option>
+                            <option>{clothes}</option>
+                            <option>{clothes}</option>
+                            <option>{clothes}</option>
+                            <option>{clothes}</option>
+                        </select>
+                    </div>
+
+                    <div className='flex flex-col'>
+                        <label
+                            htmlFor='location'
+                            className='text-sm font-medium'
+                        >
+                            Location
+                        </label>
+                        <select
+                            id='location'
+                            className='border-current p-2 rounded-md shadow-md text-gray-400'
+                        >
+                            <option>{place}</option>
+                            <option>{place}</option>
+                            <option>{place}</option>
+                            <option>{place}</option>
+                            <option>{place}</option>
+                            <option>{place}</option>
+                            <option>{place}</option>
+                        </select>
+                    </div>
+
+                    <div className='flex flex-col'>
+                        <label
+                            htmlFor='description'
+                            className='text-sm font-medium'
+                        >
+                            Description
+                        </label>
+                        <textarea
+                            id='description'
+                            className='border-current p-2 rounded-md shadow-md text-gray-400 h-24'
+                            placeholder='Description'
+                        />
+                    </div>
+
+                    <div className='flex flex-col'>
+                        <label className='text-sm font-medium my-5'>
+                            Upload Photos
+                        </label>
+                        <label
+                            htmlFor='upload-photos'
+                            className='text-sm font-semithin p-2 rounded-md shadow-md text-gray-400 h-24 cursor-pointer'
+                            onClick={handleUploadClick}
+                        >
+                            Uploaded Photos
+                        </label>
+                        <input
+                            type='file'
+                            id='photos'
+                            ref={fileInputRef}
+                            className='hidden'
+                            onChange={handleFileChange}
+                            multiple
+                        />
+                    </div>
+
+                    <div className='flex flex-col'>
+                        <div className='flex flex-wrap -mx-2'>
+                            {selectedPhotos.map((photoURL, index) => (
+                                <div key={index} className='w-1/3 p-2 relative'>
+                                    <button
+                                        onClick={() => handleDelete(index)}
+                                        className='absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-700'
+                                    >
+                                        X
+                                    </button>
+                                    <img
+                                        src={photoURL}
+                                        alt={`Uploaded Photo ${index + 1}`}
+                                        className='max-w-full'
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className='flex justify-end'>
+                        <button className='mr-2 px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white font-semibold rounded-md'>
+                            Confirm
+                        </button>
+                        <button className='px-4 py-2 bg-red-500 hover:bg-red-700 text-white font-semibold rounded-md'>
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

From dc6e6c6b93501e2054963d40f9e1c4e1a5ec5a70 Mon Sep 17 00:00:00 2001
From: Hadj Said Bouras <hadjsaidbouras@hotmail.com>
Date: Fri, 3 Nov 2023 13:33:51 +0100
Subject: [PATCH 2/3] feat(index.jsx): create reset password component

---
 src/pages/reset-password/index.jsx | 58 ++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/pages/reset-password/index.jsx

diff --git a/src/pages/reset-password/index.jsx b/src/pages/reset-password/index.jsx
new file mode 100644
index 0000000..3ef5339
--- /dev/null
+++ b/src/pages/reset-password/index.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { getAuth, sendPasswordResetEmail } from "firebase/auth";
+import { useRouter } from "next/router"; // Import useRouter
+import Button from "@/components/button/Button";
+
+export default function ResetPasswordForm() {
+    const [email, setEmail] = useState("");
+    const router = useRouter(); // Use useRouter
+    const auth = getAuth();
+
+    function handleResetPassword(e) {
+        e.preventDefault();
+        sendPasswordResetEmail(auth, email)
+            .then(() => {
+                router.push("/login"); // Use router.push
+            })
+            .catch((error) => {
+                console.log("Error:", error);
+            });
+    }
+
+    return (
+        <div className='flex justify-center items-center h-screen'>
+            <div className='w-full max-w-md'>
+                <h1 className='text-3xl font-semibold text-center mb-4'>
+                    Reset Password
+                </h1>
+                <form className='bg-white rounded px-8 pt-6 pb-8 mb-4'>
+                    <div className='mb-4'>
+                        <label
+                            className='block text-gray-700 text-sm font-bold mb-2'
+                            htmlFor='email'
+                        >
+                            Email
+                        </label>
+                        <input
+                            className='border-green border-2 appearance-none rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
+                            id='email'
+                            type='email'
+                            placeholder='example@company.com'
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <Button size='full' onClick={(e) => handleResetPassword(e)}>
+                        Reset Password
+                    </Button>
+                </form>
+                <div className='text-center'>
+                    <a className='underline' href='/login'>
+                        Back to Login
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}

From 335752bbd1666d52b2437a3d5922bba710f75d33 Mon Sep 17 00:00:00 2001
From: ismailbenlaredj <yako_is@yahoo.fr>
Date: Mon, 6 Nov 2023 18:47:07 +0100
Subject: [PATCH 3/3] feat(reset password page): add error message & add Link
 component

---
 src/pages/reset-password/index.jsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/reset-password/index.jsx b/src/pages/reset-password/index.jsx
index 3ef5339..3650d21 100644
--- a/src/pages/reset-password/index.jsx
+++ b/src/pages/reset-password/index.jsx
@@ -1,10 +1,13 @@
-import { useState } from "react";
 import { getAuth, sendPasswordResetEmail } from "firebase/auth";
+import Link from "next/link";
 import { useRouter } from "next/router"; // Import useRouter
+import { useState } from "react";
+
 import Button from "@/components/button/Button";
 
 export default function ResetPasswordForm() {
     const [email, setEmail] = useState("");
+    const [errorMessage, setErrorMessage] = useState();
     const router = useRouter(); // Use useRouter
     const auth = getAuth();
 
@@ -15,7 +18,7 @@ export default function ResetPasswordForm() {
                 router.push("/login"); // Use router.push
             })
             .catch((error) => {
-                console.log("Error:", error);
+                setErrorMessage(error.message);
             });
     }
 
@@ -27,6 +30,9 @@ export default function ResetPasswordForm() {
                 </h1>
                 <form className='bg-white rounded px-8 pt-6 pb-8 mb-4'>
                     <div className='mb-4'>
+                        {errorMessage && (
+                            <p className='text-red'>{errorMessage}</p>
+                        )}
                         <label
                             className='block text-gray-700 text-sm font-bold mb-2'
                             htmlFor='email'
@@ -48,9 +54,9 @@ export default function ResetPasswordForm() {
                     </Button>
                 </form>
                 <div className='text-center'>
-                    <a className='underline' href='/login'>
+                    <Link className='underline' href='/login'>
                         Back to Login
-                    </a>
+                    </Link>
                 </div>
             </div>
         </div>