fixed email type and added toast message

Fix Email Input Type and Improve Error Messaging on Signup and Login Pages

frontend/package.json

@@ -25,6 +25,7 @@
     "react-dom": "^18",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
+    "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },

frontend/src/app/login/page.tsx

@@ -4,19 +4,23 @@ import Link from "next/link";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import { useDataContext } from "@/context/dataContext";
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Login() {
   const router = useRouter();
   const { authState } = useDataContext();
 
   return (
     <>
-      {(authState === "loading" || authState === "notloggedin") && (
-        <LoginInner />
-      )}
-      {authState === "loggedin" && router.push("/")}
-    </>
-  );
+    <ToastContainer />
+    {(authState === "loading" || authState === "notloggedin") && (
+      <LoginInner />
+    )}
+    {authState === "loggedin" && router.push("/")}
+  </>
+);
+
 }
 
 function LoginInner() {
@@ -26,13 +30,13 @@ function LoginInner() {
   const [loggingIn, setLogginIn] = useState<boolean>(false);
   const router = useRouter();
   const handleLogin= async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
+    // e.preventDefault();
     if (email.length == 0) {
-      setError("*Email can't be empty");
+      toast.error("Email can't be empty");
       return;
     }
     if (password.length == 0) {
-      setError("*Password can't be empty");
+      toast.error("Password can't be empty");
       return;
     }
     //call the api here
@@ -89,6 +93,7 @@ function LoginInner() {
                   className="block px-3 w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 text-sm sm:leading-6"
                   style={{ outline: 'none' }}
                 />
+
                   </div>
             </div>
 

frontend/src/app/signup/page.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import axios from "axios";
 import { useDataContext } from "@/context/dataContext";
 import { useRouter } from "next/navigation";
+import { ToastContainer, toast } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Signup() {
   const router = useRouter();
@@ -29,21 +31,21 @@ function SignupInner() {
   const [Signingup, setSigningUp] = useState<boolean>(false);
 
   const handleSignup = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
+    // e.preventDefault();
     if (email.length === 0) {
-      setError("*Email can't be empty");
+      toast.error("Email can't be empty");
       return;
     }
     if (username.length === 0) {
-      setError("* Username can't be empty");
+      toast.error("Username can't be empty");
       return;
     }
     if (password.length === 0) {
-      setError("* Password can't be empty");
+      toast.error("Password can't be empty");
       return;
     }
     if (password !== confirmPassword) {
-      setError("* Passwords do not match");
+      toast.error("Passwords do not match");
       return;
     }
 
@@ -67,6 +69,7 @@ function SignupInner() {
 
   return (
     <>
+     <ToastContainer />
       <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 homepage">
         <div className="text-xs text-red-900 h-2">{error}</div>
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">