Route protection, firebase error msg, profile pic

- Private routes are protected by redirection
- Added password length error message while sign up
- Profile pic will be displayed only if non null

.gitignore

@@ -6,4 +6,4 @@ dataguardians-13157-a32431f2469e.json
 __pycache__/
 env/
 dist/
-.vercel
+.vercel

components/AccessData.jsx

@@ -5,10 +5,13 @@ import Memos from "./Memos";
 import axios from "axios"; // Import axios for making HTTP requests
 import { useAuth } from "../src/contexts/authContext/index";
 import { getAuth } from "firebase/auth";
+import { Navigate } from 'react-router-dom'
 
 const baseUrl = "https://ariyal-ksp-datathon-backend.hf.space";
 
 function AccessData() {
+
+  const { userLoggedIn } = useAuth(); //Route protection
   const auth = getAuth();
   const user = auth.currentUser;
   let username = "";
@@ -111,7 +114,7 @@ function AccessData() {
     );
 
     await transaction.wait();
-    alert("Transaction is successul");
+    alert("Transaction is successful");
 
     // const anonymize_columns =
     //   document.querySelector("#anonymizable-data").value; // anonymizeColumns must be a list, it must contain list of columns to anonymize
@@ -209,6 +212,9 @@ function AccessData() {
   };
   return (
     <>
+    {/* Route protection */}
+    {!userLoggedIn && (<Navigate to={'/'} replace={true} />)}
+    {/* UI code */}
       <div className="flex flex-col items-center">
         {/* Starts: Taking info from user, like what to display and which file to display */}
         <form
@@ -294,7 +300,7 @@ function AccessData() {
             onChange={handleSearchChange}
           />
         </div>
-        <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+        <div className=" max-w-lg h-2/5 overflow-x-scroll rounded-lg border border-gray-200 dark:border-gray-700">
           <table className="max-w-lg divide-y-2 divide-gray-200 bg-white text-sm dark:divide-gray-700 dark:bg-gray-900">
             <thead className="ltr:text-left rtl:text-right">
               <tr>

components/SignUp.jsx

@@ -51,6 +51,8 @@ export default function SignUp() {
       } catch (error) {
         if (error.code === 'auth/email-already-in-use') {
           setErrorMessage('Email already in use. Please try a different email address.');
+        } else if(error.code === 'auth/weak-password') {
+          setErrorMessage('Password must have more than 6 characters.');
         } else {
           setErrorMessage('Failed to create an account. Please try again.');
         }

components/UploadData.jsx

@@ -1,8 +1,12 @@
 import { PhotoIcon } from "@heroicons/react/24/solid";
 import { useState, useEffect } from "react";
+import { useAuth } from "../src/contexts/authContext/index";
+import { Navigate } from 'react-router-dom'
 
 
 function UploadData() {
+
+  const { userLoggedIn } = useAuth(); //Route protection
   const [file, setFile] = useState(null);
 
   const handleFileUpload = (event) => {
@@ -31,6 +35,10 @@ function UploadData() {
 
   return (
     <>
+    {/* Route protection */}
+    {!userLoggedIn && (<Navigate to={'/'} replace={true} />)}
+
+    {/* UI code */}
     <div className="flex flex-col items-center " >
       <div className=" bg-gray-700 border-4 m-7 p-7 text-white rounded-lg grid grid-cols-1 w-3/6 justify-center items-center ">
         <div className=" font-semibold text-2xl">Upload Data</div>

components/YourProfile.jsx

@@ -34,8 +34,11 @@ export default function YourProfile(){
         <div className=" flex flex-col  items-center ">
             <div className="p-8 sm:p-36 w-3/6">
         <h2 className="text-3xl font-bold leading-tight text-black sm:text-4xl mb-8">Your Profile.</h2>
-        <div>
+        <div> 
+            {photoUrl ? (
             <img className=" rounded-full mb-2" src={photoUrl} alt="User's profile picture" />
+            ) : (<p></p>)
+            }
             <p> <span className=" font-semibold">Sign In provider:</span> {signInProvider}</p>
             <p><span className=" font-semibold">Name:</span> {username}</p>
             <p><span className=" font-semibold">Email ID:</span> {useremail}</p>