Fixed Login and Registration Form

.gitignore

@@ -13,3 +13,4 @@ __pycache__
 __pycache__/
 __pycache__/
 .DS_Store
+.env

frontend/react-app/middleware.jsx

@@ -0,0 +1,9 @@
+import { authMiddleware } from "@clerk/nextjs";
+
+export default authMiddleware({
+  publicRoutes: ["/", "/contact"],
+});
+
+export const config = {
+  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+};

frontend/react-app/package.json

@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@clerk/clerk-react": "^4.30.7",
     "@hookform/resolvers": "^3.3.4",
     "axios": "^1.6.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
     "react-router-dom": "^6.22.2",
+    "react-toastify": "^10.0.4",
     "zod": "^3.22.4"
   },
   "devDependencies": {

frontend/react-app/src/App.jsx

@@ -3,17 +3,6 @@ import Main from "./components/DynamicList";
 import SearchBar from "./components/SearchBar";
 
 function App() {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [token, setToken] = useState(null);
-
-  const handleLoginSuccess = (token) => {
-    // Store token in localStorage (or other secure storage)
-    localStorage.setItem("token", token);
-    setIsLoggedIn(true);
-    setToken(token);
-    // Optionally, redirect to a specific page after login (e.g., home page)
-    // navigate('/home');
-  };
   return (
     <div className="max-w-[800px] min-w-min bg-white mx-auto m-0">
       <Header></Header>
@@ -23,4 +12,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/react-app/src/components/Auth0Login.jsx

@@ -0,0 +1,12 @@
+import useAuth0 from "@auth0/auth0-react";
+
+const Auth0Login = () => {
+  const { loginWithRedirect, isAuthenticated } = useAuth0();
+  return (
+    !isAuthenticated && (
+      <button onClick={() => loginWithRedirect()}>SignIn</button>
+    )
+  );
+};
+
+export default Auth0Login;

frontend/react-app/src/components/Choice.jsx

@@ -1,12 +1,15 @@
 function Choice(props) {
+  const { name, isChecked, setChoiceState } = props;
   return (
     <div>
       <input
-        id={props.name}
+        id={name}
+        checked={isChecked}
         type="checkbox"
         className="default:ring-2 mr-2"
+        onChange={() => setChoiceState(!isChecked)}
       />
-      <label htmlFor="ml">{props.name}</label>
+      <label htmlFor="ml">{name}</label>
     </div>
   );
 }

frontend/react-app/src/components/Login.jsx

@@ -1,46 +1,19 @@
-import { useState } from "react";
 import { Link } from "react-router-dom";
-import Choice from "./Choice";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
 
-function Login({ onLoginSuccess }) {
-  const [username, setUsername] = useState("");
+function Login() {
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [message, setMessage] = useState("");
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-
-    if (!username || !password) {
-      setMessage("Please fill in all required fields.");
-      return;
-    }
-
-    try {
-      const response = await fetch("http://127.0.0.1:8000/login", {
-        method: "POST",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          username,
-          password,
-        }),
-      });
-
-      if (!response.ok) {
-        setMessage("Invalid username or password.");
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      setMessage(data.message || "Login successful!");
-      onLoginSuccess(data.token); // Pass token to parent component
-    } catch (error) {
-      console.error("Error:", error);
-      setMessage("An error occurred. Please try again later.");
-    }
-  };
+  function handleSubmit(e) {
+    e.preventDefault();
+    console.log("Thanks for Submitting Login Info");
+    console.log(email, password);
+    // Setting state to empty to clear out the form entries after submitting
+    setEmail("");
+    setPassword("");
+  }
   return (
     <div className="flex justify-center items-center h-[100vh] bg-gradient-to-tr from-slate-50 to-blue-100">
       <form onSubmit={handleSubmit}>
@@ -77,8 +50,8 @@ function Login({ onLoginSuccess }) {
                 className="px-10 py-2 rounded-full bg-slate-200 text-gray-600 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-opacity-60"
                 placeholder="[email protected]"
                 type="email"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
                 required
               />
             </div>
@@ -95,7 +68,7 @@ function Login({ onLoginSuccess }) {
                 />
               </svg>
               <input
-                id="password1"
+                id="password"
                 className="px-10 py-2 rounded-full bg-slate-200 text-gray-600 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-opacity-60"
                 placeholder="Password"
                 type="password"
@@ -119,9 +92,6 @@ function Login({ onLoginSuccess }) {
               </button>
             </div>
           </div>
-          <div className="text-sm text-slate-500 py-2 text-center">
-            {message && <p>{message}</p>}
-          </div>
         </div>
       </form>
     </div>