From 3b6cc42280b036ac43ce156bd6edb767b41cc366 Mon Sep 17 00:00:00 2001
From: nikhil wankhade <nikhilw395@gmail.com>
Date: Mon, 27 May 2024 00:50:02 +0530
Subject: [PATCH] profile form

---
 client/src/App.jsx                            |   8 +-
 client/src/components/navbar/Navbar.jsx       |  43 ++---
 client/src/components/profile/Profile.jsx     |   4 +
 .../user/{ => registration}/Login.jsx         |   0
 .../user/{ => registration}/Register.jsx      |   4 +-
 .../user/userDetails.jsx/UserDetails.jsx      | 159 ++++++++++++++++++
 .../user/verification/VerifyDocs.jsx          |  92 ++++++++++
 7 files changed, 287 insertions(+), 23 deletions(-)
 rename client/src/components/user/{ => registration}/Login.jsx (100%)
 rename client/src/components/user/{ => registration}/Register.jsx (95%)
 create mode 100644 client/src/components/user/userDetails.jsx/UserDetails.jsx
 create mode 100644 client/src/components/user/verification/VerifyDocs.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index b918296..c1e3e2c 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,9 +1,11 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom"
-import Login from "./components/user/Login.jsx"
+import Login from "./components/user/registration/Login.jsx"
 import Navbar from "./components/navbar/Navbar.jsx"
 import Footer from "./components/footer/Footer.jsx"
-import Register from "./components/user/Register.jsx"
+import Register from "./components/user/registration/Register.jsx"
 import Profile from "./components/profile/Profile.jsx"
+import UserDetails from "./components/user/userDetails.jsx/UserDetails.jsx"
+import VerifyDocs from "./components/user/verification/VerifyDocs.jsx"
 
 const App = () => {
   return (
@@ -14,6 +16,8 @@ const App = () => {
           <Route element={<Login />} path="/login" />
           <Route element={<Register />} path="/register" />
           <Route element={<Profile />} path="/user/profile" />
+          <Route element={<UserDetails />} path="/registration/user/details" />
+          <Route element={<VerifyDocs />} path="/registration/user/VerifyDocs" />
         </Routes>
         <Footer />
       </BrowserRouter>
diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx
index 9672a24..cf70687 100644
--- a/client/src/components/navbar/Navbar.jsx
+++ b/client/src/components/navbar/Navbar.jsx
@@ -3,6 +3,14 @@ import { useState } from "react";
 import { FaBars, FaTimes } from "react-icons/fa";
 const logoImg = "/public/img/RISHTA.png";
 
+const navItems = [
+    { to: "/", label: "Home", className: "text-white hover:text-gray-400" },
+    { to: "/about", label: "About", className: "text-white hover:text-gray-400" },
+    { to: "/contact", label: "Contact", className: "text-white hover:text-gray-400" },
+    { to: "/partner", label: "Partner", className: "text-white hover:text-gray-400" },
+    { to: "/login", label: "Login", className: "bg-white text-black rounded-2xl hover:bg-gray-300" },
+];
+
 const Navbar = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
@@ -11,37 +19,34 @@ const Navbar = () => {
     };
 
     return (
-        <header className="w-full h-20 bg-black text-white fixed top-0 left-0 z-50 ">
+        <header className="w-full h-20 bg-black text-white fixed top-0 left-0 z-50">
             <nav className="flex justify-between items-center md:max-w-4xl max-w-60 mx-auto py-3 px-4 md:px-0">
                 <Link to="/">
-                    <img src={logoImg} className="w-16 h-16 rounded-full" alt="logo image" />
+                    <img src={logoImg} className="w-16 h-16 rounded-full" alt="logo" />
                 </Link>
 
                 <ul className={`md:flex gap-9 ${isMobileMenuOpen ? "flex flex-col items-center bg-black" : "hidden"} md:items-center md:static absolute top-20 left-0 w-full bg-black md:bg-transparent md:flex-row flex-col items-center md:w-auto transition-transform duration-300`}>
-                    <li className="my-2 md:my-0">
-                        <Link to="/" className="block py-2 px-4 text-white hover:text-gray-400">Home</Link>
-                    </li>
-                    <li className="my-2 md:my-0">
-                        <Link to="/about" className="block py-2 px-4 text-white hover:text-gray-400">About</Link>
-                    </li>
-                    <li className="my-2 md:my-0">
-                        <Link to="/contact" className="block py-2 px-4 text-white hover:text-gray-400">Contact</Link>
-                    </li>
-                    <li className="my-2 md:my-0">
-                        <Link to="/partner" className="block py-2 px-4 text-white hover:text-gray-400">Partner</Link>
-                    </li>
-                    <li className="my-2 md:my-0">
-                        <Link to="/login" className="block py-2 px-4 bg-white text-black rounded-2xl hover:bg-gray-300">Login</Link>
+                    {navItems.map((item, index) => (
+                        <li key={index} className="my-2 md:my-0">
+                            <Link to={item.to} className={`block py-2 px-4 ${item.className}`}>
+                                {item.label}
+                            </Link>
+                        </li>
+                      
+
+                    ))}
+
+                    <li className="">
+                        <Link to="/user/profile" className=" bg-white text-black rounded-2xl hover:bg-gray-300">
+                            <img src="https://images.unsplash.com/photo-1715638427009-8b0fe7096838?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMHx8fGVufDB8fHx8fA%3D%3D" alt="my profile" className="w-12 h-12 rounded-full object-cover" />
+                        </Link>
                     </li>
                 </ul>
 
-
                 <div className="md:hidden flex items-center">
                     <button onClick={toggleMobileMenu} className="focus:outline-none">
                         {isMobileMenuOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
                     </button>
-
-
                 </div>
             </nav>
         </header>
diff --git a/client/src/components/profile/Profile.jsx b/client/src/components/profile/Profile.jsx
index 1bd4e35..be6b05b 100644
--- a/client/src/components/profile/Profile.jsx
+++ b/client/src/components/profile/Profile.jsx
@@ -27,6 +27,10 @@ const Profile = () => {
                     <h1 className="text-3xl text-center capitalize text-red-800 font-semibold mb-8">
                         RISTHA - naye bandhono ka
                     </h1>
+
+                    <h1 className="text-3xl text-center capitalize text-slate-500 font-semibold mb-8">
+                        my profile
+                    </h1>
                     <div className="max-w-4xl  mx-auto p-6 rounded-lg shadow-md" id="profile">
                         <div className="bg-red-100 flex flex-col md:flex-row items-center gap-6 p-6 rounded-lg shadow-md" id="top">
                             <img
diff --git a/client/src/components/user/Login.jsx b/client/src/components/user/registration/Login.jsx
similarity index 100%
rename from client/src/components/user/Login.jsx
rename to client/src/components/user/registration/Login.jsx
diff --git a/client/src/components/user/Register.jsx b/client/src/components/user/registration/Register.jsx
similarity index 95%
rename from client/src/components/user/Register.jsx
rename to client/src/components/user/registration/Register.jsx
index 80f5b52..a582afe 100644
--- a/client/src/components/user/Register.jsx
+++ b/client/src/components/user/registration/Register.jsx
@@ -12,13 +12,13 @@ const Register = () => {
                     <h2 className="text-2xl text-center">welcome to Rishta </h2>
                     <form className="flex flex-col md:w-1/3 h-auto px-10  mx-auto py-5">
                         <label htmlFor="name">name</label>
-                        <input type="name" placeholder="name" name="name" className="py-4 px-3 border-2  border-black outline-none rounded-lg " required />
+                        <input type="text" placeholder="name" name="name" className="py-4 px-3 border-2  border-black outline-none rounded-lg " required />
                         <label htmlFor="email" className="mt-4">email</label>
                         <input type="email" placeholder="Email" name="email" className="py-4 px-3 border-2  border-black outline-none rounded-lg " required />
                         <label htmlFor="password" className="mt-4">password</label>
                         <input type="password" placeholder="Password" className="py-4 px-3 border-2  border-black outline-none rounded-lg" required />
 
-                        <button type="submit" className="py-4 w-32 bg-black text-white hover:bg-[#8C94FF] hover:text-black px-3 border-2  ease-in-out duration-500 border-black outline-none rounded-lg mt-4">Register</button>
+                        <button type="submit" className="py-4 w-32 bg-black text-white hover:bg-[#8C94FF] hover:text-black px-3 border-2  ease-in-out duration-500 border-black outline-none rounded-lg mt-4">continue</button>
                     </form>
 
                     <div>
diff --git a/client/src/components/user/userDetails.jsx/UserDetails.jsx b/client/src/components/user/userDetails.jsx/UserDetails.jsx
new file mode 100644
index 0000000..40e7ca7
--- /dev/null
+++ b/client/src/components/user/userDetails.jsx/UserDetails.jsx
@@ -0,0 +1,159 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const UserDetails = () => {
+    const [previewImage, setPreviewImage] = useState(null);
+    const navigate = useNavigate()
+
+
+    const ProfileRegister = () => { 
+        navigate("/registration/user/VerifyDocs")
+    }
+
+    const handleImageChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                setPreviewImage(reader.result);
+            };
+            reader.readAsDataURL(file);
+        } else {
+            setPreviewImage(null);
+        }
+    };
+
+    // Define an array of objects containing the input field details
+    const inputFields = [
+        { label: "Name", placeholder: "Name", name: "name", type: "text" },
+        { label: "Father's Name", placeholder: "Father's Name", name: "fatherName", type: "text" },
+        { label: "Surname", placeholder: "Surname", name: "surname", type: "text" },
+        { label: "Mother's Name", placeholder: "Mother's Name", name: "motherName", type: "text" },
+        { label: "Age", placeholder: "Age", name: "age", type: "number" },
+        { label: "Gender", placeholder: "Select Gender", name: "gender", type: "select", options: ["Male", "Female", "Other"] },
+        { label: "Date of Birth", name: "dob", type: "date" },
+        { label: "Phone Number", placeholder: "Phone Number", name: "phone", type: "tel" },
+        { label: "Email", placeholder: "Email", name: "email", type: "email" },
+        { label: "Address", placeholder: "Address", name: "address", type: "textarea" },
+        { label: "Height", placeholder: "Height", name: "height", type: "text" },
+        { label: "Weight", placeholder: "Weight (e.g., 70kg)", name: "weight", type: "text" },
+        { label: "Complexion", placeholder: "Complexion", name: "complexion", type: "text" },
+        { label: "Education", placeholder: "Education", name: "education", type: "text" },
+        { label: "Occupation", placeholder: "Occupation", name: "occupation", type: "text" },
+        { label: "Annual Income", placeholder: "Annual Income", name: "income", type: "text" },
+        { label: "Preferred Age Range", placeholder: "Preferred Age Range", name: "preferredAge", type: "text" },
+        { label: "Preferred Height Range", placeholder: "in feet", name: "preferredHeight", type: "text" },
+        { label: "Preferred Education", placeholder: "Preferred Education", name: "preferredEducation", type: "text" },
+        { label: "Preferred Profession", placeholder: "Preferred Profession", name: "preferredProfession", type: "text" },
+    ];
+
+    return (
+        <>
+            <section className="w-full bg-gradient-to-br from-[#FFF7FC] to-[#E6E6FA] flex justify-center items-center min-h-screen py-20 animate-fade">
+                <main className="w-full max-w-4xl py-12 bg-white shadow-lg rounded-lg px-4 md:px-10">
+                    <h1 className="text-3xl text-center font-semibold mb-4 text-gray-800">Register</h1>
+                    <h2 className="text-2xl text-center mb-2 text-gray-700">Welcome to Rishta</h2>
+                    <h2 className="text-2xl text-center mb-8 text-gray-700">Complete Your Rishta Profile</h2>
+
+                    <form className="flex flex-wrap justify-center gap-6 mx-auto py-5">
+                        <div className="flex justify-center mb-6 w-full md:w-auto">
+                            <div className="relative ">
+                                <img
+                                    src={previewImage || "https://via.placeholder.com/150"}
+                                    alt="Avatar"
+                                    className="rounded-full w-32 h-32 object-cover border-4 border-gray-300"
+                                />
+                                <label
+                                    htmlFor="avatar"
+                                    className="absolute bottom-0 right-0 cursor-pointer bg-indigo-500 text-white rounded-full p-2 hover:bg-indigo-600 transition-colors duration-300"
+                                >
+                                    <input
+                                        type="file"
+                                        name="avatar"
+                                        id="avatar"
+                                        className="hidden"
+                                        onChange={handleImageChange}
+                                    />
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 24 24"
+                                        fill="currentColor"
+                                        className="w-6 h-6"
+                                    >
+                                        <path
+                                            fillRule="evenodd"
+                                            d="M12 5.25a5.25 5.25 0 016.775 7.898.75.75 0 011.106.166.75.75 0 01-1.074 1.064A7.001 7.001 0 1018 12c0-3.865-3.135-7-7-7a6.99 6.99 0 00-1.898 13.992.75.75 0 111.033-1.09A5.25 5.25 0 0112 5.25zM9 9a3 3 0 116 0 3 3 0 01-6 0z"
+                                            clipRule="evenodd"
+                                        />
+                                    </svg>
+                                </label>
+                            </div>
+                        </div>
+
+                        {/* Map over inputFields array to render input fields */}
+                        {inputFields.map((field, index) => (
+                            <div key={index} className="flex flex-col mb-4 w-full md:w-1/2 lg:w-1/3">
+                                <label htmlFor={field.name} className="flex text-gray-700 font-semibold mb-1">
+                                    {field.label}
+                                </label>
+                                {field.type === 'select' ?
+                                    (
+                                        <select
+                                            name={field.name}
+                                            className="py-2 px-3 border-2 border-gray-300 outline-none rounded-lg focus:border-indigo-500 transition-colors duration-300" required   >
+
+                                            <option value="">{field.placeholder}</option>
+                                            {field.options.map((option, i) => (
+                                                <option key={i} value={option}>
+                                                    {option}
+                                                </option>
+
+                                            ))}
+                                        </select>
+                                    ) :
+                                    field.type === 'date' ? (
+
+                                        <input type="date" name={field.name} className="py-2 px-3 border-2 border-gray-300 outline-none rounded-lg focus:border-indigo-500 transition-colors duration-300" required />
+
+                                    ) :
+                                        field.type === 'textarea' ? (
+
+                                            <textarea
+                                                placeholder={field.placeholder}
+                                                name={field.name}
+                                                className="py-2 px-3 border-2 border-gray-300 outline-none rounded-lg focus:border-indigo-500 transition-colors duration-300"
+                                                required
+                                            ></textarea>
+
+
+                                        ) : (
+                                            <input
+                                                type={field.type}
+                                                placeholder={field.placeholder}
+                                                name={field.name}
+                                                className="py-2 px-3 border-2 border-gray-300 outline-none rounded-lg focus:border-indigo-500 transition-colors duration-300"
+                                                required
+                                            />
+                                        )}
+                            </div>
+                        ))}
+                        <div className="flex flex-col mb-4 w-full md:w-1/2 lg:w-1/3">
+
+                            <button
+                                type="button"
+                                className="py-4 w-full md:w-1/2 lg:w-1/3 bg-indigo-600 text-white hover:bg-indigo-700 px-3 border-2 border-indigo-600 ease-in-out duration-300 outline-none rounded-lg mt-4 mx-auto "
+                            onClick={()=>ProfileRegister()}
+                            >
+                                continue
+                            </button>
+                        </div>
+
+                    </form>
+                </main>
+            </section>
+
+        </>
+    );
+};
+
+export default UserDetails;
\ No newline at end of file
diff --git a/client/src/components/user/verification/VerifyDocs.jsx b/client/src/components/user/verification/VerifyDocs.jsx
new file mode 100644
index 0000000..2c92f98
--- /dev/null
+++ b/client/src/components/user/verification/VerifyDocs.jsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+
+const VerifyDocs = () => {
+    const [previewImages, setPreviewImages] = useState([]);
+
+    const handleImageChange = (e, index) => {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                setPreviewImages((prevImages) => {
+                    const updatedImages = [...prevImages];
+                    updatedImages[index] = reader.result;
+                    return updatedImages;
+                });
+            };
+            reader.readAsDataURL(file);
+        } else {
+            setPreviewImages((prevImages) => {
+                const updatedImages = [...prevImages];
+                updatedImages[index] = null;
+                return updatedImages;
+            });
+        }
+    };
+
+    return (
+        <>
+            <section className="w-full bg-gradient-to-br from-[#FFF7FC] to-[#E6E6FA] flex justify-center items-center min-h-screen py-24 mx-auto">
+                <div className="w-full max-w-4xl bg-white shadow-lg rounded-lg px-8 py-12">
+                    <h1 className="text-3xl text-center font-semibold mb-4 text-gray-800">Verify Documents</h1>
+                    <h2 className="text-2xl text-center mb-8 text-gray-700">Welcome to Rishta</h2>
+
+                    <div className="flex flex-wrap gap-y-9 justify-center mb-8">
+                        <div className="">
+                            <h2 className="text-2xl font-semibold mb-4 text-gray-700">Your Images to display in profile</h2>
+                            <div className="flex flex-col md:flex-row border-b-4 border-black">
+                                {[...Array(3)].map((_, index) => (
+                                    <div key={index} className="mb-4 md:mr-4">
+                                        <img
+                                            src={previewImages[index] || "https://via.placeholder.com/150"}
+                                            alt={`Your Image ${index + 1}`}
+                                            className="w-32 h-32 object-cover rounded-lg border-2 border-gray-300"
+                                        />
+                                        <input
+                                            type="file"
+                                            name={`yourImg${index + 1}`}
+                                            id={`yourImg${index + 1}`}
+                                            className="mt-2 w-full"
+                                            onChange={(e) => handleImageChange(e, index)}
+                                        />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="">
+                            <h2 className="text-2xl font-semibold mb-4 text-gray-700">Your Document Images</h2>
+                            <div className="flex flex-col md:flex-row">
+                                {[...Array(3)].map((_, index) => (
+                                    <div key={index} className="mb-4 md:mr-4">
+                                        <img
+                                            src={previewImages[index + 3] || "https://via.placeholder.com/150"}
+                                            alt={`Your Document Image ${index + 1}`}
+                                            className="w-32 h-32 object-cover rounded-lg border-2 border-gray-300"
+                                        />
+                                        <input
+                                            type="file"
+                                            name={`docImg${index + 1}`}
+                                            id={`docImg${index + 1}`}
+                                            className="mt-2 w-full"
+                                            onChange={(e) => handleImageChange(e, index + 3)}
+                                        />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <button
+                        type="submit"
+                        className="py-4 w-full md:w-1/2 lg:w-1/3 bg-indigo-600 text-white hover:bg-indigo-700 px-3 border-2 border-indigo-600 ease-in-out duration-300 outline-none rounded-lg mt-4 mx-auto block"
+                    >
+                        Register
+                    </button>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default VerifyDocs;
\ No newline at end of file