missing codes

components/AuthForm.jsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+
+const AuthForm = ({ onRegister, onLogin, onClose }) => {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isRegistering, setIsRegistering] = useState(true);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (isRegistering) {
+      // Perform registration logic here
+      const registerSuccess = onRegister(username, email, password);
+      if (!registerSuccess) {
+        setError("Registration failed. User already exists.");
+      }
+    } else {
+      // Perform login logic here
+      const loginSuccess = onLogin(username, password);
+      if (!loginSuccess) {
+        setError("Invalid credentials. Please try again.");
+      }
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="relative bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
+        <button
+          className="absolute top-2 right-2 text-gray-600 dark:text-gray-300"
+          onClick={onClose}
+        >
+          &times;
+        </button>
+        <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">
+          {isRegistering ? "Register" : "Login"}
+        </h2>
+        {error && (
+          <div className="mb-4 p-2 text-red-700 bg-red-100 rounded-lg">
+            {error}
+          </div>
+        )}
+        <form onSubmit={handleSubmit} className="auth-form">
+          <div className="mb-4">
+            <label htmlFor="username" className="block text-sm font-medium text-gray-700 dark:text-white">
+              Username:
+            </label>
+            <input
+              type="text"
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+            />
+          </div>
+          {isRegistering && (
+            <div className="mb-4">
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-white">
+                Email:
+              </label>
+              <input
+                type="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+              />
+            </div>
+          )}
+          <div className="mb-4">
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-white">
+              Password:
+            </label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+            />
+          </div>
+          <button
+            type="submit"
+            className="w-full rounded-lg bg-indigo-600 px-4 py-2 text-white transition-all duration-500 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+          >
+            {isRegistering ? "Register" : "Login"}
+          </button>
+        </form>
+        <div className="mt-4 text-center">
+          <button
+            className="text-indigo-600 dark:text-indigo-400"
+            onClick={() => setIsRegistering(!isRegistering)}
+          >
+            {isRegistering ? "Already have an account? Login" : "Don't have an account? Register"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthForm;

components/ProfileList.json

@@ -455,5 +455,6 @@
   "Groot-2001.json",
   "kshashikumar.json",
   "Stoppedwumm.json",
-  "vishal065.json"
+  "vishal065.json",
+  "Themydee.json"
 ]

components/Sidebar.jsx

@@ -1,9 +1,27 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCode, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import AuthForm from "./AuthForm";
 
 function Sidebar() {
   const [theme, setTheme] = useState("dark");
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [showAuthForm, setShowAuthForm] = useState(false);
+  const [user, setUser] = useState(null);
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    // Retrieve users from local storage
+    const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
+    setUsers(storedUsers);
+
+    // Retrieve authenticated user from local storage
+    const storedUser = JSON.parse(localStorage.getItem("authenticatedUser"));
+    if (storedUser) {
+      setIsAuthenticated(true);
+      setUser(storedUser);
+    }
+  }, []);
 
   function toggleTheme() {
     const htmlElement = document.documentElement;
@@ -18,6 +36,44 @@ function Sidebar() {
     }
   }
 
+  const handleLogin = (username, password) => {
+    // Replace with actual authentication logic
+    const foundUser = users.find((u) => u.username === username && u.password === password);
+    if (foundUser) {
+      setIsAuthenticated(true);
+      setShowAuthForm(false);
+      setUser(foundUser);
+      localStorage.setItem("authenticatedUser", JSON.stringify(foundUser));
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const handleRegister = (username, email, password) => {
+    // Check if the user already exists
+    const existingUser = users.find((u) => u.username === username);
+    if (existingUser) {
+      return false;
+    }
+    // Save the new user
+    const newUser = { username, email, password };
+    const updatedUsers = [...users, newUser];
+    setUsers(updatedUsers);
+    localStorage.setItem("users", JSON.stringify(updatedUsers));
+    setIsAuthenticated(true);
+    setShowAuthForm(false);
+    setUser(newUser);
+    localStorage.setItem("authenticatedUser", JSON.stringify(newUser));
+    return true;
+  };
+
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+    setUser(null);
+    localStorage.removeItem("authenticatedUser");
+  };
+
   return (
     <div className="my-7 w-full border-r-2 border-borderSecondary px-7 dark:border-borderColor md:h-[90vh] md:w-[23%] md:px-2 lg:px-7">
       <div className="mb-2 flex h-12 items-center gap-2.5">
@@ -47,19 +103,47 @@ function Sidebar() {
       <div className="text-secondaryColor dark:text-white">
         Discover and Connect with Skilled Developers.
       </div>
-      <div className="pt-5">
-        <a
-          href="https://github.com/shyamtawli/devFind#how-to-add-your-profile-"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <button className="inline-block cursor-pointer rounded-lg border-2 border-textSecondary bg-textSecondary px-[15px] py-1.5 text-center text-sm transition-all duration-500 hover:bg-transparent hover:text-textSecondary dark:text-white">
-            Add your profile
+      {isAuthenticated && (
+        <div className="pt-5">
+          <p className="text-lg font-bold text-gray-800 dark:text-white">
+            Welcome, {user.username}
+          </p>
+          <a
+            href="https://github.com/shyamtawli/devFind#how-to-add-your-profile-"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <button className="inline-block cursor-pointer rounded-lg border-2 border-textSecondary bg-textSecondary px-[15px] py-1.5 text-center text-sm transition-all duration-500 hover:bg-transparent hover:text-textSecondary dark:text-white">
+              Add your Profile
+            </button>
+          </a>
+          <button
+            className="inline-block cursor-pointer rounded-lg border-2 border-textSecondary bg-textSecondary px-[15px] py-1.5 text-center text-sm transition-all duration-500 hover:bg-transparent hover:text-textSecondary dark:text-white mt-4"
+            onClick={handleLogout}
+          >
+            Logout
           </button>
-        </a>
-      </div>
+        </div>
+      )}
+      {!isAuthenticated && (
+        <div className="pt-5">
+          <button
+            className="inline-block cursor-pointer rounded-lg border-2 border-textSecondary bg-textSecondary px-[15px] py-1.5 text-center text-sm transition-all duration-500 hover:bg-transparent hover:text-textSecondary dark:text-white"
+            onClick={() => setShowAuthForm(true)}
+          >
+            Sign Up / Login
+          </button>
+        </div>
+      )}
+      {showAuthForm && (
+        <AuthForm
+          onRegister={handleRegister}
+          onLogin={handleLogin}
+          onClose={() => setShowAuthForm(false)}
+        />
+      )}
     </div>
   );
 }
 
-export default Sidebar;
+export default Sidebar;

public/data/Themydee.json

@@ -0,0 +1,14 @@
+{
+    "name": "Akanbi-Bello Temidayo",
+    "location": "Lagos, Nigeria",
+    "bio": "A software developer who enjoys sharing his knowledge with others",
+    "avatar": "https://github.com/Themydee",
+    "portfolio": "https://themydee.vercel.app",
+    "skills": ["React Native", "React", "Typescript", "JavaScript", "TailwindCss", "MySQL", "HTML", "CSS", "NodeJS, "],
+    "social": {
+      "GitHub": "https://github.comm/Themydee",
+      "Twitter": "https://twitter.com/Themydee2001",
+      "LinkedIn": "https://www.linkedin.com/in/akanbi-bello-temidayo"
+    }
+  }
+